Transparante header WordPress maken met Elementor

Inhoud van dit artikel:

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.

Voorbeeld transparante header wordpress Elementor met video achtergrond

 

Voorbeeld transparante header op gekleurde achtergrond
Voorbeeld transparante header op gekleurde achtergrond

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.

header instellen 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:

  • Hoogte van een sectie instellen voor maken transparante header wordpress

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:

Header overlappen op pagina's met negatieve marges

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

Transparante header elementor effects offset instellen

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.

Transparante header wordpress elementor

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.

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor, en heeft een achtergrond in marketing- en communicatie.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Tips ontvangen?

Schrijf je in voor updates!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.