Maak Elementor-pop-ups in WooCommerce

We zijn allemaal grote fans van WooCommerce. Het is eenvoudig op te zetten en aan te passen. Functies die het creëren en beheren van een dynamische en krachtige webwinkel vereenvoudigen, zijn standaard inbegrepen.

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

• Configuratie van het pop-upvenster
• Je kunt ook pop-ups maken met behulp van de visuele builder in Elementor
• Publicatievoorkeuren

Hoewel WooCommerce de winkelwagen en afrekenpagina voor je aanmaakt wanneer je je website bouwt, maakt Elementor ze aantrekkelijker door ze aan te passen.

Je hebt de mogelijkheid om ze opnieuw te ontwerpen of helemaal opnieuw te beginnen. Je kunt dit proces herhalen voor alle andere pagina's op je website.

Door een hartelijke bedankpagina te maken en uw 'Mijn account'- en 'Algemene voorwaarden'-pagina's bij te werken, kunt u het hart en de geest van uw klanten winnen.

De drag-and-drop-functionaliteit van Elementor, in combinatie met deze handleiding, zorgt ervoor dat je probleemloos pagina's kunt maken.

Nadat je je WooCommerce-winkel hebt opgezet, wil je deze wellicht aantrekkelijker maken voor je bezoekers en klanten. Het toevoegen van pop-ups geeft de gebruiker een extra indruk en zorgt ervoor dat ze langer in je winkel willen blijven.

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

Nadat je op 'NIEUWE POP-UP TOEVOEGEN' hebt geklikt (wat vrijwel vanzelfsprekend is), wordt je gevraagd om de pop-up een naam te geven en vervolgens een sjabloon te selecteren uit de getoondeamp. Er zijn verschillende sjablonen beschikbaar voor diverse doeleinden; sommige zijn geschikt voor aankondigingen, andere voor het promoten van een korting, en weer andere zijn ideaal om gebruikers aan te moedigen zich ergens voor aan te melden. Er zijn zelfsampom gebruikers te waarschuwen voor het gebruik van cookies of andere GDPR-meldingen. Zodra je iets hebt gevonden dat je bevalt, klik je erop om een ​​grotere preview te bekijken en druk je vervolgens op de knop 'Invoegen'.

Na het klikken op deze knop word je doorgestuurd naar de pop-up builder in de WordPress-backend.

Als je al eerder met Elementor hebt gewerkt, zul je je meteen thuis voelen met de interface, de opties en de overzichtelijke lay-out. Het proces is in principe hetzelfde als het maken van Elementor-paginasjablonen in WordPress.

Aan de rechterkant van het scherm bevindt zich het hoofdcanvas, waarop een voorbeeld wordt weergegeven van waaraan u momenteel werkt. U kunt elk element afzonderlijk bewerken en aanpassen door het te selecteren en vervolgens Bewerken > Elementen bewerken te kiezen. Wanneer 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

 Nu zou je een voorbeeld van je pop-up moeten zien – ofwel een leeg scherm, ofwel de sjabloon die je hebt gekozen.

De pop-upinstellingen, die standaard altijd geopend zijn, stellen u in staat om de werking van het pop-upvenster aan te passen. Deze instellingen zijn als volgt:

• Hier wilt u de meeste tijd doorbrengen, omdat u hier verschillende soorten pop-ups kunt maken. Met andere woorden, door deze instellingen aan te passen, kunt u de volgende effecten creëren:

• Modale pop-ups zijn een type modaal venster.
• Schuifvensters, notificatiebalken, enzovoort.

Daarnaast kunt u diverse 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 (u kunt hetampaan de boven- of onderkant vastzetten om een ​​notificatiebalk te maken)
• Neem een ​​beslissing of je een overlay wilt gebruiken (hiermee kun jeampde achtergrond grijs maken wanneer de pop-up actief is)
• Schakel de sluitknop van je browser uit.
• Voeg een animatie toe voor de entree.

tabblad Stijl kunt u de volgende dingen doen

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

Tot slot bevat het tabblad 'Geavanceerd' een aantal diverse importinstellingen waarmee u onder andere de volgende zaken kunt doen:

• Toon de sluitknop of laat het pop-upvenster 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 sluit.

• Schakel de mogelijkheid om naar beneden te scrollen op de pagina uit.
• Vermijd meerdere pop-ups (als u meerdere pop-ups op dezelfde pagina hebt ingesteld, voorkomt u hiermee dat uw bezoekers zich ergeren).

Om u een idee te geven van hoe deze instellingen uw pop-up zullen beïnvloeden, ziet u hier hoe het eruitziet wanneer u de positie naar de rechteronderhoek van het venster:

Kijk eens hoe de pop-up nu permanent in de rechterbenedenhoek is vastgezet. Door een scrolltrigger te combineren met een instapanimatie, creëer je een mooi, subtiel slide-in-effect.

Je kunt ook pop-ups maken met behulp van de visuele builder in Elementor

Zodra je de basisinstellingen voor de pop-up hebt voltooid, kun je beginnen met het ontwerpen van de daadwerkelijke inhoud van je pop-up door elementen naar de visuele drag-and-drop-interface te slepen.

Je kunt elke Elementor-widget gebruiken die je wilt, wat je veel controle geeft over het uiteindelijke ontwerp. De Form-widget is de enige die je absoluut moet gebruiken, omdat dit de enige widget is waarmee je je e-mailaanmeldingsformulier kunt maken.

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

Daarnaast raad ik je ten zeerste aan om vertrouwd te raken 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 een aantal handige widgets die je kunnen helpen je conversieratio te verhogen.

Publicatievoorkeuren

Als je tevreden bent met wat je hebt gemaakt, wil je het natuurlijk met de wereld delen. Nadat je op de knop 'PUBLICEREN' hebt gedrukt, krijg je een aantal vragen voorgelegd. Bijvoorbeeld:

Is het mogelijk om de voorwaarden te specificeren waaronder de pop-up moet verschijnen? U kunt kiezen welke pagina's u wel of niet in uw zoekresultaten wilt opnemen. U kunt zoveel voorwaarden instellen als u wilt.

Wat is dan de gebeurtenis die ervoor zorgt dat de pop-up verschijnt? Je kunt kiezen of de pop-up direct bij het laden van de pagina, bij het scrollen of wanneer de gebruiker naar een specifiek element scrollt, wordt weergegeven. Al deze opties hebben hun eigen instellingen, waardoor volledige aanpassing mogelijk is.

Tot slot vind je ook een aantal geavanceerde regels, zoals het alleen tonen van de pop-up aan terugkerende bezoekers, het slechts een bepaald aantal keren tonen van de pop-up, of het alleen tonen van de pop-up wanneer een bezoeker via een specifieke URL op je website terechtkomt. Er zijn er nog een paar meer. Deze opties kunnen de gebruikerservaring van je pop-up aanzienlijk verbeteren, waardoor je deze met oog voor detail en respect voor je gebruikers kunt ontwerpen.

Vul de instellingen naar wens in en klik vervolgens op OPSLAAN & SLUITEN. Je krijgt dan eenampte zien van hoe je pop-up eruit zal zien nadat je op deze knop hebt geklikt.

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

Laten we de volgende stap zetten. Tot nu toe hebben we een sjabloon gekozen en een of twee keer aangepast, en dat was het zo'n beetje. Stel je voor dat we onze pop-up verder willen personaliseren.

We zijn terug bij de stap 'NIEUWE POP-UP TOEVOEGEN', waar we opnieuw een titel kunnen opgeven en een sjabloon kunnen kiezen.

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

Oké, nu wordt het interessant. We kunnen Elementor gebruiken om dynamische data uit onze WordPress-installatie op te halen en deze in de pop-up zelf in te voegen. We kunnen informatie zoals de gebruikersnaam, de paginatitel, enzovoort, opnemen.

Stel je het volgende scenario voor: we gebruiken WooCommerce en we willen een gebruiker laten weten dat er een korting beschikbaar is op het specifieke product dat hij of zij momenteel bekijkt. Selecteer om te beginnen een stuk tekst in de sjabloon en klik vervolgens op Dynamisch in de zijbalk:

We hebben een breed scala aan opties om uit te kiezen, waaronder informatie uit het bericht zelf, informatie van de hele website, media-informatie, auteursinformatie en zelfs WooCommerce-informatie. We selecteren een producttitel, die vervolgens aan ons tekstblok wordt toegevoegd.

Stel dat de databasegegevens niet correct worden opgehaald. In dat geval is het mogelijk om tekst vóór de tekst, tekst ná de tekst en een reservetekst (voor het geval de databasegegevens niet correct worden opgehaald) op te geven.

Laten we dit proces dus herhalen voor de knop, die de prijs van het product weergeeft. We kunnen de voorgaande tekst formuleren als 'NU KOPEN VOOR' om een ​​aantrekkelijke oproep tot actie te creëren:

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

Wanneer we op PUBLICEREN drukken, krijgen we opnieuw de publicatie-instellingen te zien, waarmee we kunnen aangeven dat we de pop-up alleen op WooCommerce-pagina's willen weergeven. We stellen de timer in op 15 seconden inactiviteit als trigger. Dit is het uiteindelijke resultaat:

Hoewel het ontwerp nog verbeterd kan worden, zie je dat we de productnaam, de prijs en een afbeelding van het product als achtergrond van de pop-up weergeven. Geweldig!