Lag Elementor -popup -vinduer i WooCommerce

Vi er alle store fans av WooCommerce. Det er enkelt å sette opp og tilpasse. Funksjoner som gjør det enkelt å opprette og administrere en dynamisk og kraftig netthandel er inkludert i pakken.

Det er imidlertid mer ved å lage en vellykket e-handelsside enn bare å legge til populære produkter. Alle sidene må også være visuelt tiltalende. Jo mer visuelt tiltalende og brukervennlig nettstedet ditt er, desto større er sannsynligheten for å tiltrekke seg flere kunder.

• Konfigurasjon av popup -vinduet
• Du kan også lage popup -vinduer ved hjelp av den visuelle byggherren i Elementor
• Publiser preferanser

Selv om WooCommerce lager handlekurven og kassasiden for deg når du bygger nettstedet ditt, gjør Elementor dem mer attraktive ved å tilpasse dem.

Du har muligheten til å enten redesigne dem eller starte på nytt fra begynnelsen. Du kan gjenta prosessen for alle de andre sidene på nettstedet ditt.

Ved å opprette en varm takk -side og oppdatere siden Min konto og vilkårene for bruk, kan du vinne over kundenes hjerter og sinn.

Dra og slipp-funksjonaliteten til Elementor, kombinert med denne opplæringen, vil sikre at du får en problemfri opplevelse når du oppretter sidene dine.

Etter at du har opprettet din wooCommerce -butikk, vil du kanskje gjøre den mer attraktiv for besøkende og kunder. Hvis du legger til popup -vinduer, får brukeren et nytt inntrykk og et nytt ønske om å forbli i butikken din.

 For å lage en popup, gå til Maler> Popup -vinduer i menylinjen. Du vil bli presentert med en liste over alle popup -vinduene dine, og hvis du ikke har opprettet en ennå, ser du noe som ligner på følgende:

Når du har klikket på ADD NEW POPUP (som er ganske selvforklarende), blir du bedt om å gi det et navn og deretter velge en mal fra de forhåndsdefinerte ex amp lesene som vises. Ulike maler er tilgjengelige for flere formål; noen er passende for kunngjøringer, andre for å fremme rabatt, andre er ideelle for å oppmuntre brukere til å registrere seg for noe. Det er til og med ex amp les for å advare brukere om bruk av informasjonskapsler eller andre GDPR -varsler. Så snart du har funnet noe du liker, klikker du på det for å se en større forhåndsvisning, og trykker deretter på Sett inn -knappen.

Du blir ført til popup -byggherren i WordPress -backend etter å ha klikket på denne knappen.

Hvis du har jobbet med Elementor tidligere, vil du føle deg hjemme med grensesnittet, alternativene og måten alt er lagt opp for deg. Det er egentlig den samme prosessen som å lage Elementor -sidemaler i WordPress.

På høyre side av skjermen er hovedduken, som viser en forhåndsvisning av det du jobber med for tiden. Du kan redigere og tilpasse hvert element individuelt ved å velge det og velge Rediger> Rediger elementer. Når du er ferdig, ser du kontrollene og preferansene som vises i sidefeltet til venstre, sammen med muligheten til å publisere arbeidet ditt.

Konfigurasjon av popup -vinduet

 Dette er når du skal se en forhåndsvisning av popup -vinduet ditt - enten en tom skifer eller malen du valgte.

Popup -innstillingene, alltid åpne som standard, lar deg tilpasse hvordan selve popup -lerretet fungerer. De er som følger:

• Det er her du vil bruke mest tid fordi det er her du kan lage forskjellige typer popup -vinduer. Med andre ord, ved å justere disse innstillingene, vil du kunne gjøre følgende effekter:

• Modal popup -vinduer er en type modalvindu.
• Lysbilder, varslingslinjer og så videre.

I tillegg kan du tilpasse flere andre viktige innstillinger.

Følgende alternativer er tilgjengelige i kategorien Innstillinger :

• Endre høyden og bredden på bildet.
• Endre den vertikale eller horisontale retningen til objektet (for eksempel amp , du kan fikse det til toppen eller bunnen for å lage en varslingslinje)
• Ta en avgjørelse om hvorvidt eller ikke å bruke et overlegg (dette kan du, for ex amp le, grå ut bakgrunnen når popup er aktiv)
• Deaktiver lukkeknappen i nettleseren din.
• Inkluder en animasjon for inngangen.

Du kan gjøre følgende på kategorien Stil :

• Du kan endre bakgrunnsfargen, gjøre den til en gradient eller bruke et bilde som bakgrunn.
• Hvis overlegget er aktivert, konfigurerer du det.
• Hvis du har lukkeknappen aktivert, må du konfigurere den.

Til slutt inneholder kategorien Avansert noen diverse importinnstillinger som lar deg gjøre følgende:

• Vis lukkeknappen, eller få popupen til å lukke automatisk etter en viss tid.
• Ved å klikke på overlegget eller trykke på Escape -tasten, kan du forhindre at vinduet lukkes.

• Deaktiver muligheten til å rulle nedover siden.
• Unngå flere popup -vinduer (hvis du har målrettet flere popup -vinduer til samme side, forhindrer dette at besøkende blir irritert).

For å gi deg en ide om hvordan disse innstillingene vil påvirke popup-vinduet ditt, ser du slik det ser ut når du endrer posisjonen til nederste høyre hjørne av vinduet:

Ta en titt på hvordan popup-vinduet nå er permanent fast i nedre høyre hjørne. Ved å bruke en rulleutløser i forbindelse med en inngangsanimasjon, kan du oppnå en fin, diskret innskyvningseffekt.

Du kan også lage popup -vinduer ved hjelp av den visuelle byggherren i Elementor

Så snart du har fullført de grunnleggende popup-innstillingene, kan du begynne å designe det faktiske innholdet i popup-vinduet ved å dra og slippe elementer til det visuelle dra-og-slipp-grensesnittet.

Du kan bruke hvilken som helst Elementor -widget du vil ha, noe som gir deg stor kontroll over det endelige designet. Skjema-widgeten er det eneste du absolutt må inkludere fordi den er den eneste som lar deg lage ditt e-postmeldingsskjema.

Med skjema -widgeten har du full kontroll over feltene du vil tilby, samt teksten og utseendet på innsendingsknappen. For eks amp :

Utover det anbefaler jeg deg på det sterkeste å bli kjent med alle Elementors widgets og designalternativer.

Som tidligere nevnt har du stor kontroll over utseendet på nettstedet ditt, og du har også tilgang til noen nyttige widgets som kan hjelpe deg med å øke konverteringsfrekvensen.

Publiser preferanser

Når du er fornøyd med det du har laget, vil du dele det med verden. Etter at du trykker på PUBLISH -knappen, vil du bli presentert med en rekke spørsmål. Som en illustrasjon:

Er det mulig å spesifisere betingelsene du vil at popup -vinduet skal vises på? Du kan velge hvilke sider du vil inkludere eller ekskludere fra søkeresultatene. Du kan ha så mange forhold du vil.

Hva er hendelsen som får popup -vinduet til å vises? Du kan velge om du vil vise popup -vinduet umiddelbart ved sideinnlasting, rulling eller når brukeren blar til et bestemt element, blant andre muligheter. Alle disse alternativene har sine innstillinger, noe som gir fullstendig tilpasning.

Sist, men ikke minst, vil du se noen avanserte regler, for eksempel å vise popupen bare for tilbakevendende besøkende, bare vise popupen et bestemt antall ganger, eller kanskje bare vise popupen når en besøkende blir henvist til nettstedet ditt fra en bestemt URL. Det er noen flere også. Disse alternativene kan forbedre brukeropplevelsen av popup -en din betydelig, slik at du kan designe den med ekte integritet og omtanke for brukerne dine.

Fullfør innstillingene på den måten du ønsker, og klikk deretter LAGRE OG LUKK. Du kommer til å bli en amp av hvordan popup -vinduet ditt vil se ut etter å ha klikket på denne knappen.

Popup -vinduer kan tilpasses, og dynamisk innhold kan legges til dem.

Ta ting opp til neste nivå, skal vi? Frem til dette punktet har vi valgt en mal og justert en eller to møter, og det er omtrent det. Vurder scenariet der vi ønsker å tilpasse popup -vinduet vårt ytterligere.

Vi er tilbake på ADD NEW POPUP -fasen i prosessen, hvor vi kan angi en tittel og velge en mal en gang til.

Etter det kan vi velge det, gjøre nødvendige endringer i grunninnstillingene og trykke PUBLISH nok en gang.

Ok, det er her ting begynner å bli interessante. Vi kan bruke Elementor til å hente dynamiske data fra WordPress -installasjonen vår og sette den inn i selve popup -vinduet i vår popup. Vi kan inkludere informasjon som brukerens navn, sidetittel og så videre.

Vurder følgende scenario: vi kjører WooCommerce, og vi vil informere en bruker om at det er rabatt på det spesifikke produktet de ser på for øyeblikket. For å begynne, velg en tekstdel fra malen og klikk deretter på Dynamisk i sidefeltet:

Vi har et stort utvalg å velge mellom, inkludert informasjon fra selve innlegget, informasjon fra nettstedet som helhet, medieinformasjon, forfatterinformasjon og til og med WooCommerce -informasjon. Vi velger en produkttittel, og den blir lagt til i tekstinnholdsblokken som et resultat av vårt valg.

Anta at databasedetaljene ikke er riktig hentet. I så fall er det mulig å spesifisere noen før teksten, noen etter teksten og en tilbakemeldingstekst (hvis databasedetaljene ikke er riktig hentet).

Så la oss duplisere denne prosessen for knappen, som viser produktets pris. Vi kan si den forrige teksten som KJØP NÅ FOR å gi oss en overbevisende oppfordring til handling:

Vi kan til og med ta det et skritt videre og bruke produktbildet som bakgrunn i selve popup -vinduet.

Når vi trykker PUBLISH, blir vi presentert for publiseringsinnstillingene igjen, slik at vi kan angi at vi bare vil at popup -vinduet skal vises på WooCommerce -sider. Vi setter timeren til 15 sekunder med inaktivitet som utløser. Slik ble det til slutt:

Selv om designet kan forbedres, kan du se at vi viser produktnavnet, prisen og et bilde av produktet som bakgrunnen til popup -vinduet. Strålende!