Hoe stel je de juiste breedte in voor een achtergrondafbeelding binnen een kolommenblok in Datamotive?

Wanneer je in een kolommenblok een afbeelding instelt als achtergrond, kun je per apparaattype (mobiel, tablet en desktop) een eigen afbeelding uploaden. Om de afbeelding scherp weer te geven zonder onnodig grote bestanden te laden, is het belangrijk om per apparaat een afbeelding met de juiste breedte te gebruiken.

Voorwaarde: deze handleiding gaat over de breedte van een afbeelding die als achtergrond van een kolommenblok wordt ingesteld. Raadpleeg voor de volledige stappen om een achtergrond toe te voegen eerst de handleiding [Hoe stel je een kolommenblok in binnen Datamotive?]

Waarom de juiste breedte belangrijk is

De hoogte van een achtergrondafbeelding in een kolommenblok wordt niet vast ingesteld, maar bepaald op basis van de content die in de kolom wordt geplaatst. Dit geldt voor alle apparaattypen: desktop, tablet en mobiel. Hoe meer content er in de kolom staat, hoe hoger het vlak wordt weergegeven. Wil je de hoogte van het vlak aanpassen, dan doe je dit door witregels toe te voegen aan de content in de kolom, niet door de afbeelding zelf te wijzigen.

Omdat er geen vaste hoogte is, is er ook geen vaste aspect ratio waaraan de afbeelding moet voldoen. Wel is het belangrijk om per apparaattype een afbeelding met voldoende breedte te gebruiken, zodat deze op elk schermformaat scherp blijft.

Aanbevolen breedte per apparaat

• Desktop: 1920 px breed. De hoogte wordt bepaald op basis van de content die in het kolommenblok wordt geplaatst.
• Tablet: 1024 px breed. De hoogte wordt bepaald op basis van de content die in het kolommenblok wordt geplaatst.
• Mobiel: 600 px breed. De hoogte wordt bepaald op basis van de content die in het kolommenblok wordt geplaatst.

Een achtergrondafbeelding met de juiste breedte instellen

Stap 1 – Open de achtergrondinstellingen
Ga naar het kolommenblok waarvoor je een achtergrondafbeelding wilt instellen en klik op + Achtergrond toevoegen, of open de bestaande achtergrondinstelling. Kies als achtergrondtype Afbeelding.

Stap 2 – Upload een afbeelding per apparaattype
Upload voor mobiel, tablet en desktop elk een afbeelding met de aanbevolen breedte: 600 px voor mobiel, 1024 px voor tablet en 1920 px voor desktop.

Stap 3 – Stem de hoogte af met witregels
Wil je dat het vlak hoger of lager wordt weergegeven op tablet of mobiel? Voeg dan witregels toe aan de content binnen de kolom (bijvoorbeeld in het tekstblok), zodat de hoogte van het vlak zich hierop aanpast.

Stap 4 – Controleer de overige achtergrondinstellingen
Stel indien gewenst de resize methode, tekst kleur, achtergrond kleur en overlay in, zoals beschreven in de handleiding [Hoe stel je een kolommenblok in binnen Datamotive?]

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

Overzicht instellingen