Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Uitklapmenu maken WordPress met Popup builder van Elementor

Wil je een uitklapmenu maken in je WordPress website? Dit kun je eenvoudig doen met behulp van de Popup builder van Elementor Pro. Een uitklapmenu kan bijvoorbeeld handig zijn op mobiele apparaten, zodat het menu minder ruimte op het beeld in beslag neemt. Of soms kan het in een design mooier zijn om een uitklapmenu te gebruiken. In dit artikel leg ik je uit hoe je een uitklapmenu maakt met behulp van Elementor Pro en de popup feature.

Stap 1: Maak een popup

Om te beginnen maak je eerst een popup (template) die je wilt gebruiken voor je uitklapmenu. Deze kun je maken met Elementor Pro. Het vormgeven van een popup werkt op dezelfde manier als dat je pagina’s opmaakt met Elementor. (Lees ook hoe je een popup maakt met Elementor Pro). 

  • Ga naar ‘Templates’ -> ‘Popups’

  • Kies ‘Nieuwe toevoegen‘ en geef de popup een naam. In dit voorbeeld maken we een uitklapmenu voor een simpel menu.

Uitklapmenu wordpress maken

Stap 2: Uitklapmenu maken met popup builder

In de volgende stap maak je het template voor het uitklapmenu dat je wilt gebruiken op je website. Zo kun je ook een megamenu maken of alleen het menu toevoegen met met de navigatie widget. Wil je het uitklapmenu alleen gebruiken voor mobiele apparaten? Zorg dan dat je de mobiele modus hebt ingeschakeld.

pagina aanpassen voor mobiel met elementor

Ben je klaar met het maken van de popup? Dan kun je deze publiceren. Je hoeft niets in te stellen bij condities en triggers. Klik gewoon op ‘Save & close’.

Uitklapmenu maken wordpress met elementor popup

Stap 3: Het uitklapmenu instellen

Waar je het uitklapmenu instelt is afhankelijk van waarvoor je deze wilt gebruiken. Wil je deze gebruiken voor je menu? Dan pas je dit aan in de header van je website. Wil je hem op een enkele pagina gebruiken? Dan plaats je hem alleen op die pagina. Zo ga je te werk:

Voeg een button of icoon toe voor het uitklapmenu

Bij een uitklapmenu moeten je bezoekers klikken op een icoon (bijvoorbeeld het icoon voor een hamburgermenu) of een button. Hiervoor kun je de iconen widget of de ‘knop’ widget gebruiken.

Button toevoegen elementor

(in principe kun je alle widgets van Elementor gebruiken waar je een URL achter kunt zetten. In dit artikel ga ik even uit van de twee meest voorkomende opties: een icoon of button). 

  • Voeg de Button toe en maak deze op in de gewenste stijl
  • Klik op ‘Dynamische‘ boven het link veld en selecteer ‘Popup’

Uitklapmenu maken wordpress met elementor popup builder actions

  • Bij ‘Action’ kies je voor ‘Toggle’. Deze optie zorgt ervoor dat het menu uitklapt.
  • Vervolgens selecteer je de popup die je zojuist gemaakt hebt.

Uitklapmenu maken wordpress elementor popup toggle instellen

  • Klik nu op opslaan en controleer of het uitklapmenu werkt.

Je hebt nu een uitklapmenu gemaakt voor je WordPress website :-).

Uitklapmenu maken WordPress alleen voor mobiel?

Wil je dat het uitklapmenu alleen werkt op mobiel? Dan schakel je ‘Desktop’ en ‘Tablet’ uit. Dit doe je door naar de instellingen van de widget (knop of icoon) te gaan.

Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor. Daarnaast ondersteunt ze bedrijven bij de inzet van marketing- en communicatieactiviteiten.

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.