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 å lage og administrere en dynamisk og kraftig e-handelsbutikk er inkludert i pakken.

Det er imidlertid mer å skape 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 å bruke den visuelle byggeren i Elementor
• Publiseringsinnstillinger

Selv om WooCommerce lager handlekurven og betalingssiden 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 takkeside og oppdatere sidene Min konto og vilkår for bruk, kan du vinne 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 lager sidene dine.

Etter å ha satt opp wooCommerce-butikken din, vil du kanskje gjøre den mer attraktiv for besøkende og kunder. Å legge til popup-vinduer gir brukeren et nytt inntrykk og et nytt ønske om å forbli i butikken din.

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

Når du har klikket på LEGG TIL NY POPUP (som er ganske selvforklarende), blir du bedt om å gi den et navn og deretter velge en mal fra de forhåndslagde amp som vises. Ulike maler er tilgjengelige for flere formål; noen egner seg for kunngjøringer, andre for å promotere en rabatt, andre er ideelle for å oppmuntre brukere til å registrere seg for noe. Det finnes til og med amp for å advare brukere om bruk av informasjonskapsler eller andre GDPR-varsler. Så snart du har funnet noe du liker, klikk på det for å se en større forhåndsvisning, og trykk deretter på Sett inn-knappen.

Du vil bli ført til popup-byggeren 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 i hovedsak den samme prosessen som å lage Elementor-sidemaler i WordPress.

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

Konfigurasjon av popup-vinduet

 Dette er når du skal se en forhåndsvisning av popup-vinduet ditt – enten et tomt ark 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 vil kunne lage forskjellige typer popup-vinduer. Med andre ord, ved å justere disse innstillingene, vil du kunne lage følgende effekter:

• Modale popup-vinduer er en type modal vindu.
• Slide-in, varslingslinjer og så videre.

I tillegg kan du tilpasse flere andre viktige innstillinger.

Følgende alternativer er tilgjengelige på Innstillinger :

• Endre høyden og bredden på bildet.
• Endre den vertikale eller horisontale orienteringen til objektet (for amp kan du fikse det til toppen eller bunnen for å lage en varslingslinje)
• Ta en avgjørelse om du vil bruke et overlegg eller ikke (dette lar deg for amp gråne bakgrunnen når popup-vinduet er aktivt)
• Deaktiver lukkeknappen på nettleseren din.
• Inkluder en animasjon for inngangen.

Du kan gjøre følgende på Stil- fanen:

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

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

• Vis lukkeknappen eller la popup-vinduet lukkes 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, vil dette forhindre at de besøkende blir irriterte).

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

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

Du kan også lage popup-vinduer ved å bruke den visuelle byggeren 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 inn i det visuelle dra-og-slipp-grensesnittet.

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

Med Skjema-widgeten har du full kontroll over feltene du ønsker å tilby, samt teksten og utseendet til send-knappen. For amp :

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

Som tidligere nevnt har du en god del kontroll over utseendet til nettstedet ditt, og du har også tilgang til noen nyttige widgets som kan hjelpe deg med å øke konverteringsraten.

Publiseringsinnstillinger

Når du er fornøyd med det du har laget, vil du gjerne dele det med verden. Etter å ha trykket 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 under? Du kan velge hvilke sider som skal inkluderes eller ekskluderes fra søkeresultatene. Du kan ha så mange forhold du ønsker.

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

Sist, men ikke minst, vil du se noen avanserte regler, for eksempel å vise popup-vinduet kun til returnerende besøkende, bare vise popup-vinduet et bestemt antall ganger, eller kanskje bare vise popup-vinduet 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-vinduet betraktelig, 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 på LAGRE OG LUKK. Du vil bli tatt til en amp le 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 finjustert en eller to sesjoner, og det er omtrent det. Vurder scenariet der vi ønsker å tilpasse popup-vinduet ytterligere.

Vi er tilbake på LEGG TIL NY POPUP-stadiet i prosessen, hvor vi kan spesifisere en tittel og velge en mal igjen.

Etter det kan vi velge det, gjøre nødvendige endringer i de grunnleggende innstillingene og trykke PUBLISER en gang til.

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

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

Vi har et bredt utvalg av alternativer å 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 vil bli lagt til tekstinnholdsblokken vår som et resultat av valget vårt.

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

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

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

Når vi trykker PUBLISH, får vi publiseringsinnstillingene en gang til, slik at vi kan spesifisere at vi kun vil at popup-vinduet skal vises på WooCommerce-sider. Vi setter tidtakeren til 15 sekunders inaktivitet for å være utløseren. Slik ble det til slutt:

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