Benieuwd hoe je het menu van Social inricht en landingspagina's/schermen zelf kunt bouwen? Bekijk dan snel deze e-learning.
De header in beeld houden
Wil je dat het navigatiemenu met het logo altijd bovenaan in beeld blijft (sticky header), ook als gebruikers scrollen? Dit stel je zo in:
- Ga naar Portals en open het portaal waarvan je de header sticky wilt maken.
- Open links onder Templates de template waar de header-widget op staat. Dit is vaak de Base template, maar kan een andere naam hebben.
- Klik op het nummer van de rij waar de header-widget in staat (meestal rij 1). De rij kleurt donkerder zodra je erop klikt, en rechts verschijnt het instellingenmenu.
- Klik op het blokje bij Deze rij altijd in beeld laten? (Engels: Is row sticky) zodat het gevuld is.
- Klik op Opslaan.
- Klik rechtsboven op Publiceren.
Let op: Als de header blijft meescrollen (sticky header) en geen achtergrondkleur heeft, blijft deze vaak transparant. Dit kan ervoor zorgen dat het logo en de navigatie-opties moeilijk leesbaar worden, vooral als gebruikers over een lichte of juist drukke achtergrond scrollen. Door een vaste achtergrondkleur te geven, blijft de header altijd goed zichtbaar. Onder De header een achtergrondkleur geven lees je hoe je dit instelt.
De header een achtergrondkleur geven
Standaard heeft de header een transparante achtergrond. Je kunt deze dezelfde kleur geven als de achtergrond van het scherm, zodat de header subtiel opgaat in de pagina. Dit zorgt voor een rustige uitstraling. Wil je juist dat de header opvalt als vast menu? Kies dan een afwijkende kleur, zoals wit (#ffffff), voor een neutrale en goed leesbare balk.
Stap 1: De achtergrondkleur van het scherm opzoeken
Wil je een afwijkende kleur, dan kun je deze stap overslaan.
- Ga naar Theme editor en open het thema van je omgeving.
- Klik rechtsboven op de kwast.
- Klik op Kleuren.
- Kijk bij Achtergrond voor de huidige achtergrondkleur van de schermen.
- Kopieer de kleurcode, bijvoorbeeld #f2f2f4, zodat je deze straks kunt plakken.
Stap 2: De header een achtergrondkleur geven
- Ga naar Portals en open het portaal waarvan je de header wilt bewerken.
- Open links onder Templates de template waar de header-widget op staat. Dit is vaak de Base template, maar kan een andere naam hebben.
- Klik op de area waar de header-widget in staat. De rand van de area wordt donkerder en rechts verschijnt het instellingenmenu.
- Let op: Klik niet op de widget zelf. Dan verschijnen de instellingen van de widget in plaats van de area. Zie je een donker kader rond de widget? Klik dan twee keer in de area (één keer om de widget te deselecteren en één keer om de area alsnog te selecteren).
- Klik op de kwast.
- Scroll naar beneden tot je de optie Achtergrond ziet.
- Vul de kleurcode in bij Achtergrond, bijvoorbeeld #ffffff voor wit. Het bolletje achter het invulveld verandert naar de nieuwe kleur.
- Klik op Opslaan.
- Klik rechtsboven op Publiceren.
Stap 3: De hele rij een achtergrondkleur geven
Als je de achtergrondkleur van het scherm gebruikt, is deze stap niet nodig. Gebruik je een andere kleur? Dan is het mooi om de hele bovenste rij, van links tot rechts, één afwijkende kleur te geven. Dit zorgt voor een mooier resultaat.
- Klik op het nummer van de rij waar de header-widget in staat (meestal rij 1). De rij kleurt donkerder zodra je erop klikt, en rechts verschijnt het instellingenmenu.
- Vul de kleurcode die je koos voor de area van de header-widget in bij Achtergrond. Het bolletje achter het invulveld verandert naar de nieuwe kleur.
- Klik op Opslaan.
- Klik rechtsboven op Publiceren.