De ultieme handleiding voor Elementor sticky headers

Of je nu een beginnende webontwikkelaar of een e-commerce ondernemer bent, je websites delen waarschijnlijk enkele essentiële elementen. Elke site heeft bijvoorbeeld een duidelijke header nodig om bezoekers te helpen navigeren tussen verschillende pagina’s. Als je echter een paginabuilder zoals Elementor gebruikt zodat je minder hoeft te coderen, vraag je je misschien af ​​of het nog steeds mogelijk is om een ​​geavanceerde maar gebruiksvriendelijke Elementor sticky header te maken.

Gelukkig kan het gebruik van een Elementor header je gebruikers een gestroomlijnde manier bieden om je website te verkennen. Met deze populaire paginabuilder kun je een breed scala aan headers maken die niet verdwijnen wanneer gebruikers naar beneden scrollen op een site. Deze feature maakt ze ‘sticky’.

In dit bericht bespreken we hoe een sticky header werkt en wat de voordelen zijn van het gebruik ervan. Vervolgens laten we je zien hoe je een sticky header met Elementor kunt maken met zowel de gratis als de pro versie van de tool. Ten slotte bieden we je extra aanpassingsopties voor je sticky headers met behulp van CSS. Laten we beginnen!

Een inleiding tot Elementor sticky headers

Geen twee websites zijn hetzelfde. Er zijn echter wel een paar features die alle goede websites gemeen hebben.

Als je een site met meerdere pagina’s hebt, is een van deze elementen een header. Dit is de horizontale balk bovenaan elke pagina die nuttige informatie bevat.

Meestal bevat een header je navigatiemenu met pagina’s zoals Over of Contact:

Wanneer bezoekers je pagina verkennen, verwachten ze waarschijnlijk een georganiseerde header om hen door je site te leiden. Aangezien gebruikerservaring (UX) de sleutel is tot het succes van een website, is het verstandig om een ​​header te maken die intuïtief en duidelijk is. Dat is waar een sticky header, ontworpen met Elementor, een groot verschil kan maken.

Hoe een sticky header werkt

Voordat we leren hoe een Elementor sticky header werkt, laten we eens kijken hoe een standaard header zich gedraagt ​​wanneer je naar beneden scrolt op een pagina:

Zoals je in het bovenstaande voorbeeld kunt zien, bevat deze kop een complexe navigatiebalk met categorieën zoals Sales, Clothing, Shoes, en meer. Deze tabbladen zullen shoppers ongetwijfeld helpen te vinden wat ze zoeken. Wanneer je echter op de pagina naar beneden scrolt, verdwijnt de header.

Gebruikers kunnen dit frustrerend vinden, omdat ze terug moeten scrollen naar de bovenkant van de pagina om toegang te krijgen tot het navigatiemenu. Gelukkig biedt een sticky header een simpele oplossing.

Door bovenaan je pagina te blijven of te ‘plakken’, kan een sticky header de UX van je website drastisch verbeteren:

Wanneer je siteontwerp een sticky header bevat, kunnen je gebruikers snel naar nieuwe pagina’s springen zonder tijd te verspillen met scrollen.

Bovendien kun je met dit vaste element te allen tijde je logo vooraan en in het midden opnemen. Met deze feature kunnen gebruikers je merk makkelijker onthouden en worden ze aangemoedigd om langer op je site te blijven.

Wanneer je moet overwegen een sticky header te gebruiken

Bezoekers zullen minder snel verdwalen bij het verkennen van grotere sites met een sticky header. Als zodanig wil je misschien profiteren van deze feature als je website veel pagina’s heeft. Daarom zie je vaak sticky headers op e-commercesites.

Een sticky header kan met name handig zijn als je een zoekfeature in je header wilt opnemen. Op die manier kunnen gebruikers, terwijl ze scrollen en beseffen dat ze niet kunnen vinden wat ze zoeken, snel een zoekopdracht in de zoekbalk invoeren.

Bovendien kan een sticky header een gamechanger zijn als je een blog hebt waarmee inkomsten worden gegenereerd en waarin al je berichten op de homepage worden weergegeven. Over het algemeen kan deze header ervoor zorgen dat je website onderhoudbaar en schaalbaar is.

Als je site echter maar één pagina heeft, heeft het weinig zin om je header op deze manier te transformeren. Bovendien, als je een groot aantal pagina’s op je website hebt, maar elke pagina is relatief kort, heb je waarschijnlijk ook geen sticky header nodig.

Over het algemeen vermindert een sticky header de scrolltijd en verhoogt het de bruikbaarheid en navigatie van de site. Als je niet zeker weet of deze feature je website ten goede zou komen, wil je misschien een snelle check van je paginalengtes doen en vervolgens beslissen.

Zo maak je een Elementor sticky header

Voor deze tutorial zullen we je door de stappen leiden om een ​​Elementor sticky header te maken. We gaan ervan uit dat je de Elementor plugin al op je site hebt geïnstalleerd en geactiveerd.

We zullen bespreken hoe je deze header kunt maken met zowel de gratis versie als Elementor Pro. Je zult waarschijnlijk blij zijn te weten dat je geen HTML hoeft te leren of veel code hoeft te bewerken om dit te doen!

Zo maak je een sticky header met Elementor (gratis)

De gratis versie van Elementor biedt een aantal krachtige features voor paginabuilding. Als je echter wijzigingen wilt aanbrengen in je headers en footers, heb je wat extra (ook gratis) tools nodig.

Laten we met dat in gedachten eens kijken hoe je een sticky header kunt maken met Elementor!

Stap 1: Installeer en activeer je essentiële plugins

Gelukkig kunnen een paar betrouwbare tools de functionaliteit van de gratis versie van Elementor eenvoudig uitbreiden.

Navigeer naar je WordPress dashboard om je eerste tool te vinden. Ga naar Plugins > Nieuwe toevoegen en zoek naar ElementsKit Elementor addons met behulp van de zoekfunctie:

Installeer en activeer deze plugin zoals je dat gewoonlijk zou doen. Wanneer je dit proces voltooit, word je naar je hoofdpagina met plugins geleid:

Klik nu opnieuw op Add New om de plugin Sticky Header Effects for Elementor te vinden met de zoekbalk:

Herhaal het installatie- en activeringsproces voor deze tool en je bent klaar voor de volgende stap!

Stap 2: Maak je menu

Voordat je een header kunt maken, heb je een navigatiemenu nodig. We gaan een eenvoudig menu maken met de meest voorkomende elementen. Het bevat een logo, pagina’s en een Call To Action (CTA).

Om je eigen menu in je WordPress dashboard te maken, ga je naar Appearance > Menus. Geef de jouwe een beschrijvende naam naast het Menu Name veld. We gaan de onze “Sticky Header Menu” noemen:

Zorg ervoor dat je Header kiest als de Display location. Je kunt ook het vakje selecteren naast “Add new pages to your menu automatically”.

Vervolgens moet je enkele pagina’s aan je menu toevoegen. Vink in het Pages gedeelte aan de linkerkant de vakjes aan voor pagina’s die je wilt opnemen en klik vervolgens op Add to Menu:

Vervolgens zie je je pagina’s naar je menu aan de rechterkant worden overgebracht. Ga je gang en klik op Save Menu rechtsonder in je scherm:

Zoals je kunt zien, hebben we enkele basispagina’s toegevoegd, waaronder Contact Us, About, en Sample Page. Misschien wil je je pagina’s opnieuw ordenen, zodat de volgorde intuïtief aanvoelt voor bezoekers.

Stap 3: Maak je header

Nu bestaat je navigatiemenu, maar je kunt het nergens openen. Dat komt omdat je er een header van moet maken.

Ga hiervoor naar het ElementsKit tabblad in je linkermenu. Als je dat nog niet hebt gedaan, moet je op dit punt door een paar ‘Getting started’ pagina’s klikken.

Iedereen zal waarschijnlijk andere voorkeuren hebben, dus neem de tijd om te selecteren welke features je wilt activeren. Zorg er echter voor dat de Header Footer module is ingesteld op ON:

Ga nu naar ElementsKit > Header Footer:

Deze pagina is leeg omdat je nog geen templates voor headers of footers hebt. Klik op Add New bovenaan je scherm om je eerste header template te maken:

Voer in het bovenstaande scherm een ​​beschrijvende naam in en zorg ervoor dat Header is geselecteerd als Type. Aangezien je de gratis versie gebruikt, verschijnt deze kop op de Entire Site.

Zorg ervoor dat je de Activate/Deactivate schakelaar op ON zet en klik op SAVE CHANGES. Je wordt nu teruggebracht naar je templatespagina, waar je je nieuwe headertemplate kunt zien:

Mogelijk zie je ook een groen Active pictogram naast deze header. Het is echter nog niet live.

Om je header te voltooien, plaats je de muisaanwijzer erop in de lijst met templates en klik je op Edit in Elementor, net onder de naam. Dit brengt je naar het Elementor Builder scherm.

Klik hier op het ElementsKit pictogram:

Selecteer op het volgende scherm het Sections tabblad:

Scroll een beetje naar beneden om een ​​headersectie te vinden die je leuk vindt en klik vervolgens op Insert. We kozen voor Header – Section 5:

Zoals je waarschijnlijk kunt zien, is ons navigatiemenu niet zichtbaar. Dus laten we doorgaan en het toevoegen aan onze headertemplate. Om dit te doen, beweeg je de muisaanwijzer over het navigatiemenugedeelte van je header. In dit geval is het precies in het midden:

Klik op dit gebied en je Menu Settings zouden in het linkervenster moeten verschijnen. Zoek nu het Select Menu veld. Kies in de dropdown het menu dat je eerder hebt gemaakt:

Op dit punt zou je het menu moeten zien in je headertemplate. Klik op UPDATE in de linkerbenedenhoek van het scherm, en je standaard header is klaar.

Laten we het eens bekijken:

Zoals je kunt zien, ziet onze header er geweldig uit. Het verdwijnt echter als we naar beneden scrollen. Laten we eens kijken hoe we ervoor kunnen zorgen dat het blijft “sticken”.

Stap 4: Maak je header sticky

Navigeer voor onze laatste stap naar ElementsKit > Header Footer > Edit with Elementor. Selecteer vervolgens je header en klik op het middelste pictogram met zes stippen:

Als je erover beweegt, zul je hiermee de Edit Section knop zien. Zodra je erop klikt, verschijnen je bewerkingsopties in het linkerdeelvenster.

Klik op het Advanced tabblad en scrol omlaag naar Sticky Header Effects. Er zal een waarschuwingsbericht zijn dat zegt dat de plugin geen controle heeft over de sticky header, maar je kunt dat negeren. Omdat we ook de Sticky Header Effects for Elementor plugin hebben toegevoegd, werkt het prima.

Schakel nu de Sticky header van Elementor in door de schakelaar op ON te zetten:

Afhankelijk van je thema kan je sticky header er transparant uitzien. Als dat het geval is, wil je misschien één stilistische wijziging aanbrengen.

Ga in je Edit Section venster onder Style naar Background > Color  en zorg ervoor dat je een tint hebt geselecteerd die opvalt tegen je normale achtergrond:

Klik dan op UPDATE. Je kunt nu een preview van je site bekijken om het eindresultaat te zien:

Dat is alles! Dit is een simpele Elementor sticky header, maar het kan je site makkelijk naar een hoger niveau tillen.

Zo maak je een sticky header met Elementor Pro

Bij het gebruik van Elementor Pro is het maken van een sticky header iets eenvoudiger. Je kunt deze feature in slechts drie eenvoudige stappen aan je site toevoegen.

Stap 1: Maak je menu

Om je menu te maken, ga je naar Appearance > Menus in je WordPress dashboard:

Geef je menu een beschrijvende naam, selecteer Primary Menu naast Display location en klik op Create Menu:

Op dit punt zou je een paar bestaande pagina’s op je website moeten hebben. Selecteer de pagina’s die je in je menu wilt opnemen in het linker venster.

Klik dan op Add to Menu, gevolgd door Save Menu:

Nu zouden je pagina’s aan de rechterkant onder Menu Structure moeten worden weergegeven.

Stap 2: Maak je header

Vervolgens moeten we onze basis maken. Laten we een klassieke header maken.

Zoek om te beginnen het Elementor tabblad in je linkerzijbalk. Ga net daaronder naar Templates > Theme Builder. De volgende pagina ziet er als volgt uit:

Zoals je waarschijnlijk kunt zien, kun je met Elementor Pro eenvoudig beginnen met het ontwerpen van elk element van je site.

Klik op het pluspictogram (+) op het Header element. Nu zou je een pop-up moeten zien met meerdere headerblokken waaruit je kunt kiezen:

Als je al een headertemplate hebt, kun je deze selecteren op het My Templates tabblad. Anders wil je misschien een van de sectieblokken gebruiken die bij Elementor Pro worden geleverd.

Als je je keuze hebt gemaakt, beweeg je de muis over het gewenste blok en klik je op Insert:

Hier zie je dat dit blok een eigen logo heeft, maar ons navigatiemenu is automatisch weergegeven. Klik nu op PUBLISH:

In het volgende scherm word je  gevraagd je PUBLISH SETTINGS te bepalen. Selecteer hier ADD CONDITION om te beslissen waar je je header wilt weergeven:

Je zult waarschijnlijk Entire Site willen selecteren naast INCLUDE. Je kunt ook bepaalde sitegebieden uitsluiten door op de pijl naast INCLUDE te klikken en naar het alternatief te wisselen. Als je tevreden bent met je selecties, klik je op SAVE & CLOSE.

Op dit punt verschijnt een pop-upbericht in de rechterbenedenhoek van je scherm. Als het niet verdwijnt voordat je erop kunt klikken, selecteer je de optie om je live site te bekijken.

Je kunt ook teruggaan naar je WordPress dashboard en een preview van je site bekijken door op het huispictogram in de linkerbovenhoek te klikken en vervolgens Visit Site te selecteren:

Zoals je kunt zien, werkt onze header nu, maar wanneer we naar beneden scrollen op de pagina, verdwijnt deze. Laten we eens kijken wat we daaraan kunnen doen!

Stap 3: Maak je header sticky

Laten we nu eens kijken hoe we een Elementor sticky header kunnen maken met de pro tool!

Ga naar Templates > Theme Builder en selecteer de header die je zojuist hebt gemaakt. Klik vervolgens op Edit naast het potloodpictogram op het volgende scherm. Dit brengt je terug naar de Elementor editor.

Plaats de muisaanwijzer op je headertemplate en klik vervolgens op het pictogram met de zes stippen in het midden. Dit opent je Edit Section venster aan de linkerkant:

Navigeer nu naar het Advanced tabblad en zoek het Motion Effects gedeelte. Schakel hier Scrolling Effects in door de schakelaar op ON te zetten:

Blader vervolgens naar beneden in het Motion Effects gedeelte om het veld Sticky te vinden. Selecteer Top in het dropdownmenu:

Klik nu op UPDATE. Houd er rekening mee dat, afhankelijk van het kleurenschema van je thema, je sticky header van Elementor er transparant uit kan zien:

Als dat het geval is, en je houdt niet van hoe het eruit ziet, kun je altijd je achtergrondkleur wijzigen. Ga in je Edit Section venster naar Style > Background en selecteer Classic als je achtergrondtype.

Selecteer nu een nieuwe achtergrondkleur voor je headertemplate. Kies een tint die complementair is aan de rest van de pagina, maar die ook een mooi contrast creëert:

Omdat dit slechts een voorbeeld is, kiezen we gewoon een grijze kleur om onze kop minder transparant te maken.

Klik nu op UPDATE om je wijzigingen op te slaan.  Nu kan je een preview zien van het eindresultaat:

Dat is alles! Je wilt waarschijnlijk de stijl en kleuren aanpassen aan je merk. Zorg ervoor dat je je wijzigingen altijd opslaat als je klaar bent.

Zo gebruik je CSS om je Elementor Sticky Header te verbeteren

Wanneer je een sticky header van Elementor op je website implementeert, kan dit aanvoelen als een aanzienlijke facelift voor je siteontwerp. Mogelijk ben je echter geïnteresseerd in verdere aanpassingen of meer dynamische features.

Nu je weet hoe je een eenvoudige sticky header kunt maken, gaan we eens kijken hoe je je ontwerp naar een hoger niveau kunt tillen. Je kunt dit doen door Cascading Style Sheets (CSS) code in WordPress te gebruiken.

Maak je geen zorgen als je een beginner bent of geen ervaring hebt met coderen. Je ontwerpen verbeteren is een fluitje van een cent met Elementor.

Ga hiervoor naar Templates > Theme Builder > Header:

Onder Edit Section > Advanced > Custom CSS, kun je een klein CSS fragment toevoegen om stilistische wijzigingen aan te brengen.

Soorten Elementor sticky headers

Hier zijn een paar populaire verbeteringen die je misschien wilt overwegen voor je Elementor sticky header!

Transparante sticky header

Sommige thema’s kunnen sticky header automatisch instellen op transparant. Als je dit echter met CSS wilt doen, kun je een codefragment zoals dit gebruiken:

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Kopieer en plak deze code eenvoudig in het veld Custom CSS en pas de velden aan je voorkeuren aan. Dit fragment verandert de achtergrondkleur, transparantie en hoogte van je header, met een animatie-effect:

Alleen al voor dit type zijn de mogelijkheden eindeloos.

Krimpende sticky header

Een andere populaire keuze is een header die groter en kleiner wordt naarmate bezoekers scrollen. Hier is de code die je nodig hebt voor dit type Elementor sticky header:

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

Als je niet vertrouwd bent met zo’n uitgebreide brok codede, wil je misschien Elementor’s handleiding raadplegen voor het maken van een krimpende sticky header.

Met dit ontwerp krijg je dit effect:

Hoewel deze header een subtiel tintje heeft, kan deze verfijning je ontwerp een professionelere uitstraling geven.

Fade-In / Fade-Out

Naast deze trendy opties is er ook de fade-in/fade-out feature (ook wel ‘reveal’ genoemd). Het ziet er ongeveer zo uit:

Voor dit effect hoef je helemaal geen code aan te raken. Navigeer eenvoudig naar je header in je themabuilder. Ga dan naar Edit Section > Advanced > Motion Effects > Scrolling Effects:

Klik hier op het potloodpictogram naast het Transparency veld en verander de Direction naar Fade In of Fade Out. Pas vervolgens je ontwerp aan je voorkeuren aan.

Er zijn veel opties voor deze transparantie effecten, dus we raden aan om de documentatie van Elementor te bekijken. Op die manier kun je de exacte look bereiken die je wilt.

Samenvatting

Werken met een vertrouwde websitebuilder is een uitstekend alternatief voor het betalen voor een ervaren webontwikkelaar om je site te maken. Wanneer je enkele van de beste websiteontwerpsoftware gebruikt, kun je eenvoudig de essentiële elementen voor elke website maken. Deze bevatten praktische maar mooie sticky headers.

Een sticky header kan een aangenamere ervaring voor je gebruikers creëren. Je kunt kiezen uit verschillende dynamische headerstijlen, waaronder transparant en krimpend. Sterker nog, je kunt deze verbluffende headerontwerpen maken met zowel Elementor Pro als de gratis versie.

Het ontwerpen van je website is een van de eerste stappen om deze te lanceren. Je hebt echter eerst betrouwbare hosting nodig. Bekijk de managed hostingpakketten van Kinsta om te zien hoe we de prestaties van je site kunnen optimaliseren!