Pop-ups kunnen een effectieve manier zijn om de aandacht van je bezoekers te trekken. Met de gratis WordPress-plugin Boxzilla kun je eenvoudige pop-ups maken zonder dat je code hoeft te schrijven.
In dit artikel laten we je stap voor stap zien hoe je een pop-up instelt en aanpast. Als je meer opties wilt zoals een koppeling met WooCommerce of Google Analytics dan bieden ze hiervoor een aantal premium add-ons die je kunt kopen.
Stap 1: Installeer en activeer Boxzilla
Om te beginnen moet je de WordPress plugin Boxzilla installeren en activeren in je WordPress website:
- Log in op je WordPress-dashboard.
- Ga naar Plugins > Nieuwe plugin.
- Zoek naar “Boxzilla“.
- Klik op Nu installeren en vervolgens op Activeren.
Je vindt de instellingen van Boxzilla nu in het menu onder Boxzilla.
Stap 2: Maak een nieuwe pop-up
Zodra de plugin is geïnstalleerd, kun je een nieuwe pop-up maken:
- Ga in het WordPress dashboard naar Boxzilla > Nieuwe Box.
- Geef de pop-up een titel (dit is alleen zichtbaar in de back-end).
- Voeg de inhoud toe die je in de pop-up wilt tonen. Dit kan tekst, een afbeelding of een formulier zijn.
Optioneel: Een inschrijfformulier toevoegen
Wil je een e-mailinschrijfformulier toevoegen? Gebruik dan een shortcode van bijvoorbeeld Mailchimp, Contact Form 7 of Gravity Forms.
Stap 3: Instellen wanneer de pop-up verschijnt
Bij het tabblad Weergave kun je bepalen hoe en wanneer de pop-up wordt weergegeven:
- Trigger op scrollpercentage → De pop-up verschijnt als de bezoeker een bepaald percentage van de pagina heeft gescrolld.
- Trigger op tijdsduur → De pop-up verschijnt na een aantal seconden.
- Trigger op exit intent → De pop-up wordt getoond wanneer een bezoeker de pagina dreigt te verlaten.
- Klik-trigger → De pop-up wordt alleen weergegeven als een bezoeker op een specifieke knop of link klikt.
Je kunt deze instellingen combineren om een effectieve pop-up te maken.
Stap 4: De stijl en positie aanpassen
Bij het tabblad Weergave-opties kun je de pop-up visueel aanpassen:
- Breedte en hoogte instellen (in pixels of procenten)
- Positie op de pagina (bijvoorbeeld midden, rechtsboven of linksonder)
- Achtergrondkleur en rand aanpassen om de pop-up aan te passen aan je website-design
Tip: Gebruik je een custom CSS-stijl? Voeg dan extra stijlen toe via Weergave > Customizer > Extra CSS.
Stap 5: De pop-up activeren en testen
Als je tevreden bent met je instellingen:
- Klik op Publiceren om de pop-up live te zetten.
- Test de pop-up door je website in een incognito venster te openen.
- Pas de instellingen aan als dat nodig is.
Wil je de pop-up tijdelijk uitschakelen? Zet dan de status van de Box op Concept.