Transparante header WordPress maken met Elementor

Share on linkedin
Share on facebook
Share on twitter
Share on email
Share on whatsapp

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.

Eén reactie

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

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

Share on linkedin
Share on facebook
Share on twitter
Share on email
Share on whatsapp
Deze vind je misschien ook interessant:

Header aanpassen in WordPress met Elementor in 6 stappen

Als ik ergens een hekel aan heb, dan is het geklooi met een header aanpassen in WordPress. Hoewel de meeste (betaalde) thema’s wel veel opties

Elementor & WooCommerce: Wat kun je ermee? 5 voordelen!

Een webshop bouwen met Elementor en WooCommerce, hoe werkt dat precies? Waarvoor kun je Elementor Pro gebruiken om je webshop in te richten? In dit

WooCommerce categorie pagina aanpassen met Elementor in 4 stappen

Een WooCommerce categorie pagina aanpassen kun je eenvoudig doen met Elementor Pro. Zonder kennis van code kun je de producten inladen, de categoriebeschrijving toevoegen en