Promo

Met het 'Promo' component kun je content in een soort blokken op de pagina plaatsen. Je kunt een promo mėt of zonder afbeelding gebruiken. Daarnaast zijn er blokken met verschillende achtergrondkleuren beschikbaar. 

Hoe gebruik ik een promo?

Do's

  • Gebruik voor een afbeelding de ratio 2:1 met een minimale breedte van 400 px.
  • Voeg alleen een afbeelding toe als deze iets toevoegt aan de content. Niet om de pagina leuk op te vullen. 
  • Plaats je meerdere promo's naast elkaar? Gebruik dan dezelfde styling voor deze promo's. Dus of bijvoorbeeld allemaal een lichtblauwe achtergrond of allemaal geen achtergrond. 
  • Wees zuinig met het gebruik van de donkerblauwe achtergrondkleur. Deze kan de bezoeker snel afleiden van de taak waarvoor hij komt doordat de kleur zo opvalt. 

Dont's

  • Plaats een promo nooit op de volledige breedte van de pagina. De maximale breedte van een promo is de helft van de pagina  (6 kolommen).
  • Verschillende hoogtes in de afbeeldingen als de promo's naast elkaar staan.
  • Verschillend gestylde promo's naast elkaar plaatsen. Gebruik altijd dezelfde styling als er meerdere promo's naast elkaar staan. 

Promo met afbeelding

Variant 1: Afbeelding - Titel - Tekst - Link

In deze promo staat de afbeelding bovenaan en daaronder volgen de titel en de tekst. Gebruik voor de afbeelding de ratio 2:1 met een minimale breedte van 400 px.

Voorbeeld afbeelding bibliotheek

Donec a imperdiet

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Etiam porta se.


Variant 2: Titel - Afbeelding - Tekst - Link

In deze promo staat de titel boven de afbeelding en de rest van de tekst onder de afbeelding. Gebruik voor de afbeelding de ratio 2:1 met een minimale breedte van 400 px.

Mauris ultrices cursus

Voorbeeld afbeelding bibliotheek
Donec a imperdiet neque, ut vestibulum orci. Mauris ultrices cursus pretium. Donec.

Promo zonder afbeelding

Variant: Titel - tekst - link

Mauris ultrices cursus

Donec a imperdiet neque, ut vestibulum orci. Mauris ultrices cursus pretium. Donec.

Donec a imperdiet

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Etiam porta se.

Mauris ultrices cursus

Donec a imperdiet neque, ut vestibulum orci. Mauris ultrices cursus pretium. Donec.

Donec a imperdiet

Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Etiam porta se.

Donkerblauwe achtergrond

Gebruik de donkerblauwe achtergrond alleen als de boodschap alle aandacht moet krijgen van de bezoeker. Let op met het gebruik van deze kleur, want het kan de bezoeker ook heel snel afleiden van de taak die hij wil doen. 

Lichtblauwe achtergrond

Gebruik de lichtblauwe achtergrondkleur als de boodschap in de promo niet direct de aandacht hoeft te trekken, maar wel op mag vallen.

Omlijning

Gebruik de omlijning als de boodschap in de promo niet direct de aandacht hoeft te trekken, maar wel op mag vallen.

Geen achtergrond

Als je content in blokken wilt plaatsen om overzicht op de pagina te creëren, kun je de promo zonder achtergrond gebruiken.

Belangrijk! Plaats je meerdere promo's naast elkaar? Kies dan voor dezelfde styling. Dus òf alle promo's hebben een lichtblauwe achtergrond of een omlijning, òf alle promo's hebben geen achtergrond.

CMS instellingen

  • De achtergrondkleur of omlijning stel je in via 'Edit component properties'. Bij styling zie je een kopje 'Promo'. Daar kun je de styling voor de promo kiezen.
    Achtergrond 1 = Lichtblauw
    Achtergrond 2 = Wit oftewel 'geen achtergrondkleur'
    Achtergrond 3 = Donkerblauw

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