Image component
Soms wil je de lezer prikkelen met een heel mooie afbeelding. Hoe zorg je ervoor dat het alle aandacht krijgt die het verdient? Met het component Image natuurlijk!
Hoe werkt het?
Met het component Image kun je een afbeelding in de volledige breedte van de pagina weergeven. Het beeld kan je weer combineren met de bekende eyebrow, title, intro tekst en een image caption.
Er zijn twee varianten beschikbaar. De eerste gaat over de volledige breedte van 12 kolommen. De tweede gaat over 8 kolommen en is dus iets kleiner.
Afbeeldingen toevoegen doe je via een apart systeem, genaamd Brandspot. Verderop in de training leer je meer hierover.
Check de weergave
Check altijd op je telefoon of de weergave wel goed is. We willen geen afgehakte hoofden per ongeluk op de pagina zien. Je kunt hiervoor ‘mobile crop’ gebruiken.
Vul de alt-tekst in.
De alternatieve tekst houdt in dat de tekst van de afbeelding wordt weergegeven zodra de afbeelding door bijv. een storing niet goed wordt geladen op een willekeurige pagina. Laat je het 'Image description' veld leeg en plaats je de Picture URL vanuit Brandspot, dan wordt de 'description' van die afbeelding uit Brandspot gehaald.
Vermeld altijd de alt-tekst op een pagina. Dit biedt een groot voordeel, want een gevulde alt-tekst leidt tot een betere SEO-score (voor han.nl en hanuniversity.com) en zorgt ook voor de toegankelijkheid van je site, voor mensen die de afbeelding niet kunnen zien.
Aan de slag
Klik rechtsbovenin op 'open je oefenpagina' om meteen aan de slag te gaan en plaats een Image component. Als je de oefening hebt uitgevoerd kan je naar je vorige tabblad om verder te gaan met de training.