Stileer de elementen die bovenaan elke pagina op je site worden weergegeven.

In je header worden de titel of het logo van je site, het navigatiemenu en andere elementen weergegeven. De header ziet er overal op je site hetzelfde uit en speelt een grote rol in hoe bezoekers navigeren en omgaan met je content.

Deze functies zijn beschikbaar voor siteheaders in versie 7.1. Als je site op versie 7.0 draait, is je header specifiek voor het sjabloon van je site.

Video over siteheaders

Deze video laat zien hoe je de header van je site kunt bewerken en opmaken.

Je sitetitel of -logo bewerken

Toen je je site aanmaakte, heb je deze wellicht een titel gegeven. Als je een logo toevoegt, vervangt dit je sitetitel in de header, maar je moet toch een sitetitel toevoegen. Zoekmachines gebruiken de titel voor zoekresultaten en browsertabbladen, tenzij je een aparte SEO-titel toevoegt.

Navigatielinks in je header toevoegen, bewerken of verwijderen

Het navigatiemenu in je siteheader weerspiegelt de pagina's die je hebt toegevoegd aan het paneel Pagina's. Zo wijzig je de navigatielinks:

• Pagina's toevoegen aan je navigatie
• Paginatitels bewerken
• Pagina's verwijderen

Een knop toevoegen aan je header

Door een knop toe te voegen aan een header, plaats je je call-to-action (CTA) vooraan in het midden, waardoor bezoekers worden aangemoedigd om er meteen op te klikken. Afhankelijk van de headerlay-out kan de knop bij de navigatielinks worden geplaatst of er juist los van staan. Op mobiel verschijnt de knop altijd onder je navigatielinks.

Om een knop aan je header toe te voegen:

1. Open het pagina's-paneel.
2. Klik op Bewerken in de linkerbovenhoek van je sitevoorbeeld.
3. Zweef over de header en klik op site-header bewerken.
4. Klik Elementen toevoegen.
5. Schakel de knop in.

De koptekstknop bewerken

Zo stel je de knoptekst, link en stijl in:

1. Open het pagina's-paneel.
2. Klik op Bewerken in de linkerbovenhoek van je sitevoorbeeld.
3. Zweef over de header en klik op site-header bewerken.
4. Klik op de knop in de header en vervolgens op het potloodpictogram.
5. Onder Inhoud bewerk je de tekst van de knop en de hyperlink.
6. Klik op het tabblad Ontwerp en kies vervolgens Primair, Secundair of Tertiair om de knopstijl in te stellen.

De vorm van je header volgt je knopstijlen.

Lettertype van headerknoppen instellen

Als je de knopstijl instelt op Secundair of Tertiair, wordt de tekst op je headerknop aangepast aan je knopstijlen.

Om het lettertype van een headerknop op te maken met de stijl Primair:

1. Open de sitestijlen.
2. Klik op > naast Lettertypen.
3. Klik op stijlen toewijzen.
4. Klik op Headerknop en breng wijzigingen aan.

Kleur van headerknoppen instellen

Hoe je de kleur van headerknoppen aanpast, hangt af van de achtergrondstijl van je header.

Dit gaat als volgt:

• Effen – kleur: de knopkleur volgt het standaard kleurenthema van je site.
• Effen – thema: de knopkleur volgt het geselecteerde kleurenthema.
• Verloop: de knopkleur volgt het standaard kleurenthema van je site.
• Adaptief: de knopkleur volgt het kleurenthema voor het bovenste gedeelte op elke pagina. Pas de knopkleur aan voor elk kleurenthema dat je gedeelte gebruikt.

Aaccountinlog, socialemedialinks, een winkelwagentje of een taalschakelaar toevoegen aan je header

Zo voeg je andere elementen toe aan je header, zoals een accountinlog voor klanten, socialemedialinks, een winkelwagentje of een taalschakelaar: 

1. Open het pagina's-paneel.
2. Klik op Bewerken in de linkerbovenhoek van je sitevoorbeeld.
3. Zweef over de header en klik op site-header bewerken.
4. Klik Elementen toevoegen.
5. Zet de schakelaar aan naast de functies die je wilt inschakelen.

Headerfuncties aanpassen

Je kunt het ontwerp van je socialemedialinks en winkelwagentjepictogram aanpassen. Als je site Weglot gebruikt, kun je ook de taalschakelaar aanpassen.

Zo bewerk je deze functies:

1. Open het pagina's-paneel.
2. Klik op Bewerken in de linkerbovenhoek van je sitevoorbeeld.
3. Zweef over de header en klik op site-header bewerken.
4. Klik op de functie die je wilt bewerken en vervolgens op het potloodpictogram.
5. Gebruik de instellingen om het ontwerp aan te passen. Deze opties variëren per functie.
6. Klik op opslaan.

Ontwerpeffecten toevoegen aan je header

Wanneer je het ontwerp van je siteheader bewerkt, kun je visuele effecten toevoegen om de site een unieke uitstraling te geven of je merk aan te vullen. Deze effecten zijn van toepassing op zowel de mobiele als de desktopversie van je header.

Zo voeg je headereffecten toe:

1. Open het pagina's-paneel.
2. Klik linksboven in je sitevoorbeeld op Bewerken, zweef vervolgens over de header en klik op Siteheader bewerken.
3. Klik op Ontwerp bewerken.
4. Voeg een slagschaduw toe onder Effecten, voeg een rand toe en stel een vaste headerstijl in.

Een slagschaduw toevoegen aan je header

Zo creëer je een schaduweffect rond de header:

1. Klik op Slagschaduw tijdens het bewerken van het headerontwerp. Hiermee krijg je meteen een slagschaduw.
2. Kies uit de presets Zacht of Sterk. Je kunt de presets aanpassen nadat je ze hebt geselecteerd.
3. Klik op Kleur de kleur te kiezen en te stileren.
4. Om het uiterlijk van de slagschaduw te veranderen, gebruik je de schuifregelaars Spreiden, Afstand en Vervagen. We raden je aan om verschillende combinaties uit te proberen om er een te vinden die je bevalt.
5. Om de slagschaduw te verwijderen, klik je op Verwijderen.

Een rand toevoegen rondom je header

Zo plaats je een rand rondom de header:

1. Klik op Rand tijdens het bewerken van het headerontwerp. Dit voegt direct een rand toe.
2. Klik op Kleur de kleur te kiezen en te stileren.
3. Klik op S, M of L om de lijndikte in te stellen, of klik op … om een aangepaste dikte in te stellen.
4. Stel de positie van de rand in. Deze kan aan alle zijden van de header worden weergegeven, alleen bovenaan, alleen onderaan, of zowel boven- als onderaan.
5. Om de rand te verwijderen, klik je op Verwijderen.

Een vaste header inschakelen

Afhankelijk van het apparaat kunnen vaste headers van beide stijlen tijdens het scrollen iets uitzetten of inkrimpen. Zo zet je de header vast bovenaan je site terwijl bezoekers scrollen:

1. Schakel de optie Vaste positie in tijdens het bewerken van het headerontwerp.
2. Stel de vaste headerstijl in als Basis (de header wordt altijd bovenin de browser weergegeven) of Terugscrollen (de header wordt alleen bovenaan de browser weergegeven wanneer de bezoeker omhoog scrolt).

je mobiele navigatiemenu opmaken

In de mobiele weergave wordt je headernavigatie ingeklapt tot een uitklapbaar menu.

Zo maak je het mobiele navigatiemenu op:

1. Open het pagina's-paneel.
2. Klik linksboven in je sitevoorbeeld op Bewerken, zweef vervolgens over de header en klik op Siteheader bewerken.
3. Klik rechtsboven op het pictogram Mobiele weergave.
4. Klik op het mobiele navigatiemenu en vervolgens op het potloodpictogram.
5. Selecteer een stijl voor Menupictogram.
6. Klik op S, M of L om de dikte van de lijnen van het pictogram in te stellen, of klik op … om een aangepaste dikte in te stellen.

De achtergrondeffecten en kleur van je header wijzigen

Je kunt achtergrondstijlen toevoegen aan de header om je header een meer onderscheidend uiterlijk te geven ten opzichte van de rest van je inhoud, of om de header beter te laten passen bij de rest van de branding van je site. Als je navigatie uitklapmenu's bevat, komt de achtergrondkleur van het uitklapmenu op een computer overeen met de achtergrondkleur van de header.

Zo wijzig je de achtergrondstijl:

1. Klik op Bewerken in de linkerbovenhoek van je sitevoorbeeld.
2. Zweef over de header en klik op site-header bewerken.
3. Klik op Ontwerp bewerken, en klik vervolgens op het tabblad Kleur .
4. Selecteer een achtergrondstijl in het uitklapmenu bovenaan de editor. Kies uit Effen, Verloop of Adaptief. 
5. Afhankelijk van de stijl die je kiest, kun je de kleur, het vervagingseffect en de doorzichtigheid van de achtergrond aanpassen. Sommige browsers geven vervagingseffecten niet weer.

Effen headerachtergrond

Om de headerachtergrond in te stellen op een effen kleur, kies je de effen achtergrondstijl. Kies een aangepaste kleur, gebruik het palet van je site, of stem af op een van de kleurenthema's van je site.

Headerachtergrond met verloop

Kies de verloopstijl om de headerachtergrond te laten overvloeien in de achtergrond van het eerste gedeelte van elke pagina. Je kunt de verloopachtergrond en de navigatiekleuren aanpassen.

Adaptieve headerachtergrond

Om de header een variabel uiterlijk te geven van pagina tot pagina, kies je de adaptieve stijl om deze transparant te maken. De achtergrond van het eerste gedeelte op elke pagina wordt achter de header weergegeven.

Je siteheader verbergen

Om de aandacht op je content te vestigen of je bezoekers aan te moedigen actie te ondernemen, kun je de header op bepaalde pagina's verbergen.

Collectiepagina's, zoals blog- en winkelpagina's, hebben deze optie niet.

Om de header te verbergen:

1. Open het pagina's-paneel.
2. Zweef over een paginatitel en klik vervolgens op naast de titel.
3. Klik op Navigatie op het tabblad pagina-instellingen.
4. Gebruik de schakelaars om Header weergeven uit te schakelen.
5. Herhaal deze stappen voor elke pagina waar je de header wilt verbergen.

Kan ik mijn header er anders laten uitzien op mobiele apparaten?

Je kunt de lay-out, hoogte en breedte van de header voor mobiele apparaten onafhankelijk van de desktopweergave aanpassen. Andere ontwerpwijzigingen beïnvloeden zowel de mobiele als de desktopweergave.

Zo stel je aparte stijlen in voor je mobiele of desktopweergave:

1. Klik op Bewerken linksboven in je sitevoorbeeld. Klik rechtsboven op het pictogram Desktopweergave of het pictogram Mobiele weergave, afhankelijk van wat je wilt bewerken.
2. Zweef over de header en klik op site-header bewerken.
3. Klik op Ontwerp bewerken. 
4. Klik op het uitklapmenu Lay-out en selecteer een lay-out om de indeling van de header te wijzigen. Gebruik de schuifregelaars om de afstand tussen links en andere elementen te wijzigen.
5. Gebruik de schuifregelaar Header om de hoogte ervan aan te passen.
6. Klik op Volledig of Ingesprongen om de breedte van de header in te stellen.
7. Klik op opslaan.