WordPress & Elementor kennisbank

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).

Er zijn standaard twee breakpoints ingesteld: voor desktop en tablet. Maar het is ook mogelijk om extra breakpoints toe te voegen.

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. 
Picture of Sanne IJspeerd

Sanne IJspeerd

Eigenaar SIJ Web | WordPress & Elementor Specialist | B2B Marketing Manager in SaaS

Ook interessant voor jou

Elementor loop builder: 10 praktische voorbeelden

Extra breakpoints Elementor instellen in 2 stappen

Elementor site instellingen: stijlen zonder thema

8 Responses

  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

    1. 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.

  2. 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.

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

  3. Hi Sanne,

    Ik ben bezig met een website met elementor.
    Ik heb een dropdownenu gemaakt met pagina’s, echter als ik er subcategorieën achter hangt is de content van de hoofdpagina op de mobile versie niet zichtbaar.
    Wat doe ik verkeerd?

    Groet, Tanya

    1. Hoi Tanya,

      Bedoel je dat het hoofditem niet zichtbaar is in het menu? Of is de content op de pagina zelf niet zichtbaar op mobiel? Kun je mij een voorbeeld sturen? (sanne@sijweb.nl).

      Groetjes,

      Sanne

  4. Hi sanne,

    Ik ben mijn mobiele menu aan het aanpassen zonder elementor pro. ik heb een transparant header maar ik krijg de achtergrond van mijn menu niet aangepast. Deze is wit met witte letters waardoor je alleen de letters te zien krijgt als je erover heen gaat met je muis. Hoe kan je deze aanpassen?

    groeten, vivien

    1. Hoi Vivien,

      Als je het menu aan het aanpassen bent zonder Elementor Pro, maak je dan gebruik van de header van het thema? Dan moet je namelijk bij de instellingen van het thema kijken of je daar aanpassingen kunt doen.

      Het is mij ook niet helemaal duidelijk of je nu een transparante header wilt of een header met een witte achtergrond? In ieder geval kun je via Elementor de achtergrondkleur van de sectie waarin je de header maakt eenvoudig wijzigen via het tabblad ‘stijl’.
      Het maken maken een transparante header met Elementor vraagt om een iets andere aanpak en daar heb je ook een add-on voor nodig.
      Als je daar hulp bij nodig hebt, kun je ook gebruik maken van onze support bundels –> https://www.sijweb.nl/support-bundels/

      Groetjes,

      Sanne

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.