{"id":165,"date":"2021-12-18T11:42:19","date_gmt":"2021-12-18T11:42:19","guid":{"rendered":"https:\/\/leeromgeving.fixityourself.be\/course\/4-een-leuke-homepage-maken-structuur-verschillende-elementen\/"},"modified":"2024-01-03T15:16:59","modified_gmt":"2024-01-03T15:16:59","slug":"3-een-leuke-homepage-maken-structuur-verschillende-elementen","status":"publish","type":"tva_lesson","link":"https:\/\/leeromgeving.fixityourself.be\/?tva_lesson=3-een-leuke-homepage-maken-structuur-verschillende-elementen","title":{"rendered":"3. Een leuke homepage maken (structuur + verschillende elementen)"},"content":{"rendered":"<h3 style=\"\">De homepage als homepage instellen: bekijk de video hieronder<\/h3>\n<h3 style=\"\">Overzicht van de elementen<\/h3>\n<h3 id=\"tve-jump-17ecb854c97\" style=\"\"><strong>Aanvulling: een afbeelding comprimeren (kleiner maken)<\/strong><\/h3>\n<p><a href=\"https:\/\/www.tinyjpg.com\" target=\"_blank\" style=\"outline: none;\" data-tcb_hover_state_parent=\"\" rel=\"noopener\">tinyjpg.com<\/a><\/p>\n<blockquote><p>Alles wat in de video wordt uitgelegd kan je hieronder ook in tekstvorm terugvinden. Altijd handig wanneer je snel iets wil opzoeken.<\/p><\/blockquote>\n<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n<h2 style=\"\">Inleiding<\/h2>\n<p>De echte eerste pagina die we gaan maken is meteen de belangrijkste: de homepage. Dit is het eerste dat je klanten\/bezoekers gaan zien dus dat moet er echt staan.&nbsp;<\/p>\n<p>In deze les overlopen we:<\/p>\n<ul>\n<li>Hoe een pagina wordt opgebouwd &#8211; uit welke elementen dat bestaat<\/li>\n<li>Hoe je kan navigeren de pagina<\/li>\n<\/ul>\n<h2 style=\"\">Een nieuwe pagina maken<\/h2>\n<ul>\n<li>Log in op het WP dashboard<\/li>\n<li style=\"\">Klik op&nbsp;links in het menu op&nbsp;<em>Pagina&#8217;s<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"554\" width=\"547\" data-init-width=\"1452\" height=\"239\" data-init-height=\"634\" title=\"Screenshot 2022-01-19 at 20.40.03\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.40.03.png\" data-width=\"547\" data-height=\"239\" style=\"aspect-ratio: auto 1452 \/ 634;\" loading=\"lazy\"><\/span><\/p>\n<p style=\"\">Standaard staan er al 2 pagina&#8217;s: een privacybeleid in concept en een voorbeeld pagina. Deze pagina&#8217;s gaan we nadien verwijderen en zelf toevoegen &amp; opmaken met Elementor.<\/p>\n<ul>\n<li>Klik bovenaan op&nbsp;<em>Nieuwe pagina<\/em>&nbsp;<\/li>\n<li style=\"\">De pop-up die eventueel verschijnt mag weg geklikt worden, je ziet nu het onderstaande scherm:<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"555\" width=\"629\" data-init-width=\"3022\" height=\"312\" data-init-height=\"1500\" title=\"Screenshot 2022-01-19 at 20.46.44\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.46.44.png\" data-width=\"629\" data-height=\"312\" style=\"aspect-ratio: auto 3022 \/ 1500;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">Vul bij&nbsp;<em>Titel toevoegen<\/em> de titel van je pagina in (bv. Home)<\/li>\n<li style=\"\">Klik rechts bovenaan 2x op de blauwe knop&nbsp;<em>Publiceren<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"556\" width=\"385\" data-init-width=\"948\" height=\"47\" data-init-height=\"116\" title=\"Screenshot 2022-01-19 at 20.49.04\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.49.04.png\" data-width=\"385\" data-height=\"47\" style=\"aspect-ratio: auto 948 \/ 116;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">Klik daarna bovenaan links op de blauwe knop <em>Bewerk met Elementor<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"557\" width=\"449\" data-init-width=\"1088\" height=\"50\" data-init-height=\"122\" title=\"Screenshot 2022-01-19 at 20.50.46\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-19-at-20.50.46.png\" data-width=\"449\" data-height=\"50\" style=\"aspect-ratio: auto 1088 \/ 122;\" loading=\"lazy\"><\/span><\/p>\n<h2 style=\"\">De structuur van een pagina<\/h2>\n<p>Een pagina bestaat uit 2 onderdelen:<\/p>\n<h3 style=\"text-align: center;\"><a href=\"#tve-jump-17ecaf9b4a5\" style=\"outline: none;\">Containers<\/a><\/h3>\n<h3 style=\"text-align: center;\"><a href=\"#tve-jump-17ecafd35c2\" style=\"outline: none;\">Elementen<\/a><\/h3>\n<p>Elementen worden ook wel&nbsp;<strong>widgets<\/strong> genoemd.<\/p>\n<p style=\"\">Aan de linkerzijde zie je een hele lijst elementen die ingevoegd kunnen worden. Deze worden opgesplitst in <em><strong>Layout<\/strong><\/em> (met de container bepaal je de layout en structuur van je pagina) <em><strong>Basis<\/strong>&nbsp;<\/em>(wat je in de gratis versie van Elementor krijgt) en <strong><em>Pro<\/em> <\/strong>(wat je extra in de betalende versie krijgt).<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1637\" width=\"210\" data-init-width=\"600\" height=\"1680\" data-init-height=\"1680\" title=\"Screenshot 2023-04-19 at 21.51.31\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.51.31.png\" data-width=\"210\" style=\"aspect-ratio: auto 600 \/ 1680;\" loading=\"lazy\"><\/span><\/p>\n<p>Containers vormen de basis van je pagina. Je start altijd met een container en in die container kunnen dan elementen gesleept worden.<\/p>\n<h2 style=\"\">Containers<\/h2>\n<h3 id=\"tve-jump-17ecaf9b4a5\"><span style=\"text-decoration: underline;\">Een container invoegen<\/span><\/h3>\n<p>Het is erg belangrijk dat je <strong>eerst goed nadenkt over de structuur en de layout van het blok<\/strong> dat je wil maken. Ga je elementen naast elkaar plaatsen? Of onder elkaar? Of wordt het een mix van naast en onder elkaar, verdeeld in 2 &#8220;kolommen&#8221;? Zorg ervoor dat je dit eerst klaar hebt in je hoofd voordat je verder gaat met het invoegen van containers.<\/p>\n<p>Het is de bedoeling om een structuur te cre\u00ebren met <strong>zo weinig mogelijk geneste containers<\/strong> (containers in containers). Je kan al heel wat, in 1 container kan je bv. 3 elementen naast of onder elkaar slepen, daarvoor heb je geen 3 geneste containers nodig.<\/p>\n<p>In dit voorbeeld gaan we een blok op de pagina maken (de banner) die bestaat uit 1 container met daarin 3 elementen onder elkaar: een titel, een stukje tekst en een knop.<\/p>\n<ul>\n<li>Klik op het plusteken in het midden van de pagina<\/li>\n<li style=\"\">Klik vervolgens op \u00e9\u00e9n van de containerstructuren, afhankelijk van hoeveel welke structuur je nodig hebt. In het voorbeeld kiezen we de column container<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1640\" width=\"220\" data-init-width=\"338\" height=\"206\" data-init-height=\"206\" title=\"Plusje\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Plusje.png\" data-width=\"220\" style=\"aspect-ratio: auto 338 \/ 206;\" loading=\"lazy\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"1641\" width=\"379\" data-init-width=\"1432\" height=\"410\" data-init-height=\"410\" title=\"Screenshot 2023-04-19 at 22.01.11\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-22.01.11.png\" data-width=\"379\" style=\"aspect-ratio: auto 1432 \/ 410;\" loading=\"lazy\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">De hoogte van een container aanpassen<\/span><\/h3>\n<ul>\n<li>Selecteer de container door op de 3 bolletjes te klikken<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1615\" width=\"193\" data-init-width=\"418\" height=\"70\" data-init-height=\"70\" title=\"Screenshot 2023-04-19 at 21.19.30\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.19.30.png\" data-width=\"193\" style=\"aspect-ratio: auto 418 \/ 70;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">Sleep links in de instellingen bij&nbsp;<em>Min. hoogte<\/em> de balk tot de container de gewenste hoogte heeft<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1643\" width=\"245\" data-init-width=\"582\" height=\"726\" data-init-height=\"726\" title=\"Screenshot 2023-04-20 at 09.28.25\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.28.25.png\" data-width=\"245\" style=\"aspect-ratio: auto 582 \/ 726;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een achtergrondafbeelding invoegen op een container<\/span><\/h3>\n<blockquote><p>Er zijn 2 zaken belangrijk bij het invoegen van afbeeldingen op een website: de <strong><span style=\"color: var(--tcb-color-0);\">grootte<\/span><\/strong> en de <strong><span style=\"color: var(--tcb-color-0);\">Alt-tekst<\/span><\/strong><span style=\"color: var(--tva-skin-color-0);\">.&nbsp;<\/span><\/p><\/blockquote>\n<blockquote style=\"\"><p>Als je afbeeldingen invoegt die te groot zijn (vanaf 1 MB), dan gaat de ruimte op je site snel vol zitten en gaat alles ook trager laden. <a data-tcb_hover_state_parent=\"\" href=\"#tve-jump-17eca6535d3\" style=\"outline: none;\"><span style=\"text-decoration: underline;\">Klik hier<\/span><\/a> om de video te bekijken over <strong>afbeeldingen comprimeren<\/strong> (= kleiner maken). Liefst zijn afbeeldingen voor een website kleiner dan 400 KB.<\/p><\/blockquote>\n<blockquote id=\"tve-jump-17ecb8674c0\" style=\"\"><p>Het is belangrijk voor de SEO (Search Engine Optimalisation, <a data-tcb_hover_state_parent=\"\" href=\"https:\/\/leeromgeving.fixityourself.be\/course\/1-basis-seo-instellen-met-yoast-seo\/\" style=\"outline: none;\" target=\"_blank\" rel=\"noopener\">zie module 8<\/a>) dat je de <strong>Alt-tekst <\/strong>van een afbeelding invult. Wanneer mensen een zoekterm invullen in Google, zal die ook op afbeeldingen zoeken. Hoe meer relevante zoektermen er op je website staan, hoe beter.<\/p><\/blockquote>\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&nbsp;<em>Stijl&nbsp;<\/em>en vervolgens op<em>&nbsp;Klassiek <\/em>(icoon met het verfborsteltje)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1644\" width=\"242\" data-init-width=\"596\" height=\"1070\" data-init-height=\"1070\" title=\"Screenshot 2023-04-20 at 09.30.03\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.30.03.png\" data-width=\"242\" style=\"aspect-ratio: auto 596 \/ 1070;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Klik daarna op het plusteken onder&nbsp;<em>Afbeelding<\/em> in het grijze vlak<\/li>\n<li>De mediabibliotheek wordt geopend. Kies een bestaande afbeelding of upload een nieuwe afbeelding door te klikken op&nbsp;<em>Bestanden uploaden<\/em><\/li>\n<li>Geef de afbeelding een logische titel en alt-tekst (meestal zijn beide hetzelfde)<\/li>\n<li style=\"\">Klik rechts onderaan op&nbsp;<em>Media invoegen<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"576\" width=\"265\" data-init-width=\"596\" height=\"558\" data-init-height=\"1256\" title=\"Screenshot 2022-02-05 at 16.04.43\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-16.04.43-e1644073606247.png\" data-width=\"265\" data-height=\"558\" style=\"aspect-ratio: auto 596 \/ 1256;\" loading=\"lazy\"><\/span><\/p>\n<p>Het is normaal dat je de afbeelding niet (of bijna niet) ziet, dat komt omdat de nodige instellingen nog niet gebeurd zijn.<\/p>\n<h4>DE INSTELLINGEN VAN EEN ACHTERGRONDAFBEELDING WIJZIGEN<\/h4>\n<ul>\n<li>Zorg ervoor dat de sectie geselecteerd is door op de bolletjes in het blauwe vak te klikken bovenaan<\/li>\n<li>Klik links bovenaan in de instellingen op het tabblad&nbsp;<em>Stijl&nbsp;<\/em><\/li>\n<li><\/li>\n<li style=\"\"><strong>Positie: <\/strong>afhankelijk van waar je de afbeelding wil plaatse ten opzichte van de sectie, kies je bij <em>Positie<\/em>. In het voorbeeld (en dat zal meestal wel het geval zijn) gebruiken we<em>&nbsp;<\/em><strong>Midden gecentreerd<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"577\" width=\"223\" data-init-width=\"586\" height=\"441\" data-init-height=\"1158\" title=\"Screenshot 2022-02-05 at 17.13.54\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-17.13.54.png\" data-width=\"223\" data-height=\"441\" style=\"aspect-ratio: auto 586 \/ 1158;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><strong>Vastzetting:<\/strong> hiermee kan je de afbeelding vastzetten, dat wil zeggen dat wanneer je scrollt, de afbeelding blijft vast staan en alles wat daar rond ligt over de afbeelding schuift (zie voorbeeld hieronder) -&gt; klik daarvoor op <em>Vast<\/em>. In het voorbeeld gaan we dit niet doen en blijft het op <strong>Standaard <\/strong>staan<\/li>\n<\/ul>\n<ul>\n<li style=\"\"><strong>Herhalen:&nbsp;<\/strong>wanneer dit op&nbsp;<em>Standaard<\/em> blijft staan of wanneer je dit op <em>Herhalen<\/em> zet, zal de afbeelding zich naast, boven en onder herhalen indien het standaard formaat van de afbeelding de container niet volledig vult. Meestal ziet dit er vreemd uit dus gaan we voor <strong>Geen herhaling<\/strong><\/li>\n<li style=\"\"><strong>Afmeting:<\/strong> bij&nbsp;<em>Bedekken<\/em> gaat de volledige afbeelding de sectie bedekken van de linkerzijde tot de rechterzijde, bij <em>Inhouden<\/em> gaat de afbeelding zich aanpassen aan de grootte van de container. In dit voorbeeld gebruiken we <strong>Bedekken<\/strong><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><em>Bedekken<\/em><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"578\" width=\"329\" data-init-width=\"2424\" height=\"55\" data-init-height=\"402\" title=\"Screenshot 2022-02-05 at 17.51.12\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-17.51.12.png\" data-width=\"329\" data-height=\"55\" style=\"aspect-ratio: auto 2424 \/ 402;\" loading=\"lazy\"><\/span><\/p>\n<p style=\"text-align: center;\"><em>Inhouden<\/em><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"579\" width=\"353\" data-init-width=\"2414\" height=\"53\" data-init-height=\"360\" title=\"Screenshot 2022-02-05 at 17.51.35\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-17.51.35.png\" data-width=\"353\" data-height=\"53\" style=\"aspect-ratio: auto 2414 \/ 360;\" loading=\"lazy\"><\/span><\/p>\n<h3 style=\"\"><span style=\"text-decoration: underline;\">Een overlay op je achtergrond zetten<\/span><\/h3>\n<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=\"aspect-ratio: auto 598 \/ 568;\" 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=\"aspect-ratio: auto 2334 \/ 1116;\" 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=\"aspect-ratio: auto 2252 \/ 1494;\" loading=\"lazy\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">De breedte van een container aanpassen<\/span><\/h3>\n<p>Als je een container &#8211; meer bepaald de inhoud die er in staat &#8211; wat compacter en dus minder breed wil maken, dan doe je dat als volgt:<\/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 style=\"\">Ga naar het tabblad <em>Lay-out<\/em> en verschuif de schuifbalk bij&nbsp;<em>Breedte<\/em> naar de gewenste breedte. Je kan in de selectielijst ook kiezen voor&nbsp;<em>vaste of volledige breedte<\/em>.<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1648\" width=\"280\" data-init-width=\"580\" height=\"298\" data-init-height=\"298\" title=\"Screenshot 2023-04-20 at 09.41.34\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.41.34.png\" data-width=\"280\" style=\"aspect-ratio: auto 580 \/ 298;\" loading=\"lazy\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een achtergrondkleur op de container toepassen<\/span><\/h3>\n<ul>\n<li>Klik links bovenaan in de instellingen op het tabblad <em>Stijl&nbsp;<\/em>en vervolgens op<em>&nbsp;Klassiek&nbsp;<\/em>(icoon met het verfborsteltje)<\/li>\n<li>Kies een kleur<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1649\" width=\"275\" data-init-width=\"582\" height=\"482\" data-init-height=\"482\" title=\"Screenshot 2023-04-20 at 09.43.43\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.43.43.png\" data-width=\"275\" style=\"aspect-ratio: auto 582 \/ 482;\" loading=\"lazy\"><\/span><\/p>\n<h3 style=\"\"><span style=\"text-decoration: underline;\">De richting van een container aanpassen<\/span><\/h3>\n<p><em>Voor je dit gaat doen zorg je best dat er al elementen in je container zitten, simpelweg omdat je dan beter het resultaat zal zien. Om alles gestructureerd te houden, staat hier alles van containers bij elkaar, de instructies over elementen volgen hieronder.<\/em><\/p>\n<p>Bij het invoegen van de container hadden we gekozen voor een column- of <strong>kolom container<\/strong>, dat wil zeggen dat de elementen die daar in gesleept worden onder elkaar komen. Je kan eenvoudig <strong>van richting veranderen<\/strong> door links in de instellingen bij <em>Layout &gt; Direction<\/em> voor de <strong>rijrichting<\/strong> te kiezen.<\/p>\n<p>Andere opties zijn nog row-reversed of column-reversed, daarmee ga je de inhoud van plaats veranderen (de titel gaat bv onderaan komen ipv bovenaan als je voor column-reversed kiest.<\/p>\n<p style=\"\">Speel er maar wat mee om het principe je eigen te maken en om tot het resultaat te komen dat je nodig hebt.<\/p>\n<ul>\n<li style=\"\">Selecteer de container door bovenaan op de 6 bolletjes in het roze vak te klikken<\/li>\n<li style=\"\">Klik links in de instellingen op het tabblad&nbsp;<em>Layout<\/em> en ga bij&nbsp;<em>Items<\/em>&nbsp;naar&nbsp;<em>Direction<\/em><\/li>\n<li style=\"\">Verander de richting indien nodig<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1661\" width=\"181\" data-init-width=\"600\" height=\"792\" data-init-height=\"792\" title=\"Screenshot 2023-04-20 at 10.23.04\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.23.04.png\" data-width=\"181\" style=\"aspect-ratio: auto 600 \/ 792;\"><\/span><\/p>\n<p style=\"\"><strong>Column richting:<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1655\" width=\"545\" data-init-width=\"2376\" height=\"968\" data-init-height=\"968\" title=\"Screenshot 2023-04-20 at 10.14.32\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.14.32.png\" data-width=\"545\" style=\"aspect-ratio: auto 2376 \/ 968;\"><\/span><\/p>\n<p style=\"\"><strong>Row richting:<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1656\" width=\"545\" data-init-width=\"2438\" height=\"962\" data-init-height=\"962\" title=\"Screenshot 2023-04-20 at 10.16.34\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.16.34.png\" data-width=\"545\" style=\"aspect-ratio: auto 2438 \/ 962;\"><\/span><\/p>\n<p style=\"\"><strong>Reversed-row richting:<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1657\" width=\"545\" data-init-width=\"2438\" height=\"964\" data-init-height=\"964\" title=\"Screenshot 2023-04-20 at 10.16.52\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.16.52.png\" data-width=\"545\" style=\"aspect-ratio: auto 2438 \/ 964;\"><\/span><\/p>\n<p style=\"\"><strong>Reversed-column richting:<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1658\" width=\"545\" data-init-width=\"2400\" height=\"964\" data-init-height=\"964\" title=\"Screenshot 2023-04-20 at 10.17.03\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.17.03.png\" data-width=\"545\" style=\"aspect-ratio: auto 2400 \/ 964;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">De uitlijning van een container aanpassen<\/span><\/h3>\n<p>Met uitlijning wordt bedoeld of de elementen boven, gecentreerd of onder komen te staan ofwel links, midden of rechts.<\/p>\n<ul>\n<li>Selecteer de container door bovenaan op de 6 bolletjes in het roze vak te klikken<\/li>\n<li>Klik links in de instellingen op het tabblad&nbsp;<em>Layout<\/em>&nbsp;en ga bij&nbsp;<em>Items<\/em>&nbsp;naar&nbsp;<em>Justify Content <\/em>en\/of<em> Align items<\/em><\/li>\n<li>Kies de uitlijning die je nodig hebt. Probeer maar wat uit zodat je weet hoe het principe werkt<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1662\" width=\"242\" data-init-width=\"576\" height=\"234\" data-init-height=\"234\" title=\"Screenshot 2023-04-20 at 10.27.28\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.27.28.png\" data-width=\"242\" style=\"aspect-ratio: auto 576 \/ 234;\"><\/span><\/p>\n<p><strong>Justify content: center, align items: left<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1663\" width=\"756\" data-init-width=\"2454\" height=\"1084\" data-init-height=\"1084\" title=\"Screenshot 2023-04-20 at 10.29.17\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.29.17.png\" data-width=\"756\" style=\"aspect-ratio: auto 2454 \/ 1084;\"><\/span><\/p>\n<p><strong>Justify content: space around, align items: left<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1664\" width=\"666\" data-init-width=\"2454\" height=\"1078\" data-init-height=\"1078\" title=\"Screenshot 2023-04-20 at 10.29.48\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.29.48.png\" data-width=\"666\" style=\"aspect-ratio: auto 2454 \/ 1078;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">De plaats tussen de elementen van een container aanpassen<\/span><\/h3>\n<ul>\n<li>Selecteer de container door bovenaan op de 6 bolletjes in het roze vak te klikken<\/li>\n<li>Klik links in de instellingen op het tabblad <em>Layout<\/em>&nbsp;en ga bij&nbsp;<em>Items<\/em>&nbsp;naar&nbsp;<em>Gap between elements<\/em><\/li>\n<li>Met de schuifbalk kan je handmatig de plaats tussen de elementen groter of kleiner maken<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1665\" width=\"666\" data-init-width=\"2702\" height=\"1490\" data-init-height=\"1490\" title=\"Screenshot 2023-04-20 at 10.31.39\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.31.39.png\" data-width=\"666\" style=\"aspect-ratio: auto 2702 \/ 1490;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">De wrap functie van een container<\/span><\/h3>\n<p>Elementen in een container kunnen op dezelfde lijn blijven (geen wrap) of ze kunnen in verschillende regels opgesplitst worden (wrap). De wrap functie heeft niet altijd effect, veel hangt af van de container richting en uitlijning. Hieronder 2 voorbeelden.<\/p>\n<p><strong>Geen wrap, row container:<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1666\" width=\"666\" data-init-width=\"2420\" height=\"1404\" data-init-height=\"1404\" title=\"Screenshot 2023-04-20 at 10.34.20\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.34.20.png\" data-width=\"666\" style=\"aspect-ratio: auto 2420 \/ 1404;\"><\/span><\/p>\n<p style=\"\"><strong>Met wrap, row container:<\/strong><\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1667\" width=\"666\" data-init-width=\"2432\" height=\"1724\" data-init-height=\"1724\" title=\"Screenshot 2023-04-20 at 10.34.40\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-10.34.40.png\" data-width=\"666\" style=\"aspect-ratio: auto 2432 \/ 1724;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een hoofdcontainer met 2 subcontainers naast elkaar invoegen<\/span><\/h3>\n<ul>\n<li>Klik op het plusteken in het midden van de pagina<\/li>\n<li>Klik vervolgens op de structuur met 2 containers<\/li>\n<\/ul>\n<p>Als je een soort kolommenstructuur wil cre\u00ebren, kan het wel eens gemakkelijk zijn om de vooraf opgemaakte layout met 1 hoofdcontainer en 2 subconatiners in te voegen.<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1640\" width=\"206\" data-init-width=\"338\" data-init-height=\"206\" title=\"Plusje\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Plusje.png\" data-width=\"206\" style=\"\" loading=\"lazy\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"1676\" width=\"378\" data-init-width=\"1334\" data-init-height=\"378\" title=\"Screenshot 2023-04-22 at 11.33.33\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-11.33.33.png\" data-width=\"378\" style=\"\" loading=\"lazy\"><\/span><\/p>\n<h2 id=\"tve-jump-17ecafd35c2\" style=\"\">Elementen<\/h2>\n<h3><span style=\"text-decoration: underline;\">Een titel invoegen en opmaken<\/span><\/h3>\n<ul>\n<li style=\"\">Klik rechts bovenaan bij de instellingen in de zwarte balk op het <strong>raster<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1619\" width=\"283\" data-init-width=\"598\" height=\"218\" data-init-height=\"218\" title=\"Screenshot 2023-04-19 at 21.22.47\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" data-width=\"283\" style=\"aspect-ratio: auto 598 \/ 218;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">&nbsp;Sleep het <em>Koptekst<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1650\" width=\"642\" data-init-width=\"1500\" height=\"598\" data-init-height=\"598\" title=\"Screenshot 2023-04-20 at 09.45.22\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.45.22.png\" data-width=\"642\" style=\"aspect-ratio: auto 1500 \/ 598;\" loading=\"lazy\"><\/span><\/p>\n<p>Links openen automatisch de instellingen van dit element. De globale kleur die we hadden ingesteld voor de titels wordt automatisch overgenomen, dit kan uiteraard nog aangepast worden.<\/p>\n<h4 style=\"\">DE TEKST AANPASSEN<\/h4>\n<ul>\n<li>Zorg ervoor dat het tekst element geselecteerd is door er in te klikken<\/li>\n<li>Je kan de <strong>tekst<\/strong> op 2 manieren aanpassen:\n<ul>\n<li>Door in het tekstvak van de pagina zelf te klikken en een andere tekst te typen<\/li>\n<li>Door links in de instellingen in het witte tekstvak de tekst aan te passen<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1651\" width=\"551\" data-init-width=\"1394\" height=\"530\" data-init-height=\"530\" title=\"Screenshot 2023-04-20 at 09.47.58\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.47.58.png\" data-width=\"551\" style=\"aspect-ratio: auto 1394 \/ 530;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>De <em>HTML-tag<\/em> mag op <strong>H1 <\/strong>gezet worden. Gebruik nergens anders op de site H1, dit mag enkel gebruikt worden op de homepage en enkel als de titel belangrijke kernwoorden bevat in functie van de SEO<\/li>\n<\/ul>\n<h4>DE STIJL AANPASSEN: KLEUR, TEKENGROOTTE, LETTERTYPE,&#8230;<\/h4>\n<ul>\n<li>Zorg ervoor dat het tekst element geselecteerd is door er in te klikken<\/li>\n<li>Klik links bovenaan in de instellingen op het tabblad&nbsp;<em>Stijl&nbsp;<\/em><\/li>\n<li>Bij&nbsp;<em>Kleur<\/em> kan je de tekstkleur aanpassen<\/li>\n<li>Klik op het icoon van het potloodje bij&nbsp;<em>Typografie<\/em> om andere instellingen te doen naar keuze:\n<ul>\n<li>Lettertype (Familie)<\/li>\n<li>Grootte (afmeting),<\/li>\n<li>Dikte (light, regular, vetgedrukt)<\/li>\n<li>Transformeren (hoofdletters, kleine letters, zoals in een zin,&#8230;)<\/li>\n<li>Stijl (normaal, cursief)<\/li>\n<li>Decoratie (onderlijnd, bovenstreept, doorstreept)<\/li>\n<li>Regelhoogte (de ruimte tussen de regels, indien er meer regels onder elkaar zijn)<\/li>\n<li>Letterafstand (de ruimte tussen de letters)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1652\" width=\"264\" data-init-width=\"582\" height=\"1300\" data-init-height=\"1300\" title=\"Screenshot 2023-04-20 at 09.49.58\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.49.58.png\" data-width=\"264\" style=\"aspect-ratio: auto 582 \/ 1300;\" loading=\"lazy\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een tekst element invoegen en opmaken<\/span><\/h3>\n<ul>\n<li>Klik rechts bovenaan bij de instellingen in de zwarte balk op het <strong>raster<\/strong><strong>&nbsp;<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1619\" width=\"248\" data-init-width=\"598\" height=\"218\" data-init-height=\"218\" title=\"Raster\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" data-width=\"248\" style=\"aspect-ratio: auto 598 \/ 218;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">Sleep het <em>Tekstbewerker<\/em> element links vanuit de instellingen in de container, onder de titel, en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1653\" width=\"559\" data-init-width=\"1460\" height=\"650\" data-init-height=\"650\" title=\"Screenshot 2023-04-20 at 09.53.16\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.53.16.png\" data-width=\"559\" style=\"aspect-ratio: auto 1460 \/ 650;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Pas de tekst aan en wijzig indien nodig bij <em>Stijl<\/em> de tekengrootte, kleur, lettertype,&#8230;<\/li>\n<li style=\"\">Je kan eventueel nog een <strong>extra tussentitel en\/of tekstje<\/strong> toevoegen door <strong>e<\/strong><strong>en nieuw tekst- of koptekst element te slepen onder of boven het vorige tekst element<\/strong>. <span style=\"text-decoration: underline;\">Pas eventueel de breedte van de ganse sectie aan<\/span>. Hieronder een voorbeeld:<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1654\" width=\"756\" data-init-width=\"2356\" height=\"962\" data-init-height=\"962\" title=\"Screenshot 2023-04-20 at 09.57.00\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-20-at-09.57.00.png\" data-width=\"756\" loading=\"lazy\" style=\"aspect-ratio: auto 2356 \/ 962;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een knop (button) invoegen en opmaken<\/span><\/h3>\n<ul>\n<li>Klik rechts bovenaan bij de instellingen in de zwarte balk op het <strong>raster<\/strong><strong>&nbsp;<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1619\" width=\"248\" data-init-width=\"598\" height=\"218\" data-init-height=\"218\" title=\"Raster\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" data-width=\"248\" style=\"aspect-ratio: auto 598 \/ 218;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">Sleep het <em>Afbeelding<\/em> element links vanuit de instellingen in de container (onder de tekst) en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1668\" width=\"529\" data-init-width=\"1148\" height=\"744\" data-init-height=\"744\" title=\"Screenshot 2023-04-22 at 10.26.45\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-10.26.45.png\" data-width=\"529\" loading=\"lazy\" style=\"aspect-ratio: auto 1148 \/ 744;\"><\/span><\/p>\n<p style=\"\">Wanneer je op de knop klikt, kan je aan de linkerzijde allerhande instellingen doen.&nbsp;<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Inhoud<\/span>: hier kan je de <strong>tekst van de knop <\/strong>aanpassen, de correcte <strong>URL (link) toevoegen<\/strong>, de <strong>uitlijning<\/strong> aanpassen, de <strong>afmeting<\/strong> aanpassen (groter of kleiner maken) en eventueel een <strong>pictogram<\/strong> toevoegen<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1669\" width=\"238\" data-init-width=\"590\" height=\"912\" data-init-height=\"912\" title=\"Screenshot 2023-04-22 at 10.28.11\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-10.28.11.png\" data-width=\"238\" style=\"aspect-ratio: auto 590 \/ 912;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Stijl<\/span>: hier kan je de <strong>tekststijl <\/strong>aanpassen bij typografie. Daarnaast kan je voor zowel <strong>normale als hover state<\/strong> (wanneer je er met de muis erover gaat) <strong>tekstkleur <\/strong>en <strong>achtergrondkleur <\/strong>instellen. Ook de <strong>rand<\/strong>(kleur), <strong>afgeronde hoeken<\/strong>, <strong>box shadow<\/strong> en <strong>padding<\/strong> kunnen hier ingesteld worden<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1671\" width=\"237\" data-init-width=\"592\" height=\"1276\" data-init-height=\"1276\" title=\"Screenshot 2023-04-22 at 10.33.13\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-10.33.13.png\" data-width=\"237\" style=\"aspect-ratio: auto 592 \/ 1276;\" loading=\"lazy\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"1672\" width=\"236\" data-init-width=\"546\" height=\"548\" data-init-height=\"548\" title=\"Screenshot 2023-04-22 at 10.34.05\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-10.34.05.png\" data-width=\"236\" style=\"aspect-ratio: auto 546 \/ 548;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Geavanceerd<\/span>:&nbsp;hier kan je zoals bij elk element onder andere de&nbsp;<strong>marges<\/strong>&nbsp;en&nbsp;<strong>padding<\/strong> instellen.<\/li>\n<\/ul>\n<h3><span style=\"text-decoration: underline;\">Een afbeelding element invoegen en instellen<\/span><\/h3>\n<blockquote><p>Hou bij elke afbeelding die je invoegt rekening met de grootte van de afbeelding! Indien het meer dan 1MB is, <a data-tcb_hover_state_parent=\"\" href=\"#tve-jump-17ecb854c97\" style=\"outline: none;\">comprimeer de afbeelding<\/a> dan. Vergeet ook niet om de <a data-tcb_hover_state_parent=\"\" href=\"#tve-jump-17ecb8674c0\" style=\"outline: none;\">Alt-tekst aan te passen<\/a>.<\/p><\/blockquote>\n<ul>\n<li>Voeg indien nodig een nieuwe container of containerstructuur in, door op het roze plusteken te klikken onderaan de pagina (in het voorbeeld gebruiken we een rijcontainer met daarin een afbeelding element en daarnaast een kolomcontainer)-&gt; zo zijn er in totaal maar 2 containers nodig: een hoofdcontainer en 1 subcontainer die rechts naaste de afbeelding komt)<\/li>\n<li>Klik rechts bovenaan bij de instellingen in de zwarte balk op het <strong>raster<\/strong><strong>&nbsp;<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1619\" width=\"248\" data-init-width=\"598\" height=\"218\" data-init-height=\"218\" title=\"Raster\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" data-width=\"248\" style=\"aspect-ratio: auto 598 \/ 218;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">Sleep het <em>Afbeelding<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<li style=\"\">Klik vervolgens links op&nbsp;<em>Afbeelding kiezen<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1678\" width=\"492\" data-init-width=\"2452\" height=\"1278\" data-init-height=\"1278\" title=\"Screenshot 2023-04-22 at 11.45.25\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-11.45.25.png\" data-width=\"492\" style=\"aspect-ratio: auto 2452 \/ 1278;\" loading=\"lazy\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"596\" width=\"247\" data-init-width=\"580\" height=\"656\" data-init-height=\"656\" title=\"Screenshot 2022-02-05 at 21.08.29\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-05-at-21.08.29.png\" data-width=\"247\" loading=\"lazy\" style=\"aspect-ratio: auto 580 \/ 656;\"><\/span><\/p>\n<ul>\n<li>Kies een afbeelding uit de media bibliotheek of upload een nieuwe afbeelding<\/li>\n<\/ul>\n<p>Wanneer je op de afbeelding klikt, kan je aan de linkerzijde allerhande instellingen doen.&nbsp;<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Inhoud<\/span>: hier kan je de <strong>uitlijning<\/strong> aanpassen (links, gecentreerd of rechts). Je kan hier eventueel ook nog een <strong>onderschrift<\/strong> of een <strong>link<\/strong> aan de afbeelding toevoegen.<\/li>\n<li style=\"\"><span style=\"text-decoration: underline;\">Stijl<\/span>: hier kan je de <strong>grootte<\/strong> van de afbeelding aanpassen, dit doe je bij <em>Breedte<\/em>. Je kan hier ook de <strong>transparantie<\/strong>, <strong>afgeronde hoeken&nbsp;<\/strong>en eventueel en <strong>box shadow<\/strong> (schaduw) instellen&nbsp;<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1679\" width=\"680\" data-init-width=\"2360\" height=\"1282\" data-init-height=\"1282\" title=\"Screenshot 2023-04-22 at 11.48.34\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-11.48.34.png\" data-width=\"680\" style=\"aspect-ratio: auto 2360 \/ 1282;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Geavanceerd<\/span>: hier kan je zoals bij elk element onder andere de <strong>marges<\/strong> en <strong>padding<\/strong> instellen.<\/li>\n<\/ul>\n<blockquote><p>Indien je het voorbeeld wil volgen, voer dan de onderstaande stappen uit.<\/p><\/blockquote>\n<blockquote>\n<ul>\n<li>Sleep een container naast de afbeelding en zet de richting op kolom<\/li>\n<\/ul>\n<\/blockquote>\n<blockquote>\n<ul>\n<li>Sleep in de container naast de afbeelding 3 tekstelementen en 1 button onder elkaar. Pas de teksten aan en maak op naar keuze (lettertype kleine titel:&nbsp;<em>Dancing Script<\/em>)<\/li>\n<\/ul>\n<\/blockquote>\n<blockquote>\n<ul>\n<li>Selecteer de hoofdcontainer en zet er een achtergrondkleur op<\/li>\n<\/ul>\n<\/blockquote>\n<blockquote>\n<ul>\n<li>Lijn de hoofdcontainer midden gecentreerd uit. Doe hetzelfde met de subcontainer + centreer de tekstelementen<\/li>\n<li>Selecteer de afbeelding, ga naar het tabblad geavanceerd en kies bij Breedte &gt; Aangepast &gt; 50%<\/li>\n<\/ul>\n<\/blockquote>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1680\" width=\"758\" data-init-width=\"2308\" height=\"1052\" data-init-height=\"1052\" title=\"Screenshot 2023-04-22 at 12.00.11\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.00.11.png\" data-width=\"758\" loading=\"lazy\" style=\"aspect-ratio: auto 2308 \/ 1052;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">De marges en padding van een element of container aanpassen<\/span><\/h3>\n<p><strong>Marge<\/strong> is de <strong>ruimte<\/strong> boven, onder, links of rechts <strong>tussen twee elementen\/containers<\/strong>.&nbsp;<\/p>\n<p style=\"\"><strong>Padding<\/strong> is <strong>ruimte<\/strong> boven, onder, links of rechts <strong>tussen een element\/container en de inhoud van dat element\/container<\/strong>.<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"621\" width=\"758\" data-init-width=\"2288\" height=\"209\" data-init-height=\"632\" title=\"Screenshot 2022-02-06 at 14.24.44\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-06-at-14.24.44.png\" data-width=\"758\" data-height=\"209\" loading=\"lazy\" style=\"aspect-ratio: auto 2288 \/ 632;\"><\/span><\/p>\n<p style=\"\">Je kan marges &amp; padding instellen op zowel elementen als containers, afhankelijk van het resultaat dat je wil bereiken. Hieronder bekijken we een voorbeeld van een afbeelding en een container.<\/p>\n<ul>\n<li style=\"\">Zorg ervoor dat de afbeelding is geselecteerd door erop te klikken<\/li>\n<li style=\"\">Klink links bovenaan in de instellingen op&nbsp;<em>Geavanceerd<\/em><\/li>\n<li style=\"\">Klik&nbsp;<em>Waarden allemaal gelijk houden (het linkje)&nbsp;<\/em>uit indien je nie wil dat de marge-instelling op alle kanten wordt toegepast<\/li>\n<li style=\"\">Pas de marges aan waar nodig. In het voorbeeld gaan we de bovenmarge van de afbeelding negatief instellen zodat die een beetje boven de sectie uit steekt.<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1681\" width=\"688\" data-init-width=\"2354\" height=\"760\" data-init-height=\"760\" title=\"Screenshot 2023-04-22 at 12.06.00\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.06.00.png\" data-width=\"688\" style=\"aspect-ratio: auto 2354 \/ 760;\" loading=\"lazy\"><\/span><\/p>\n<p style=\"\">Deze instelling heeft in dit voorbeeld tot gevolg dat de afbeelding een stuk over de tekst daarboven komt, dus we gaan de bovenste marge van heel de container waarin de afbeelding zit verhogen.<\/p>\n<ul>\n<li style=\"\">Zorg ervoor dat de container geselecteerd is door op het roze vak met de zwarte bolletjes te klikken<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1682\" width=\"400\" data-init-width=\"1390\" height=\"396\" data-init-height=\"396\" title=\"Screenshot 2023-04-22 at 12.07.10\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.07.10.png\" data-width=\"400\" style=\"aspect-ratio: auto 1390 \/ 396;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Klink links bovenaan in de instellingen op&nbsp;<em>Geavanceerd<\/em><\/li>\n<li>Klik <em>Waarden allemaal gelijk houden (het linkje)&nbsp;<\/em>uit indien je nie wil dat de marge-instelling op alle kanten wordt toegepast<\/li>\n<li>Zet de verhouding op percentage<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1683\" width=\"205\" data-init-width=\"568\" height=\"446\" data-init-height=\"446\" title=\"Screenshot 2023-04-22 at 12.08.03\" loading=\"lazy\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.08.03.png\" data-width=\"205\" style=\"aspect-ratio: auto 568 \/ 446;\"><\/span><\/p>\n<p tve-u-187a86b8a06\"\"=\"\">\n<ul>\n<li>Pas de marges aan waar nodig zodat de container in zijn geheel meer naar beneden wordt geplaatst en er meer ruimte wordt gecre\u00eberd tussen de 2 containers<\/li>\n<li>Pas eventueel de padding van de container aan zodat er meer ruimte binnenin is (onder de knop bv. of boven het titeltje &#8220;uitgelicht&#8221;)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1685\" width=\"756\" data-init-width=\"3566\" height=\"1732\" data-init-height=\"1732\" title=\"Screenshot 2023-04-22 at 12.11.55\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.11.55.png\" data-width=\"756\" loading=\"lazy\" style=\"aspect-ratio: auto 3566 \/ 1732;\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een pictogrambox (iconbox) invoegen en opmaken<\/span><\/h3>\n<ul>\n<li>Voeg indien nodig een nieuwe container toe, door op het roze plusteken te klikken onderaan de pagina (in het voorbeeld gebruiken we een rijcontainer, waarin dan 3 elementen naast elkaar zullen komen)<\/li>\n<li>Klik rechts bovenaan bij de instellingen in de zwarte balk op het <strong>raster<\/strong><strong>&nbsp;<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1619\" width=\"248\" data-init-width=\"598\" height=\"218\" data-init-height=\"218\" title=\"Raster\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" data-width=\"248\" style=\"aspect-ratio: auto 598 \/ 218;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Typ in het zoekvak &#8220;pictogram&#8221; of &#8220;icon&#8221; in<\/li>\n<li>Sleep het <em>Pictogrambox<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1687\" width=\"386\" data-init-width=\"2174\" height=\"1210\" data-init-height=\"1210\" title=\"Screenshot 2023-04-22 at 12.16.14 3\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.16.14-3.png\" data-width=\"386\" style=\"aspect-ratio: auto 2174 \/ 1210;\" loading=\"lazy\"><\/span><\/p>\n<p style=\"\">Wanneer je de pictogrambox selecteert, kan je aan de linkerzijde allerhande instellingen doen.&nbsp;<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Inhoud<\/span>: hier kan je een <strong>ander pictogram kiezen<\/strong> door erop te klikken, de <strong>titel en de tekst aanpassen<\/strong> en eventueel een <strong>link toevoegen<\/strong> aan de hele box. Ook de <strong>positie van het icoon<\/strong> kan hier gewijzigd worden (links, boven of rechts)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1688\" width=\"229\" data-init-width=\"582\" height=\"1440\" data-init-height=\"1440\" title=\"Screenshot 2023-04-22 at 12.18.00\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.18.00.png\" data-width=\"229\" style=\"aspect-ratio: auto 582 \/ 1440;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><span style=\"text-decoration: underline;\">Stijl<\/span>: hier kan je allerhande stijlaanpassingen doen aan het icoon en de inhoud. Icoon: &nbsp;<strong>tekstkleur<\/strong>, <strong>afstand<\/strong> van het icoon tot de tekst, <strong>grootte<\/strong>, <strong>draaien<\/strong> &#8211; alles in <strong>normal en hover state<\/strong>. Inhoud: <strong>uitlijning<\/strong>, van titel &amp; tekst de <strong>tekstkleur<\/strong>,<strong>&nbsp;typografie<\/strong>, <strong>afstand<\/strong>,<strong> tekstschaduw<\/strong>,&#8230;<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1689\" width=\"228\" data-init-width=\"596\" height=\"786\" data-init-height=\"786\" title=\"Screenshot 2023-04-22 at 12.18.58\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.18.58.png\" data-width=\"228\" style=\"aspect-ratio: auto 596 \/ 786;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><span style=\"text-decoration: underline;\">Geavanceerd<\/span>:&nbsp;hier kan je zoals bij elk element onder andere de&nbsp;<strong>marges<\/strong>&nbsp;en&nbsp;<strong>padding<\/strong> instellen. Je kan hier ook de breedte van het element instellen.&nbsp;<em>In het voorbeeld wordt er aan alle kanten 20 padding toegevoegd en wordt de breedte op 33% gezet. <\/em>Er kan ook een <strong>achtergrondkleur <\/strong>of <strong>rand<\/strong> toegevoegd worden<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1690\" width=\"523\" data-init-width=\"1926\" height=\"1176\" data-init-height=\"1176\" title=\"Screenshot 2023-04-22 at 12.21.41\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.21.41.png\" data-width=\"523\" style=\"aspect-ratio: auto 1926 \/ 1176;\" loading=\"lazy\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een element dupliceren<\/span><\/h3>\n<p>Je kan een element zeer eenvoudig dupliceren en het duplicaat naar een andere plaats slepen, in geval van een iconbox is dat bv. heel nuttig. Meestal heb je er meer naast elkaar en dan hoef je de opmaak maar 1 keer in te stellen. <strong>Ga wel pas dupliceren wanneer je zeker bent dat de opmaak van het originele element helemaal klaar is<\/strong>.<\/p>\n<ul>\n<li>Klik met de <em>rechtermuisknop<\/em> rechts bovenaan het element op het roze vak met het zwarte potloodje in<\/li>\n<li>Klik vervolgens op&nbsp;<em>Dupliceren<\/em>. Het duplicaat zal nu onder het originele element verschijnen<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1691\" width=\"411\" data-init-width=\"1170\" height=\"940\" data-init-height=\"940\" title=\"Screenshot 2023-04-22 at 12.23.29\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.23.29.png\" data-width=\"411\" style=\"aspect-ratio: auto 1170 \/ 940;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\">De duplicaten komen automatisch naast elkaar, omdat er met een rijcontainer gewerkt wordt. In het voorbeeld zetten we 3 iconboxen naast elkaar<\/li>\n<li style=\"\">Selecteer eventueel de hoofdcontainer, maak die hoger en kies voor de uitlijning gecentreerd &amp; in het midden<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1692\" width=\"673\" data-init-width=\"2366\" height=\"596\" data-init-height=\"596\" title=\"Screenshot 2023-04-22 at 12.25.39\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.25.39.png\" data-width=\"673\" style=\"aspect-ratio: auto 2366 \/ 596;\" loading=\"lazy\"><\/span><\/p>\n<p>Nadien kan je natuurlijk per element nog tekst aanpassen indien van toepassing, of van afbeelding\/pictogram wisselen,&#8230;<\/p>\n<h3 style=\"\"><span style=\"text-decoration: underline;\">Kort overzicht van verschillende elementen<\/span><\/h3>\n<p>Er zijn tientallen verschillende elementen die je kan invoegen op je pagina, elk met hun eigen instellingen. Te veel om alles apart te overlopen met screenshots, maar hier toch een kort overzicht van enkele elementen die je mogelijks nog kan invoegen op je pagina.<\/p>\n<p>Zo kan je nog invoegen: een video, divider (scheidingslijn), Google Maps, fotogalerij, social media icons,&#8230; Er worden nog verschillende elementen uitgelicht in de volgende lessen.<\/p>\n<h2>Marges &amp; padding<\/h2>\n<p><strong>Marge<\/strong> is de <strong>ruimte<\/strong> boven, onder, links of rechts <strong>tussen twee elementen\/containers<\/strong>.&nbsp;<\/p>\n<p style=\"\"><strong>Padding<\/strong> is <strong>ruimte<\/strong> boven, onder, links of rechts <strong>tussen een element\/container en de inhoud van dat element\/container<\/strong>.<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"621\" width=\"758\" data-init-width=\"2288\" height=\"209\" data-init-height=\"632\" title=\"Screenshot 2022-02-06 at 14.24.44\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-06-at-14.24.44.png\" data-width=\"758\" data-height=\"209\" loading=\"lazy\" style=\"aspect-ratio: auto 2288 \/ 632;\"><\/span><\/p>\n<p>Je kan marges &amp; padding instellen op zowel elementen als containers, afhankelijk van het resultaat dat je wil bereiken. Hieronder bekijken we een voorbeeld van een afbeelding en een container.<\/p>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1681\" width=\"688\" data-init-width=\"2354\" height=\"760\" data-init-height=\"760\" title=\"Screenshot 2023-04-22 at 12.06.00\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.06.00.png\" data-width=\"688\" style=\"aspect-ratio: auto 2354 \/ 760;\" loading=\"lazy\"><\/span><\/p>\n<h3><span style=\"text-decoration: underline;\">Een pictogrambox (iconbox) invoegen en opmaken<\/span><\/h3>\n<ul>\n<li>Voeg indien nodig een nieuwe container toe, door op het roze plusteken te klikken onderaan de pagina (in het voorbeeld gebruiken we een rijcontainer, waarin dan 3 elementen naast elkaar zullen komen)<\/li>\n<li>Klik rechts bovenaan bij de instellingen in de zwarte balk op het <strong>raster<\/strong><strong>&nbsp;<\/strong><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1619\" width=\"248\" data-init-width=\"598\" height=\"218\" data-init-height=\"218\" title=\"Raster\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" data-width=\"248\" style=\"aspect-ratio: auto 598 \/ 218;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Typ in het zoekvak &#8220;pictogram&#8221; of &#8220;icon&#8221; in<\/li>\n<li>Sleep het <em>Pictogrambox<\/em> element links vanuit de instellingen in de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1687\" width=\"386\" data-init-width=\"2174\" height=\"1210\" data-init-height=\"1210\" title=\"Screenshot 2023-04-22 at 12.16.14 3\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.16.14-3.png\" data-width=\"386\" style=\"aspect-ratio: auto 2174 \/ 1210;\" loading=\"lazy\"><\/span><\/p>\n<p style=\"\">Wanneer je de pictogrambox selecteert, kan je aan de linkerzijde allerhande instellingen doen.&nbsp;<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Inhoud<\/span>: hier kan je een <strong>ander pictogram kiezen<\/strong> door erop te klikken, de <strong>titel en de tekst aanpassen<\/strong> en eventueel een <strong>link toevoegen<\/strong> aan de hele box. Ook de <strong>positie van het icoon<\/strong> kan hier gewijzigd worden (links, boven of rechts)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1688\" width=\"229\" data-init-width=\"582\" height=\"1440\" data-init-height=\"1440\" title=\"Screenshot 2023-04-22 at 12.18.00\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.18.00.png\" data-width=\"229\" style=\"aspect-ratio: auto 582 \/ 1440;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><span style=\"text-decoration: underline;\">Stijl<\/span>: hier kan je allerhande stijlaanpassingen doen aan het icoon en de inhoud. Icoon: &nbsp;<strong>tekstkleur<\/strong>, <strong>afstand<\/strong> van het icoon tot de tekst, <strong>grootte<\/strong>, <strong>draaien<\/strong> &#8211; alles in <strong>normal en hover state<\/strong>. Inhoud: <strong>uitlijning<\/strong>, van titel &amp; tekst de <strong>tekstkleur<\/strong>,<strong>&nbsp;typografie<\/strong>, <strong>afstand<\/strong>,<strong> tekstschaduw<\/strong>,&#8230;<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1689\" width=\"228\" data-init-width=\"596\" height=\"786\" data-init-height=\"786\" title=\"Screenshot 2023-04-22 at 12.18.58\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.18.58.png\" data-width=\"228\" style=\"aspect-ratio: auto 596 \/ 786;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li style=\"\"><span style=\"text-decoration: underline;\">Geavanceerd<\/span>:&nbsp;hier kan je zoals bij elk element onder andere de&nbsp;<strong>marges<\/strong>&nbsp;en&nbsp;<strong>padding<\/strong> instellen. Je kan hier ook de breedte van het element instellen.&nbsp;<em>In het voorbeeld wordt er aan alle kanten 20 padding toegevoegd en wordt de breedte op 33% gezet. <\/em>Er kan ook een <strong>achtergrondkleur <\/strong>of <strong>rand<\/strong> toegevoegd worden<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1690\" width=\"523\" data-init-width=\"1926\" height=\"1176\" data-init-height=\"1176\" title=\"Screenshot 2023-04-22 at 12.21.41\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.21.41.png\" data-width=\"523\" style=\"aspect-ratio: auto 1926 \/ 1176;\" loading=\"lazy\"><\/span><\/p>\n<h2>Effecten toevoegen<\/h2>\n<p>Effecten kunnen toegevoegd worden op zowel elementen als containers, afhankelijk van welk resultaat je wil bereiken. Je selecteert die als volgt:<\/p>\n<ul>\n<li><span style=\"text-decoration: underline;\">Elementen<\/span>: <strong>klik<\/strong><strong>in het element<\/strong><\/li>\n<li style=\"\"><span style=\"text-decoration: underline;\">Containers<\/span>: klik bovenaan in het midden van de sectie op het <strong>roze vakje met de bolletjes<\/strong><\/li>\n<li>Klik links in de instellingen op&nbsp;<em>Geavanceerd<\/em>&nbsp;en klik vervolgens de&nbsp;<em>Bewegingseffecten<\/em>&nbsp;toggle open. Het meeste wordt de&nbsp;<em>Inkomende animatie<\/em>&nbsp;gebruikt<\/li>\n<li style=\"\">Kies een effect dat je leuk vindt. Je kan ze testen door erop te klikken<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1694\" width=\"257\" data-init-width=\"592\" height=\"1214\" data-init-height=\"1214\" title=\"Screenshot 2023-04-22 at 12.30.58\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.30.58.png\" data-width=\"257\" style=\"aspect-ratio: auto 592 \/ 1214;\" loading=\"lazy\"><\/span><\/p>\n<ul>\n<li>Pas eventueel de animatie aan (traag, normaal of snel) en\/of een eventuele vertraging in milliseconden (dan gaat de animatie niet onmiddellijk toegepast worden van zodra de bezoeker aan die sectie komt, maar komt die met vertraging binnen)<\/li>\n<\/ul>\n<blockquote><p>Wie het voorbeeld wil volgen doet het volgende:&nbsp;<\/p><\/blockquote>\n<blockquote>\n<ul>\n<li>Selecteer de afbeelding in de middelste sectie. Zet hierop een <em>Fade In Down<\/em> effect<\/li>\n<li>Selecteer de container waarin de pictogramboxen zitten. Zet hierop een <em>Fade In<\/em>&nbsp;effect, met de animatie op&nbsp;<em>Traag<\/em> en een vertraging van 500 ms<\/li>\n<\/ul>\n<\/blockquote>\n<h2 style=\"\">De homepage als homepage instellen<\/h2>\n<p>Als je vanuit een pagina komt:<\/p>\n<ul>\n<li>Klik links bovenaan in het zwarte vak op de 3 streepjes<\/li>\n<li>Klik vervolgens op <em>Afsluiten<\/em><\/li>\n<li style=\"\">Klik daarna op links bovenaan in de hoek op het icoontje (hier zal waarschijnlijk je eigen logo staan)<\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"1695\" width=\"226\" data-init-width=\"594\" height=\"868\" data-init-height=\"868\" title=\"Screenshot 2023-04-22 at 12.32.29\" src=\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.32.29.png\" data-width=\"226\" style=\"aspect-ratio: auto 594 \/ 868;\" loading=\"lazy\"><\/span><span><img decoding=\"async\" alt=\"\" data-id=\"635\" width=\"291\" data-init-width=\"652\" height=\"54\" data-init-height=\"122\" title=\"Screenshot 2022-02-06 at 16.49.41\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-06-at-16.49.41.png\" data-width=\"291\" data-height=\"54\" style=\"aspect-ratio: auto 652 \/ 122;\" loading=\"lazy\"><\/span><\/p>\n<p>Als je niet vanuit een pagina vertrekt, log dan in op het WP dashboard<\/p>\n<ul>\n<li>Klik links in het menu onderaan op <em>Instellingen<\/em>&nbsp;&gt;&nbsp;<em>Lezen<\/em><\/li>\n<li>Vink bij <em>Je homepage toont &nbsp;<\/em>&#8220;Een statische pagina&#8221; aan en selecteer bij<em>&nbsp;Homepagina <\/em>je homepage<\/li>\n<li style=\"\">Klik vervolgens onderaan op&nbsp;<em>Wijzigingen opslaan<\/em><\/li>\n<\/ul>\n<p><span><img decoding=\"async\" alt=\"\" data-id=\"636\" width=\"682\" data-init-width=\"1982\" height=\"498\" data-init-height=\"1446\" title=\"Screenshot 2022-02-06 at 16.55.57\" src=\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-06-at-16.55.57.png\" data-width=\"682\" data-height=\"498\" style=\"aspect-ratio: auto 1982 \/ 1446;\" loading=\"lazy\"><\/span><\/p>\n<p style=\"\">Bekijk nu de pagina op je website. Enkel jij als beheerder kan dit zien, andere mensen gaan de Coming Soon page nog zien aangezien we nog in onderhoudsmodus aan het werken zijn.<\/p>\n<p style=\"\">Denk eraan om je pagina responsief te maken!<\/p>\n","protected":false},"template":"","class_list":["post-165","tva_lesson","type-tva_lesson","status-publish","hentry","tva_courses-module-3-paginas-maken","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/leeromgeving.fixityourself.be\/index.php?rest_route=\/wp\/v2\/tva_lesson\/165"}],"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=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}