Popupformulieren kunnen essentiële marketingtools zijn waarmee je e-mailadressen kunt vastleggen, sales kunt promoten en meer. Het maken van aantrekkelijke en je eigen aangepaste popups in WordPress is echter niet altijd eenvoudig.
Gelukkig maakt de paginabouwplugin Elementor het makkelijk om popups op je website te maken en aan te passen. Je kunt ze aanpassen aan het ontwerp van je site en triggers toevoegen op basis van gebruikersgedrag of waar ze vandaan komen.
Deze handleiding geeft een overzicht van de verschillende soorten Elementor popups en waarom je ze zou willen gebruiken. Vervolgens leggen we uit hoe je deze popups kunt maken met zowel tools uit zowel de gratis versie als Pro Elementor. Laten we beginnen!
Een overzicht van Elementor popups
Elementor is een van de meest populaire paginabouwplugins voor WordPress websites. Met de plugin kun je elementen op hun plaats draggen en droppen om zo mooie en gebruiksvriendelijke pagina’s te ontwerpen:
Bovendien kun je met Elementor een verscheidenheid aan popups maken. Dit zijn aangepaste formulieren die op je site verschijnen na een vooraf bepaalde tijd, of nadat een gebruiker een bepaalde actie heeft voltooid.
Popups kunnen om verschillende redenen essentiële tools zijn. Je kunt ze gebruiken om leads te verzamelen en je e-mailmarketinglijst uit te breiden. Elementor popups kunnen worden geïntegreerd met e-mailmarketingsoftware en sturen e-mailadressen van je (toekomstige) klanten rechtstreeks naar je platform naar keuze.
Je kunt ze zelfs gebruiken om sales, kortingen en evenementen met betrekking tot je e-commerce winkel te promoten. Als zodanig kunnen popups een integraal onderdeel zijn van je algehele marketingstrategie.
Bovendien kunnen popups je helpen in contact te komen met je klanten. Je kunt enquêtes insluiten om feedback van consumenten te vragen en je producten en diensten te verbeteren.
Popups kunnen echter goedkoop en opdringerig aanvoelen als je ze niet goed ontwerpt en de juiste triggers voor je publiek kiest. Daarom moet je ervoor zorgen dat je ze effectief gebruikt. Dit is waar Elementor een rol speelt.
Soorten Elementor popups
Elementor wordt geleverd met meer dan 100 popuptemplates die je aan je behoeften kunt aanpassen. Deze ontwerpen omvatten:
- Formulieren voor leadcapture
- Popups voor e-mailaanmelding
- Promotionele popups
- Login- en welkomsformulieren
- Popups voor afgeschermde content
- Upsell- en cross-sellformulieren
Deze popuptemplates zijn ingebouwd in Elementor kits, die verschillende ontwerpfeatures voor verschillende soorten websites bevatten:
Verder kun je kiezen uit verschillende popupplaatsingen en visuele ontwerpen, waaronder:
- Modal
- Inschuifbaar
- Volledig scherm
- Bovenste of onderste balk
Ten slotte kun je de Elementor editor gebruiken om snel een popuptemplate aan je behoeften aan te passen. We leggen je nu uit hoe je dat kunt doen met de gratis versie en Elementor Pro.
Zo maak je een popup met Elementor (gratis)
Voorheen had de Essential Addons for Elementor plugin een Modal Popup feature waarmee gebruikers een gratis popupformulier konden maken. Het gebruik ervan was een van de meest populaire manieren om niet te hoeven betalen voor Elementor Pro. Je kunt veel instructievideo’s van een paar jaar geleden vinden om je te laten zien hoe je deze methode kunt gebruiken.
De gratis Modal Popup feature is echter getransformeerd in een premium Lightbox en Modal -element. Het is dan ook niet langer gratis te gebruiken. Daarom moet je upgraden naar Elementor Pro of betalen voor een van de premium Elementor plugins die we later in dit bericht bespreken.
Zo maak je popup met Elementor Pro (in 5 eenvoudige stappen)
Elementor Pro wordt geleverd met een ingebouwde popupfeature die we in deze tutorial zullen gebruiken. Je moet eerst Elementor Pro kopen en activeren. Vervolgens kun je naar je WordPress dashboard gaan om aan de slag te gaan met het maken van popups.
Stap 1: Maak je popup
Begin door te navigeren naar Elementor > Templates > Popups in je WordPress dashboard. Klik vervolgens op ADD NEW POPUP om een nieuwe aan te maken:
Vervolgens word je gevraagd je template een naam te geven. Als je eenmaal een naam hebt gekozen, selecteer je CREATE TEMPLATE:
Hiermee wordt de Elementor paginabouwer gestart. Je kunt nu kiezen uit de bestaande popuptemplateontwerpen of je eigen popup ontwerpen vanaf het begin. In ons voorbeeld hebben we een van de bestaande templates gekozen om te bewerken:
Je kunt hier spelen met de ontwerpinstellingen om je popup aan te passen. Je kunt bijvoorbeeld de lay-out, uitlijning, achtergrondafbeeldingen en kleuren wijzigen.
Stap 2: Kies je weergavevoorwaarden
Als je tevreden bent met je ontwerp, klik je op de naar boven wijzende pijl naast PUBLISH. Selecteer vervolgens Display Conditions in het menu dat verschijnt:
Klik vervolgens op ADD CONDITION om te kiezen waar je Elementor popup op je website wordt weergegeven. Je kunt dan een locatie selecteren uit de volgende opties: Entire Site, Archives, Singular, of WooCommerce:
Als je tevreden bent met je keuze, klik je op NEXT. Je wordt naar de Triggers voor je popupformulier geleid.
Stap 3: Stel je popuptriggers in
Op de Triggers pagina kun je beslissen wat gebruikers moeten doen om je Elementor popup te bekijken. Elke optie is standaard uitgeschakeld en je kunt deze inschakelen door op de schuifregelaar te klikken. Vervolgens moet je waarden voor je trigger opgeven.
Als je bijvoorbeeld kiest voor On Page Load, moet je kiezen binnen hoeveel seconden je popup wordt weergegeven:
Met On Scroll kun je kiezen in welke richting de gebruiker moet scrollen en hoeveel van de pagina hij moet beslaan voordat de popup verschijnt:
Voor de On Scroll To Element instelling moet je een CSS ID invoeren. Wanneer een gebruiker dat element op je pagina bereikt, verschijnt de popup:
Met On Click moet je specificeren hoe vaak een gebruiker op je website moet klikken voordat de popup wordt weergegeven:
Met de After Inactivity instelling kun je je popup activeren nadat de gebruiker een bepaalde tijd inactief is geweest op je pagina:
Ten slotte kun je ervoor kiezen om On Page Exit Intent in te schakelen. Deze instelling activeert je popup wanneer een gebruiker je pagina probeert te verlaten:
Klik op SAVE & CLOSE of NEXT om naar de Advanced Rules te gaan als je klaar bent. We zullen iets later in deze tutorial naar deze regels kijken.
Stap 4: voeg een popupknop toe aan je site (optioneel)
Misschien wilt je je Elementor popup activeren wanneer een gebruiker op een specifiek element op je pagina klikt. Je kunt bijvoorbeeld een knop ontwerpen met de tekst “Sign Up Now” en deze in je footer insluiten. Wanneer een gebruiker op de knop klikt, zien ze je e-mailregistratieformulier op hun scherm.
Eerst moet je een Elementor knop op je website maken. Open het bericht of de pagina in de Elementor editor en kies Button in het menu. Drag en drop deze naar je pagina:
Nadat je de knoptekst hebt opgegeven en het uiterlijk hebt aangepast, klik je op Link > Dynamic Tags. Kies vervolgens Actions > Popup in het dropdownmenu:
Klik op Popup en kies Open Popup in de Action dropdown. Je kunt je formulier ook selecteren in het Popup menu:
Selecteer ten slotte UPDATE om je knop te publiceren. Telkens wanneer een gebruiker erop klikt, wordt hij naar je aanmeldingsformulier geleid.
Stap 5: Bewaar je popuptemplate voor later
Je kunt je popups ook opslaan als templates. Open je popup met de Elementor editor en klik op het pijltje omhoog naast UPDATE. Kies Save as Template in het menu:
Vervolgens word je gevraagd je template een naam te geven. Als je klaar bent, klik je op SAVE:
De popup wordt opgeslagen in je templatebibliotheek. Je kunt het nu gebruiken bij het bouwen van een pagina of bericht met templates.
Zo configureer je geavanceerde popupinstellingen van Elementor
We hebben al besproken hoe je een simpele Elementor popup maakt. Er zijn echter ook enkele geavanceerde instellingen die je mogelijk wilt gebruiken.
Open je popup opnieuw met de Elementor editor en navigeer naar Display Rules. Laten we eens kijken naar de verschillende instellingen.
Instellingen popupweergave
Met sommige geavanceerde popupweergave-instellingen kun je bepalen wanneer gebruikers je formulier zien. Deze configuraties kunnen handig zijn om terugkerende bezoekers te targeten in plaats van nieuwe bezoekers.
Je kunt er bijvoorbeeld voor kiezen om je popup weer te geven nadat je bezoeker je pagina een bepaald aantal keren heeft bekeken:
Je kunt ook kiezen voor Show after X sessions. Deze instelling is gericht op algemene bezoeken in plaats van op specifieke pagina’s:
De Show up to X times instelling kan beperken hoe vaak gebruikers je popup te zien krijgen. Je kunt overwegen dit in te schakelen als je bezoekers niet voortdurend wilt spammen met opdringerige formulieren:
Je kunt ook de Show on devices en Show on browsers instellingen gebruiken om te beperken waar je popup wordt weergegeven. Popups kunnen bijzonder opdringerig zijn op mobiele apparaten, dus je kunt overwegen ze daar uit te schakelen:
Door een betere mobiele gebruikerservaring te bieden, kun je je bezoekers tevreden houden. Het kan ook je inspanningen op het gebied van Search Engine Optimization (SEO) stimuleren en je website helpen hoger in de zoekresultaten te scoren.
Instellingen gebruikersoorsprong
Ten slotte stelt Elementor je in staat om popupweergave-instellingen te configureren op basis van waar je gebruikers vandaan komen. Deze instellingen kunnen handig zijn als je bezoekers naar een promotionele landingspagina leidt en je popup vervolgens gebruikt voor reclameaanbiedingen of het vragen om contactgegevens.
Met de volgende instellingen kun je URL’s specificeren en kiezen welke links de popups activeren:
Ten slotte kun je ervoor kiezen om je popups te verbergen voor ingelogde gebruikers. Je kunt deze instelling gebruiken als je een betaalde lidmaatschapswebsite hebt:
Als je tevreden bent met al je gekozen instellingen, klik je op SAVE & CLOSE. Je kunt hier terug navigeren en deze configuraties indien nodig wijzigen.
Top 3 plugins voor Elementor popups
Zoals we hebben gezien, maakt Elementor Pro het makkelijk om popups voor je website te maken. Het is echter mogelijk dat je nog niet klaar bent om te upgraden naar de premium paginabuilder. Als alternatief kun je op zoek zijn naar extra ontwerpfeatures.
Hier zijn een paar van de beste plugins voor Elementor popups met die overwegingen in gedachten.
1. JetPopUp (Crocoblock)
JetPopUp is een gebruiksvriendelijke plugin met een drag en drop interface die perfect integreert met Elementor. Hiermee kun je dynamische en aangepaste popupformulieren maken, inclusief e-mailaanmeldingen, toestemmingsformulieren voor cookies, en countdowns.
JetPopUp schittert met zijn interactieve features. Je kunt kiezen uit meerdere animatie-instellingen, zoals schuiven, spiegelen en roteren. Bovendien heeft de plugin verschillende templates die je kunt aanpassen aan je behoeften.
Met deze plugin kun je ook meerdere weergave-instellingen selecteren en aanpassen. Je kunt bijvoorbeeld je JetPopUp formulieren aan gebruikers tonen op bepaalde data wanneer ze je website proberen te verlaten, of na een bepaalde hoeveelheid scrollen.
Features:
- Kies uit vooraf ingestelde popuptemplates
- Selecteer verschillende voorwaarden voor popupweergave
- Specifieke voorwaarden opnemen en uitsluiten
- Animatie-effecten gebruiken
Prijs: JetPopUp kost $22 per jaar. Dit pakket bevat een MailChimp integratie, een popupwidget en klantenondersteuning. Je kunt ook upgraden naar een all-inclusive abonnement voor $130 per jaar. Deze wordt geleverd met 20 extra plugins en 150 extra widgets.
2. Popup Box Widget (PowerPack)
Als je op zoek bent naar geavanceerde Elementor popupinstellingen, overweeg dan om Popup Box Widget van PowerPack te gebruiken. Hiermee kun je aangepaste popups maken die dynamische elementen bevatten, zoals video’s, afbeeldingen en Google maps.
Met deze plugin kun je popups activeren op basis van verschillende gebruikersacties, inclusief exit intentie en aangepaste vertragingen. Je kunt ook interactieve popups in twee stappen maken met links en andere elementen van Call to Action (CTA).
Bovendien heeft Popup Box Widget geavanceerde animatie-instellingen. Je kunt je popups laten zoomen, een krantenopmaak gebruiken of 3D-animaties gebruiken.
Features:
- Kies uit animatie-effecten
- Popups met twee stappen maken
- Gebruik vertragingen en gebruikerstriggers
- Afbeeldingen, video’s en andere interactieve elementen weergeven
Prijs: Popup Box Widget is inbegrepen bij een PowerPack abonnement. Abonnementen beginnen bij $49 per jaar en worden geleverd met meer dan 70 verschillende Elementor widgets.
3. Lightbox & Modal (Essential Addons for Elementor)
We hebben deze Elementor popupplugin eerder kort besproken. Lightbox & Modal is een veelzijdige widget met de Essential Addons for Elementor tool. Het helpt je bij het maken van popups met interactieve features zoals video’s, afbeeldingen en animaties.
Lightbox & Modal is ontworpen om te werken met knoppen en links op je Elementor website. Je kunt aangepaste knoppen, pictogrammen en tekst maken die je popupformulieren activeren. Bovendien kan de widget tijdvertragingen en andere gebruikersacties gebruiken.
Over het algemeen kan Lightbox & Modal de beste optie zijn om met je gebruikers te communiceren in plaats van alleen informatie te presenteren.
Features:
- Gebruik knoptriggers voor popups
- Afbeeldingen, video’s en aangepaste content weergeven
- Pas popuplayouts aan
- Kies uit verschillende animatietypes
Prijs: Lightbox & Modal is inbegrepen bij Essential Addons voor Elementor Pro. Abonnementen beginnen bij $39,97 per jaar en hebben meer dan 70 widgets en zeven extensies.
Samenvatting
Popupformulieren kunnen essentieel zijn voor je leadgeneratie en marketingcampagnes. Ze kunnen je ook helpen om met bezoekers om te gaan en ze op je pagina te houden. Gelukkig kun je aangepaste popups maken met de Elementor paginabuilder.
Het is super eenvoudig om popups te maken met Elementor Pro. Je kunt ze aanpassen aan je merk en beslissen waar ze op je site worden weergegeven. Je kunt ook geavanceerde weergave instellingen instellen om je popup weer te geven op basis van gebruikersacties en oorsprong.
Een mooie website ontwerpen met Elementor is slechts de eerste stap. Je hebt ook een application hosting, database hosting en managed WordPress hostingprovider nodig.
Bekijk vandaag nog onze prijspagina om te zien hoe Kinsta je site een boost kan geven!
Als je de POPUP hebt gemaakt, maar bent niet tevreden over de verschijning en je wilt dit achteraf aanpassen. Waar kun je de rules achteraf nog aanpassen?
Martin, voor dit soort vragen kan je beter terecht in het WordPress support forum: https://nl.wordpress.org/support/