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

Menu instellen met Elementor in 4 stappen

Met Elementor Pro kun je eenvoudig een menu instellen in je header, footer of sidebar. In dit artikelen leggen we je stap voor stap uit hoe je Elementor menu aanmaakt en de layout en stijl wijzigt met behulp van de ‘Nav menu’ widget.

Een megamenu maken met Elementor? Dat kan ook!

Stap 1: Menu aanmaken in WordPress

Om te beginnen moet je eerst een menu aanmaken in WordPress. Heb je al een menu? Dan kun je deze stap overslaan.

Ga naar ‘Weergave’ –> ‘Menu’s’. En stel hier een menu voor je website in. 

Stap 2: menu instellen in Elementor

De volgende stap is om het menu op de juiste plek in te voegen op je website. Met de ‘Nav menu’ widget kun je het menu toevoegen waar je maar wilt. De meest gebruikelijke plekken zijn: header, footer en sidebar. In dit voorbeeld leg ik je uit hoe je een Elementor menu toevoegt aan je header.

Heb je nog geen header gemaakt met Elementor? Lees dan eerst dit artikel

  • Sleep de ‘Nav menu’ widget naar de kolom waar je het menu wilt plaatsen
  • Je kunt nu in het linkerscherm kiezen welk menu je wilt tonen (of hij toont automatisch al het juiste menu).

menu in header aanpassen met elementor

Stap 3: de lay-out aanpassen

Je kunt nu de lay-out van het menu aanpassen. Hiervoor heb je een aantal opties:

Elementor menu layout aanpassen

  • Layout
    Om te beginnen kun je kiezen of je een menu horizontaal of verticaal wilt weergeven. In een header is het gebruikelijk om te kiezen voor horizontaal. Voor een sidebar of footer kun je kiezen voor verticaal.
  • Align
    Hiermee geef je aan welke uitlijning het menu moet hebben binnen de kolom waar je het menu hebt geplaatst.
  • Pointer
    Hier kun je aangeven wat er moet gebeuren als bezoekers met hun muis over het menu gaan. Je kunt hier bijvoorbeeld een underline instellen of een achtergrondkleur. Of je kunt de tekst groter maken als bezoekers er met de muis overheen gaan.
  • Submenu indicator
    Dit is het icoontje dat wordt getoond naast het menu item, wanneer je ook een submenu hebt ingesteld.
  • submenu elementor indicator
  • Breakpoint Dropdown
    Hier kun je instellen wanneer het menu over moet gaan in een hamburgermenu. Bij mobiele apparaten of bij een tablet.
  • Full width
    Als de dropdown over de hele pagina moet worden weergegeven (wel aanbevolen)
  • Align
    Geef aan hoe je het hamburgemenu wilt uitlijnen
  • Toggle button
    Kun je op ‘Hamburger’ laten staan
  • Toggle align
    De uitlijning van het hamburger icoon binnen de kolom

Lees ook hoe je de hele header kunt aanpassen voor mobiele apparaten. 

Stap 4: De styling van het menu aanpassen

Je kunt het menu of veel verschillende manieren stijlen. Ga hiervoor naar het tabje ‘Stijl’. Wat je kunt aanpassen:

  • Typografie aanpassen
    Die staat standaard ingesteld op het lettertype dat je voor je website hebt ingesteld. Eventueel kun je dit hier aanpassen
  • Horizontal Padding
    De horizontale afstand tussen de menu items
  • Vertical padding
    De verticale afstand tussen menu items (voor verticale headers)
  • Space between
    Doet eigenlijk hetzelfde als horizontal en vertical padding.

Deze opties kun je ook gebruiken voor het dropdown menu. Daarnaast heb je voor het dropdown menu nog een paar extra opties:

  • Rand instellen 
    Geef aan of je een rand wilt instellen voor het dropdown menu en welke dikte. Ook kun je aangeven of de rand hoekig of juist rond moet zijn.
  • Scheiding
    Een scheiding instellen tussen de verschillende menu items. Bijvoorbeeld met een witte lijn.
  • Distance
    De afstand tussen het hoofdmenu en het dropdown menu.

Hieronder een (overdreven) voorbeeld:

Tot slot kun je de toggle button (het hamburgermenu icoon) nog aanpassen:

  • Kleuren aanpassen
  • Grootte aanpassen
  • Randdikte en radius aanpassen

Ben je klaar? Dan kun je het menu (of eigenlijk de header) nu publiceren. Wil je items toevoegen aan het menu? Dan doe je dit gewoon in WordPress (check daarna wel even of het menu nog goed wordt getoond op mobiel).

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.

Deze post heeft 2 reacties

  1. Helder beschreven, fijn!
    Wat me opvalt als ik het zo doe, dat ik als ik jou voorbeeld even aanhou, ik vanuit de menu ook op websites kan klikken en dan op die pagina kom, maar dat wil ik niet, ik wil dat alleen de onderliggende pagina’s in dat submenu aanklikbaar zijn, dus nieuwe websites, website uitbreiden etc. Waar kan ik dat instellen?

  2. Hoi Ingrid,

    Goede vraag! Ik begrijp dat je het hoofditem in het menu niet klikbaar wilt maken?
    Dit stel je in via WordPress -> Weergave -> menu’s. Selecteer het juiste menu en voeg dan een nieuw menu item ‘Aangepaste link’ toe. Vul bij URL alleen ‘#’ in. En bij linktekst de naam voor het hoofditem.

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.