Share on email
Share on whatsapp
Share on twitter
Share on linkedin

Tekst over afbeelding plaatsen in WordPress met Elementor

Een tekst over een afbeelding plaatsen op je WordPress website kun je op verschillende manieren doen. Het is handig om wanneer je gebruik maakt van een page builder, zoals Elementor. Dit kun je gewoon met de gratis variant van Elementor doen. In dit artikel leggen we 3 manieren uit waarop je een tekst over een afbeelding plaatst met behulp van Elementor.

1) Afbeelding als achtergrond instellen

Je kunt op verschillende manieren een afbeelding toevoegen met Elementor. Het meest voor de hand liggend is om hiervoor de afbeelding widget te gebruiken, maar wanneer je een tekst over de afbeelding wilt plaatsen is het handiger om de afbeelding in te stellen als achtergrond. Dit kun je op drie manieren doen:

Tekst over afbeelding plaatsen in sectie

Je kunt de afbeelding als achtergrond instellen voor een complete sectie (hierin bevinden zich dus kolommen en widgets). Alle widgets die je dan in de sectie plaatst komen over je afbeelding te staan (dus niet alleen tekst). Dit doe je onder ‘Stijl’:

Als ik een afbeelding als achtergrond instel, kies ik altijd voor de optie ‘Bedekken’ bij het tabje afmeting. Op die manier wordt de afbeelding helemaal getoond.

Tekst leesbaar maken

Zoals je ziet is de tekst nog niet goed leesbaar. Hier gaan we wat aan doen:

  • Wijzig de tekstkleur naar wit
  • Stel de overlay achtergrond in (dit tabje verschijnt zodra je de achtergrondafbeelding hebt ingesteld). In dit voorbeeld kies ik ervoor om 2 kleuren in te stellen voor de overlay. Om de tekst nog wat beter uit te laten komen, stel ik de doorzichtigheid ook bij naar 0,9.

2) Tekst over afbeelding plaatsen in kolom

Een achtergrond instellen voor een kolom werkt op dezelfde manier, zie hieronder:

3) Tekst over afbeelding plaatsen met widget achtergrond

Voor een widget werkt het iets anders. Je wilt bijvoorbeeld achter de titel een afbeelding plaatsen. Ga dan naar het tabblad ‘Geavanceerd‘ en dan naar het tabje ‘Achtergrond‘. Je kunt hier de afbeelding uploaden.

Een nadeel van deze manier is dat je geen overlay kleur kunt instellen om de tekst leesbaarder te maken.

2) Gebruik een slider

Een andere mogelijkheid om een tekst over een afbeelding te plaatsen is door de slides widget te gebruiken (alleen beschikbaar in Elementor Pro). Deze widget biedt standaard de mogelijkheid om een tekst en een button over de afbeelding te plaatsen.

Meestal wordt een slider gebruikt voor de homepage om specifieke producten uit te lichten of informatie te geven over de website. Het voordeel van een slider is dat je meerdere afbeeldingen kunt gebruiken. Net als het instellen van achtergronden, kun je ook bij een slider ervoor kiezen om een overlay te gebruiken. In dit geval hebben we gekozen voor een zwarte overlay kleur:

3) Tekst voor de helft over afbeelding plaatsen

Wanneer je de tekst maar voor de helft over de afbeelding wilt plaatsen, kun je gebruik maken van negatieve margins. Dit kun je doen door de margins op negatief te zetten. Zie hieronder:

Schaduwletters gebruiken voor koptekst

Wanneer je gebruikmaakt van de widget ‘Koptekst’, is het ook mogelijk om een schaduwletters in te stellen, zodat de tekst beter leesbaar wordt (zoals ook in het voorbeeld hierboven). Voor de tekst eronder hebben we eerst de achtergrond van de widget aangepast naar wit, zodat de tekst goed leesbaar blijft.

Mobiele optimalisatie

Let er wel op dat je de website vervolgens ook optimaliseert voor mobiel. Zeker bij negatieve margins is het belangrijk om dit goed te checken.

Succes!

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites voor mkb'ers en zzp'ers. Daarnaast ondersteunt ze bedrijven bij de inzet van marketing- en communicatieactiviteiten.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.