Hero shots (JouwWeb)

Uit De Vliegende Brigade
Ga naar: navigatie, zoeken

Binnen JouwWeb heet een hero shot een Banner

Om een hero shot in te voegen, moet je eerst een design kiezen waarin dat ondersteunt wordt → Grafische vormgeving (JouwWeb)

Ga naar Pagina-instellingen en kies je opmaak

Afbeelding

Sommige designs van JouwWeb bieden de mogelijkheid om een paginabrede hero shot in te voegen. Om die afbeeldingen goed te krijgen, is wat gepuzzel.

Parameters:

  • Dimensies van de afbeelding - Of speelt dat geen rol?
  • Aspect-ratio van de afbeelding - Dit speelt beslist een rol
  • Hoogte van de hero-shot - Dat kun je in JouwWeb met een schuif aanpassen.

Aanbevolen afmetingen

  • 1920x454
  • 4,32:1

Casus feb. 2020 - Afbeelding goed krijgen

Iteratie 1

  • Dimensies afbeelding: 1920x549
  • Verhoudingen afbeelding: 3,5:1
  • Hoogte hero-shot: Ca. de helft van het hoofdgedeelte van de pagina binnen de JouwWeb-editor.

Resultaat: Prima. Misschien neemt de afbeelding in productieomgeving iets te veel ruimte in

Iteratie 2

  • Als hierboven. Alleen de hoogte aangepast: Hij is nu ca. 1/3e van het hoofdvlak binnen de JouwWeb-editor
  • Afbeelding is prima. Er worden geen boven- of onderranden verwijderd.

Casus maart 2020 (1) - Afbeelding goed krijgen

Iteratie 1

Deze afbeelding krijg ik niet goed:

  • Afmetingen: 1500x781
  • Verhouding: 2:1
  • Verschillende dingen geprobeerd, maar zonder succes: Onder- & bovenranden worden weggesneden.

Iteratie 2

  • Afbeelding als hierboven, maar nu de verhouding aangepast naar 3,5:1, terwijl breedte gelijk blijft → Hoogte: 428
  • Vanwege loze ruimte, wordt de nieuwe breedte 1236 → Nieuwe hoogte: 353

Lukt niet om 'm goed te krijgen. Waarschijnlijk omdat er geschaald wordt om eea. aan te passen aan het scherm waarop het getoond wordt.

Conclusies

  • Afmetingen: 1920x454
  • Zorg voor flinke marges rondom de afbeelding

Casus maart 2020 (2) - Afbeelding goed krijgen

  • Originele afmetingen: 3840x2160
  • Hoogte wil ik behouden → Breedte wordt 9331

Gelukt! Dus voldoende marges aanhouden rondom afbeeldingen.