Wil je een sticky header in Elementor maken? Dat zou zomaar een hele goede beslissing kunnen zijn.
Het maakt niet uit wat voor type website je hebt. Of het nu een webshop is, een forum, persoonlijke website, blog of zakelijke website. De header is hetgeen wat overal gebruikt zal worden om door de website te navigeren.
Je ziet op websites regelmatig sticky headers, ook wel plakkende headers genoemd om een website beter toegankelijk te maken. In dit artikel zal ik je laten zien hoe je zelf op een eenvoudige manier een sticky header met Elementor kunt maken.
Inhoudsopgave: Elementor Sticky Header
Wat is een sticky header?
Een sticky header houdt in dat de header bovenaan de pagina blijft plakken. Wanneer je dus naar beneden scrolt op een pagina van een website, blijft de header plakken aan de bovenkant. Een sticky header blijft dus altijd op zijn plaats en zal nooit uit het zicht verdwijnen. Zonder sticky header zal de header niet meer zichtbaar zijn zodra je naar beneden scrolt.
Deze website kun je een voorbeeld zien van een sticky header. Je bent nu tenslotte al wat verder in het artikel en hebt al iets naar beneden gescrold. Mijn header is echter nog steeds zichtbaar. Dit komt omdat de header sticky is gemaakt en aan de bovenkant van het venster in je browser blijft plakken.
Waarom een sticky header maken?
Nu je weet wat een sticky header is, vraag je je wellicht ook nog af wat redenen zijn om een sticky header te maken. Ik zal een aantal goede redenen voor je opsommen:
Navigatie is altijd zichtbaar
Een sticky header blijft bovenaan de pagina plakken, zelfs wanneer een gebruiker naar beneden scrolt. Dit betekent dat belangrijke navigatie-elementen, zoals het menu en contactknoppen, altijd binnen handbereik zijn. Gebruikers hoeven niet terug te scrollen naar de bovenkant van de pagina om toegang te krijgen tot deze essentiële functies.
Goede gebruikservaring
Sticky headers zorgen voor een consistente gebruikerservaring. Bezoekers kunnen snel schakelen tussen verschillende delen van je website zonder te hoeven zoeken naar de navigatie-opties.
CTA kan altijd zichtbaar zijn
Als je specifieke call-to-action (CTA) knoppen wilt benadrukken, zoals ‘Aanmelden’ of ‘Nu kopen’, kun je deze in de sticky header plaatsen. Dit zorgt ervoor dat deze knoppen altijd zichtbaar zijn, ongeacht waar een gebruiker zich op de pagina bevindt.
Kortom, het maken van een sticky header is een effectieve manier om de navigatie op je website te verbeteren, belangrijke elementen te benadrukken en de algehele gebruikerservaring te versterken. Het biedt zowel praktische voordelen als esthetische voordelen voor je website.
Sticky Header maken in Elementor Pro
In Elementor Pro is er een standaard optie waarmee je met een druk op de knop een sticky header kunt maken. Het is dus zeker aan te raden om de Pro-versie te overwegen als je deze versie nog niet hebt, omdat het dingen een stuk makkelijker maakt. Mocht je nog twijfelen, bekijk dan ook het artikel ‘Is elementor Pro de moeite waard om te kopen?‘.
Het start met een header template
Ik ga er eigenlijk al vanuit dat je netjes een Header hebt gemaakt via de Theme Builder van Elementor Pro, want dat is de manier waarop je met Elementor de volledige controle krijgt en eenvoudig een sticky header kunt maken.
Mocht je nog geen header template hebben gemaakt, dan zal je Templates → Theme Builder (Thema Bouwer) moeten gaan.
Hier kun je ervoor kiezen om een header template te maken voor je website. Klik op het plusje bij Header om een header template aan te maken.
Maak je header
De volgende stap is om je header te maken. De elementor page builder werkt hier net als op iedere andere pagina. Het enige is dat je ook wat andere opties direct ziet staan. Zo zie je direct de opties als Site Logo, Site Title, Page Title, WordPress Menu, Search form en wellicht nog een aantal dingen meer.
Hierboven zie je de header van mijn website. Je zou ook zoiets kunnen maken of iets totaal anders. Heb je geen inspiratie en wil je wel een mooie header? Je kunt dan ook altijd kijken naar de verschillende beschikbare Elementor templates voor headers.
Hoe je de header sticky kunt maken
Nu komen we eindelijk bij het punt waar het allemaal om is gegaan. Hoe kunnen we de header sticky maken in Elementor? Nu we een header hebben is dit vrij simpel. Bewerk je header en ga dan naar je header container en dan Geavanceerd. Klik nu op Bewegingseffecten, dit is de plek waar je moet zijn.
Bij het kopje Sticky kun je kiezen voor de optie Top om een sticky header aan de bovenkant van je website te maken. Wil je een sticky footer maken, dan kies je hier voor bottom, maar dat is niet wat wij hier willen bereiken.
Bij Sticky On kun je aangeven voor welke apparaten je de sticky header wil inschakelen. standaard staat dit ingesteld op Desktop, Tablet (Portret modus) en Mobiel (Portret). Mocht je het enkel op desktop willen inschakelen zou je dus op het kruisje bij tablet en mobiel kunnen klikken. Wil je overal een sticky header hebben, dan hoef je niks te doen.
Bij de offset opties hoef je niks te doen, anders kun je ruimte creeren rondom je header en dat is natuurlijk niet de bedoeling aan de bovenkant van je website.
Dit is wat je header ‘sticky’ zal maken, wat betekent dat hij op zijn plaats blijft terwijl bezoekers omlaag scrollen op je website.
Kies de pagina’s waarop je een sticky header wil hebben
Wanneer je de header template voor het eerst opslaat, krijg je ook de display conditions te zien, oftewel de voorwaarden waaraan voldaan moet worden om de header weer te geven.
Ik wil de header op heel de website tonen, dus dit heb ik zo ingesteld. Mocht jij de sticky header enkel op specifieke pagina’s willen weergeven, dan kun je dat hier ook instellen. Je gaat dan voor de optie include. De sticky header uitsluiten op specifieke pagina’s is ook een optie. Je gaat in dat geval voor de optie Exclude. Klik op Save & Close als je alles naar wens hebt ingesteld.
Controleer of je Elementor Sticky Header werkt
Je hebt nu alles gedaan om een sticky header in Elementor te maken. Het enige wat je nog even kunt doen is controleren of het goed werkt. Bekijk daarom eens meerdere pagina’s van je website op verschillende apparaten om te controleren of alles goed werkt. Blijft de header plakken of zie je iets geks gebeuren? Is het laatste het geval, dan zal je de instellingen moeten controleren. Wanneer je een cache plugin gebruikt kan het ook zijn dat je de cache moet legen.
Wil je meer leren over Elementor en ook uitleg in video? Bekijk dan zeker eens de Elementor cursus.
Sticky Header maken in de gratis Elementor
Bij de gratis versie van Elementor kun je natuurlijk geen templates maken zoals in Elementor Pro het geval is. Wat wel allemaal mogelijk is kun je zien in de Elementor handleiding. Alleen hoe kun je nu dan alsnog een sticky header maken?
Met de gratis versie van Elementor zal je de header gebruiken van het thema waar je gebruik van maakt. Je kunt dan mijn inziens eigenlijk het best een optie zoeken die buiten Elementor valt. De optie die ik je dan kan aanraden is de plugin My Sticky Bar (voorheen MyStickyMenu) van Premio.
Wanneer je de plugin geïnstalleerd hebt kunt kun je naar My sticky Bar → Sticky Menu settings om je header sticky te maken.
Bij mij stond bovenstaande standaard ingesteld en dit werkte direct voor de website waarop ik het uit heb getest. Mocht het bij jou niet direct werken, dan zou je in de code moeten controleren welke CSS class er aan je header wordt gegeven, zodat je dit hier kunt invullen. Je kunt eventueel een korte video bekijken in de plugin zelf om te bekijken hoe je dit kunt doen. Verder zijn er nog een aantal instellingen voor de sticky header.
Je kunt zoals je ziet hier aangeven of de sticky header uitgeschakeld moet worden voor kleinere schermen, wanneer het zichtbaar moet worden, wat de achtergrondkleur van de header moet zijn en nog een aantal dingen meer. Stel alles in zoals je het hebben wil en klik vervolgens onderaan op de pagina op ‘Save’.
Alternatief: Templates maken met gratis Elementor versie
Mocht je met de gratis Elementor versie template layouts willen maken, dan zal je een extra plugin moeten vinden om dit te bereiken. De plugin Theme Builder For Elementor kan je hierbij helpen. Via de theme builder van deze plugin kun je een header maken die je met Elementor kunt bewerken. Je kunt wat dat betreft dus ongeveer dezelfde stappen volgen als die je bij de Elementor Pro uitleg kunt vinden.
