Opret Elementor popups i WooCommerce

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

Der er dog mere ved at oprette en vellykket e-handelsside end blot at tilføje populære produkter. Alle siderne skal også være visuelt tiltalende. Jo mere visuelt tiltrækkende og brugervenlig dit websted er, desto 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øbsvognen og betalingssiden for dig, når du bygger dit websted, gør Elementor dem mere tiltrækkende ved at tilpasse dem.

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

Ved at oprette en varm takside og opdatere dine Min konto- og servicevilkår, kan du vinde dine kunders hjerter og sind.

Træk og slip-funktionaliteten i Elementor kombineret med denne vejledning 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 tiltrækkende for dine besøgende og kunder. Tilføjelse af popup -vinduer giver brugeren et andet indtryk og et nyt ønske om at blive siddende i din butik.

 For at oprette en popup skal du gå til Skabeloner> Popups i menulinjen. Du får vist en liste over alle dine popup -vinduer, og hvis du endnu ikke har oprettet en, ser du 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 forhåndsdefinerede amp vises. Forskellige skabeloner er tilgængelige til flere formål; nogle er egnede til meddelelser, andre til at promovere en rabat, andre er ideelle til at opmuntre brugerne til at tilmelde sig noget. Der er endda ex amp les til at advare brugere om cookie -brug 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 taget til popup -bygmesteren i WordPress -backend efter at have 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, hvorpå alt er lagt op for dig. Det er i det væsentlige den samme proces som at oprette Elementor -sideskabeloner i WordPress.

I højre side af skærmen er det vigtigste lærred, der 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, kan 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 et eksempel på din popup - enten en tom skifer eller den skabelon, du har valgt.

Popup -indstillingerne, der 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 kan oprette forskellige typer popup -vinduer. Med andre ord, ved at justere disse indstillinger, vil du være i stand til at lave følgende effekter:

• Modal popups er en type modal vindue.
• Slide-ins, meddelelseslinjer og så videre.

Derudover kan du tilpasse flere andre vigtige indstillinger.

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

• Skift højde og bredde på billedet.
• Skift lodret eller vandret orientering af objektet (til ex amp le, kan du rette det til toppen eller bunden for at skabe en underretning bar)
• Tag en beslutning om, hvorvidt du vil bruge et overlay eller ej (dette giver dig f.eks. amp nedtone baggrunden, når pop -up'en er aktiv)
• Deaktiver luk -knappen i din browser.
• Inkluder en animation til indgangen.

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

• Du kan ændre baggrundsfarven, gøre den 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 forskellige importindstillinger, der giver dig mulighed for at gøre følgende:

• Vis lukkeknappen, eller lad popup -vinduet automatisk lukke efter et bestemt stykke tid.
• Ved at klikke på overlayet eller trykke på Escape -tasten kan du forhindre vinduet i at lukke.

• Deaktiver muligheden for at rulle ned på siden.
• Undgå flere pop op -vinduer (hvis du har målrettet flere pop op til den samme side, forhindrer dette, at dine besøgende bliver 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:

Se på, hvordan popup'en nu er permanent fast i nederste højre hjørne. Ved hjælp af en rulleudløser 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 i din popup ved at trække og slippe elementer til 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. Form-widgeten er det eneste, du absolut skal inkludere, fordi det er den eneste, der giver dig mulighed for at oprette din e-mail-tilmeldingsformular.

Med formularwidgeten har du fuldstændig kontrol over de felter, du vil tilbyde, samt teksten og udseendet på knappen Send. For eks amp :

Udover det, anbefaler jeg på det kraftigste, at du stifter bekendtskab med alle Elementors widgets og designmuligheder.

Som tidligere nævnt har du stor kontrol over udseendet af dit websted, 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. Efter et tryk på knappen PUBLISH vil du blive præsenteret for en række spørgsmål. Som en illustration:

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

Hvad er så hændelsen, der får popupen til at blive vist? Du kan vælge, om popup -vinduet skal vises med det samme ved indlæsning af sider, ved rulning, eller når brugeren blandt andre muligheder 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 popup'en kun for tilbagevendende besøgende, kun vise popup'en et bestemt antal gange eller måske kun 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 hensyn til dine brugere.

Udfør indstillingerne på den måde, du ønsker, og klik derefter på GEM & LUK. Du bliver taget til en amp af, hvordan din popup vil se ud, når du klikker på denne knap.

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

Tag tingene op på det næste niveau, skal vi? Indtil dette tidspunkt har vi valgt en skabelon og justeret et eller to møder, og det er det. Overvej det scenario, hvor vi ønsker at tilpasse vores popup yderligere.

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

Derefter kan vi vælge det, foretage nødvendige ændringer af de grundlæggende indstillinger og trykke på PUBLISH 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 dem i selve popup -vinduet i vores popup. Vi kan inkludere oplysninger som brugerens navn, sidetitlen og så videre.

Overvej følgende scenario: vi kører WooCommerce, og vi vil 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 et tekstafsnit fra skabelonen og derefter klikke på Dynamisk i sidebjælken:

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

Antag, at databasedetaljerne ikke hentes korrekt. I så fald er det muligt at angive nogle før teksten, nogle efter tekst og en tilbagekaldende tekst (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 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, får vi vist publiceringsindstillingerne igen, så vi kan angive, at vi kun vil have popup -vinduet vist på WooCommerce -sider. Vi indstiller timeren til 15 sekunders inaktivitet som udløser. 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 popup'en. Strålende!