Popup maken in WordPress met Elementor Pro in 5 stappen

Popup maken in WordPress? Wanneer je werkt met Elementor Pro heb je hier geen extra plugin voor nodig. Ook hoef je geen code van je mailingtool toe te voegen aan je website (maar dit kan uiteraard wel). Een popup maken in WordPress kun je voor verschillende redenen doen: bezoekers wijzen op een actie, ze laten inschrijven voor een nieuwsbrief of bijvoorbeeld voor het tonen van een contactformulier of een video. Maar je kunt de popups ook gebruiken voor het maken van een mega menu.

Op onze website maken ook gebruik van verschillende popups, allemaal gemaakt met de popup builder van Elementor Pro. In dit artikel leg ik je uit hoe je een popup maakt voor een nieuwsbrief.

Tip: lees ook hoe je een popup maakt voor een video!

Stap 1: maak een nieuwe popup

Om een nieuwe popup te maken ga je naar Templates -> Popups. Klik hier vervolgens op ‘Nieuwe toevoegen’.

Stap 2: Kies een popup template

Wanneer je voor het eerst werkt met popups maken in WordPress met Elementor Pro, is het handig om te beginnen met een popup template uit de Elementor bibliotheek. Hier heb je ruime keuze uit verschillende popups.

Popup categorieën

Een popup maken in WordPress kun je op verschillende manieren doen. Zo kun je een hello bar instellen, een full screen popup of slide-in popup. Zie de voorbeelden hieronder:

Stap 3: de popup aanpassen

Het maken van de popup werkt op dezelfde manier als het opmaken van pagina’s met Elementor. Echter, zijn er bij popups een aantal belangrijke instellingen. Deze neem ik even met je door:

Popup instellingen

Onder instellingen (klik linksonderin je Elementor panel op het tandwieltje) vind je de instellingen voor de popup.

Breedte en hoogte popup aanpassen

Afhankelijk van wat voor popup je wilt maken, kun je de breedte van de popup hier aanpassen. Om de hoogte in te stellen van de popup heb je drie verschillende opties:

Fit to content: hoogte is afhankelijk van de content die je gebruikt
Fit to screen: hoogte van de popup is gelijk aan het scherm van de bezoeker
Aangepast: Hiermee kun je zelf de hoogte van de popup bepalen

Ik gebruik zelf meestal ‘Fit to content’.

Positie op het scherm aanpassen

Met ‘Positie’ pas je de positie van de popup op het scherm aan. Zo kun je hem bijvoorbeeld in het midden tonen of rechtsbovenin, linksonderin, midden onderin etc.

Overlay

Met de overlay geef je de achtergrond (je website dus) een kleur waardoor de popup meer opvalt. Zo kun je deze bijvoorbeeld wat donkerder maken, zodat je de popup meer in het oog springt. De kleur van de overlay pas je aan in het tabblad ‘Stijl’.

Close button

Het is wel zo netjes om een close button in je popup te gebruiken. Deze optie zet je dan aan. In het tabblad ‘Stijl’ kun je de kleur en grootte van de close button aanpassen.

Entrance animation

Hiermee kun je de animatie instellen waarmee je popup wordt getoond. Bijvoorbeeld met een zoom in, fade in, bounce up etc.

Opmaak aanpassen

De opmaak en content van de popup kun je op dezelfde manier aanpassen als dat je pagina’s op maakt met Elementor. Wil je de achtergrondafbeelding van de popup aanpassen? Dit werkt iets anders dan je gewend bent in Elementor. Lees hoe je achtergrondafbeelding aanpast voor popups.

Vergeet niet niet om de popup ook voor mobiele apparaten te optimaliseren.

Stap 4: Inschrijfformulier toevoegen

Als je een popup maakt voor een nieuwsbrief moet je een formulier toevoegen (het kan zijn dat deze al in het template zit dat je hebt gekozen). Dit werkt op dezelfde manier als het toevoegen van een inschrijfformulier op een pagina. Ook kun je het inschrijfformulier direct koppelen aan je mailingtool.

Stap 5: Popup publiceren

Als je klaar bent met het opmaken van de popup kun je deze gaan publiceren. Je krijgt vervolgens een aantal instellingen te zien:

Publicatie condities instellen

Met publicatie condities kun je instellen op welke pagina’s of in welke categorieën je de popup wilt tonen. Zo kun je bijvoorbeeld ook bepaalde pagina’s uitsluiten. In dit artikel lees je meer over het instellen van publicatie condities.

Triggers instellen

Bij popups is het belangrijk om de juiste triggers in te schakelen. Elementor biedt uitgebreide keuze aan triggers. Zie hieronder:

On Page Load:
Stel in binnen hoeveel tijd na het laden van de pagina je de popup wilt tonen.
On scroll:
Toon de popup als een bezoeker naar beneden of naar boven scrollt.
On scroll to element:
Laat de popup zien als de bezoeker naar een bepaald element op de pagina scrollt
On click:
Toont de popup als de bezoeker ergens op de website klikt.
After inactiviteit:
Toont de popup als de bezoeker niet meer actief (lijkt) te zijn op de website.
On page exit intent:
Toon de popup als de bezoeker de website wil verlaten.

Regels instellen

Daarnaast heb je nog een aantal opties bij het instellen van de popup. Hiermee kun je bijvoorbeeld voorkomen dat een popup te vaak wordt getoond bij je bezoekers. Ook kun je de popup uitschakelen voor inlogde gebruikers. Hieronder een overzicht van alle opties:

Stel in na hoeveel pagina bezoeken je popup wilt tonen
Toon de popup pas na een aantal sessies
Geef aan hoe vaak je de popup wilt tonen
Verberg of toon de popup wanneer een bezoeker van een bepaalde url komt
Toon de popup als bezoekers via een zoekmachine, interne url of externe url komen
Schakel de popup uit voor ingelogde gebruikers (aanrader als je zelf veel werkt met Elementor!)
Geef aan op welke apparaten je de popup wilt tonen.

Popup tonen met klik

Wil je dat de popup pas wordt getoond als iemand bijvoorbeeld op een button klikt? Dan hoef je geen condities, triggers of regels in te stellen voor de popup en kun je het bovenstaande scherm gewoon sluiten. Om de popup te tonen, maak je gebruik van een ‘dynamische url’ als je de knop toevoegt. Je kiest hier voor ‘Popups’ en selecteert vervolgens de popup die je hebt gemaakt.

Statistieken bijhouden popups

Als er een nadeel te noemen is, dan is het dat de mogelijkheid om statistieken bij te houden ontbreekt. Je kunt niet zien hoe vaak de popup is getoond en wat het conversiepercentage is. Als marketeer vind ik dit wel een groot gemis. Als je dit minder belangrijk vindt, kan ik een popup maken in WordPress met behulp van Elementor zeker aanbevelen!

Succes!