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 leg ik 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
Deze vraag krijg ik ook regelmatig. Hoe zorg je ervoor dat je het tekstvak of de titel over de afbeelding plaatst? 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.
Een tekst over een afbeelding plaatsen in WordPress kun je dus heel eenvoudig doen met behulp van Elementor! Ontdek wat je nog meer kunt doen met Elementor!
4 Responses
Hoi Sanne,
Ik heb onder mijn afbeelding een tekstwidget gemaakt en in die tekstwidget wil ik de titel en de afmeting hoogte x breedte van mijn schilderij zetten (het is een site waar schilderijen op getoond worden). Nu staat de titel in de media bibliotheek en bij omschrijving heb ik alle afmetingen neergezet. Is er een manier om deze over te nemen zonder dat ik voor tig schilderijen alles moet copy pasten van de velden in de media bib naar mijn tekstwidget?
groeetjes, Ingrid
Hoi Ingrid,
De beste manier om de beschrijving te tonen is door het onderschrift bij de afbeelding in te schakelen. Hiervoor zie je een optie in de afbeeldingen widget “Bijlage bijschrift”. De omschrijving die je hebt ingevoerd komt er dan onder de staan en via het tabblad ‘Stijl’ kun je de opmaak hiervan aanpassen.
Als je gebruik maakt van twee losse widgets, moet je inderdaad alles copy pasten.
Groetjes,
Sanne
Dag Sanne,
Ik ben een leek op dit gebied maar vind het leuk om nieuwe dingen te leren. De tekst over de afbeelding maken lukt me. Wat me niet lukt is het verplaatsen van de kolom (met de tekst er in) naar een andere plaats op de foto. Is dat mogelijk?
Hoi Els,
Als je de kolom bewerkt dan zie je daar een aantal opties voor de verticale en horizontale uitlijning. Daarmee kun je de inhoud van de kolom iets beter positioneren. Als dat nog niet voldoende is kun je ook gaan werken met paddings in de kolom of een afstandhouder toevoegen.
Groetjes,
Sanne