Popups behoren tot de meest besproken onderwerpen van het webdesign. Een goeie popup kan je klanten opleveren, maar verkeerd gebruik van popups kan bezoekers juist van je site wegjagen.
Elementor Pro biedt je de mogelijkheid om eenvoudig een popup toe te voegen aan je website. Dat scheelt weer een plugin. Wil je weten hoe je een popup maakt met behulp van Elementor? Lees dan verder.
Stap 1: Popup toevoegen
Ga in het menu van je WordPress dashboard met je muis op Templates staan en klik in het submenu dat verschijnt op ‘Popups’.
Vervolgens klik je op de groene knop om een popup toe te voegen. Je kunt hier ook meteen een naam meegeven aan je popup. Bijvoorbeeld ‘Inschrijving nieuwsbrief’ als je leads wil verzamelen voor je nieuwsbrief, of ‘Black Friday’ als je met een popup duidelijk wilt maken dat je op Black Friday korting geeft. De naam van de popup is puur voor je eigen overzicht en verschijnt nergens op je website.
Stap 2: een template kiezen voor je popup
Met Elementor Pro krijg je toegang tot tientallen templates voor een popup. Superhandig voor als je voor het eerst een popup gaat maken, maar ook voor meer ervaren gebruikers is het een uitkomst.
Scroll even door de beschikbare templates en kies een popup die past bij het doel waarvoor je deze wilt inzetten. Dat kun je doen door met je muis op de popup te gaan staan die je wilt en op ‘Invoegen’ te klikken (verschijnt linksonderin).
Stap 3: Popup bewerken met Elementor
Het bewerken van een popup met Elementor is heel simpel en gaat op dezelfde manier als dat je een pagina bewerkt.
Maar let op! Je kunt uiteraard ook alle instellingen aanpassen die specifiek over de popup gaan. Dat doe je door onderin de editor op het tandwieltje te klikken. In de titel van de editor komt dan ‘Popup instellingen’ te staan.
Wat kun je dan allemaal aanpassen? Ik loop het lijstje even bij langs:
Breedte
Dit gaat uiteraard over hoe breed de popup wordt. Je kan de breedte in het aantal pixels (PX) uitdrukken of in VW (dat staat voor viewport width, waarbij 100 staat voor de volledige breedte, 50 voor de helft enzovoort). Bepaal de breedte aan de hand van de schermpositie waar je de popup wilt tonen. Een popup die midden in het scherm verschijnt maak je bijvoorbeeld 800 pixels breed of 50 VW, terwijl een popup die aan de onder- of bovenkant wordt getoond juist wel over de volledige breedte kan (100 VW).
Hoogte
De hoogte kun je op drie verschillende manieren bepalen:
- Fit to content (zo hoog als de inhoud van de popup)
- Fit to screen (zo hoog als het scherm dat iemand gebruikt)
- Aangepast (als je hiervoor kiest verschijnen er twee extra opties: custom height en content position)
Met custom height kun je de hoogte van de popup uitdrukken in pixels (PX) of in VH (dat staat voor viewport height, waarbij 100 staat voor volledige hoogte, 50 voor de helft enzovoort).
Positie
Met de horizontale positie kies je of je de popup links, rechts of in het midden van het scherm wilt tonen.
Met de verticale positie kies je of je de popup boven, onder of in het midden van het scherm wilt tonen.
Overlay
Om de popup extra onder de aandacht te brengen, kun je ervoor kiezen om de achtergrond een kleurtje te geven. Meestal is dit doorzichtig zwart, maar dat hoeft natuurlijk niet. Zet het schuifje maar eens om en kijk wat er gebeurt. Als je de overlay aanzet, verschijnt er onder het tabje ‘stijl’ een extra optie waarmee je de overlay kunt aanpassen: de kleur, doorzichtigheid of zelfs het toevoegen van een afbeelding (dat laatste raad ik overigens niet aan).
Sluitknop
De sluitknop (close button) voeg je toe om de gebruiker de mogelijkheid te geven de popup te sluiten. Zelf vind ik dit een must, want een popup die je moeilijk of niet weg kunt klikken is voor veel mensen een absolute afknapper.
Ook voor de close button verschijnen er in het tabje stijl extra opties, zoals de positie en kleur.
Animaties
Je kunt zowel een inkomende animatie (entrance animation) als uitgaande animatie (exit animation) kiezen. De meest gebruikte animaties zijn de fade in en fade out of de slide in en slide out. Je kunt er ook voor kiezen om geen animatie toe te voegen. De popup ‘knalt’ dan het beeldscherm van de gebruiker binnen.
Met de ‘animation duration’ bepaal je ho lang het duurt voordat de animatie is afgerond. Zet je de animatie ‘fade in’ bijvoorbeeld op 1, dan duurt het 1 seconde voordat de popup helemaal is verschenen.
Als je klaar bent met het instellen van de popup, kun je deze gaan stijlen. Dat doe je onder het kopje ‘stijl’. Je kunt onder meer de marges, lettertypen en kleuren aanpassen, op dezelfde manier als in de editor van bijvoorbeeld een pagina. Ook kun je widgets toevoegen, zoals een (contact)formulier, een afbeelding of een heading.
Stap 4: De popup publiceren
Popup klaar voor gebruik? Dan is het tijd om deze te publiceren. Als je op de groene knop met publiceren klikt, zie je dat er echter eerst nog een popup verschijnt (hoe toepasselijk).
Elementor wil namelijk eerst nog even van je weten waar op je website de popup getoond moet worden, wat de trigger moet zijn (wanneer de popup moet verschijnen) en eventueel nog wat extra voorwaarden.
Conditions
Onder het tabje conditions bepaal je waar de popup getoond moet worden. Klik daarvoor op de knop ‘add condition’. Wil je de popup op je hele website tonen? Dan kies je voor include – entire site. Er zijn echter nog veel meer mogelijkheden om de popup wel en niet te laten zien op bepaalde pagina’s of bepaalde onderdelen van je website. Bekijk deze video om de mogelijkheden te zien:
Triggers voor de popup
Het succes van een popup wordt onder meer bepaald door de trigger. Dit is het moment of de actie waarop een popup wordt getoond. Je kent vast wel van die popups die ineens verschijnen op het moment dat je snel met je cursor naar de bovenkant van je scherm gaat. Deze popup wordt geactiveerd omdat de website vermoedt dat je van plan bent de pagina te verlaten. Deze trigger heeft Elementor ook voor jouw popup, maar er zijn er meer:
(let op: ik heb alle triggers aangezet om te laten zien welke mogelijkheden er zijn. Normaal gesproken kies je per popup één trigger)
- on page load: de popup verschijnt na het aantal seconden dat jij instelt. Zet je dit op 0 seconden dan wordt de popup tegelijk met de pagina ingeladen.
- on scroll: de popup verschijnt nadat een gebruiker een bepaald percentage van een pagina heeft doorgescrolld. Staat standaard op 50%, waarbij de popup dus verschijnt als de gebruiker op het midden van de pagina is.
- on element: de popup verschijnt als de gebruiker langs een specifiek gedeelte van de pagina scrollt. Dit kun je instellen aan de hand van de selector.
- on click: de popup verschijnt als de bezoeker ergens op klikt. Dit kun je bijvoorbeeld gebruiken als je de popup als menu gebruikt, of als een soort modal.
- after inactivity: de popup verschijnt nadat een bezoeker een bepaald aantal seconden geen enkele activiteit op een pagina heeft vertoond.
- on page exit intent: dit is de trigger die ik hierboven al beschreef. De popup verschijnt als de gebruiker de intentie lijkt te hebben om de pagina te verlaten.
Extra regels voor de popup
Om je popup nog beter af te stemmen op de bezoeker, biedt Elementor je de mogelijkheid om een aantal extra regels in te stellen.
(let op: ik heb in de afbeelding alle extra regels aangezet om te laten zien welke mogelijkheden er zijn)
Je hebt dus de volgende mogelijkheden:
- show after X page views: de popup wordt pas vertoond wanneer de bezoeker een X aantal (kun je zelf instellen) pagina’s op je website heeft bezocht.
- show after X sessions: de popup wordt pas vertoond wanneer de bezoeker je website een X aantal (kun je zelf instellen) keer heeft bezocht. Hiervoor wordt gebruik gemaakt van cookies.
- show up to X times: de popup wordt slechts een X aantal keer aan dezelfde bezoeker vertoond.
- when arriving from specific URL: vertoon of verberg de popup als een bezoeker via een specifieke URL op je website komt.
- show when arriving from: de popup wordt alleen vertoond wanneer de bezoeker op de pagina komt via een zoekmachine, via een externe link of via een interne link
- hide for logged in users: de popup wordt niet vertoond aan een gebruiker die is ingelogd (bijvoorbeeld jij als editor, maar ook voor een website met een inloggedeelte voor gebruikers)
- show on devices: de popup wordt standaard vertoond op alle apparaten (mobiel, tablet en computer/laptop). Met deze optie kun je voorkomen dat de popup wordt vertoond op één van deze apparaten.
- show on browsers: de popup wordt standaard vertoond op alle browsers. Met deze optie kun je voorkomen dat de popup wordt vertoond op een specifieke browser.
Popup met Elementor
Dat was het! Je hoeft alleen nog maar op de groene knop met ‘save and close’ te klikken en je popup is actief op je website.
Zoals je ziet zijn er veel mogelijkheden, maar het maken van een popup met Elementor is vrij eenvoudig. Je kunt ook deze video bekijken, waarin Elementor je stap voor stap laat zien hoe je een popup maakt: