{"id":989,"date":"2022-02-14T19:17:58","date_gmt":"2022-02-14T19:17:58","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/een-overlay-op-je-achtergrond-zetten-sectie-kolom\/"},"modified":"2024-01-03T15:16:44","modified_gmt":"2024-01-03T15:16:44","slug":"een-overlay-op-je-achtergrond-zetten-container","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=een-overlay-op-je-achtergrond-zetten-container","title":{"rendered":"Een overlay op je achtergrondafbeelding zetten (container)"},"content":{"rendered":"<p>Een overlay is een soort van <strong>filter<\/strong> die je over de achtergrondafbeelding zet om het <strong>donkerder of lichter te maken, zodat je tekst die erop komt beter kan lezen<\/strong>. Je kan kiezen voor standaard zwart of wit, maar je kan er ook een kleurtje over zetten. Door middel van transparantie kan je de kleur meer of minder <strong>transparant<\/strong> maken.<\/p>\n<ul>\n<li>Zorg ervoor dat de container geselecteerd is door op de bolletjes in het roze vak te klikken bovenaan<\/li>\n<li>Klik links bovenaan in de instellingen op het tabblad <em>Stijl <\/em>en vervolgens op <em>Overlay achtergrond<\/em><\/li>\n<li>Klik op<em>&nbsp;Klassiek&nbsp;<\/em>(icoon met het verfborsteltje) als je 1 kleur wil gebruiken of op <em>Verloop&nbsp;<\/em>aka Gradient (icoon met het kleurverloop vakje) als je 2 kleuren wil gebruiken<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1645\" width=\"257\" data-init-width=\"598\" height=\"568\" data-init-height=\"568\" title=\"Screenshot 2023-04-20 at 09.36.29\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.36.29.png\" data-width=\"257\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<h4>KLASSIEK<\/h4>\n<ul>\n<li>Klik op&nbsp;<em>Klassiek<\/em> en kies een kleur (zwart of wit zijn de 2 meest gebruikte kleuren &#8211; in dit voorbeeld gebruiken we zwart)<\/li>\n<li>Pas eventueel de transparantie aan door bij&nbsp;<em>Doorzichtigheid<\/em> te schuiven met de schuifbalk<\/li>\n<li style=\"\">Je kan zelfs een andere afbeelding als overlay zetten op je achtergrondafbeelding en daar de transparantie van aanpassen&nbsp;<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1646\" width=\"756\" data-init-width=\"2334\" height=\"1116\" data-init-height=\"1116\" title=\"Screenshot 2023-04-20 at 09.38.08\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.38.08.png\" data-width=\"756\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<h4>GRADIENT<\/h4>\n<ul>\n<li>Klik op <em>Verloop<\/em>&nbsp;<\/li>\n<li>Kies kleur 1 die bovenaan komt en kleur 2 die onderaan komt(meestal zal dit zwart en wit zijn, wat we in dit voorbeeld ook gaan doen)<\/li>\n<li>Pas eventueel de&nbsp;<strong>locatie<\/strong> van (\u00e9\u00e9n van beide) kleuren aan. Als je de locatie van kleur 1 verschuift, zal je zien dat het zwart meer van de afbeelding gaat bedekken. Hetzelfde geldt voor locatie 2 indien je daar schuift<\/li>\n<li>Je kan ook de&nbsp;<strong>hoek<\/strong><strong>&nbsp;<\/strong>aanpassen vanwaar de 2de kleur moet komen, dus de richting waarin de gradient zich zet<\/li>\n<li style=\"\">Ook hier kan je de <strong>transparantie<\/strong> aanpassen door te schuiven bij <em>Doorzichtigheid<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1647\" width=\"756\" data-init-width=\"2252\" height=\"1494\" data-init-height=\"1494\" title=\"Screenshot 2023-04-20 at 09.39.25\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.39.25.png\" data-width=\"756\" style=\"\" loading=\"lazy\"><\/span><\/p>\n","protected":false},"template":"","class_list":["post-989","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-quick-fix","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/989"}],"collection":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson"}],"about":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/types\/tva_lesson"}],"wp:attachment":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}