Voeg tekst toe bovenop een afbeelding in WordPress

Een tekstoverlay is een geweldige manier om wat extra informatie over een afbeelding te geven. Het is ook een snelle en gemakkelijke manier om banners, headers en zelfs online advertenties te maken.

In dit artikel laten we u zien hoe u tekst aan een afbeelding kunt toevoegen in WordPress. Hoe u tekst bovenop een afbeelding kunt toevoegen in WordPress

Tekst toevoegen aan afbeeldingen in WordPress

Afbeeldingen kunnen uw WordPress-website er interessanter uit laten zien en helpen grote alinea’s tekst op te splitsen.

Soms hebben uw afbeeldingen echter meer uitleg nodig. Je kunt bijvoorbeeld tekst bovenop een afbeelding toevoegen om uit te leggen wat de afbeelding laat zien en waarom je deze aan je bericht hebt toegevoegd.

Veel WordPress-blogs voegen ook tekst toe aan een afbeelding om opvallende en informatieve banners en headers te creëren.

In dit bericht hebben we drie verschillende manieren om tekst toe te voegen aan een afbeelding in WordPress. Als u liever direct naar een bepaalde methode springt, kunt u de onderstaande links gebruiken:

• Methode 1: Tekst toevoegen aan een afbeelding met behulp van het omslagblok
• Methode 2: Tekst toevoegen aan een afbeelding met behulp van het afbeeldingsblok
• Methode 3: Maak een aangepaste pagina-indeling met tekst bovenop een afbeelding
• Methode 4: met CSS

1: Tekst toevoegen aan afbeelding met omslagblok

Een manier om tekst toe te voegen aan een afbeelding in WordPress is door het Cover-blok te gebruiken. U kunt dit blok gebruiken om elke afbeelding weer te geven en vervolgens tekst over de afbeelding te typen. Dit maakt het Cover-blok perfect voor het maken van hero-afbeeldingen, headers en banners.

Om een ​​Cover-blok aan een pagina of bericht toe te voegen, klikt u eenvoudig op het plusteken (+) in de WordPress-blokeditor.

Je kunt nu ‘Cover’ intypen en het juiste blok selecteren als het verschijnt.

Het WordPress Cover-blok

Standaard heeft het Omslagblok een tijdelijke afbeelding en een tijdelijke aanduiding voor tekst.

Om de standaardafbeelding te vervangen, klikt u eenvoudigweg om de afbeelding te selecteren. Zodra je dat hebt gedaan, klik je op de knop ‘Vervangen’.

Hoe u tekst bovenop een afbeelding kunt toevoegen in WordPress
Als je een afbeelding wilt gebruiken die al in je WordPress-mediabibliotheek staat, klik dan eenvoudig op ‘Mediabibliotheek openen’. Je kunt vervolgens een bestaande afbeelding kiezen.

Als je een nieuwe afbeelding wilt uploaden, klik dan op ‘Uploaden’.

Een afbeelding uploaden naar het WordPress Cover-blok
Er wordt een venster geopend waarin u elk bestand op uw computer kunt kiezen.

Nadat je een afbeelding hebt gekozen, kun je de blokinstellingen gebruiken om een ​​aantal interessante en opvallende effecten te creëren. U kunt de afbeelding bijvoorbeeld op zijn plaats vastzetten terwijl de bezoeker door de pagina scrollt, of u kunt een kleuroverlay aan de afbeelding toevoegen.

Een gekleurde omslagoverlay

Als u een overlay gebruikt, kunt u de dekking ervan wijzigen met behulp van de schuifregelaar ‘Dekking’. De dekkingsinstelling bepaalt de transparantie van de achtergrondafbeelding.

Als u tevreden bent met hoe de afbeelding eruit ziet, bent u klaar om wat tekst toe te voegen.

Standaard heeft het Omslagblok een Koptekst en een Alineablok waar u tekst bovenop de afbeelding kunt toevoegen.

Hoe u tekst bovenop een afbeelding kunt toevoegen in WordPress
Om wat tekst toe te voegen, klikt u eenvoudigweg om het kop- of alineablok te selecteren. Ga vervolgens door en typ de tekst die u wilt gebruiken.

Wanneer u tekst bovenop een afbeelding toevoegt, kan die tekst soms moeilijk leesbaar zijn. Dit geldt met name voor bezoekers met slecht zicht. Voor meer informatie kunt u onze handleiding raadplegen over hoe u de toegankelijkheid van uw WordPress-site kunt verbeteren.

Dat gezegd hebbende, wil je misschien je tekst opmaken zodat deze gemakkelijker te lezen is.

Als u met een kopblok werkt, kunt u ook de verschillende kopstijlen uitproberen om te zien welke het gemakkelijkst te lezen is.

Stijl tekst bovenop een WordPress-afbeelding

Je kunt je tekst ook laten opvallen door een contrasterende kleur te gebruiken. Om een ​​andere kleur te kiezen, selecteert u het tabblad ‘Blok’ in het rechtermenu. Ga dan verder en klik op ‘Kleur’ om dit gedeelte uit te vouwen.

Zodra je dat hebt gedaan, klik je op ‘Tekst’. Er wordt een pop-up geopend waarin je een nieuwe kleur kunt kiezen voor alle tekst in het blok.

De kleur van tekst bovenop een afbeelding wijzigen
Meestal is grotere tekst gemakkelijker te lezen.

Om uw tekst groter te maken, klikt u op het veld naast ‘Grootte’ en typt u vervolgens een groter getal in dit veld.

Tekst toevoegen bovenop een afbeelding in WordPress
Zodra u tevreden bent met hoe uw Cover-blok eruitziet, kunt u uw pagina op de normale manier publiceren of bijwerken. Als u nu uw WordPress-website bezoekt, ziet u uw tekst bovenaan de afbeelding.

2: Tekst toevoegen met behulp het afbeeldingsblok

Het Cover-blok is ideaal voor het maken van banners en headers. U kunt echter ook tekst toevoegen bovenop een standaard WordPress-afbeeldingsblok.

Om te beginnen moet je een afbeeldingsblok aan je pagina of bericht toevoegen. Om dit te doen, klikt u eenvoudig op het plusteken (+) in de WordPress-blokeditor.

Vervolgens kun je ‘Afbeelding’ typen en het juiste blok selecteren om deze aan je bericht toe te voegen.

Het WordPress Image-blok
Vervolgens kunt u een afbeelding vanaf uw computer uploaden of op ‘Mediabibliotheek’ klikken om een ​​afbeelding uit de WordPress-mediabibliotheek te kiezen.

Nadat u uw afbeelding heeft gekozen, kunt u het focuspunt wijzigen, een overlay toevoegen en de dekking wijzigen volgens hetzelfde proces als hierboven beschreven.

U kunt ook de verschillende schuifregelaars ‘Vaste achtergrond‘ en ‘Herhaalde achtergrond’ proberen om te zien wat het beste werkt voor uw afbeeldingsblok.

Als u tevreden bent met hoe uw afbeelding eruit ziet, klikt u gewoon op de knop ‘Tekst over afbeelding toevoegen’.

Tekst toevoegen bovenop afbeelding in WordPress

Hiermee wordt een gebied toegevoegd waar u uw tekst kunt typen.

Afhankelijk van uw afbeelding kunnen bezoekers moeite hebben om uw tekst te lezen. Hier kan het helpen om de tekst vetgedrukt te maken of de kleur te veranderen volgens hetzelfde proces als hierboven beschreven.

De tekstkleur wijzigen in WordPress
Je kunt je tekst ook groter maken.

Ga hiervoor naar het onderdeel ‘Grootte’ in het rechtermenu. U kunt dan doorgaan en op de verschillende cijfers klikken om uw tekst groter of kleiner te maken.

De tekstgrootte vergroten
Als u tevreden bent met hoe uw tekst en afbeelding eruit zien, klik dan op ‘Concept opslaan’, ‘Bijwerken’ of ‘Publiceren’ om uw wijzigingen op te slaan.

3: Maak aangepaste pagina-indeling met tekst op foto

De ingebouwde WordPress-blokken zijn een snelle en gemakkelijke manier om tekst toe te voegen aan een afbeelding in WordPress. Als je echter de vrijheid wilt om volledig aangepaste pagina-ontwerpen te maken, dan heb je een plug-in voor het bouwen van pagina’s nodig.

4. Tekst op afbeelding met HTML en CSS

Gebruik dit in je html:

<div class="container">
   <img src="img_snow_wide.jpg" alt="Sneeuw" style="width:100%;">
   <div class="bottom-left">Linksonder</div>
   <div class="top-left">Linksboven</div>
   <div class="top-right">Rechtsboven</div>
   <div class="bottom-right">Rechtsonder</div>
   <div class="centered">Gecentreerd</div>
</div>

Gebruik dit in je CSS:

/* Container met de afbeelding en de tekst */

.container {
  position: relative;
  text-align: center;
  color: white;
}

/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}