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:

 Elementor paginabouwer
Elementor paginabouwer

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.

Met popupformulieren kun je e-mailadressen vastleggen, sales promoten en meer. 📧 Leer hoe je er zelf een kunt maken in deze handleiding! 🚀Click to Tweet

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:

 ElementorKits popuptemplates
ElementorKits popuptemplates

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:

 Ga naar “Templates” en vervolgens naar “Add New Popup”
Ga naar “Templates” en vervolgens naar “Add New Popup”

Vervolgens word je gevraagd je template een naam te geven. Als je eenmaal een naam hebt gekozen, selecteer je CREATE TEMPLATE:

 Geef je popuptemplate een naam en klik op “Create”
Geef je popuptemplate een naam en klik op “Create”

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:

 Kies uit bestaande popupontwerpen of bouw er een helemaal opnieuw
Kies uit bestaande popupontwerpen of bouw er een helemaal opnieuw

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:

 Kies je weergavevoorwaarden
Kies je weergavevoorwaarden

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 SiteArchivesSingular, of WooCommerce:

 Kies waar je de popup wilt weergeven
Kies waar je de popup wilt weergeven

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:

 Selecteer de gewenste popuptriggers
Selecteer de gewenste popuptriggers

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:

 Scrolltriggers voor pagina's
Scrolltriggers voor pagina’s

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:

 Elementtriggers scrollen
Elementtriggers scrollen

Met On Click moet je specificeren hoe vaak een gebruiker op je website moet klikken voordat de popup wordt weergegeven:

 Meer triggeropties onder advanced rules
Meer triggeropties onder advanced rules

Met de After Inactivity instelling kun je je popup activeren nadat de gebruiker een bepaalde tijd inactief is geweest op je pagina:

 Triggers voor inactiviteit
Triggers voor inactiviteit

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:

 Selecteer de trigger "On Page Exit Intent" indien van toepassing
Selecteer de trigger “On Page Exit Intent” indien van toepassing

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:

 Kies de “Button” optie in het menu
Kies de “Button” optie in het menu

Nadat je de knoptekst hebt opgegeven en het uiterlijk hebt aangepast, klik je op Link > Dynamic Tags. Kies vervolgens Actions > Popup in het dropdownmenu:

 Selecteer de popupactie voor de knop
Selecteer de popupactie voor de knop

Klik op Popup en kies Open Popup in de Action  dropdown. Je kunt je formulier ook selecteren in het Popup menu:

 Selecteer de popup dropdown optie
Selecteer de popup dropdown optie

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:

 Sla je popup op als een template
Sla je popup op als een template

Vervolgens word je gevraagd je template een naam te geven. Als je klaar bent, klik je op SAVE:

 Geef de popuptemplate een naam en klik op “Save”
Geef de popuptemplate een naam en klik 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:

 Meer geavanceerde instellingen en voorwaarden
Meer geavanceerde instellingen en voorwaarden

Je kunt ook kiezen voor Show after X sessions. Deze instelling is gericht op algemene bezoeken in plaats van op specifieke pagina’s:

 Popup weergeven na een bepaald aantal sessies
Popup weergeven na een bepaald aantal sessies

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:

 Selecteer hoe vaak gebruikers je popup zullen zien
Selecteer hoe vaak gebruikers je popup zullen zien

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:

Downtime en WordPress problemen? Kinsta is de hosting oplossing speciaal ontworpen om jou tijd te besparen! Bekijk onze kenmerken
 Je kunt de “Show on devices” optie kiezen
Je kunt de “Show on devices” optie kiezen

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:

 Weergeven aan gebruikers die van een specifieke plaats komen
Weergeven aan gebruikers die van een specifieke plaats komen

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:

 Verberg popups voor ingelogde gebruikers
Verberg popups voor ingelogde gebruikers

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 (Crocoblock) plugin
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)

Popup Box Widget (PowerPack) plugin
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)

Lightbox & Modal (Essential Addons for Elementor) plugin
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.

Leer hoe je popups maakt met zowel de gratis als Pro Elementor tools met behulp van deze stapsgewijze handleiding 💪📧Click to Tweet

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 WordPress hostingprovider nodig. Bekijk vandaag nog onze prijspagina om te zien hoe Kinsta je site een boost kan geven!


Bespaar tijd en kosten en maximaliseer siteprestaties met:

  • Directe hulp van WordPress-hostingexperts, 24/7.
  • Cloudflare Enterprise integration.
  • Globaal bereik met 34 datacenters verspreid over de wereld.
  • Optimalisatie met onze ingebouwde Application Performance Monitoring.

Dat alles en nog veel meer, in één pakket zonder langlopende contracten, met migraties en een 30 dagen geld-terug-garantie. Bekijk onze pakketten of neem contact op met sales om het pakket te vinden dat bij je past.