Achtergrondafbeelding van kant tot kant met transparante laag

Het is mogelijk om een achtergrond afbeelding in te stellen in de achtergrond van je secties. Hierdoor komt de afbeelding, zoals je ziet in de bovenstaande afbeelding, van kant tot kant in je website. Op het moment dat je tekst over een achtergrond afbeelding zet, dan is de tekst soms niet helemaal goed te lezen. Dit kun je oplossen door een transparante kleur over de afbeelding heen te plaatsen. In dit artikel laat in je zien hoe je dit kunt doen.

Schakel de 'Visual Builder' in.
Klik op het blauwe '+' icoon op de plaats waar je de afbeelding van kant tot kant wilt toevoegen.
Kies voor een 'Standaard' sectie.
Voeg een rij met 1 kolom toe.
Selecteer de 'Tekst' module.
Voeg je tekst toe, voeg een heading toe en en style deze zoals je wilt.
Klik op het groene vinkje.
Open nu de sectie instellingen in het blauwe menu.
Onder 'Content' bij 'Achtergrond' kun je een afbeelding toevoegen.
Klik op het '+' icoon om een afbeelding te selecteren of toe te voegen aan de mediabibliotheek en klik op 'Laad een foto'.
Zorg dat je deze afbeelding bewerkt met Canva, minstens 1920 x 600 px is en geoptimaliseerd is voor het internet!
Onder 'Ontwerp' bij 'Afstand' kun je eventueel een 'Buffer' toevoegen, zodat de afbeelding hoger wat hoger wordt. Ik raad aan tussen de 5% en 10%.
Ga nu terug naar 'Content' en open 'Afbeelding' opnieuw.
Scroll naar beneden tot je 'Overvloeien achtergrondafbeelding' ziet staan en zet deze op 'Donkerder'.
Voeg nu bij 'Achtergrond' een kleur toe door op het '+' icoon te klikken.
Schuif in het tweede balkje het rondje om de transparantie te bepalen.
Klik op het groene vinkje.
Omdat de tekst niet goed leesbaar is gaan we de tekst wit maken, open de instellingen van de tekstmodule.
Onder 'Ontwerp' bij 'Tekst' kun je de 'Tekstkleur' aanpassen naar 'licht'.
Klik op het groene vinkje.
Vergeet niet de pagina op te slaan wanneer je klaar bent!

Mocht je nog meer vragen hebben of het is nog niet helemaal duidelijk? Neem dan contact op door hieronder op "Neem contact op" te klikken. Klopt deze informatie niet meer? Laat het ons dan ook weten!