Afbeelding toevoegen en uitlijnen in de blok editor van WordPress

Wil je leren hoe je afbeeldingen op een correcte manier kunt toevoegen en uitlijnen in de blok editor van WordPress?

Wanneer je de blok editor net ontdekt kan dit nog een beetje ingewikkeld zijn. Je moet de logica even snappen, waarna het voor jou geen probleem zal zijn.

In dit artikel laat ik je daarom zien hoe jouw afbeeldingen kunt uitlijnen in je artikelen, zodat jouw afbeeldingen een mooie toevoeging zijn aan je artikelen.

Video: Afbeelding toevoegen en uitlijnen in WordPress

In onderstaande video zie je alle standaard mogelijkheden die we hebben met betrekking tot het toevoegen en uitlijnen van afbeeldingen in de Blok editor van WordPress

Mocht je de uitleg liever in tekst met afbeeldingen bekijken, dan kun je hieronder verder gaan.

Afbeeldingen toevoegen en uitlijnen in WordPress

Zodra je een WordPress website maakt krijg je te maken met een editor om artikelen in te maken. De blok editor van WordPress bestaat, zoals de naam al zegt, volledig uit blokken. Er zijn ook diverse blokken die je kunt gebruiken om afbeeldingen toe te voegen en uit te lijnen. De blokken die je kunt gebruiken zijn:

• Afbeeldingen
• Media & tekst
• Galerij
• Omslagafbeelding
• Tekst (inline afbeelding)

Ik zal je blok voor blok laten zien hoe deze precies werken.

Afbeelding blok

Om een afbeelding blok toe te voegen kun je op het plusje klikken of op een losse regel /afbeelding invoeren, waarna je vervolgens een afbeelding kunt uploaden.

Een andere optie is om direct een afbeelding in de WordPress blok editor te slepen, waarna automatisch een afbeelding blok aangemaakt wordt en de afbeelding op je WordPress hosting omgeving komt te staan.

Wanneer je een afbeelding hebt toegevoegd zal het er als volgt uit kunnen zien:

Zoals je ziet heb je aan de bovenkant van het afbeelding blok een toolbar met allemaal mogelijkheden, waardonder de afbeelding uitlijnen.

Standaard is er geen uitlijning, maar je kunt dit wijzigen naar links, gecentreerd, rechts, wijde breedte of volledige breedte.

Je kunt het best afhankelijk van de breedte van de afbeelding bepalen hoe je het precies wilt uitlijnen. De afbeelding kleiner maken is een mogelijkheid om de afbeelding links of rechts uit te lijnen naast de tekst. Je doet dit door het blauwe bolletje ingedrukt te houden.

Hoe krijg je een afbeelding naast de tekst?

Om een afbeelding met het afbeelding blok op een goede manier naast de tekst te krijgen kun je de afbeelding links of rechts uitlijnen en verkleinen. Je kunt vervolgens aan de hand van de pijltjes de juiste positie kiezen ten opzichte van de tekst.

Media & tekst

Een eenvoudige optie om een afbeelding en tekst naast elkaar te krijgen, is door het blok Media & tekst te gebruiken. Met dit blok krijg je 2 kolommen naast elkaar. Een kolom voor media en een kolom voor tekst.

Je hebt zelf de keuze om aan te geven of de afbeelding links of rechts moet en hoe je de verticale uitlijning wil hebben. Tevens heb je de mogelijkheid om te kiezen of je wijde breedte of volledige breedte wilt gebruiken.

Hierdoor toont het dus al wel iets anders dan zoals bij de normale afbeelding blok. Hieronder volgt een media & tekst blok om je te laten zien hoe het er bij mij uitziet. Afhankelijk van jouw thema kan dit breder zijn. Bij mij kan het niet breder zijn de contentbreedte.

Media & tekst blok

Galerij

Je kunt standaard zonder extra plugin een galerij maken in WordPress met het blok “Galerij”. De instellingen zijn wat beperkt, maar het kan zeker de moeite waard zijn om het te gebruiken. Je kunt zelf aangeven hoeveel kolommen je wilt gebruiken en waar je naartoe wilt linken.

Mocht je je afvragen of een galerij ook naast een stuk tekst kan. Ja, dit is mogelijk. Je kunt ook hier eenvoudig alles op verschillende manieren uitlijnen.

Wanneer je twee afbeeldingen naast elkaar wilt plaatsen in WordPress, dan is een galerij met twee kolommen de eenvoudigste en snelste optie.

Omslagafbeelding

Wat je ook steeds meer ziet is grote afbeeldingen met een stukje tekst eroverheen. Dit kun je bereiken met een Omslagafbeelding. Het is een perfecte manier om iets uit te lichten of je pagina in verschillende secties te verdelen.

Je kunt er zelfs een parallax effect mee maken (dan beweegt de afbeelding tijdens het scrollen). Een focuspunt op de afbeelding selecteren en een overlaykleur gebruiken zijn ook nuttige opties. Tevens kun je zelfs de omslagfoto op verschillende manieren uitlijnen.

Voorbeeld omslagafbeelding

Inline afbeelding

Een inline afbeelding is geen blok, maar je kunt een inline afbeelding toevoegen bij een tekstblok.

Qua uitlijning heb je geen opties. Je kunt alleen de grootte bepalen. Het is daarom een optie die ik persoonlijk nooit gebruik.