Hoe maak je een WordPress popup?

3 jan 2024 | webdesign

wordpress popup

Oké toegeven: popups zijn verschrikkelijk irritante dingen, maar ze werken wel. Ze zorgen er namelijk voor dat jouw bezoekers eerder tot actie overgaan, zoals het zich abonneren op je nieuwsbrief. Maar hoe maak je eigenlijk een popup in WordPress? In dit artikel lees je hoe je een WordPress popup maakt.

Wat is een popup?

Een popup is een extra venster wat kan verschijnen als je een website bezoekt. Het springt als het ware in je beeld. Vaak heeft het tot doel om jou als bezoeker tot actie aan te zetten, we noemen dat een call tot action (CTA). Een voorbeeld van een CTA is “Klik hier om mijn gratis e-book te downloaden”.

Uiteraard kan een popup ook belangrijke informatie laten zien, zoals de vakantiesluiting van een fysieke winkel. Of een school kan de komende open dag nog eens extra in de kijker zetten.

Wat doet een popup?

Popups werken echt: mensen gaan effectief je gratis weggever downloaden of zich inschrijven voor de open dag van een basisschool in de wijk. Popups zorgen er dus voor dat mensen sneller tot actie overgaan.

Maar omdat een popup over je gewone pagina verschijnt, treedt er ook een vertraging op. Je laadsnelheid vermindert doorgaans met enkele milliseconden. Hou dit zeker in je achterhoofd bij het maken van een popup.

Hoe gebruik je een popup?

Wel kunnen popups als behoorlijk opdringerig overkomen, gebruik ze dus met mate. Wil je dat mensen zich inschrijven op je nieuwsbrief? Probeer er dan bijvoorbeeld voor te zorgen dat deze popup pas verschijnt zodra mensen je website verlaten. Deze verschijnt dan pas wanneer mensen naar een andere pagina surfen.

Dit is dus goed om te weten: popups kun je op allerlei manieren instellen. Je kan ze laten verschijnen op alle pagina’s, of juist op een selectie. Ze kunnen meteen verschijnen, of pas na enkele seconden. Denk hier dus zeker over na.

Hoe bouw je een WordPress popup?

Verschillende WordPress-bouwers hebben de mogelijkheid om popups te bouwen. Met Elementor kun je het zonder codeerwerk voor elkaar krijgen, met Divi heb je wat extra code nodig. Maar die kun je vinden via een simpele zoekopdracht in Google.

Daarnaast is er een manier die bij de meeste thema’s en bouwers kan werken, namelijk een plugin (stukje software of app voor je website) gebruiken. Er zijn talloze popup-bouwers, maar met PopupBuilder zit je meestal wel goed (uitzonderingen daargelaten). Je herkent deze aan het icoon van de hamster. PopupBuilder is ontwikkeld door Looking Forward Software Incorporated uit Delaware, VS.

Twijfel je nog tussen de themabouwers Divi en Elementor? Ontdek dan hier of Divi of Elementor beter bij je past.

Maak je eigen WordPress popup met PopupBuilder

Als ondernemer of organisatie kom je al een heel eind uit de voeten met de gratis versie van PopupBuilder. Deze biedt namelijk de mogelijkheid om eigen creaties of simpele dingen als inschrijfformulieren voor nieuwsbrieven te laten zien. Ook kan het onder andere pushberichten laten verschijnen. Heb je nood aan meer? Dan kun je een betaalplan overwegen.

Om zoveel mogelijk het design in eigen handen te houden, kun je overwegen om een eigen popup te ontwerpen. Van daaruit vertrekken we in dit stappenplan.

1. Ontwerp een geweldige popup in Canva

Met een online tool als Canva kun je prachtige designs maken. Dit biedt de mogelijkheid om jouw huisstijl terug te laten komen in de popup. Denk aan kleuren, grafische vormgeving, lettertype en foto’s.

Ga je dit in Canva doen? Gebruik dan het sjabloon ‘kaart’ en exporteer het in een afbeeldingsformaat als .png of .jpg. Let er na het exporteren ook even op of de afbeelding niet te zwaar is. In de regel geldt: hoe kleiner, hoe beter. Maar pas op met kwaliteitsverlies, je wilt de pixels niet kunnen zien in je popup!

2. Download en installeer PopupBuilder

Ga naar je het dashboard van je WordPress-website en bezoek het onderdeel plugins. Klik op nieuwe plugin toevoegen. Zoek naar PopupBuilder.

Nu zie je een heleboel plugins voor popups verschijnen, maar het gaat om de plugin met het bevericoontje. Klik op installeren en vervolgens op activeren.

3. Load je eerste popup up

Nu is er in je WordPress-dashboard een nieuwe functionaliteit bijgekomen: de popup bouwer. Je vindt PopupBuilder terug in het menu aan de linkerkant. Schuif erover en klik op “add new”. Vervolgens klik je op “image” en zet je je Canva-creatie op de website. Voeg een titel toe (dat is voor jezelf) en scroll naar beneden.

Popup Builder is één van mijn favoriete tools. Benieuwd naar meer? Ontdek hier mijn favoriete tools voor zowel webdesign als fotografie.

4. Stel je eerste popup in

Nu begint het echte werk. Met PopupBuilder kun je een heleboel. Zeker in het begin is het eventjes zoeken naar waar je wat kan vinden. We gaan nu verder onder “image settings”. Sommige onderdelen slaan we over, omdat deze voor de gevorderde gebruiker zijn die wilt betalen voor extra service.

  • Display rules: hier geef je aan waar je de popup wilt laten verschijnen. Is dat overal, voor een bepaalde pagina, voor een selectie blogs of bij een aantal producten van je webshop? Er is veel mogelijk, probeer dat zeker uit.
  • Events: nu kun je instellen of de popup opent bij het laden van een pagina of bij het klikken op of het schuiven met de muis over iets. Ook kun je de vertragingssnelheid (“delay”) instellen.
  • Designs: hier kun je kiezen hoe je achtergrond overkomt als je je popup laat zien.
  • Closing: dat biedt onder andere de mogelijkheid om een sluitknop te laten zien. Wel zo handig voor sommige mensen.
  • Dimensions: hier bepaal je hoe groot de popup in beeld verschijnt.
  • Advanced: interessant voor de doe-het-zelvers, want hier kun je via “redirect” aangeven naar welke pagina je mensen wilt sturen. Staat er op de je popup “schrijf je nu in voor mijn nieuwsbrief”, zorg dan dat je de mensen linkt naar je nieuwsbriefpagina. Ook kun je hier instellen hoe vaak de popup verschijnt bij een bezoek aan je site.
  • Floating button: zo kun je je popup ook in een hoekje klein laten verschijnen. Risico is wel dat mensen dit als opdringerig over vinden komen.
  • Statistics: hier zie je het aantal views. Indien je wenst, kun je deze resetten naar nul.

Vergeet nu niet om op “update” te klikken, anders gaan je aanpassingen verloren.

5. Publiceer je popup

Dit kan via het algemene popup-venster. Je kan dat bereiken door in je WordPress-dashboard naar “All popups” onder “PopupBuilder” te gaan. Nu kun je simpel de status aanpassen.

En dan nu is het tijd om je popup uit te testen. Doe dat zeker op verschillende apparaten. Zie je ruimte voor verbetering? Je kan dingen altijd achteraf veranderen.

Tegenwoordig zijn bijna alle websites responsief; ze passen zich aan de verschillende apparaten aan. Werk je in Divi? Volg dan hier het stappenplan om een responsieve website in Divi te maken!

Conclusie

Hoewel popups vervelende dingen zijn, zijn ze wel heel effectief. Ze zetten mensen aan tot actie en kunnen mensen eenvoudig informeren. Het andere bijkomende nadeel is dat het de laadsnelheid van je website met enkele milliseconden vertraagt.

Om je huisstijl helemaal terug te laten komen in je popup, werk je het best in Canva en met de plugin PopupBuilder. Zeker PopupBuilder biedt heel wat functies. Dat is in het begin eventjes zoeken. Veel succes met maken van popups!

Wat doe jij als je een popup ziet?

Dit artikel bevat meerdere affiliate links. Kijk hier voor meer informatie.

Over Jochem

Ik ben Jochem Oomen, webdesigner en fotograaf. Het is mijn doel om duurzame ondernemers, organisaties en scholen te helpen aan meer klanten, deelnemers of leerlingen. Dat doe ik door middel van duurzaam webdesign en minimalistische fotografie. Lees hier meer over mij

Vond je dit artikel interessant? Deel het via de knoppen op social media!

Lees hier meer

Hoe maak je een duurzame website?

Wist je dat het internet één van de grootste vervuilers op deze planeet is? En dat websites een hoog energieverbruik hebben? Tijd dus om je eigen website te verduurzamen. In dit artikel lees je hoe je zelf een duurzame website kan maken. Waarom zijn websites vervuilend?“Als het internet een...

Hoe kun je duurzaam fotograferen? | 10 tips

Wist je dat er ook zoiets als duurzame fotografie bestaat? Als fotograaf kun je namelijk je ecologische voetafdruk verkleinen. Maar duurzaam fotograferen, hoe doe je dat? Je leest het in dit artikel. Waarom is fotografie niet altijd zo duurzaam?Sinds de digitale fotografie haar intrede deed,...

Waarom kiezen voor Ecosia?

Bij iedere online zoekopdracht laat je een ecologische voetafdruk achter. Bij groene zoekmachine Ecosia wordt dat gecompenseerd. Want, terwijl je zoekt, worden er nieuwe bomen geplant. Hoe werkt dit? En waarom zou je kiezen voor Ecosia? Je leest het in dit artikel.Waarom zijn zoekmachines...

error: Content is protected !!

Pin It on Pinterest

Share This