Opret Elementor-popups i WooCommerce

Vi er alle store fans af WooCommerce. Det er nemt at sætte op 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 at lave i forbindelse med at skabe en succesfuld e-handelsside end blot at tilføje populære produkter. Alle siderne skal også være visuelt tiltalende. Jo mere visuelt tiltalende og brugervenlig din hjemmeside er, desto større er sandsynligheden for at tiltrække flere kunder.

• Konfiguration af pop op-vinduet
• Du kan også oprette popups ved hjælp af den visuelle builder i Elementor
• Udgivelsesindstillinger

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 takkeside og opdatere dine sider "Min konto" og "Servicevilkår" kan du vinde dine kunders hjerter og sind.

Elementors træk-og-slip-funktionalitet kombineret med denne vejledning vil sikre, at du får en problemfri oplevelse, når du opretter dine sider.

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

 For at oprette en pop op-boks skal du gå til Skabeloner > Pop op-bokse i menulinjen. Du får vist en liste over alle dine pop op-bokse, og hvis du ikke allerede 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 den et navn og derefter vælge en skabelon fra de viste præfabrikeredeamp. Forskellige skabeloner er tilgængelige til flere formål; nogle er passende til annonceringer, andre til at promovere en rabat, andre er ideelle til at opfordre brugere til at tilmelde sig noget. Der er enddaamptil at advare brugere om cookiebrug 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-builderen i WordPress-backend efter at have klikket på denne knap.

Hvis du har arbejdet med Elementor før, vil du føle dig hjemme med brugerfladen, 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.

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

Konfiguration af pop op-vinduet

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

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

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

• Modale pop op-vinduer er en type modalvindue.
• Slide-ins, notifikationsbjælker og så videre.

Derudover kan du tilpasse flere andre vigtige indstillinger.

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

• Ændr billedets højde og bredde.
• Ændr objektets lodrette eller vandrette retning (forampkan du fastgøre det øverst eller nederst for at oprette en notifikationslinje)
• Beslut dig for, om du vil bruge et overlay (dette giver digamp. mulighed for at gråtone baggrunden, når pop op-vinduet er aktivt)
• Deaktiver luk-knappen i din browser.
• Medtag en animation til indgangen.

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

• Du kan ændre baggrundsfarven, lave den om til en gradient eller bruge et billede som baggrund.
• Hvis overlayet er aktiveret, skal du konfigurere det.
• Hvis du har lukkeknappen aktiveret, skal du konfigurere den.

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

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

• Deaktiver muligheden for at scrolle ned på siden.
• Undgå flere popups (hvis du har målrettet flere popups mod 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 det her ud, når du ændrer positionen til nederste højre hjørne af vinduet:

Se hvordan popup-vinduet nu er permanent placeret i nederste højre hjørne. Ved at bruge en scroll-trigger i forbindelse med en indgangsanimation kan du opnå en flot og 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 pop op-indstillinger, kan du begynde at designe det faktiske indhold af din pop op-vindue 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-tilmeldingsformular.

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

Derudover anbefaler jeg kraftigt, at du gør dig bekendt med 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.

Udgivelsesindstillinger

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

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

Hvad er så den hændelse, der får popup-vinduet til at vises? Du kan vælge, om popup-vinduet skal vises med det samme ved sideindlæsning, ved rulning eller når brugeren ruller til et bestemt element, blandt andre muligheder. Alle disse muligheder har deres egne indstillinger, der giver mulighed for fuldstændig tilpasning.

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

Udfyld indstillingerne på den ønskede måde, og klik derefter på GEM & LUK. Du får etampover, hvordan din popup vil se ud, når du har klikket på denne knap.

Pop-ups kan tilpasses, og dynamisk indhold kan tilføjes til dem.

Skal vi tage tingene op på et højere niveau? Indtil videre har vi valgt en skabelon og justeret en eller to møder, og det er stort set det. Overvej det scenarie, hvor vi ønsker at tilpasse vores popup yderligere.

Vi er tilbage ved TILFØJ NY POPUP-fasen i processen, hvor vi kan angive en titel og vælge en skabelon endnu en gang.

Derefter kan vi vælge den, foretage de nødvendige ændringer i de grundlæggende indstillinger og trykke på UDGIV én gang til.

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 dem i selve popup-vinduet. Vi kan inkludere oplysninger såsom brugerens navn, sidetitlen og så videre.

Overvej følgende scenarie: Vi bruger WooCommerce, og vi vil gerne informere en bruger om, at der er en rabat tilgængelig på det specifikke produkt, de ser på i øjeblikket. For at starte skal du vælge et tekstafsnit fra skabelonen og derefter klikke på Dynamisk i sidebjælken:

Vi har en bred vifte af muligheder at vælge imellem, herunder information fra selve opslaget, information fra hele webstedet, medieinformation, forfatterinformation og endda WooCommerce-information. Vi vælger en produkttitel, og den vil blive tilføjet til vores tekstindholdsblok som et resultat af vores valg.

Antag, at databaseoplysningerne ikke hentes korrekt. I så fald er det muligt at angive noget før teksten, noget efter teksten og en alternativ tekst (hvis databaseoplysningerne ikke hentes korrekt).

Så lad os gentage 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 pop op-vinduet.

Når vi trykker på UDGIV, får vi endnu engang publiceringsindstillingerne, så vi kan angive, at popup-vinduet kun skal vises på WooCommerce-sider. Vi sætter timeren til 15 sekunders inaktivitet som udløser. Sådan endte det i sidste ende:

Selvom designet kunne forbedres, kan du se, at vi viser produktnavnet, prisen og et billede af produktet som baggrund for popup-vinduet. Fantastisk!