Afbeelding per schermgrootte
Een responsive website bouwen, welke op verschillende schermgroottes er goed uitziet, is nog niet zo eenvoudig. Naast de technische uitdagingen welke de SMART Webbuilder voor je afhandelt moet je ook zelf bij het plaatsen van content rekening houden met de verschillende schermgroottes. Met name bij afbeeldingen is dit belangrijk.
Verhoudingen
Een afbeelding welke over de gehele breedte van het scherm getoond wordt zal qua verhouding per schermgrootte enorm verschillen. Zo wordt een paginabrede afbeelding op een smartphone staand en dezelfde afbeelding op een desktop liggend getoond. Hoe zorg je ervoor dat dezelfde afbeelding in beide situaties perfect wordt getoond op het scherm? Dit is bijna onmogelijk en daarom kun je in de SMART Webbuilder per schermgrootte een andere afbeelding plaatsen. Zo ziet jouw website er op ieder scherm goed uit. Hieronder volgt het stappenplan waarin wordt uitgelegd hoe je per schermgrootte een andere afbeelding plaatst.
Stappenplan
- Open de pagina in de SMART Webbuilder welke je wilt gaan voorzien van afbeeldingen
- Sleep bijvoorbeeld een hero blok bovenaan op de pagina
- Klik op de afbeelding
- In de functiebalk rechts verschijnt het kopje achtergrond media/instellingen
- Klik bij afbeelding op het uitklapmenu de schermgrootte selector
- Deze klapt open en toont de verschillende schermgroottes
- Selecteer de schermgrootte waarvoor je een afwijkende afbeelding wenst in te voeren
- Klik nu op het bladericoon achter de afbeelding-naam welke onder de schermgrootte selector staat
- Kies de gewenste afbeelding
- Klik op invoegen
- Voor de geselecteerde schermgrootte is nu de nieuwe afbeelding ingesteld
