Maak Elementor-pop-ups in WooCommerce

We zijn allemaal grote fans van WooCommerce. Het is eenvoudig in te stellen en aan te passen. Het pakket bevat functies die het eenvoudig maken om een ​​dynamische en krachtige e-commerce winkel te creëren en te beheren.

Het creëren van een succesvolle e-commercepagina is echter meer dan alleen het toevoegen van populaire producten. Alle pagina's moeten ook visueel aantrekkelijk zijn. Hoe visueel aantrekkelijker en gebruiksvriendelijker uw website, hoe groter de kans dat u meer klanten aantrekt.

• Configuratie van het pop-upvenster
• Je kunt ook pop-ups maken met de visuele bouwer in Elementor
• Voorkeuren publiceren

Hoewel WooCommerce het winkelwagentje en de afrekenpagina voor u maakt wanneer u uw site bouwt, maakt Elementor ze aantrekkelijker door ze aan te passen.

Je hebt de keuze om ze opnieuw te ontwerpen of helemaal opnieuw te beginnen. U kunt het proces herhalen voor alle andere pagina's op uw website.

Door een warme bedankpagina te maken en uw Mijn account en Servicevoorwaardenpagina's bij te werken, kunt u de harten en geesten van uw klanten veroveren.

De functionaliteit voor slepen en neerzetten van Elementor, gecombineerd met deze tutorial, zorgt ervoor dat je een probleemloze ervaring hebt bij het maken van je pagina's.

Nadat je je wooCommerce-winkel hebt opgezet, wil je deze misschien aantrekkelijker maken voor je bezoekers en klanten. Het toevoegen van pop-ups geeft de gebruiker een andere indruk en een nieuwe wens om in uw winkel te blijven.

 Om een ​​pop-up te maken, ga je naar Sjablonen > Pop-ups in de menubalk. Je krijgt een lijst met al je pop-ups te zien, en als je er nog geen hebt gemaakt, zie je iets dat lijkt op het volgende:

Als je eenmaal hebt geklikt op ADD NEW popup (die is vrij vanzelfsprekend), wordt u gevraagd om het een naam te geven en selecteer een sjabloon in de premade ex amp les weergegeven. Er zijn verschillende sjablonen beschikbaar voor meerdere doeleinden; sommige zijn geschikt voor aankondigingen, andere voor het promoten van een korting, andere zijn ideaal om gebruikers aan te moedigen zich ergens voor aan te melden. Er zijn zelfs ex amp les voor het waarschuwen van de gebruikers van gebruik van cookies of andere GDPR meldingen. Zodra je iets hebt gevonden dat je leuk vindt, klik je erop om een ​​groter voorbeeld te zien en druk je vervolgens op de knop Invoegen.

Nadat u op deze knop hebt geklikt, wordt u naar de pop-upbuilder in de WordPress-backend geleid.

Als je in het verleden met Elementor hebt gewerkt, voel je je meteen thuis met de interface, de opties en de manier waarop alles voor je is ingedeeld. Het is in wezen hetzelfde proces als het maken van Elementor-paginasjablonen in WordPress.

Aan de rechterkant van het scherm bevindt zich het hoofdcanvas, dat een voorbeeld toont van waar u momenteel aan werkt. U kunt elk element afzonderlijk bewerken en aanpassen door het te selecteren en Bewerken > Elementen bewerken te selecteren. Als u klaar bent, ziet u de bedieningselementen en voorkeuren in de zijbalk aan de linkerkant, samen met de optie om uw werk te publiceren.

Configuratie van het pop-upvenster

 Dit is het moment waarop u een voorbeeld van uw pop-up zou moeten zien - een lege lei of de sjabloon die u hebt gekozen.

Met de pop-upinstellingen, die standaard altijd geopend zijn, kunt u aanpassen hoe het pop-upvenster zelf functioneert. Ze zijn als volgt:

• Dit is waar u de meeste tijd aan wilt besteden, omdat u hier verschillende soorten pop-ups kunt maken. Met andere woorden, door deze instellingen aan te passen, kunt u de volgende effecten maken:

• Modale pop-ups zijn een soort modaal venster.
• Slide-ins, meldingsbalken, enzovoort.

Daarnaast kunt u verschillende andere belangrijke instellingen aanpassen.

De volgende opties zijn beschikbaar op het tabblad Instellingen :

• Wijzig de hoogte en breedte van de afbeelding.
• Wijzig de verticale of horizontale oriëntatie van het object (voor ex amp le, kan de camera aan de bovenkant of onderkant van een kennisgeving bar te maken)
• Maak een beslissing over het al dan niet om een overlay te gebruiken (dit kunt u, voor ex amp le, grijs van de achtergrond wanneer de popup actief is)
• Schakel de sluitknop in uw browser uit.
• Voeg een animatie toe voor de entree.

U kunt de volgende dingen doen op het tabblad Stijl :

• U kunt de achtergrondkleur wijzigen, er een verloop van maken of een afbeelding als achtergrond gebruiken.
• Als de overlay is ingeschakeld, configureert u deze.
• Als u de sluitknop hebt ingeschakeld, moet u deze configureren.

Ten slotte bevat het tabblad Geavanceerd enkele diverse importinstellingen waarmee u het volgende kunt doen:

• Geef de sluitknop weer of laat de pop-up na een bepaalde tijd automatisch sluiten.
• Door op de overlay te klikken of op de escape-toets te drukken, kunt u voorkomen dat het venster wordt gesloten.

• Schakel de mogelijkheid om naar beneden te scrollen op de pagina uit.
• Vermijd meerdere pop-ups (als je meerdere pop-ups op dezelfde pagina hebt getarget, voorkom je dat je bezoekers geïrriteerd raken).

Om u een idee te geven van hoe deze instellingen uw pop-up zullen beïnvloeden, ziet u er als volgt uit als u de Positie in de rechterbenedenhoek van het venster:

Bekijk hoe de pop-up nu permanent is bevestigd in de rechterbenedenhoek. Door een scroll-trigger te gebruiken in combinatie met een ingangsanimatie, kunt u een mooi, discreet slide-in-effect bereiken.

Je kunt ook pop-ups maken met de visuele bouwer in Elementor

Zodra je de basisinstellingen voor pop-ups hebt voltooid, kun je beginnen met het ontwerpen van de daadwerkelijke inhoud van je pop-up door elementen te slepen en neer te zetten in de visuele interface voor slepen en neerzetten.

Je kunt elke gewenste Elementor-widget gebruiken, waardoor je veel controle hebt over het uiteindelijke ontwerp. De formulierwidget is het enige dat u absoluut moet opnemen, omdat het de enige is waarmee u uw aanmeldingsformulier voor e-mail kunt maken.

Met de formulierwidget heeft u volledige controle over de velden die u wilt aanbieden, evenals de tekst en het uiterlijk van de verzendknop. Voor ex amp le:

Verder raad ik je ten zeerste aan om kennis te maken met alle widgets en ontwerpmogelijkheden van Elementor.

Zoals eerder vermeld, heb je veel controle over het uiterlijk van je website en heb je ook toegang tot enkele handige widgets die je kunnen helpen je conversieratio te verhogen.

Voorkeuren publiceren

Als je tevreden bent met wat je hebt gemaakt, wil je het met de wereld delen. Nadat u op de PUBLISH-knop heeft gedrukt, krijgt u een reeks vragen te zien. Als een illustratie:

Is het mogelijk om aan te geven onder welke voorwaarden u de pop-up wilt laten verschijnen? U kunt kiezen welke pagina's u wilt opnemen in of uitsluiten van uw zoekresultaten. U kunt zoveel voorwaarden hebben als u wilt.

Wat is dan de gebeurtenis die ervoor zorgt dat de pop-up verschijnt? U kunt kiezen of u de pop-up al dan niet onmiddellijk wilt weergeven bij het laden van de pagina, bij het scrollen of wanneer de gebruiker naar een specifiek element scrolt, naast andere mogelijkheden. Al deze opties hebben hun instellingen, waardoor volledige aanpassing mogelijk is.

Last but not least ziet u enkele geavanceerde regels, zoals de pop-up alleen tonen aan terugkerende bezoekers, de pop-up slechts een bepaald aantal keren tonen, of misschien alleen de pop-up tonen wanneer een bezoeker naar uw website wordt doorverwezen vanaf een specifieke URL. Er zijn er ook nog een paar. Deze opties kunnen de gebruikerservaring van uw pop-up aanzienlijk verbeteren, zodat u deze kunt ontwerpen met echte integriteit en rekening houdend met uw gebruikers.

Voltooi de instellingen op de gewenste manier en klik vervolgens op OPSLAAN & SLUITEN. U zult worden genomen om als amp le van wat je popup eruit zal zien na het klikken op deze knop.

Pop-ups kunnen worden aangepast en er kan dynamische inhoud aan worden toegevoegd.

Breng de zaken naar een hoger niveau, zullen we? Tot nu toe hebben we een sjabloon geselecteerd en een of twee zittingen aangepast, en dat is het dan ook. Overweeg het scenario waarin we onze pop-up verder willen aanpassen.

We zijn terug in de fase NIEUW POP-UP TOEVOEGEN van het proces, waar we een titel kunnen specificeren en opnieuw een sjabloon kunnen kiezen.

Daarna kunnen we het selecteren, de nodige wijzigingen aanbrengen in de basisinstellingen en nogmaals op PUBLICEREN drukken.

Oké, hier begint het interessant te worden. We kunnen Elementor gebruiken om dynamische gegevens uit onze WordPress-installatie op te halen en deze in de pop-up zelf in onze pop-up in te voegen. We kunnen informatie opnemen zoals de naam van de gebruiker, de paginatitel, enzovoort.

Overweeg het volgende scenario: we gebruiken WooCommerce en we willen een gebruiker informeren dat er een korting beschikbaar is op het specifieke product dat ze momenteel bekijken. Selecteer om te beginnen een tekstgedeelte uit de sjabloon en klik vervolgens op Dynamisch in de zijbalk:

We hebben een breed scala aan opties om uit te kiezen, waaronder informatie van het bericht zelf, informatie van de site als geheel, media-informatie, auteursinformatie en zelfs WooCommerce-informatie. We selecteren een producttitel en deze wordt als resultaat van onze selectie toegevoegd aan ons tekstinhoudsblok.

Stel dat de databasegegevens niet correct worden opgehaald. In dat geval is het mogelijk om sommige voor de tekst, sommige na tekst en een fallback-tekst op te geven (als de databasegegevens niet correct worden opgehaald).

Laten we dit proces dus dupliceren voor de knop, die de prijs van het product weergeeft. We kunnen de voorgaande tekst formuleren als KOOP NU VOOR om ons een overtuigende oproep tot actie te geven:

We kunnen zelfs een stap verder gaan en de productafbeelding gebruiken als achtergrond van het pop-upvenster zelf.

Wanneer we op PUBLISH drukken, krijgen we nogmaals de publicatie-instellingen te zien, zodat we kunnen specificeren dat we alleen willen dat de pop-up op WooCommerce-pagina's verschijnt. We stellen de timer in op 15 seconden inactiviteit om de trigger te zijn. Zo is het uiteindelijk geworden:

Hoewel het ontwerp kan worden verbeterd, kunt u zien dat we de productnaam, de prijs en een afbeelding van het product weergeven als de achtergrond van de pop-up. Briljant!