Wil je dat je logo en menu naadloos over je paginabanner of hero-afbeelding vallen, zonder een aparte balk erboven? Dan gebruik je een transparante header. De header krijgt een doorzichtige achtergrond en de inhoud van je pagina schuift eronder omhoog, zodat de header en je afbeelding in elkaar overlopen.
De transparante header in Autorespond is gebaseerd op het website-thema Astra Pro — inbegrepen in je pakket. Lees de Engelse documentatie
Wat een transparante header doet #
Een transparante header zet de achtergrond van je bovenbalk op doorzichtig en trekt de inhoud van je pagina naar boven. Daardoor smelten je header en het bovenste deel van je pagina samen: je logo en menu komen over je afbeelding, video of gekleurde kop te liggen in plaats van in een aparte balk erboven.
Dit geeft een strak, modern effect dat vooral goed werkt op landingspagina’s, portfolio- of coachingpagina’s met een grote hero-afbeelding. Op pagina’s die bovenaan met tekst of een witte achtergrond beginnen, is een transparante header meestal minder handig — daarover verderop meer.
Transparante header instellen #
De transparante header stel je centraal in via de Customizer. Je kunt deze eventueel standaard aanzetten: vanaf dat moment geldt de instelling voor je hele website, met de mogelijkheid om bepaalde pagina’s uit te sluiten. Je kunt het ook uit laten staan, maar dan enkel voor specifieke pagina’s aanzetten (zie het kopje hieronder)
- Ga in het dashboard naar Website → Website Instellingen om de Customizer te openen.
- Open het paneel Header en klik onderaan bij Header types op Transparante header.
- Zet de optie aan om de transparante header op je hele website te tonen en kies of dit geldt voor desktop, mobiel of allebei.
- Stel eventueel uitzonderingen in. Je kunt de transparante header apart uitschakelen op je blogpagina, zoekresultaten, de 404-pagina, alle gewone pagina’s, alle berichten of je productpagina’s.
- Wil je een ander logo op de transparante header? Stel dan een afwijkend logo en de gewenste logobreedte in. Op het tabblad Ontwerp pas je de kleuren aan van onder andere de achtergrond, de sitetitel, het menu en de knoppen.
- Klik op Publiceren om je wijzigingen door te voeren.
De kleurinstellingen op het tabblad Ontwerp zijn belangrijk: omdat je header nu over je afbeelding valt, kies je meestal een lichte of donkere tekstkleur die goed leesbaar blijft op de achtergrond eronder. Wil je daarnaast het logo in je header wijzigen? Lees dan hoe je het logo in je website header aanpast.
Transparante header per pagina instellen of uitzetten #
Soms wil je de transparante header op de meeste pagina’s, maar juist niet op één specifieke pagina — of andersom. Dat regel je per pagina, en die keuze heeft altijd voorrang op de algemene instelling uit de Customizer.
- Open de pagina of het bericht dat je wilt aanpassen via Website → Pagina’s.
- Klik rechtsbovenin op het instellingen-icoon van het thema (het ronde icoon met de letter A) en open Geavanceerde instellingen.
- Kies bij Transparante header een van de drie opties:
- Erven — de pagina volgt de algemene instelling uit de Customizer. Dit is de standaard.
- Ingeschakeld — forceer de transparante header aan op deze pagina, ook als hij algemeen uit staat.
- Uitgeschakeld — forceer de transparante header uit op deze pagina, ook als hij algemeen aan staat.
Werk daarna de pagina bij of klik op Opslaan, zodat de wijziging van kracht wordt.
In hetzelfde venster vind je nog een paar handige opties: je kunt de volledige header, de bovenste headerrij of alleen de mobiele header per pagina uitschakelen. Onder Oppervlakte kleuren kun je bovendien afwijkende kleuren instellen voor deze specifieke pagina.
Wanneer gebruik je een transparante header #
Een transparante header komt het best tot zijn recht in deze situaties:
- Een landingspagina met een beeldvullende hero-afbeelding of video waar je logo en menu overheen moeten vallen.
- Coaching-, portfolio- of eventpagina’s met een grote kop bovenaan.
- Een strak ontwerp waarbij je geen zichtbare balk bovenaan de pagina wilt.
Let op de leesbaarheid: begint een pagina bovenaan met tekst of een witte achtergrond, dan kunnen je logo en menu wegvallen. Zet de transparante header op zo’n pagina dan op Uitgeschakeld, of pas de kleuren aan zodat alles goed zichtbaar blijft.
Zie je je wijziging niet meteen terug op je website? Leeg dan eerst de cache via Beheer → Cache toolbox en ververs de pagina.
Veelgestelde vragen #
Wat is een transparante header? #
Een transparante header is een bovenbalk met een doorzichtige achtergrond. Je logo en menu vallen dan over de inhoud van je pagina, zoals een grote afbeelding of video, in plaats van in een aparte gekleurde balk erboven. Dat geeft een strak, modern effect op je website.
Hoe zet ik de transparante header uit op één pagina? #
Open de pagina in de bewerker, klik rechtsbovenin op het instellingen-icoon van het thema en ga naar Geavanceerde instellingen. Kies bij Transparante header voor Uitgeschakeld en werk de pagina bij. Deze keuze per pagina heeft voorrang op de algemene instelling.
Waarom zijn mijn logo en menu slecht leesbaar met een transparante header? #
Omdat de header nu over je pagina-inhoud ligt, bepaalt de achtergrond eronder de leesbaarheid. Kies op het tabblad Ontwerp een tekst- en menukleur die contrasteert met je afbeelding of achtergrond, of zet de transparante header uit op pagina’s met een lichte bovenkant.
Heeft de instelling per pagina voorrang op de algemene instelling? #
Ja. Een instelling die je per pagina kiest (Ingeschakeld of Uitgeschakeld) heeft altijd voorrang op de algemene instelling in de Customizer. Kies je per pagina voor Erven, dan volgt de pagina juist wél de algemene instelling van je website.
