Wil je een transparante header WordPress maken? Transparante headers zie je tegenwoordig op veel sites. Als je gebruik maakt van eye catching beeldmateriaal is het zeker aan te raden een transparate header in te stellen. Of als je werkt met verschillende achtergrondkleuren kan een transparante header ook uitkomst bieden.
De visuele mogelijkheden van je header zijn meestal geregeld via het WordPress thema dat je gebruikt. Als je thema niet de optie biedt om een transparante header in te stellen, kun je gaan werken met Elementor Pro. Of misschien werk je al met Elementor en ben je benieuwd hoe je een header transparant maakt. In dit artikel laat ik je zien welke stappen je moet volgen voor het instellen van een transparante header in WordPress met Elementor.
Stap 1: Een header maken in Elementor
De eerste stap is het aanmaken van een header in Elementor. Dit doe je via de Theme Builder –> Header.
Hoe je de header aanpast en stijlt lees in ons artikel Header aanpassen met Elementor.
Als je al een header hebt gemaakt, kun je deze aanpassen via Elementor om deze alsnog transparant en sticky te maken.
Stap 2: De header transparant maken
Als je een transparante header wilt maken, moet je werken met negatieve marges, zodat de header over de content van de pagina valt. Dit doe je als volgt:
Stel de hoogte van de sectie in:
Stel de negatieve marge in
Om ervoor te zorgen dat de content op de pagina’s onder de header vallen, moet je negatieve marges aan de onderkant instellen. Zo schuift de content op de pagina altijd onder header en hoef je dit niet per pagina in te stellen. De negatieve marge geef je hetzelfde aantal px als de hoogte van de sectie:
Stap 3: Sticky transparante header maken en achtergrondkleur wijzigen
Tot slot kun je er nog voor kiezen om de header sticky te maken, zodat ie aan de bovenkant van het venster blijft staan.
- Selecteer de sectie
- Ga naar tab ‘Geavanceerd’ –> Bewegingseffecten
- Zet sticky aan voor alle apparaten
- Vul bij Effects offset de hoogte van de sectie in
Custom css invoegen
Omdat je een transparante header hebt, moet je nog wel een achtergrondkleur instellen, zodat de header goed zichtbaar blijft tijdens het scrollen. Hiervoor moet je werken met custom css. De onderstaande css voeg je in de sectie zelf toe in het tabje ‘Custom CSS’. Deze vind je het tabje geavanceerd.
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; }
Toelichting css:
De achtergrondkleur vervang je door de kleur die je wilt gebruiken. De 0.5 geeft de doorzichtigheid aan. Wil je dat ie helemaal niet doorzichtig is, dan kun je dit weglaten. De 4s is het aantal seconden dat het duurt voordat de achtergrondkleur verandert. De ‘ease’ is de soort overgang (transitie) die je wilt gebruiken. Bij de minimale hoogte voer je hoogte van de sectie in die je bij stap 2 hebt ingesteld.
Eén reactie
Ah, top artikel dit! Ik was hier net naar op zoek voor een nieuwe website die ik aan het ontwikkelen ben. Fijn dat je ook helpt met de custom css, want dit is toch een stukje technischer dan het standaard drag & drop systeem van Elementor.