Hero

Met het hero component kun je een call to action op de pagina extra aandacht geven. Dit kan met een afbeelding op de achtergrond of met een licht- of donkerblauwe kleur. Het hero component gaat over de volledige breedte van het scherm.

Hoe gebruik ik een hero component?

Do's

  • Zorg er altijd voor dat de tekst op de hero afbeelding goed leesbaar is. Test dit ook op verschillende devices.
  • De hoogte van de afbeelding is variabel. Zorg ervoor dat deze nooit boven 500 px komt. De breedte mag niet onder 1600 px komen.
  • Gebruik de donkerblauwe achtergrond alleen voor de primaire call to action op de pagina. 
  • Gebruik de lichtblauwe achtergrond alleen voor een secundaire call to action op de pagina. 
  • Zorg ervoor dat de tekst kort en krachtig is en koppel er altijd een call to action aan. 

Dont's

  • Plaats geen ellenlange tekst in het hero component.
  • Afbeelding niet hoger dan 500 px en niet kleiner dan 1600 px breed.
  • Gebruik geen drukke foto.

Voorbeelden hero

Hero afbeelding - tekst links uitgelijnd


Zorg
Dit is een voorbeeld van een header
Dit is een voorbeeld van een subheader 


Hero - donkerblauwe achtergrond met tekst gecentreerd (Styling hero: Hero achtergrond-2)

Gebruik deze hero alleen voor een primaire call to action. 


Zorg
Dit is een voorbeeld van een header
Dit is een voorbeeld van een subheader 


Hero - lichtblauwe achtergrond met tekst links uitgelijnd (Styling hero: Hero achtergrond-1)

Gebruik deze hero alleen voor een secundaire call to action op de pagina. 


Zorg
Dit is een voorbeeld van een header
Dit is een voorbeeld van een subheader 


CMS instellingen

  • Voeg altijd eerst een 'Volledige-Breedte' pagina structuur toe en plaats daarna het component 'Hero'.
  • De inhoud van de hero content kun je direct in de Experience editor aanpassen door op de tekst te klikken. 
  • Bij 'Component properties' kies je een achtergrondkleur en geef je aan hoe de tekst uitgelijnd moet worden (Content alignment en Hero).
X
Wij gebruiken cookies om uw website-ervaring te verbeteren. Als u op akkoord klikt, dan gebruiken wij cookies voor de werking van de website, statistieken, social media en online marketing.
Weigeren
Akkoord