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

Header aanpassen voor mobiel met Elementor

Inhoud van dit artikel:

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 met Elementor en heeft een achtergrond in marketing- en communicatie.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Deze post heeft 4 reacties

  1. Hallo, ik heb je bericht gelezen waarvoor dank. Ik zie in mijn wordpress Elementor nu dat als ik op mijn mobiel formaat een ‘knop’ kleiner maak zodat deze beter past op de pagina deze ook verkleind op mijn laptop wat ik natuurlijk niet wil. Hoe kan ik deze los van elkaar koppelen? Dus op laptop formaat staat iets prima en als ik op mobiel bv een knop kleiner wil maken wordt deze gelijk ook de laptop en tablet aangepast. Ik zie ook dat als ik op mijn mobiel bv foto’s wil verbergen die wel op mijn laptop formaat staan (dan zet ik bij mobiel onder responsive de knop op ‘hide’ ) dan zie ik de foto’s echter nog steeds.

    Hoop dat je een reactie hebt hoe dit aan te passen is. Alvast bedankt.

    Groeten van Marlene

  2. Hoi Marlene,

    De optie om de knop kleiner te maken kun je niet apart instellen voor de verschillende apparaten. Als je deze op ‘klein’ zet, wordt ie klein op apparaten. Wat je wel kunt doen is het lettertype in de knop kleiner maken voor mobiele apparaten of de padding in de knop aanpassen. Wat ik zelf meestal doe is: 1) de button uitschakelen voor mobiel of 2) een aparte button maken die ik alleen toon op mobiele apparaten.
    De manier waarop je de foto’s verbergt is juist en dit zou dus moeten werken. Heb je de pagina ook bekeken in incognito venster (of een andere browser)? Als het daar ook niet werkt, zou ik er even wat dieper in moeten duiken. Mail mij gerust op sanne@sijweb.nl.

  3. Hoi,

    Ik ben bezig met een website van wordpress en elementor. Beide gratis. Maar het lukt mij niet om pagina aan te passen op de tablet zowel staan als liggend. Mobiel lukt wel.

    Is daar een oplossing voor.

  4. Hoi Christa, ik heb gereageerd op je mail. Je kunt dit inderdaad aanpassen. Zal er binnenkort ook een blog over publiceren!

Geef een reactie

Hulp nodig?

We beantwoorden je eerste vraag gratis en voor niets!

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.