Hoe stel je een masonry (cards) blok in binnen een kolommenblok in Datamotive?
Leer hoe je cards met afbeelding, tekst en een link of knop toont in een vaste masonry-layout in het CMS van Datamotive.
Met het masonry (cards) blok toon je cards in een vaste masonry-layout, waarbij items van verschillende hoogtes in een visueel grid worden geplaatst. Elke card bevat een afbeelding, tekst en een link of knop. De positie en lay-out aan de voorkant liggen vast en zijn niet aanpasbaar via het CMS. Alleen de inhoud verschilt per item.
Voorwaarde: het masonry (cards) 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 masonry (cards) blok toevoegen
Stap 1 – Voeg een blok toe
Klik binnen de kolom op + Blok toevoegen en selecteer het bloktype Masonry (cards).
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.
Items toevoegen
Stap 3 – Voeg een item toe
Klik op + Item toevoegen om een nieuwe card toe te voegen. Vul per item de volgende velden in:
- Afbeelding (verplicht): selecteer een afbeelding via de mediabibliotheek
- Titel (optioneel): voeg een titel toe aan de card
- Tekst (optioneel): voeg een korte beschrijving of toelichting toe
- Icon (optioneel): voeg een pictogram toe via de icoonnaam, zoals beschreven in de handleiding [Hoe voeg je een pictogram toe aan een tekstblok in Datamotive?]
- Link (verplicht): selecteer de pagina of voer de URL in waarnaar de card verwijst
- Link titel (verplicht): voer de zichtbare tekst van de link in
- Toon knop: schakel in om de link als knop weer te geven in plaats van als tekstlink
Herhaal deze stap voor elk item dat je aan de masonry wilt toevoegen. De items worden automatisch in de vaste masonry-layout geplaatst.
Opslaan en publiceren
Stap 4 – Sla op en publiceer
Klik linksboven op Opslaan. Publiceer de pagina om de wijzigingen zichtbaar te maken op de live website.
Overzicht instellingen
| Instelling | Verplicht | Omschrijving |
|---|---|---|
| Afbeelding | Ja | Selecteer via de mediabibliotheek |
| Titel | Nee | Optionele titel van de card |
| Tekst | Nee | Optionele beschrijving van de card |
| Icon | Nee | Pictogram via icoonnaam |
| Link | Ja | Pagina of URL waarnaar de card verwijst |
| Link titel | Ja | Zichtbare tekst van de link |
| Toon knop | Nee | Schakel in om de link als knop te tonen |