Verticaal menu Elementor: hoe stel je dat in?

Wil je een verticaal menu maken op je website? Met Elementor Pro maak je eenvoudig headers voor je website. Maar hoe maak je een verticaal menu? In dit artikel leg ik je uit hoe je dit doet.

1) Maak een nieuw single template

Als je wilt werken met een verticaal menu, in plaats van een horizontaal menu in de header, moet je een single template instellen voor je pagina’s.

• Ga naar de Theme Builder
• Maak een nieuwe single template.
• Selecteer ‘Pagina’ en geef het template een naam (bv. verticaal menu).
• Klik het scherm met templates dat volgt weg, deze heb je niet nodig.

• Stel de pagina layout in op ‘Elementor canvas’
  Klik hiervoor links onderin het Elementor panel op het tandwieltje.

2) Sectie instellen voor verticaal menu Elementor

Maak een nieuwe sectie met twee kolommen. Bij voorkeur 1/3 + 2/3. Gebruik bijvoorbeeld de onderstaande structuur voor de sectie:

Gebruik vervolgens de onderstaande instellen voor de sectie:

Breedte inhoud: zet deze op ‘volledige breedte’

Tussenruimte kolommen: schakel de tussenruimte tussen de kolommen uit.

Minimale hoogte: de minimale hoogte zet je eerst op VH (= Viewport height) en dan op 100. Hiermee zorg je ervoor dat de sectie altijd op de volledige hoogte wordt getoond, ongeacht welk formaat beeldscherm.

Positie kolom: het ‘Uittrekken’ van de kolom is nodig zodat de achtergrond die je instelt in de kolom over de volledige pagina nog wordt weergegeven (in plaats van alleen tot de laatste widget).

Verticale uitlijning: deze zet je op boven.

3) Navigatiemenu op verticaal zetten

Vervolgens voeg je een navigatiemenu toe aan de kolom waar je het verticale menu wilt tonen. Selecteer een menu (deze stel je in via WordPress zelf). En zet de layout op ‘verticaal’. Je ziet nu dat het menu getoond wordt.

Voeg eventueel nog wat extra elementen toe, zoals het sitelogo, een zoekformulier, button of social media- of contact iconen.

Submenu ook zichtbaar maken

Wil je een verticaal menu maken waarbij het submenu zichtbaar wordt ONDER het hoofditem? Dan kies je voor de lay-out ‘Dropdown’. Dit is bijvoorbeeld handig als je een menu instelt voor mobiel.

4) Verticaal menu Elementor sticky maken

Als je het menu verticaal hebt ingesteld, moet je hem nog sticky maken, zodat het menu straks in beeld blijft als mensen op je pagina’s gaan scrollen. Doe dit als volgt:

• Selecteer de Nav menu widget
• Ga naar het tabblad ‘Geavanceerd’
• Klik op ‘Bewegingseffecten’
• Stel ‘Sticky’ in op ‘Top’
• Vul de offset in (hiermee geef je aan hoeveel ruimte er moet zitten tussen de ‘bovenkant’ van je venster en het menu.

Meerdere elementen sticky maken

Gebruik je meerdere Elementen in het verticale menu? Dan kun je deze het beste allemaal samenvoegen in een innersectie. Je kunt vervolgens dan de hele sectie sticky maken (dit doe je op dezelfde manier als bij de widget).

5) Post content toevoegen

Als je klaar bent met het instellen van het verticale menu, moet je nog iets met de andere kolom die je hebt ingesteld (of je deze nu rechts of links hebt geplaatst). Gebruik hiervoor de ‘post content’ widget. Hiermee wordt automatisch alle content van die pagina geladen (die pagina’s kun je dus ook gewoon vormgeven met Elementor).

6) Mobiele optimalisatie

Als je kiest voor een verticaal menu, is het belangrijk om dit goed te optimaliseren voor mobiel. Voor tablet kun je bijvoorbeeld de kolomgrootte van het verticale menu aanpassen. Voor mobiel zou ik een nieuwe horizontale sectie maken waarin je het menu (en bv. het logo of andere elementen) opnieuw toevoegt. Deze schakel je vervolgens uit voor desktop en tablet. Het verticale menu schakel je dan uit voor mobiel.

Dit doe je via het tabblad ‘Geavanceeerd’ –> Responsive. 

7) Het verticale menu publiceren

De laatste stap is het publiceren van het verticale menu. Zet deze instellingen op ‘All singular’. Dit betekent dat het template dat je zojuist hebt gemaakt wordt toegepast op alle losse pagina’s. Klik vervolgens op ‘Publiceren’.

Als je nu een nieuwe pagina maakt, zie je dat nu automatisch het verticale menu verschijnt! Je hebt nu een verticaal menu met de Theme Builder van Elementor gemaakt!