Opret Elementor-popups i WooCommerce

Vi er alle store fans af WooCommerce. Det er ligetil at konfigurere og tilpasse. Funktioner, der gør det nemt at oprette og administrere en dynamisk og kraftfuld e-handelsbutik, er inkluderet i pakken.

Der er dog mere til at skabe en vellykket e-handelsside end blot at tilføje populære produkter. Alle sider skal også være visuelt tiltalende. Jo mere visuelt tiltalende og brugervenlig din hjemmeside er, jo større er sandsynligheden for at tiltrække flere kunder.

• Konfiguration af popup-vinduet
• Du kan også oprette popups ved hjælp af den visuelle builder i Elementor
• Udgiv præferencer

Selvom WooCommerce opretter indkøbskurven og betalingssiden for dig, når du bygger dit websted, gør Elementor dem mere tiltalende ved at tilpasse dem.

Du har mulighed for enten at redesigne dem eller starte forfra. Du kan gentage processen for alle de andre sider på dit websted.

Ved at oprette en varm tak-side og opdatere dine Min konto- og Servicevilkår-sider, kan du vinde dine kunders hjerter og sind.

Træk og slip-funktionaliteten i Elementor, kombineret med denne tutorial, vil sikre, at du får en problemfri oplevelse, når du opretter dine sider.

Efter at have oprettet din wooCommerce-butik, vil du måske gøre den mere attraktiv for dine besøgende og kunder. Tilføjelse af popups giver brugeren et nyt indtryk og et nyt ønske om at blive i din butik.

 For at oprette en popup skal du gå til Skabeloner > Popups i menulinjen. Du vil blive præsenteret for en liste over alle dine pop op-vinduer, og hvis du endnu ikke har oprettet en, vil du se noget, der ligner følgende:

Når du har klikket på TILFØJ NY POPUP (hvilket er ret selvforklarende), bliver du bedt om at give det et navn og derefter vælge en skabelon fra de forudlavede amp , der vises. Forskellige skabeloner er tilgængelige til flere formål; nogle er egnede til annonceringer, andre til at fremme en rabat, andre er ideelle til at opmuntre brugere til at tilmelde sig noget. Der er endda amp på at advare brugere om brug af cookies eller andre GDPR-meddelelser. Så snart du har fundet noget, du kan lide, skal du klikke på det for at se en større forhåndsvisning og derefter trykke på knappen Indsæt.

Du bliver ført til popup-byggeren i WordPress-backend, når du har klikket på denne knap.

Hvis du tidligere har arbejdet med Elementor, vil du føle dig hjemme med grænsefladen, mulighederne og den måde, alt er lagt op for dig. Det er stort set den samme proces som at oprette Elementor-sideskabeloner i WordPress.

På højre side af skærmen er hovedlærredet, som viser en forhåndsvisning af, hvad du i øjeblikket arbejder på. Du kan redigere og tilpasse hvert element individuelt ved at vælge det og vælge Rediger > Rediger elementer. Når du er færdig, vil du se kontrolelementerne og præferencerne i sidebjælken til venstre sammen med muligheden for at udgive dit arbejde.

Konfiguration af popup-vinduet

 Det er her, du skal se en forhåndsvisning af din popup - enten en blank tavle eller den skabelon, du har valgt.

Popup-indstillingerne, som altid er åbne som standard, giver dig mulighed for at tilpasse, hvordan selve popup-lærredet fungerer. De er som følger:

• Det er her, du vil bruge mest tid, fordi det er her, du vil være i stand til at oprette forskellige typer popups. Med andre ord, ved at justere disse indstillinger, vil du være i stand til at lave følgende effekter:

• Modale popups er en type modal vindue.
• Slide-ins, notifikationsbjælker og så videre.

Derudover kan du tilpasse flere andre vigtige indstillinger.

Følgende muligheder er tilgængelige på Indstillinger :

• Skift højde og bredde på billedet.
• Skift den lodrette eller vandrette orientering af objektet (du kan amp . rette det til toppen eller bunden for at oprette en meddelelseslinje)
• Tag en beslutning om, hvorvidt du vil bruge et overlay eller ej (dette lader dig amp . nedtone baggrunden, når pop op-vinduet er aktivt)
• Deaktiver lukkeknappen på din browser.
• Medtag en animation til indgangen.

Du kan gøre følgende på Stil :

• Du kan ændre baggrundsfarven, gøre den til en gradient eller bruge et billede som baggrund.
• Hvis overlejringen er aktiveret, skal du konfigurere den.
• Hvis du har lukkeknappen aktiveret, skal du konfigurere den.

Endelig indeholder fanen Avanceret nogle forskellige importindstillinger, der giver dig mulighed for at gøre ting som følgende:

• Vis lukkeknappen, eller få pop op-vinduet til automatisk at lukke efter et vist tidsrum.
• Ved at klikke på overlejringen eller trykke på escape-tasten kan du forhindre vinduet i at lukke.

• Deaktiver muligheden for at rulle ned på siden.
• Undgå flere popups (hvis du har målrettet flere popups til den samme side, vil dette forhindre dine besøgende i at blive irriterede).

For at give dig en idé om, hvordan disse indstillinger vil påvirke din popup, ser du sådan her ud, når du ændrer positionen til nederste højre hjørne af vinduet:

Tag et kig på, hvordan pop op-vinduet nu er permanent rettet i nederste højre hjørne. Ved at bruge en scroll trigger i forbindelse med en indgangsanimation kan du opnå en flot, diskret slide-in effekt.

Du kan også oprette popups ved hjælp af den visuelle builder i Elementor

Så snart du har gennemført de grundlæggende popup-indstillinger, kan du begynde at designe det faktiske indhold af din popup ved at trække og slippe elementer i den visuelle træk-og-slip-grænseflade.

Du kan bruge enhver Elementor-widget, du ønsker, hvilket giver dig stor kontrol over det endelige design. Formular-widgetten er det eneste, du absolut skal inkludere, fordi det er den eneste, der giver dig mulighed for at oprette din e-mail-opt-in-formular.

Med formular-widgetten har du fuld kontrol over de felter, du vil tilbyde, samt teksten og udseendet af indsend-knappen. For amp :

Udover det, råder jeg dig kraftigt til at sætte dig ind i alle Elementors widgets og designmuligheder.

Som tidligere nævnt har du stor kontrol over udseendet af din hjemmeside, og du har også adgang til nogle nyttige widgets, der kan hjælpe dig med at øge din konverteringsrate.

Udgiv præferencer

Når du er tilfreds med det, du har skabt, vil du gerne dele det med verden. Når du har trykket på knappen PUBLICER, vil du blive præsenteret for en række spørgsmål. Som illustration:

Er det muligt at angive, under hvilke betingelser du ønsker, at pop op-vinduet skal vises? Du kan vælge, hvilke sider der skal inkluderes eller ekskluderes fra dine søgeresultater. Du kan have så mange betingelser, du ønsker.

Hvad er så den begivenhed, der får pop op-vinduet til at dukke op? Du kan blandt andre muligheder vælge, om pop op-vinduet skal vises umiddelbart efter sideindlæsning, ved rulning eller når brugeren ruller til et bestemt element. Alle disse muligheder har deres indstillinger, hvilket giver mulighed for fuldstændig tilpasning.

Sidst, men ikke mindst, vil du se nogle avancerede regler, såsom at vise pop op-vinduet kun til tilbagevendende besøgende, kun vise pop op-vinduet et bestemt antal gange, eller måske kun vise pop op-vinduet, når en besøgende henvises til dit websted fra en bestemt URL. Der er også nogle flere. Disse muligheder kan forbedre brugeroplevelsen af ​​din popup markant, så du kan designe den med ægte integritet og omtanke for dine brugere.

Fuldfør indstillingerne på den måde, du ønsker, og klik derefter på GEM & LUK. Du vil blive taget til en amp over, hvordan din popup vil se ud, når du har klikket på denne knap.

Popups kan tilpasses, og dynamisk indhold kan føjes til dem.

Bring tingene op til næste niveau, skal vi? Indtil nu har vi valgt en skabelon og justeret en eller to sessioner, og det er det hele. Overvej scenariet, hvor vi ønsker at tilpasse vores popup yderligere.

Vi er tilbage ved ADD NEW POPUP-stadiet i processen, hvor vi kan angive en titel og vælge en skabelon igen.

Derefter kan vi vælge det, foretage de nødvendige ændringer i de grundlæggende indstillinger og trykke på PUBLICER igen.

Okay, det er her, tingene begynder at blive interessante. Vi kan bruge Elementor til at hente dynamiske data fra vores WordPress-installation og indsætte det i selve popup-vinduet i vores popup. Vi kan inkludere oplysninger såsom brugerens navn, sidetitlen og så videre.

Overvej følgende scenarie: vi kører WooCommerce, og vi ønsker at informere en bruger om, at der er en rabat tilgængelig på det specifikke produkt, de ser i øjeblikket. For at begynde skal du vælge en tekstsektion fra skabelonen og derefter klikke på Dynamisk i sidebjælken:

Vi har en lang række muligheder at vælge imellem, herunder information fra selve indlægget, information fra webstedet som helhed, medieoplysninger, forfatterinformation og endda WooCommerce-oplysninger. Vi vælger en produkttitel, og den føjes til vores tekstindholdsblok som et resultat af vores valg.

Antag, at databasedetaljerne ikke er korrekt hentet. I så fald er det muligt at angive nogle før teksten, nogle efter tekst og en reservetekst (hvis databasedetaljerne ikke er korrekt hentet).

Så lad os duplikere denne proces for knappen, som viser produktets pris. Vi kan formulere den foregående tekst som KØB NU FOR for at give os en overbevisende opfordring til handling:

Vi kan endda tage det et skridt videre og bruge produktbilledet som baggrund for selve popup-vinduet.

Når vi trykker på PUBLISH, bliver vi præsenteret for publiceringsindstillingerne endnu en gang, hvilket giver os mulighed for at angive, at vi kun ønsker, at pop op-vinduet skal vises på WooCommerce-sider. Vi indstiller timeren til 15 sekunders inaktivitet for at være udløseren. Sådan blev det til sidst:

Selvom designet kunne forbedres, kan du se, at vi viser produktnavnet, dets pris og et billede af produktet som baggrund for pop op-vinduet. Strålende!