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.
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.
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’.
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.
(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’
- Bij ‘Action’ kies je voor ‘Toggle’. Deze optie zorgt ervoor dat het menu uitklapt.
- Vervolgens selecteer je de popup die je zojuist gemaakt hebt.
- 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.
Tip: je kunt met de popups ook een Elementor Mega menu maken.
