Stap 1

Selecteer eerst het elemen waarin je de afbeelding wil plaatsen. Dit doe je door het betreffende element te klikken

Stap 2

Nu je het element gesecteerd hebt kun je hier blokken aan toevoegen door met je muis naar het rechter blokken menu te gaan. Ga met je muis naar het blokken menu rechts en blijf hangen op het afbeelding icoon. Nu verschijnt er een menu met sjablonen die jouw website ter beschikking heeft. Kies voor het gewenste sjabloon, in dit geval kiezen we voor een default/ standaard afbeelding blok

Stap 4

Het menu om de afbeelding te bewerken wordt nu geopend. Je kan op het upload icoontje klikken om een afbeelding te zoeken op jouw computer en deze te uploaden. Je kan ook op het zoek icoontje klikken om op "unsplash.com" een afbeelding te zoeken. Deze website bestaat uit duizenden afbeeldingen die allemaal rechten vrij en gratis te gebruiken zijn. 

Bij het veld width en height kun je de maximale breedte en hoogte van de afbeeling aangeven. 

Bij het velt "Alt" kun je de afbeelding een titel geven. Dit is de tekst die verschijnt als de afbeelding niet goed geladen wordt. Daarnaast is dit goed voor de SEO van jouw website.

Als laatste kun je ook nog aangeven of deze afbeelding moet worden bijgesneden. Als je dit doet wordt de exacte maat die je bij width en height hebt aangegeven aangehoden

Stap 5

Gelukt! we hebben een afbeelding (in ons geval van een auto ) toegevoegd. Nu zie je de afbeelding direct verschijnen. Over de afbeelding zweeft een semi transparant wit blok. Dit blok heet de figcaption, en heeft als functionaliteit dat je hier een tekst blok of ander blok aan kan toevoegen. In sommige gevallen is dit wenselijk, denk bijvoorbeeld aan de banner. Zo kun je extra tekst over je afbeelding laten vallen.