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

Header aanpassen voor mobiel met Elementor

Tegenwoordig is het belangrijk dat je website voor alle apparaten toegankelijk is. Dit betekent ook dat je de header goed moet instellen voor mobiele gebruikers. De header aanpassen voor mobiel in je WordPress website kun je eenvoudig doen met de hulp van Elementor Pro. In dit artikel leggen we je uit hoe je dit precies doet.

Stap 1: De header instellen

Voordat je de header kunt aanpassen voor mobiel, moet je eerst een header instellen met Elementor. 

Stap 2: De header aanpassen voor mobiel

Als je de header hebt ingesteld voor je desktop, kun je bezig met de aanpassingen voor mobiel. Klik hiervoor op de modus ‘mobiel’ (overigens gelden dezelfde mogelijkheden met tablet).

pagina aanpassen voor mobiel met elementor

Elementor biedt verschillende mogelijkheden om de header aan te passen voor mobiel:

Kolombreedte aanpassen

Om te beginnen is het handig om de kolombreedte in te stellen voor het mobiele menu. (dit leggen we ook uit in het artikel ‘Website mobielvriendelijk maken met Elementor‘). Je doet dit als volgt:

  • Bewerk de kolom:

  • Stel de kolombreedte in. Dit doe je in percentages. Wij maken er even 20 van. Het logo en het hamburgermenu staan nu netjes naast elkaar.
           

Breakpoint instellen voor het menu

Met een breakpoint kun je instellen bij welke paginabreedte (mobiel of tablet) het menu springt naar het zogenaamde ‘Hamburger menu’.

Bewerk de menu widget en ga naar het tabje ‘Mobile Dropdown’.

Als je een groot menu hebt, is het bijvoorbeeld handig om het breakpoint op ‘Tablet’ te zetten. Heb je maar een klein menu, dan zou ik het breakpoint op ‘Mobiel’ laten staan. 

Uitlijning van het menu

Op dezelfde plek kun je ook de uitlijning van het hamburger menu instellen en aangeven op welke manier je de dropdown (het menu) wilt tonen. Pas dit aan naar wens, je ziet direct het resultaat:

Logo verkleinen of anders uitlijnen

Het is natuurlijk niet zo mooi als je logo op dezelfde grootte wordt weergegeven op mobiel. Je kunt dit aanpassen door naar het tabje ‘Stijl’ te gaan (dit werkt hetzelfde als met een afbeelding). Je kunt het logo niet groter maken dan de kolombreedte die je hebt ingesteld.

Dropdown stijlen

De dropdown kun je ook naar wens stijlen. Ga hiervoor naar het tabje ‘Stijl’ en pas aan naar wens.

Widgets of secties onzichtbaar maken op mobiel

Sommige elementen wil je op mobiel niet tonen. Bijvoorbeeld omdat ze te groot zijn. In ons geval hebben we een button ‘Hulp nodig?’ in het menu staan. Deze willen we onzichtbaar maken op mobiel. Dit doe je als volgt.

  • Klik om de widget te bewerken en ga naar het tabblad ‘Geavanceerd’
  • Scroll naar het tabje ‘Responsive’
  • Zet de widget op mobiel op ‘hide’

  • Deze optie vind je ook als je een sectie bewerkt. Als je dus een complete sectie wilt verbergen op mobiel, doe je dit op dezelfde manier. 

 

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites voor mkb'ers en zzp'ers. Daarnaast ondersteunt ze bedrijven bij de inzet van marketing- en communicatieactiviteiten.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

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.