Maak Elementor-pop-ups in WooCommerce

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

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

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

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

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

Door een hartelijke bedankpagina te maken en uw Mijn account- en Servicevoorwaarden-pagina's bij te werken, kunt u de harten en geesten van uw klanten veroveren.

De drag-and-drop-functionaliteit van Elementor, gecombineerd met deze tutorial, zorgt ervoor dat u een probleemloze ervaring heeft bij het maken van uw pagina's.

Nadat u uw wooCommerce-winkel heeft opgezet, wilt u deze misschien aantrekkelijker maken voor uw bezoekers en klanten. Het toevoegen van pop-ups geeft de gebruiker een nieuwe indruk en een nieuw verlangen om in uw winkel te blijven.

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

Zodra je op NIEUWE POPUP TOEVOEGEN hebt geklikt (wat voor zichzelf spreekt), wordt je gevraagd om het een naam te geven en vervolgens een sjabloon te selecteren uit de weergegeven vooraf gemaakte amp . Er zijn verschillende templates 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 amp om gebruikers te waarschuwen voor cookiegebruik of andere AVG-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 bij de interface, de opties en de manier waarop alles voor je is geregeld. 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 weergeeft van waar u momenteel aan werkt. U kunt elk element afzonderlijk bewerken en aanpassen door het te selecteren en Bewerken > Elementen bewerken te selecteren. 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

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

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

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

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

Bovendien kunt u verschillende andere belangrijke instellingen aanpassen.

De volgende opties zijn beschikbaar op het Instellingen :

• Wijzig de hoogte en breedte van de afbeelding.
• Wijzig de verticale of horizontale richting van het object (u kunt het amp aan de boven- of onderkant bevestigen om een ​​meldingsbalk te maken)
• Beslis of u wel of niet een overlay wilt gebruiken (hiermee kunt u amp de achtergrond grijs maken als de pop-up actief is)
• Schakel de sluitknop in uw browser uit.
• Voeg een animatie toe voor de entree.

Stijl kunt u de volgende dingen doen :

• 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 knop Sluiten hebt ingeschakeld, moet u deze configureren.

Ten slotte bevat het tabblad Geavanceerd enkele diverse importinstellingen waarmee u bijvoorbeeld 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 sluit.

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

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

Kijk eens hoe de pop-up nu permanent is opgelost in de rechteronderhoek. Door een scrolltrigger in combinatie met een entreeanimatie te gebruiken, kunt u een mooi, discreet inschuifeffect bereiken.

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

Zodra je de basispop-upinstellingen 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 en neer te zetten.

U kunt elke gewenste Elementor-widget gebruiken, waardoor u veel controle heeft over het uiteindelijke ontwerp. De Formulierwidget is het enige dat u absoluut moet toevoegen, omdat dit 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. amp :

Daarnaast raad ik u ten zeerste aan om kennis te maken met alle widgets en ontwerpopties van Elementor.

Zoals eerder vermeld, heeft u veel controle over het uiterlijk van uw website en heeft u ook toegang tot enkele handige widgets die u kunnen helpen uw conversiepercentage te verhogen.

Publicatievoorkeuren

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

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

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

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

Voltooi de instellingen op de door u gewenste manier en klik vervolgens op OPSLAAN & SLUITEN. Nadat u op deze knop hebt geklikt, krijgt u een amp beeld van hoe uw pop-up eruit zal zien.

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

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

We zijn terug bij de ADD NEW POPUP-fase 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 PUBLISH klikken.

Oké, dit is waar het interessant begint 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.

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

We hebben een grote verscheidenheid aan opties om uit te kiezen, waaronder informatie uit 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 een ​​aantal voor de tekst op te geven, een aantal na de tekst en een reservetekst (als de databasedetails niet goed 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 nog een stap verder gaan en de productafbeelding gebruiken als achtergrond van het pop-upvenster zelf.

Wanneer we op PUBLISH drukken, krijgen we opnieuw de publicatie-instellingen te zien, waardoor 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 als trigger. Zo is het uiteindelijk geworden:

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