Hoe stel je een hero blok in binnen een kolommenblok in Datamotive?

Met het hero blok maak je een opvallende sectie op een pagina met één groot element en twee of drie kleine elementen. De weergave op desktop is afhankelijk van het aantal kleine elementen:

• 2 kleine elementen: de kleine elementen worden rechts van het grote element in een kolom getoond
• 3 kleine elementen: de kleine elementen worden onder het grote element getoond

Op tablet en mobiel hebben alle elementen dezelfde grootte en worden ze onder elkaar weergegeven.

Voorwaarde: het hero blok wordt toegevoegd binnen een kolom van een kolommenblok. Heb je nog geen kolommenblok aangemaakt? Raadpleeg dan eerst de handleiding [Hoe stel je een kolommenblok in binnen Datamotive?]

Een hero blok toevoegen

Stap 1 – Voeg een blok toe
Klik binnen de kolom op + Blok toevoegen en selecteer het bloktype Hero.

Stap 2 – Vul een korte beschrijving in (optioneel)
Vul een korte beschrijving in voor intern gebruik in het CMS. Deze tekst is niet zichtbaar op de website.

Stap 3 – Kies een beeldverhouding
Selecteer bij Beeldverhouding de gewenste verhouding voor de elementen in het hero blok. De opties zijn: Auto (standaard), 1:1, 4:3, 3:2, 16:9 en 9:16.

Het grote element instellen

Stap 4 – Stel het grote element in
Klik onder Groot element op + Element toevoegen en vul de volgende velden in:

• Afbeelding: selecteer een afbeelding via de mediabibliotheek
• Tekst: voeg een tekst toe via de teksteditor
• Gradient verbergen: schakel dit aan om de gradient overlay over de afbeelding te verbergen
• Link toevoegen: klik op + Link toevoegen om het element klikbaar te maken
• Buttons: klik op + Button toevoegen om één of meerdere knoppen toe te voegen

De kleine elementen instellen

Stap 5 – Voeg kleine elementen toe
Klik onder Kleine elementen op + Element toevoegen om een klein element toe te voegen. Voeg minimaal 2 en maximaal 3 kleine elementen toe. Elk klein element bevat dezelfde velden als het grote element:

• Afbeelding: selecteer een afbeelding via de mediabibliotheek
• Tekst: voeg een tekst toe via de teksteditor
• Gradient verbergen: schakel dit aan om de gradient overlay over de afbeelding te verbergen
• Link toevoegen: klik op + Link toevoegen om het element klikbaar te maken
• Buttons: klik op + Button toevoegen om één of meerdere knoppen toe te voegen

Let op: de lay-out op desktop is afhankelijk van het aantal kleine elementen. Bij 2 kleine elementen worden deze rechts van het grote element getoond. Bij 3 kleine elementen worden ze eronder getoond.

Opslaan en publiceren

Stap 6 – Sla op en publiceer
Klik linksboven op Opslaan. Publiceer de pagina om de wijzigingen zichtbaar te maken op de live website.

Overzicht lay-out per apparaat