Elementor Popup Builder | Zo Maak jij de Beste Popups in 2021

popup-maken-met-elementor-pro

Heb jij op dit moment een website of webshop die gebouwd is met Elementor Pro? Dan kun je gebruik maken van de Elementor popup builder waarmee je snel goed converterende pop-ups kunt maken. In deze blog ga ik jou stap voor stap uitleggen hoe jij zelf een popup kunt maken en deze vervolgens op de juiste momenten op de juiste pagina’s kunt laten vertonen. 

Wil jij dat jouw websitebezoekers lid worden van jouw e-maillijst? Dan moet je dit uiteraard aan jouw bezoekers vragen. Wanneer je het niet vraagt zullen ze het namelijk sowieso niet doen. 

Wel is het belangrijk om dit op de juiste manier te doen, want wanneer popups verkeerd worden ingesteld worden ze al snel als vervelend ervaren en dat gaat negatieve effecten op jouw website of webshop hebben. In deze blog ga ik jou daarom stap voor stap uitleggen hoe jij zelf goed converterende pop-ups kunt maken met Elementor.

Wat is een popup?

Iedereen kent ze inmiddels wel, want bijna elke website of webshop die jij bezoekt maakt wel gebruik van een soort popup. Een popup is namelijk een scherm die uit het niets op het scherm komt te staan. Doordat de bezoeker uit het niets deze popup ziet verschijnen trekt dit de aandacht en dat zorgt ervoor dat de bezoeker de popup bekijkt. Wanneer je hier een interessant bericht of aanbod in plaatst is de kans groot dat de bezoeker doet wat jij wilt.

Pop-ups zijn daarom erg interessant en kunnen serieuze effecten hebben op het conversiepercentage van jouw website of webshop. Het is dan echter wel belangrijk dat je ze goed instelt, want wanneer dit niet goed gedaan wordt kan het ook nadelige effecten hebben en dat wil je natuurlijk voorkomen.

Voor het vertonen van aanbiedingen, kortingscodes, weggevers of actuele informatie zijn pop-ups een erg handig middel om deze punten onder de aandacht te krijgen bij jouw bezoekers.

Wat zijn de voordelen van de Elementor pop ups?

Inmiddels weet je wat popups zijn en waarom je ze moet gebruiken, maar dan zijn er vervolgens nog een hele hoop programma’s waarmee jij pop-ups kunt maken. Hoe kies je hier nou weer de beste uit, want wat zijn de verschillen tussen al deze popup builders. Aangezien we het in deze blog gaan hebben over de Elementor popup builder zal ik hieronder de voordelen van deze popup builder benoemen en bespreken.

1. Super makkelijk pop ups maken

Het probleem van veel programma’s is dat het maken van pop-ups vaak erg lastig is. Je hebt er in veel gevallen namelijk enige technische kennis voor nodig en dat is voor voor mensen al direct het eerste probleem. Met de Elementor popup builder is dit niet meer het geval. Je kunt hier namelijk zonder enige technische kennis zelf eenvoudig en snel een goed converterende popup maken. Al helemaal wanneer je ook nog eens gebruik maakt van de templates die standaard worden meegeleverd.

2. Erg veel verschillende trigger opties

Wanneer je gebruik wilt maken van pop-ups op jouw website zijn deze er in alle soorten en maten. Dat is leuk, maar er nog een ander ding ook erg belangrijk. Je wilt namelijk wel dat de pop-ups op de juiste momenten tevoorschijn komen en de bezoekers dus niet hinderen. 

Wanneer je kiest voor de Elementor popup builder is ook dit erg goed geregeld. Na het maken van de popup kun jij namelijk precies instellen wanneer jij wilt dat de popup wordt vertoond. Dit kan onder andere op de volgende momenten:

  • Zodra een bezoeker de pagina wilt verlaten
  • Zodra een bezoeker een bepaalde tijd op de website actief is
  • Zodra een bezoeker aan het einde van de pagina is gekomen
  • Zodra een bezoeker op een knop drukt
  • En uiteraard nog veel meer

3. Pop Ups koppelen aan meerdere pagina’s

Wanneer je pop-ups wilt gebruiken op jouw website zullen deze in de meeste gevallen op meerdere pagina’s gebruiken. Bij veel programma’s zul je dan voor elke pagina een nieuwe pop up moeten maken, maar bij Elementor is dat niet het geval.

Na het maken van een popup met Elementor kun je precies instellen op welke pagina’s jij de popup wilt laten vertonen. Je kunt de popup zelfs op een hele categorie of de volledige website instellen. Ook kun je pagina’s instellen waar de popup juist niet vertoond moet worden. Je bent met de Elementor popup builder volledig vrij om alles volledig naar jouw wens te te maken en in te stellen.

4. Geen externe plug-ins nodig

Dit is naast gebruiksvriendelijkheid misschien nog wel het grootste voordeel. Voor alle andere popup builders moet je namelijk een nieuwe plugin aan jouw website toevoegen en die neemt weer extra ruimte in beslag, voegt extra code aan jouw thema toe en maakt jouw website daardoor slomer. Dit wil je voorkomen en daarom is het fijn dat alles in één tool zit verwerkt. Hierdoor werkt alles super goed samen en haal je betere prestaties dan wanneer je kiest voor allemaal losse plugins.

Je kunt Elementor zien als een totaaloplossing waar je geen andere plug-ins meer bij nodig hebt. Zo beschikt elementor bijvoorbeeld over de volgende ingebouwde functionaliteiten:

  • Contactformulieren; een extra plugin is dus niet meer nodig
  • Pop-up builder; een extra popup builder plugin is niet meer nodig
  • Table of Content; een extra plugin is niet meer nodig
  • Afteller; een extra plugin is niet meer nodig
  • Social icons buttons; een extra plugin is niet meer nodig
  • Landingspagina’s; een extra plugin voor templates is niet meer nodig
elementor-popup-builder

De verschillende soorten pop ups in Elementor

Wil je gebruik maken van een popup op jouw website of webshop? Dan heb je de keuze uit een groot aantal verschillende soorten popups. Ik zal hieronder even de verschillende soorten pop-ups op een rijtje zetten. Al deze pop-ups kunnen gemaakt worden met de Elementor popup builder.

  • Bottom bar popup: Dit is een popup die onderaan het scherm wordt vertoond als balk. Deze kan erg handig zijn, omdat hij niet het volledige scherm in beslag neemt.
  • Classic popup: Dit is de popup die bij iedereen wel bekend is. Deze popup popt namelijk in het midden van het scherm op.
  • Fly-in popup: Deze popup is vergelijkbaar met de classis popup, maar zoals de naam al zegt komt de fly-in popup vliegen het scherm in. Bijvoorbeeld van een zijkant. 
  • Full screen popup: Deze popup neemt het volledige scherm in beslag. Dit kan erg handig zijn om de aandacht van de gebruiker te krijgen, maar let goed op dat je deze wel op de juiste pagina’s instelt. Op belangrijke pagina’s wil je dit namelijk voorkomen, omdat dit ervaren kan worden als irritant.
  • Hello bar popup: Een Hello bar popup is eigen hetzelfde als een bottom bar popup, maar dan staat de Hello bar popup bovenaan het scherm in plaats van onderaan.
  • Slide-in popup: De slide-in popup is ook een veel gebruikte popup. Deze popup komt namelijk vanaf de zijkant het scherm in en blijft daar vervolgens staan.

Zo maak jij zelf een converterende popup met Elementor

Nu jij alles weet over de popup builder van Elementor Pro is het tijd om te beginnen met het belangrijkste onderdeel van deze blog. Jij wilt namelijk weten hoe jij zelf eenvoudig een goed converterende popup kunt maken met Elementor. Hieronder zal ik jou dit stap voor stap uitleggen.

Om pop-ups te kunnen maken met Elementor heb je wel Elementor Pro abonnement nodig. Met de gratis versie is dit namelijk niet mogelijk. Op dit moment kun je het goedkoopste Elementor Pro pakket kopen voor $49 dollar. Dit kan ik daarom zeker aanraden om het maximale uit jouw website of webshop te halen.

1. Maak een koppeling met jouw email marketing programma

Als jij een van de e-mailmarketing partijen gebruikt die beschikt over een integratie met Elementor Pro is het handig om deze eerst aan elkaar te koppelen. Dit zorgt er namelijk voor dat een aanmelding via een formulier in een popup direct in de e-maillijst wordt toegevoegd.

Op dit moment heeft Elementor integraties voor de volgende e-mailmarketing partijen:

  • Mailchimp
  • ConvertKit
  • ActiveCampaign
  • MailerLite
  • Drup
  • MailPoet
  • HubSpot

Maak jij gebruik van een andere e-mailmarketing partij? Dan kun je ook deze koppelen alleen dien je dit dan te doen via Zapier. 

Om de koppeling tussen jouw e-mail marketing provider en Elementor te maken log je eerst in op jouw website. Vervolgens klikt je in het menu op Elementor → Instellingen  → Integraties. Hier kun je vervolgens de API code invullen bij de e-mailmarketing provider die jij gebruikt. De API code kun je uit het account halen van jouw e-mailmarketing provider.

Elementor-e-mail-marketing

2. Maak een popup aan

Zodra jij jouw e-mailmarketing provider/e-maillijst hebt gekoppeld aan Elementor pro is het tijd om jouw eerste popup te gaan maken. Het is hiervoor eerst belangrijk om een popup aan te maken. Dit doe je door in WordPress naar templates te gaan en vervolgens op popups te klikken. Klik hier vervolgens op de groene “Nieuwe toevoegen” knop.

Geef de popup vervolgens een naam. Deze is alleen zichtbaar voor jou en zal voor bezoekers niet zichtbaar zijn. Het maakt dus niet uit hoe jij jouw popup noemt, maar het is wel handig om de popup een herkenbare naam te geven. Klik vervolgens op “Template aanmaken”

Elementor-popup-maken

3. Kies een popup template of begin vanaf scratch

Zodra je hebt gedrukt op “Template aanmaken” opent de Elementor popup builder. Hier kun je direct een van de meer dan 100 popup templates kiezen, maar als je er liever zelf een wilt bouwen kan dat ook door op het kruisje rechts bovenin te klikken.

Heb je wel een geschikte Elementor popup template gevonden? Dan kun je deze template aanklikken en vervolgens klikken op “Importeren”. Voor een beginner is het makkelijker om gebruik te maken van een template, maar als programmeur of designer kun je prima vanaf scratch werken.

Elementor-popup-templates

4. Maak de popup naar jouw wens

Nu je een popup template hebt gekozen of op het kruisje hebt gedrukt krijg je de Elementor popup builder te zien. Wanneer je een template hebt gekozen zul je deze hier nu zien staan en wanneer je hebt gedrukt op het kruisje krijg je een wit veld te zien. 

Aan de linkerkant van het scherm zie je een menu waar jij jouw popup volledig naar wens kunt maken. Dit menu bestaat uit drie tabbladen en het is goed om deze ook even rustig door te lopen. Je kunt hier namelijk jouw volledige popup naar jouw wens maken en daar moet je gewoon even de tijd voor nemen. 

Op het tabblad instellingen vind je de volgende instellingen:

  • Veranderen van hoogte en breedte
  • Positie van de popup bepalen(links/midden/rechts)
  • Mogelijkheid om een overlay in te stellen zodat de pagina op de achtergrond niet meer zichtbaar is
  • De sluit knop uitschakelen
  • Een animatie toevoegen waarmee de popup het scherm in komt.

Op het tabblad stijl kun je de algemene stijl van de popup aanpassen. Denk bijvoorbeeld aan:

  • Het aanpassen van de achtergrond kleur
  • Een muis effect of scroll effect toevoegen
  • Lettertypes aanpassen 
  • Knoppen aanpassen en nog veel meer

Op het laatste tabblad geavanceerd kun je lastigere aanpassingen doen. Denk bijvoorbeeld aan:

  • Het vertonen van de sluit knop na een bepaald aantal seconden
  • Het uitschakelen van pop-ups wanneer er meerdere op een pagina actief zijn
  • Het scrollen op de pagina uitschakelen wanneer de popup is geopend
Elementor-pro-popup

5. Pas de popup aan(niet verplicht)

Nu je de basisinstellingen voor de styling van jouw popup hebt goed gezet is het tijd om het visueel ook naar jouw smaak te maken. Dit kun je doen met het visuele drag & drop systeem waar Elementor gebruik van maakt. Hier heb je dus geen technische kennis voor nodig en dat maakt Elementor Pro zo gigantisch populair. 

Je kunt zelf kiezen welke elementen jij uit het menu wilt gebruiken. Deze kun je vervolgens uit het menu slepen en naar de popup slepen. Zodra het element is geplaatst opent er een nieuw menu waar jij de wijzigingen voor dit element kunt doorvoeren. 

Wil je een popup voor e-mail aanmeldingen? Vergeet dan niet het formulier toe te voegen, want anders zullen er geen aanmeldingen binnen komen. Je kunt het formulier eenvoudig toevoegen met het formulier element in Elementor. Vergeet vervolgens niet het design en de verzendknop naar een bijpassende stijl te maken.

Tip: Maak gebruik van een afteller in jouw popup. Dit geeft de bezoeker het gevoel dat de aanbieding bijna verloopt en dat hij echt nu de actie moet uitvoeren. Door dit te doen verhoog je het conversiepercentage enorm.

6. Voeg een formulier toe en koppel deze aan jouw email marketing programma

Is jouw popup inmiddels volledig naar wens? Dan moet de popup nog verbonden worden aan de e-maillijst die jij wilt gebruiken. Op dit moment is Elementor namelijk wel gekoppeld aan jouw e-mailmarketing provider, maar het formulier in de popup nog niet aan de e-maillijst. Laten we dit daarom maar eens gaan doen.

Om dit te doen kun je de volgende stappen volgen:

  1. Klik op het formulier in de popup
  2. Ga in het menu onder inhoud naar “Actions After Submit”
  3. Kies hier vervolgens de e-mail marketing provider die jij gebruikt

Je kunt nu nog een aantal extra instellingen gebruiken, maar dit is afhankelijk van jouw wensen. Zo kun je ervoor kiezen om een dubbele opt-in te gebruiken of om de aanmelding direct aan jouw e-maillijst toe te voegen.

Elementor-pro-popup-builder

7. Publiceer de popup

Alles naar wens en juist ingesteld? Dan kun je nu klikken op de groene “Publiceer” knop. Wanneer je hierop drukt opent er een nieuw scherm. Als eerst moet je hier condities toevoegen. Dit is noodzakelijk, want hier bepaal je namelijk op welke pagina’s jouw popup vertoond moet worden of juist niet.

Klik daarom op “Add condition”. Er opent nu een balk waar je kunt kiezen op welke pagina’s de popup vertoond moet worden. Je kunt er ook voor kiezen om de popup op alle pagina’s binnen een archief te vertonen en vervolgens met een nieuwe conditie specifieke pagina’s uit te sluiten. Het instellen van de condities is super simpel, maar je moet wel even goed nadenken op welke pagina’s de popup vertoond moet worden en op welke niet.

Elementor-pop-up-publiceren

8. Stel triggers in

Zodra je de condities juist hebt ingesteld kun je op de groene knop “Next” drukken. Je komt nu in het scherm van de triggers. De triggers zijn zoals de naam als zegt de punten waarop de popup wordt aangeroepen en hij tevoorschijn komt.

Zoals je ziet heb je hier erg veel opties en heb je zelf ook nog eens erg veel controle. Zo kun je onder andere de volgende triggers kiezen:

  • Op de laadtijd van de pagina
  • Tijdens het scrollen
  • Wanneer de bezoeker bij een bepaald onderdeel van de pagina komt
  • Wanneer de bezoeker op een bepaalde knop drukt
  • Wanneer de bezoeker een bepaalde tijd niet actief is geweest
  • Wanneer de bezoeker de pagina wilt verlaten
Elementor-pro-popup-triggers

9. Stel eventueel geavanceerde regels in

Als laatste kom je nog in het scherm met de geavanceerde regels voor jouw Elementor popup. Deze bevatten belangrijke instellingen, maar zijn niet voor iedereen van toepassing.

Op deze pagina heb je instellingen waarmee je de volgende zaken kunt instellen:

  • Dat de popup pas tevoorschijn komt als een bezoeker meerdere pagina’s heeft bezocht
  • Een limiet instellen voor het aantal keer dat een bezoeker de popup kan zien
  • Jouw popup richten op bezoekers die afkomstig zijn vanaf een specifieke pagina
  • Mogelijkheid om popups te verbergen voor ingelogde gebruikers
  • Mogelijkheid om de popup te verbergen op bepaalde apparaten zoals mobiele telefoons

Om jouw bezoekers niet te irriteren met de pop-ups raad ik je aan om de optie “Show up to X times” optie aan te zetten. Met deze instelling zorg je er namelijk voor dat jouw bezoekers zich niet gaan irriteren aan de pop-ups, omdat ze hem maar een paar keer te zien kunnen krijgen.

Als je klaar bent met het maken en instellen van de door jouw gemaakt popup kun je klikken op “Opslaan en Afsluiten”. Vanaf dit moment is jouw popup namelijk actief en wordt hij vertoond.

Elementor-popup-advanced-rules

Is de Elementor Pro Popup Builder de beste popup plugin?

Een groot voordeel van Elementor Pro is dat je geen extra pop-up plugin meer nodig hebt die jouw website of webshop nog weer trager en zwaarder maakt. Verder beschikt de Elementor popup builder ook nog eens over alles wat jij nodig hebt voor een popup en meer dan 100 vooraf gebouwde templates die jij met één druk op de knop kunt importeren.

Zoals je in deze blog hebt gelezen kun je met Elementor alle soorten popups maken en volledig zelf bepalen waar, wanneer en hoe deze vertoond moeten worden aan jouw website bezoekers. Een makkelijkere en snellere manier om zelf pop-ups te maken zul je daarom echt niet vinden.

Vergeet niet dat je voor het maken van Elementor pop-ups een Pro licentie nodig hebt. Op dit moment kun je het goedkoopste pakket aanschaffen voor $49 dollar.

Tim Gerrits

Tim Gerrits

Mijn naam is Tim Gerrits en ik heb een passie voor het bouwen van websites. Daarnaast heb ik de afgelopen jaren veel kennis opgedaan over WordPress thema’s, WordPress page builders, SEO, WordPress hosting en alles wat hierbij komt kijken. Via deze blog help ik jou bij het vinden van het beste materiaal voor jouw website!

Gerelateerde blogs

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *