Hoe stel je een afbeelding blok in binnen een kolommenblok in Datamotive?
Leer hoe je een afbeelding toevoegt aan een kolom en instelt met beeldverhouding, resize methode en aparte afbeeldingen per apparaattype.
Met het afbeelding blok voeg je een afbeelding toe aan een kolom. Je kunt aparte afbeeldingen instellen voor desktop, tablet en mobiel en de beeldverhouding en resize methode per blok bepalen. Optioneel kun je een link toevoegen aan de afbeelding.
Voorwaarde: het afbeelding 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 afbeelding blok toevoegen
Stap 1 – Voeg een blok toe
Klik binnen de kolom op + Blok toevoegen en selecteer het bloktype Afbeelding.
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.
Beeldverhouding en resize methode instellen
Stap 3 – Kies een beeldverhouding
Selecteer bij Beeldverhouding de gewenste verhouding voor de afbeelding. De volgende opties zijn beschikbaar:
- Auto (standaard) – de afbeelding behoudt de originele verhouding
- 1:1 – vierkant
- 4:3 – standaard liggende verhouding
- 3:2 – iets breder dan 4:3
- 16:9 – brede liggende verhouding
- 9:16 – staande verhouding, geschikt voor mobiel
Stap 4 – Kies een resize methode
Selecteer bij Resize methode hoe de afbeelding wordt aangepast aan de gekozen beeldverhouding:
- Bijsnijden (standaard) – de afbeelding wordt bijgesneden zodat deze de volledige ruimte vult
- Witruimte toevoegen – de afbeelding blijft volledig zichtbaar en er wordt witruimte toegevoegd
- Uitrekken – de afbeelding wordt uitgerekt om de ruimte te vullen
Tip: raadpleeg de handleiding [Hoe stel je afbeeldingen correct in binnen Datamotive?] voor meer informatie over het effect van beeldverhouding en resize methode op de weergave.
Afbeeldingen selecteren per apparaattype
Stap 5 – Selecteer de afbeelding voor desktop
Klik bij Afbeelding op Selecteer media en kies de gewenste afbeelding uit de mediabibliotheek.
Stap 6 – Selecteer een afbeelding voor tablet (optioneel)
Klik bij Afbeelding tablet op Selecteer media om een afwijkende afbeelding voor tablet in te stellen. Standaard wordt dezelfde afbeelding als desktop gebruikt.
Stap 7 – Selecteer een afbeelding voor mobiel (optioneel)
Klik bij Afbeelding mobiel op Selecteer media om een afwijkende afbeelding voor mobiel in te stellen. Standaard wordt dezelfde afbeelding als tablet gebruikt.
Een link toevoegen aan de afbeelding (optioneel)
Stap 8 – Voeg een link toe
Klik op + Link toevoegen om de afbeelding klikbaar te maken. Selecteer een interne pagina of voer een externe URL in.
Opslaan en publiceren
Stap 9 – Sla op en publiceer
Klik linksboven op Opslaan. Publiceer de pagina om de wijzigingen zichtbaar te maken op de live website.