De Shrinking Header is een kleinere versie van de site kopstekst, waardoor je belangrijke navigatie-informatie vast kunt houden zonder gebruikers af te leiden terwijl ze naar beneden scrollen en zonder al te veel ruimte in beslag te nemen. Het fungeert als een sticky header functie, maar comprimeert de grootte van de logo’s en andere widgets in jouw koptekst. Het is vooral handig bij sites met grote kopteksten en sites die zijn ontworpen voor lang scrollen.
Als de gebruiker eenmaal voorbij de hoogte van de koptekst is, krimpt de koptekst.
- Als de kolommen één zichtbare widget hebben, wordt de widget in het midden van de kolom verticaal geplaatst en worden de boven- en onderkant van de kolom gevuld en de marges op 0 gezet.
- Als kolommen meer dan één zichtbare widget hebben, worden de widgets niet verticaal uitgelijnd en worden de boven- en onderkant gevuld en de marges ingesteld op 10px.
- Als er lege rijen met kolommen zijn, dan overspannen de kolommen de hele ruimte van de rij.
- Om sjablonen met een minimale hoogtewaarde in de koptekst te kunnen verwerken, wordt de minimumhoogte van de koptekst op automatisch gezet.
Om het ontwerp van een shrinking header te bewerken:
- Ga met de muis over de koptekst, klik op “Koptekst”, en klik dan op “Ontwerp bewerken”.
- Klik op het tabblad Shrinking Header en klik op de knop “Schakel shrinking header in”. Je hebt de volgende opties:
- Toon alleen de navigatierij. Geef de rij met navigatie alleen weer wanneer de koptekst krimpt. Deze functie is alleen van toepassing als er meer dan één rij in de koptekst staat.
- Achtergrondkleur. Verander de achtergrondkleur van de shrinking header.
Let op: De rij-achtergrondkleur vervangt de achtergrond kleur van de shrinking header.
- Meer koptekst kleuren bij het scrollen. Geef kleuren op voor de tekst, geselecteerde link & hover, pictogrammen, knoptekst en meer.
- Logo formaat. Wijzig de grootte van het logo of de afbeelding wanneer de koptekst krimpt (standaard is dit 66%).
- Verander het logo tijdens het scrollen. Selecteer een logo dat je wil weergeven op het scherm.
- Koptekst afstand. Pas de afstande van de boven- en onderkant van de shrinking header aan. Je kan de afstand tussen de kopteksten per apparaat wijzigen.
Wanneer de shrinking header wordt geactiveerd:
- De site scrollt naar beneden om de shrinking header logo en de effecten weer te geven.
- De sticky header functie wordt automatisch toegepast op de koptekst.
- De afstand tussen de kopteksten verandert de boven- en onderkant van de vulling en de marge is 0.
Opmerking: Dit verandert de opvulling en de marge van de koptekst, en niet de rijen binnen de koptekst.
- Afbeeldingen in de koptekst krimpen tot het percentage in de balk voor de grootte van jouw logo (standaard is 66%).
- Het veranderen van de kopindeling verandert niets aan de instellingen voor de shrinking header.
- Niet alle widgets zijn compatibel en verschijnen in de shrinking header. De volgende widgets worden weergegeven in een shrinking header:
- Navigatie
- Meertalige widget
- Sociale iconen
- Click to Call knop
- OpenTable knop
- Click to Email knop
- vCita
- PayPal knop
- FaceBook Like knop
- Afbeeldingen en logo’s
- Winkelwagen
- Paragraaf widgets
- Titel widgets
- Knoppen
Opmerkingen:
Je kunt geen widgets bewerken als de koptekst is gekrompen.
De ontwerpeigenschappen overschrijven de shrinking header eigenschappen. Als je bijvoorbeeld een rij-achtergrond in de koptekst instelt, wordt de rij-achtergrond over de shrinking header achtergrond heen weergegeven.
Als je een widget in de koptekst hebt die niet compatibel is met de shrinking header, verschijnt er een lege kolom in plaats van de widget.
Lege rijen worden weergegeven in de shrinking header.
Als je jouw shrinking header niet kunt zien, kan het zijn dat je niet genoeg rijen op jouw site hebt om naar beneden te kunnen scrollen en om zo de shrinking header te triggeren. Als je slechts één rij op de pagina heeft, zal de site niet scrollen.