Heb jij een website of webshop gemaakt met Elementor Pro? Dan kun jij jouw website optimaliseren door gebruik te maken van de Elementor popup builder. Met deze popup builder kun jij zonder enige technische kennis pop ups maken voor op jouw website.
Popups zijn een erg goede optimalisatie voor jouw website wanneer jij meer uit jouw website wilt halen. Denk bijvoorbeeld aan het verzamelen van e-mailadressen voor e-mailmarketing of het promoten van een bepaalde aanbieding die tijdelijk actief is.
In deze blog ga ik jou dan ook stap voor stap uitleggen hoe jij zelf een pop up kunt maken met Elementor Pro. Ook ga ik je laten zien hoe jij deze pop ups kunt instellen, zodat ze op de juiste pagina’s en juiste momenten verschijnen.
Wat is een popup?
Een WordPress website maken of WordPress webshop maken kan in eerste instantie erg eenvoudig zijn, maar op een gegeven moment wil je jouw website optimaliseren en dat kan met behulp van popups.
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 melding 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 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.
De verschillende soorten pop ups in Elementor
Wil je gebruik maken van de Elementor popup builder op jouw website of webshop? Dan is het goed om te weten dat je de keuze hebt 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. Ook beschikt Elementor Pro hiervoor over popup templates.
- 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 kun jij een Elementor popup maken
Nu jij precies weet wat popups zijn en welke soorten popups jij kunt maken met Elementor Pro is het tijd voor het belangrijkste onderdeel. Jij wilt namelijk weten hoe jij met behulp van Elementor Pro zelf popups kunt maken. Hieronder zal ik jou dit stap voor stap uitleggen.
Om pop-ups te kunnen maken met Elementor heb je als eerst een 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
Wil jij de popups gebruiken om e-mailadressen te verzamelen voor jouw e-mailmarketing funnel? Dan moet je als eerst een koppeling maken tussen Elementor en jouw e-mailmarketing programma. 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
- Drip
- 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 WordPress 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. Vervolgens klik je op “Validate API Key” en daarna op “Wijzigingen opslaan”.
2. Maak een popup aan
Zodra jij jouw e-mailmarketing provider 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 in het menu 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”.
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. Hier ben je dus helemaal vrij om te kiezen wat jij zelf wilt.
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
5. Pas de popup aan
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. Koppel het formulier aan jouw e-mailmarketing provider
Deze stap is alleen van toepassing wanneer jij een popup wilt gebruiken om e-mailadressen te verzamelen. Het is in dit geval belangrijk dat je een formulier aan jouw popup toevoegt, maar waarschijnlijk heb je dat al wel gedaan. Je kunt natuurlijk ook een Elementor Popup template kiezen dat beschikt over een formulier.
Op dit moment is Elementor al 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:
- Klik op het formulier in de popup
- Ga in het menu onder inhoud naar “Actions After Submit”
- 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.
7. Publiceer de popup & condities instellen
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. Standaard wordt de popup op alle pagina’s getoond. Je kunt er ook voor kiezen om de popup op alle pagina’s binnen een bepaald 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.
Het is ook goed om te weten dat je bepaalde pagina’s of berichten juist kunt uitsluiten. Hiervoor pas je “Include” aan naar “Exclude”. Dit kun je doen door op de naam te klikken.
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 om de door jou ingestelde pagina’s en berichten.
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
Wanneer je een item hebt aangevinkt komen er in sommige gevallen nieuwe instellingen kijken. Zo kun je bijvoorbeeld aangeven naar welk scroll percentage de popup vertoond moet worden als je hebt gekozen voor “Tijdens het scrollen”.
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 jou gemaakt popup kun je klikken op “Opslaan en Afsluiten”. Vanaf dit moment is jouw popup namelijk actief en wordt hij vertoond.
Wat zijn de voordelen van de Elementor pop ups?
Inmiddels heb ik jou precies laten zien wat popup zijn, welke verschillende soorten pop ups er zijn en hoe jij met behulp van Elementor Pro zonder enige technische kennis jouw eigen pop ups kunt maken. In principe is dit alle informatie die jij nodig hebt om aan de slag te kunnen, maar ik wil het ook nog even hebben over de voordelen van de Elementor Pro popups. Zeker wanneer jij een Elementor website maken gaat.
1. Super makkelijk pop ups maken
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
Is de Elementor Pro Popup Builder de beste popup plugin?
Nu we zijn aangekomen aan het einde van deze blog is het tijd voor een conclusie, want kun jij nu het beste pop ups maken met de Elementor popup builder?
Ja, zeker wanneer jij op dit moment al werkt met Elementor Pro. Je hebt hierdoor namelijk geen extra plugins nodig die jouw website of webshop trager maken. Daarbij kun je met Elementor Pro zonder enige technische kennis een popup maken die aan al jouw eisen voldoet. En je hebt ook nog eens keuze uit een groot aantal popup templates.
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.
Elementor Popup Maken - FAQ
Beschikt Elementor over een popup builder?
Kun je gratis pop-ups maken met Elementor?
Kun je een Elementor popup openen op een button klik?
Hoe bewerk je een Elementor popup?
Tim Gerrits
Mijn naam is Tim Gerrits en ik heb een passie voor het bouwen van websites en webshops. Via deze blog help ik jou met het bouwen van jouw eigen website, webshop of online cursus. Daarnaast review ik ook WordPress thema’s, page builders en hostingpartijen zodat jij direct met de juiste tools van start kunt gaan!
