Een container invoegen<\/span><\/h3>\n1. Klik op het kruisje met de roze cirkel rond in het midden<\/h3>\n
![\"Klik](\"https:\/\/images.tango.us\/workflows\/1470f8b8-461d-4aba-b621-494b0dea3490\/steps\/839b81e5-83cc-4276-b091-cc99dd6cfb11\/8c90a360-28f2-41dc-8e2e-5cbdb843e46f.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=683&mark-y=114&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTglMkNlMWMzM2Ymdz0zOCZoPTM4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D\")
<\/p>\n
2. Kies de meest relevante container<\/h3>\n
In dit geval kiezen we de column container omdat we 2 elementen onder elkaar gaan invoegen (het logo en een titel)<\/p>\n
![\"Kies](\"https:\/\/images.tango.us\/workflows\/1470f8b8-461d-4aba-b621-494b0dea3490\/steps\/faf73d62-0f8f-47f2-8d6c-e05f060c09bd\/36fb2719-6db8-4d2b-a56b-dcd5d95ffd30.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.5000&fp-y=0.5000&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=462&mark-y=146&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTglMkNlMWMzM2Ymdz03OCZoPTQ1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D\")
<\/p>\n
Er is nu 1 container ingevoegd. De container is automatisch geselecteerd en je ziet links bovenaan in het zwarte balkje “Container bewerken”.<\/p>\n
Aan de linkerzijde van je scherm<\/strong> ga je telkens instellingen<\/strong> kunnen aanpassen per sectie\/kolom\/element:<\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.16.46.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Verander bij Min. hoogte<\/em> “px” in “vh”<\/li>\n
- Typ in het vakje onder vh 100 in. De container wordt nu schermvullend<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.18.10.png\" "\\"Screenshot")
<\/span><\/p>\nEen achtergrond toevoegen aan een container<\/span><\/h3>\n\n- Zorg ervoor dat de container geselecteerd is door midden bovenaan op de witte bolletjes in het roze vak te klikken<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.19.30.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Klik links bovenaan in de instellingen op Stijl<\/em><\/li>\n
- Klik bij Achtergrond<\/em> op het icoon van het verfborsteltje<\/li>\n
- Klik bij Kleur<\/em> op het witte vakje om een kleur te kiezen. Als je brandkleuren hebt, kan je onderaan in het witte vak je kleurcode toevoegen<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.20.54.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Klik ergens ernaast op je scherm om terug uit het kleurenpallet te gaan<\/li>\n<\/ul>\n
Je pagina opslaan en publiceren<\/span><\/h3>\n\n- Klik links onderaan op de roze knop Publiceren <\/em>om je pagina op te slaan en te publiceren<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.21.41.png\" "\\"Screenshot")
<\/span><\/p>\nEen logo\/afbeelding invoegen<\/span><\/h3>\n\n- Klik rechts bovenaan bij de instellingen in de zwarte balk op het raster<\/strong><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Sleep het Afbeelding<\/em> element links vanuit de instellingen in het midden van de container en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.25.12.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Klik links bij de instellingen op Afbeelding kiezen<\/em> <\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.28.09.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Selecteer een bestaande afbeelding uit de Mediabibliotheek<\/em> of upload een nieuwe afbeelding van je computer bij Bestanden uploaden<\/em><\/li>\n
- Klik vervolgens op Media invoegen<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-at-19.51.47.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Klik in het tabblad Stijl<\/em> en versleep de schuifbalk bij Breedte<\/em> om de grootte van de afbeelding aan te passen indien nodig<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.28.35.png\" "\\"Screenshot")
<\/span><\/p>\nEen titel (kop) invoegen<\/span><\/h3>\n\n- Klik rechts bovenaan bij de instellingen in de zwarte balk op het raster<\/strong><\/li>\n<\/ul>\n
<\/span><\/p>\n\n- Sleep het Koptekst<\/em> element links vanuit de instellingen in de container, onder de afbeelding en laat los wanneer je de roze balk ziet verschijnen in de container<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.31.07.png\" "\\"Screenshot")
<\/span><\/p>\nJe kan op 2 manieren de tekst aanpassen:<\/p>\n
\n- Wijzig in de pagina zelf de blauwe tekst<\/li>\n
- Wijzig links in de instellingen de tekst in het tekstvak<\/li>\n<\/ol>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.32.26.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Wijzig de tekst in “Coming Soon<\/li>\n
- Pas eventueel de uitlijning aan links in de instellingen naar bv. Gecentreerd<\/li>\n
- Klik in het tabblad Stijl<\/em> om de kleur, het lettertype en de tekengrootte aan te passen. Je kan eventueel ook nog de dikte aanpassen, onderlijnen, cursief zetten,…<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.35.19.png\" "\\"Screenshot")
<\/span><\/p>\nDe inhoud van de container centreren<\/span><\/h3>\nJe kan heel eenvoudig de inhoud van de container (de afbeelding en de titel) midden centreren door de volgende stappen toe te passen:<\/p>\n
\n- Selecteer de container door bovenaan op het roze vakje met de 6 bolletjes te klikken<\/li>\n
- Klik links in de instellingen op het tabblad Layout<\/em> <\/li>\n
- Zet zowel Justify content<\/em> als Align items<\/em> op center<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.41.24.png\" "\\"Screenshot")
<\/span><\/p>\nDe instellingen van je pagina bewaren & een voorbeeld bekijken<\/span><\/h3>\n\n- Klik links onderaan op de roze knop Updaten <\/em>om de instellingen te bewaren<\/li>\n<\/ul>\n
\n- Klik links onderaan naast Updaten<\/em> op het icoon van het oogje om je pagina te bekijken<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.36.04.png\" "\\"Screenshot")
<\/span><\/p>\nJe pagina responsief maken<\/span><\/h3>\nHet ontwerp ziet er goed uit op desktop, maar misschien ziet het er nog niet zo goed uit op tablet of mobile.<\/p>\n
Het is belangrijk dat je elke pagina die je maakt controleert in tablet en mobile view. Doe dit wel pas wanneer de pagina op desktop helemaal klaar is.<\/p><\/blockquote>\n
\n- Klik links onderaan in de zwarte balk op Responsive modus <\/em>(icoon met computer en gsm)<\/li>\n
- Bovenaan verschijnt een balk waar je kan switchen tussen desktop, tablet en mobile view<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.37.06.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.38.10.png\" "\\"Screenshot")
<\/span><\/p>\nDe meeste instellingen kan je apart aanpassen op mobile, zonder dat ze aangepast worden op desktop of tablet. Hierbij horen onder andere: afbeeldingsgrootte<\/strong>, tekengrootte<\/strong> en uitlijning<\/strong>. <\/p>\nJe kan eenvoudig zien welke instellingen responsief zijn door het icoon van pc, tablet of mobile die ernaast staan<\/p>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-14-at-23.07.36-e1644876733784.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Zorg ervoor dat mobile view geselecteerd staat door bovenaan op het icoon met de gsm te klikken<\/li>\n
- Klik in het tekstvak waar “Coming Soon” staat en zet bij Stijl > Typografie<\/em> de tekengrootte kleiner<\/li>\n
- Als je een logo hebt ingevoegd, pas dan eventueel de grootte aan door er in te klikken en van bij Stijl<\/em> de Breedte<\/em> aan te passen<\/li>\n<\/ul>\n
De Coming Soon page als homepage instellen<\/span><\/h3>\nDe Coming Soon page is nu gemaakt maar mensen gaan nog steeds op de onafgewerkte homepage uitkomen. Dat komt omdat ik die nog niet heb ingesteld in de onderhoudsmodus<\/strong> als effectieve Coming Soon page, dit moet nog ingesteld worden in het WP dashboard.<\/p>\n\n- Klik links bovenaan in de zwarte balk van de instellingen op de 3 streepjes en vervolgens op Afsluiten<\/em> om terug naar het WP dashboard te gaan<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.44.30.png\" "\\"Screenshot")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.44.45.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Klik links in het menu op Elementor<\/em> > Extra<\/em><\/li>\n
- Klik vervolgens op de tab Onderhoudsmodus<\/em><\/li>\n
- Klik bij Kies modus<\/em> op Komt binnenkort<\/em><\/li>\n
- Klik bij Wie heeft toegang<\/em> op Aangepast<\/em> en vink vervolgens Administrator<\/em> aan<\/li>\n
- Selecteer bij Kies template<\/em> de Coming Soon pagina<\/li>\n
- Klik op Wijzigingen opslaan. <\/em>Je zal zien dat er meteen bovenaan een rood vak verschijnt “Onderhoudsmodus”<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Screenshot-2022-01-17-at-22.17.32.png\" "\\"Screenshot")
<\/span><\/p>\nVanaf nu zullen je websitebezoekers de Coming Soon page te zien krijgen wanneer ze naar je site surfen.<\/p>\n
Soms kan het zijn dat de switch naar onderhoudsmodus in de browser waar je zelf in het werken bent een aantal minuten tijd nodig heeft, dat heeft te maken met het cache geheugen. Daarom kan je best zelf altijd je website bekijken in een incognito venster<\/strong>, dat is wat anderen te zien krijgen.<\/p><\/blockquote>\n\n- Klik in Google Chrome helemaal rechts bovenaan op de 3 bolletjes en klik vervolgens op New incognito window<\/em><\/li>\n
- Een nieuw donker browser venster zal openen, surf daarin naar je website en check of de Coming Soon page er staat<\/li>\n<\/ul>\n","protected":false},"template":"","class_list":["post-1010","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\/1010"}],"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=1010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Klik](\"https:\/\/images.tango.us\/workflows\/f3f5b4ed-ea6c-4b58-94f1-76af494d0226\/steps\/45b30659-a3ae-426d-87db-242ad8f5b263\/49fd131b-d0de-436a-8954-09d80ad1794b.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.0531&fp-y=0.3448&fp-z=2.4307&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=-8&mark-y=335&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTglMkNlMWMzM2Ymdz0zMjUmaD04MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw\")
<\/p>\n![\"Klik](\"https:\/\/images.tango.us\/workflows\/f3f5b4ed-ea6c-4b58-94f1-76af494d0226\/steps\/53346520-dee9-4c9e-8d1a-bfaad34f7504\/43a68cd3-7f08-4c9b-b8bd-cf51fb4ad9fd.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3612&fp-y=0.1361&fp-z=2.7931&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=503&mark-y=238&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTglMkNlMWMzM2Ymdz0xOTQmaD05NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw\")
<\/p>\n![\"Selectier](\"https:\/\/images.tango.us\/workflows\/f3f5b4ed-ea6c-4b58-94f1-76af494d0226\/steps\/6316c4a7-f781-4a33-8b40-1a8396f6e41c\/2ec35e45-2296-4abb-a292-baa77057387e.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.3006&fp-y=0.3512&fp-z=2.6885&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=484&mark-y=335&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTglMkNlMWMzM2Ymdz0yMzImaD04MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw\")
<\/p>\n![\"Scroll](\"https:\/\/images.tango.us\/workflows\/f3f5b4ed-ea6c-4b58-94f1-76af494d0226\/steps\/571047fc-7b2a-4fa6-90fc-a13a62bc2cfe\/c6cf63bc-7f00-4cb2-908a-262b8e466e07.png?fm=png&crop=focalpoint&fit=crop&fp-x=0.1679&fp-y=0.8893&fp-z=2.5012&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&mark-x=354&mark-y=505&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTglMkNlMWMzM2Ymdz0zMDAmaD03NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw\")
<\/p>\n![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/01\/Coming-Soon.webp\" "\\"Coming")
<\/a><\/span><\/p>\n