Elementor pop-ups aanpassen

Inleiding

Met Elementor Pro kunt u mooie en krachtige pop-ups maken voor bijvoorbeeld nieuwsbrieven, acties, meldingen of cookie-notificaties. In deze handleiding leert u hoe u bestaande pop-ups kunt bewerken, ontwerpen, activeren en koppelen aan triggers zoals scrollen, klikken of verlaten van de pagina.

1. Waar vind ik de pop-ups?

Alle pop-ups worden beheerd via de Elementor Theme Builder.

1. Log in op www.uwdomein.nl/wp-admin.
2. Ga naar Elementor → Templates.
3. Klik op Popups.

Hier ziet u een overzicht van alle gemaakte pop-ups.

2. Een popup openen om te bewerken

1. Ga naar Elementor → Templates → Popups.
2. Beweeg uw muis over de pop-up die u wilt bewerken.
3. Klik op Bewerken met Elementor.

De pop-up opent nu in de Elementor editor en u kunt alle onderdelen aanpassen, net als bij normale pagina's.

3. Ontwerp en inhoud aanpassen

Teksten aanpassen

• Klik op een tekstvak.
• Bewerk de tekst in de zijbalk of direct in de pop-up.

Afbeelding aanpassen

• Klik op de afbeelding.
• Kies een nieuwe afbeelding via de mediabibliotheek.

Knoppen aanpassen

• Selecteer de knop.
• Pas tekst, link en stijl aan.

Stijl wijzigen (achtergrond, randen, animaties)

• Klik op Popup → Stijl in de linker zijbalk.
• U kunt hier o.a. instellen:
  • Achtergrondkleur of afbeelding
  • Padding & marges
  • Randradius (afgeronde hoeken)
  • Box-shadow (schaduw)
  • Animatie bij openen

4. Weergave-instellingen van de pop-up

Pop-up instellingen bepalen hoe en waar de pop-up wordt getoond.

1. Open de pop-up in Elementor.
2. Klik links onder op het tandwiel (Instellingen).
3. Ga naar Popup Settings → Layout / Stijl / Advanced.

Belangrijke instellingen:

• Width: breedte van de pop-up
• Height: hoogte (fit to content wordt aanbevolen)
• Overlay: donkere achtergrond achter de pop-up
• Close Button: stijl, positie en kleur van sluitknop
• Entrance Animation: animatie bij openen

5. Display Conditions (waar moet de pop-up getoond worden?)

Met display conditions bepaalt u op welke pagina’s de pop-up verschijnt.

1. Klik op Publiceren / Update.
2. Een venster verschijnt met drie stappen:
   1. Display Conditions (waar)
   2. Triggers (wanneer)
   3. Advanced Rules (hoe vaak)

Voorbeelden Display Conditions:

• Entire Site: overal tonen
• Singular → Producten: alleen op productpagina’s
• Pages → Contact: alleen op contactpagina
• Archives → Blog: alleen op blogoverzicht

6. Triggers instellen (wanneer moet de pop-up verschijnen?)

Triggers bepalen wanneer een pop-up wordt geopend.

Veelgebruikte triggers:

• On Page Load: opent na X seconden
• On Scroll: opent wanneer bezoeker een deel van de pagina heeft gescrold
• On Click: pop-up opent bij een klik (popup koppelen aan een knop)
• Exit Intent: opent wanneer bezoeker de pagina wil verlaten

Voorbeeld:

• On Page Load → Delay: 3 seconden
• Exit Intent → Aan → Voor desktop

7. Advanced Rules (hoe vaak mag de pop-up verschijnen?)

Hiermee voorkomt u dat bezoekers de pop-up te vaak zien.

Instellingen:

• Show Up To X Times: toon maximaal X keer
• After X Page Views: toon pas na X pagina’s
• Show for Logged In Users: alleen voor bezoekers met account
• Hide for Logged In Users: verberg voor ingelogde gebruikers

Voorbeeld:

• Show Up To: 1 keer → pop-up verschijnt slechts één keer
• Show after 2 page views → minder opdringerig

8. Pop-up koppelen aan een knop (On Click Trigger)

Ideaal voor acties zoals “Contact opnemen”, “Nieuwsbrief”, of “Vraag offerte aan”.

Stappen:

1. Ga naar de knop in Elementor.
2. Bij Link vult u in:
   popup:open
3. Klik op het dynamische icoon rechts van het veld.
4. Kies Popup → Open Popup.
5. Selecteer de pop-up.

Nu opent de pop-up wanneer de bezoeker op de knop klikt.

9. Pop-up uitschakelen of verwijderen

Uitschakelen (aanbevolen)

1. Ga naar Elementor → Templates → Popups.
2. Klik op Edit Conditions.
3. Verwijder alle display conditions.

De pop-up blijft bestaan maar wordt nergens meer getoond.

Verwijderen

1. Ga naar de lijst met pop-ups.
2. Klik op Verwijderen.

Kort samengevat

• Pop-ups vindt u via Elementor → Templates → Popups.
• U bewerkt ze net als normale Elementor-pagina’s.
• Met display conditions bepaalt u waar ze getoond worden.
• Triggers bepalen wanneer de pop-up opent.
• Advanced Rules bepalen hoe vaak de pop-up zichtbaar mag zijn.
• On Click triggers maken pop-ups perfect voor CTA-knoppen.

Hulp nodig?

We reageren meestal binnen 24–48 uur. Uw oplossing is maar één berichtje van u vandaan.