Afbeeldingen zijn een krachtige manier om je WordPress-website visueel aantrekkelijker te maken. Maar soms wil je meer dan alleen een afbeelding weergeven. Wat als je wat tekst bovenop de afbeelding kunt plaatsen? Dit kan handig zijn voor banners, headers, uitleg over de afbeelding, of zelfs voor advertenties.
In dit artikel bespreken we hoe we tekst toe voegen aan een afbeelding in de Gutenberg-editor van WordPress. We beginnen met het toevoegen van de blok zelf, nadien gaan we dieper in over hoe we deze kunnen finetunen.
Tekst toevoegen met het Cover-blok
Het Cover-blok is een van de eenvoudigste manieren om tekst op een afbeelding toe te voegen in WordPress. Dit blok stelt je in staat om een afbeelding als achtergrond in te stellen en vervolgens tekst bovenop de afbeelding te plaatsen. Dit is ideaal voor hero-afbeeldingen, banners, en headers.
Hoe gebruik je deze blok
Voeg de Cover-blok toe aan jouw pagina of bericht door op het plusteken (+) te klikken in de Gutenberg-editor en ‘Cover’ te zoeken in de zoekbalk. Of typ eenvoudig ‘/Cover’ tot je het blok tevoorschijn ziet komen en klik er op.
Als je de cover-blok hebt toegevoegd, krijg je de optie om een afbeelding/video up te loaden, ofwel om een vaste kleur te kiezen.
Nadat je een afbeelding/video of kleur hebt gekozen, kun je de blokinstellingen aan de rechter gebruiken. Je kan de afbeelding bijvoorbeeld op zijn plaats vastzetten terwijl de bezoeker door de pagina scrollt, of u kunt een kleuroverlay aan de afbeelding toevoegen. Dit zal verder hieronder worden uitgelegd
Nu kunnen we tekst toevoegen in het tekstvak dat automatisch wordt weergegeven bovenop de afbeelding.
Het voordeel van de Cover-blok is dat je eender welke andere blok hier over kunt gaan plaatsen. Zo kan je kiezen om gewoon tekst toe te voegen, maar je kan ook nog andere blokken zoals afbeeldingen, knoppen, kalenders, … toevoegen bovenop deze cover-blok.
Cover-blok bewerken
De cover-block heeft veel verschillende optie die we kunnen gaan gebruiken, om de website mooi te maken.
Aan de bovenzijde van het blok vind je verschillende opties om de Cover-block te bewerken:
- Positie van inhoud wijzigen: Hiermee bepaal je waar de inhoud binnen de cover gepositioneerd wordt — bovenaan, in het midden of onderaan; links, gecentreerd of rechts. Door op het gewenste punt te klikken kan jij zelf bepalen waar alles moet staan.
- Volledige hoogte: Je kunt ervoor kiezen om de cover de volledige hoogte van het scherm te laten innemen. Dit zorgt voor een krachtig, schermvullend effect dat vooral goed werkt bij landingspagina’s en eerste indrukken.
Nu bevind zich aan de rechterzijde ook nog allemaal instellingen. Zo kunnen we ervoor kiezen, om de afbeelding vast te maken tijdens het scrollen, kunnen we de positie bepalen en nog veel meer.
instellingen
- Vastzetten achtergrond (parallax effect): Door de achtergrond vast te zetten, blijft de afbeelding op z’n plaats terwijl de gebruiker scrollt. Dit creëert een subtiele parallax-scroll die extra dynamiek toevoegt aan je design
- Focuspunt: Hiermee kan je de positie van de afbeelding bepalen. Zo zorg je ervoor dat de afbeelding altijd juist zichtbaar is op elk schermgrootte.
- Alternatieve tekst: Als deze cover-afbeelding iets te zeggen heeft, kan je hier een alt tekst ingeven. Zo zal deze voor bijvoorbeeld slechtzienden toch duidelijk worden gemaakt wat hier staat.
- Resolutie: We kunnen de resolutie van de afbeelding bepalen. Zo kan je er voor kiezen dat als je de cover als kleine afbeelding gebruikt, deze ook niet te veel data verbruikt op de website. Het beste is om deze te laten staan op ‘groot’ of ‘volledige grootte’, zo zal de afbeelding geen resolutie verliezen.
Extra Made I.T. opties
Is jouw website bij ons gemaakt? Dan zullen er nog extra Made I.T. opties te zien zijn.
- Hide on mobile – Hide on desktop: Met deze instelling kan je kiezen of de cover wel of niet word weergegeven op mobiel of desktop.
- Animation: In ons thema hebben we ook opties toegevoegd, zodat je animatie kan toevoegen aan bepaalde zaken. Zo kan je de cover laten binnen faden, of sliden.
Stijlen
De cover-block kan je nog heel wat andere stijlen geven zoals een overlay kleur, hoogte instellen, enzo meer.
Stijlen kunnen afhangen van wat er is ingesteld, en wat er nodig is voor jouw website. Maar de meest standaard stijlen.
Kleur
We kunnen de kleur gaan bepalen van de inhoud van deze cover-blok. Ook kunnen we een overlay gaan toevoegen of volledig een andere kleur.
- Tekst: Alle teksten die je in de cover-block gaat toevoegen, zullen de kleur hebben die je hier aanduid. Als je de tekst zelf een andere kleur geeft zal de kleur overschreden worden.
- Koptekst: Alle kopteksten binnen de cover block zullen van kleur veranderen. Net zoals de tekst.
- Bedekking: Hier kunnen we er voor kiezen om een effen overlay toe te voegen, zodat inhoud beter leesbaar zal worden. We kunnen er hier ook voor kiezen om een overgang op te zetten, zo kan je de foto wat ‘uitfaden’ en kan je mooie effecten creëren.
- Overlay opaciteit: met de opacity kan je kiezen hoe fel de kleur wel of niet moet zijn. 0 is niet zichtbaar, en 10O is volledig gevuld.
Filters
We hebben nog een extra optie om filters toe te voegen. Deze stelt ons in staat om duotoon toe te voegen op de afbeelding. Dit wilt zeggen dat we een 2 kleuren afbeelding creëren, zonder je originele afbeelding te verliezen.
Afmeting
Bij de afmeting kan je de hoogte van de cover instellen. Standaard zal deze op 450px staan. Maar je kan deze dus zelf nog aanpassen.
Je kunt ook de eenheid aanpassen door op de aanduiding ‘px’ te klikken. Hierbij verschijnen verschillende opties: px, em, rem, vw en vh. Elke eenheid heeft een ander gedrag, wat handig is afhankelijk van je ontwerp en of je responsive (mobielvriendelijk) wilt werken.
Schaduw
Een schaduw toevoegen aan je Cover-blok kan zorgen voor meer diepte en contrast in je ontwerp. Het laat de cover als het ware “zweven” boven de achtergrond en geeft je website een professionelere uitstraling.
De optie Schaduw kan hiervoor zorgen. Kies uit de beschikbare stijlen.
