Wil je dat de koptekst (header) van je website zichtbaar blijft tijdens het scrollen? In Websitemaker Editor 2.0 kan je hiervoor eenvoudig een plakkende of verkleinende header inschakelen.
In dit artikel lees je wat het verschil is en hoe je deze opties instelt. Daarnaast laten we zien welke widgets compatibel zijn met een verkleinende koptekst.
Let op: deze handleiding is specifiek bedoeld voor Editor 2.0. Gebruik je de klassieke editor? Lees dan ons artikel over koptekst in de klassieke editor.
-
Het verschil tussen een plakkende en verkleinende koptekst
-
Stappenplan: een plakkende koptekst inschakelen
-
Stappenplan: een verkleinende koptekst inschakelen
-
Widgets compatibel met een verkleinende koptekst
Het verschil tussen een plakkende en verkleinende koptekst
Een plakkende koptekst (sticky header) blijft bovenaan het scherm staan wanneer bezoekers door je website scrollen. Zo blijft het navigatiemenu altijd zichtbaar en kunnen bezoekers gemakkelijk naar andere pagina's navigeren. Je kan per schermformaat instellen of de koptekst plakkend is.
Een verkleinende koptekst (shrinking header) werkt op dezelfde manier, maar verandert tijdens het scrollen van vorm. De koptekst wordt compacter weergegeven om ruimte te besparen. Zo kan bijvoorbeeld het logo kleiner worden of kunnen de marges veranderen. Dit is ideaal voor websites met een grote koptekst of lange pagina's met veel content.
Stappenplan: een plakkende koptekst inschakelen
Volg deze 2 stappen om een plakkende koptekst in te schakelen:
-
Klik met de rechtermuisknop op de koptekst.
-
Klik in het zwevende menu op Instellen als sticky koptekst.
Stappenplan: een verkleinende koptekst inschakelen
Volg deze 5 stappen om een verkleinende koptekst in te schakelen:
-
Klik op de koptekst om het ontwerppaneel te openen.
-
Klik in het ontwerppaneel op Scroll gedrag.
- Schakel de optie Instellen als sticky koptekst in (als deze nog niet is ingeschakeld).
-
Schakel de optie Koptekst wijzigen bij scrollen in.
- Je kan daarnaast de volgende ontwerpinstellingen aanpassen:
- Alleen navigatiegedeelte op scroll weergeven: schakel je deze optie in, dan blijft tijdens het scrollen alleen het navigatiemenu zichtbaar. Alle andere onderdelen van de koptekst verdwijnen.
- Achtergrond op rol: kies hier een achtergrondkleur voor de koptekst. Dit wordt toegepast op alle schermformaten.
- Meer koptekstkleuren bij scrollen: hier kan je kleuren instellen voor verschillende onderdelen van de koptekst.
- Spatiëring op scroll: stel hier de boven- en ondermarge van de oorspronkelijke koptekst in. Dit geldt dus niet specifiek voor de plakkende koptekst.
- Logogrootte op scroll: bepaal tot welk formaat het logo moet krimpen bij het scrollen. Gebruik hiervoor de schakelaar of het invoerveld. De standaardwaarde is 66%. Dit moet je per schermformaat instellen.
- Wijzig het logo bij scrollen: stel hier een alternatief logo in, dat zichtbaar wordt zodra een bezoeker gaat scrollen.
Zodra de verkleinende koptekst is ingeschakeld, gelden de volgende instellingen:
- Ruimten: de boven- en ondermarge én opvulling van de koptekst worden automatisch op 0 gezet. Dit geldt niet voor de rijen binnen de koptekst.
- Afbeeldingen: afbeeldingen in de koptekst worden verkleind naar het percentage dat is ingesteld bij Logogrootte op scroll (standaard 66%).
- Hoogte: bij templates met een ingestelde minimumhoogte wordt deze uitgeschakeld, zodat de koptekst tijdens het scrollen kan verkleinen.
- Lege rijen: als de koptekst lege rijen met kolommen bevat, dan vullen deze kolommen automatisch de volledige breedte van de rij.
- Weergave van lege rijen: lege rijen blijven gewoon zichtbaar in de koptekst.
- Ontwerp: je eigen ontwerpinstellingen hebben altijd voorrang op de standaardinstellingen van de verkleinende koptekst. Stel je bijvoorbeeld een achtergrondkleur in, dan wordt deze weergegeven in plaats van de standaardkleur.
Let op: zie je de verkleinende koptekst niet? Dan heeft je pagina waarschijnlijk te weinig inhoud om te scrollen. In dat geval wordt de verkleinende koptekst niet geactiveerd.
Widgets compatibel met een verkleinende koptekst
Niet alle widgets zijn geschikt om te gebruiken in combinatie met een verkleinende koptekst. Plaats je een niet-compatibele widget in de koptekst, dan wordt deze automatisch vervangen door een lege kolom. Ook kan je widgets niet bewerken zolang de koptekst verkleind is.
De volgende widgets zijn wél compatibel en worden correct weergegeven in een verkleinende koptekst:
- Navigatiemenu
- Meertaligheid
- Sociale-media-iconen
- Knoppen
- Klik-om-te-bellen-knop
- Klik-om-te-mailen-knop
- OpenTable-knop
- PayPal-knop
- Facebook-like-knop
- vcita
- Afbeeldingen en logo's
- Winkelwagen
- Paragraaf-widget
-
Titel-widget