Uitklapmenu maken WordPress met Popup builder van Elementor

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

Inhoud van dit artikel:

Pssst, bevalt Elementor Pro?

En wil je meer sites bouwen met Elementor Pro? Upgrade nu je licentie en profiteer van kortingen tot 60%ūü•≥

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.

Pssst, bevalt Elementor Pro?

En wil je meer sites bouwen met Elementor Pro? Upgrade nu je licentie en profiteer van kortingen tot 60%ūü•≥

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

Meer handige tips ontvangen?

Lees ook:

Bevalt Elementor Pro?
En wil je meer sites bouwen met Elementor Pro? Upgrade nu je licentie en profiteer van kortingen tot 60%!
Deze vind je misschien ook interessant:

Lees meer knop toevoegen met Elementor op 4 manieren

Te lange tekst op een pagina? Dan is het handig om gebruik te maken van de ‘Lees meer’ functie. Er zijn verschillende manieren waarop je

De 8 voordelen van Elementor Pro voor marketeers

Toen ik als marketing- en communicatie professional werkte, bestond ongeveer 75% van mijn tijd uit het aanpassen of toevoegen van pagina’s, call-to-actions of hyperlinks in

WhatsApp knop op je website maken met Elementor: 2 manieren

Een WhatsApp knop op je website maken? Dit kun je snel en eenvoudig doen met de page builder voor WordPress Elementor Pro. Daarmee kun je een