Een header maken met Elementor<\/h2>\n\n- Klik in het WP dashboard links in het menu op Templates<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-10.57.05.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Klik bovenaan op Nieuwe toevoegen<\/em>. Er zal een pop-up openen<\/li>\n
- Bij Type<\/em> kies je Header<\/em> en geef daaronder je header een naam<\/li>\n
- Klik op Template aanmaken,<\/em> Elementor zal geladen worden<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.17.05.png\" "\\"Screenshot")
<\/span><\/p>\nDe template bibliotheek wordt meteen geopend. Als je een kant-en-klare header ziet die je mooi vindt, kan je die invoegen en aanpassen. Meestal moet je er zodanig veel aanpassingen aan doen dat het beter is om van nul te starten.<\/p>\n
\n- \bKlik rechts bovenaan op het kruisje om de bibliotheek te sluiten<\/li>\n
- Klik op het plusteken in het midden van de pagina<\/li>\n
- Klik vervolgens op \u00e9\u00e9n van de vakken, afhankelijk van welke container structuur je wil. In het voorbeeld kiezen we 1 rij container, zodat we daarna 2 elementen naast elkaar kunnen slepen<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Plusje.png\" "\\"Plusje\\"")
<\/span>![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-22-at-12.56.45.png\" "\\"rij")
<\/span><\/p>\nElementen in de header slepen<\/span><\/h3>\nWe gaan eerst beide elementen die we nodig hebben in de header in de containter slepen, daarna worden ze opgemaakt.<\/p>\n
\n- Klik rechts bovenaan bij de instellingen in de zwarte balk op het raster<\/strong> om elementen toe te voegen<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.22.47.png\" "\\"Raster\\"")
<\/span><\/p>\n\n- Sleep eerst het afbeelding element<\/strong> en daarna het WordPress<\/strong>menu element<\/strong> in de container<\/li>\n
- Ze komen naast elkaar, omdat de rij container werd ingevoegd. Het is normaal dat de verhoudingen niet kloppen, dat wordt in de volgende stap aangepast<\/li>\n<\/ul>\n
Afbeelding invoegen:<\/strong><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.23.52.png\" "\\"Screenshot")
<\/span><\/p>\nWordPress Menu invoegen:<\/strong><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.24.17.png\" "\\"Screenshot")
<\/span><\/p>\nDe breedte van de elementen aanpassen<\/span><\/h3>\n\n- Selecteer de afbeelding door er in te klikken<\/li>\n
- Ga links in de instellingen naar het tabblad Geavanceerd<\/em> en klik vervolgens op Breedte > Aangepast<\/em>, vul daar in 10%<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.31.57.png\" "\\"Screenshot")
<\/span><\/p>\n\n- Selecteer nu het menu en doe daar hetzelfde, maar zet de breedte op 90%<\/em><\/li>\n<\/ul>\n
De volledige breedte van je pagina is 100%, dus de breedte van alle elementen in een container moet altijd samen 100 zijn (op desktop, op mobile moet het samen 320 zijn).<\/p>\n
De hoogte en uitlijning van de container aanpassen<\/span><\/h3>\n\n- Selecteer de container door op het roze vak met de bolletjes te klikken<\/li>\n
- Zet de minimum hoogte<\/em> op 0<\/li>\n
- Kies bij Align items<\/em> voor C<\/em>enter<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.43.43.png\" "\\"Screenshot")
<\/span><\/p>\nJe logo toevoegen als afbeelding & opmaken<\/span><\/h3>\n\n- Selecteer de afbeelding door er in te klikken<\/li>\n
- Klik links in de instellingen bij Inhoud <\/em>op Afbeelding kiezen<\/em> en kies een afbeelding uit de mediabibliotheek of upload een nieuwe<\/li>\n
- Pas in het tabblad Stijl<\/em> eventueel de breedte van de afbeelding aan zodat het logo niet te groot wordt weergegeven<\/li>\n<\/ul>\n
Je wil niet dat je header te veel ruimte op je pagina in beslag neemt, maak daarom het logo in de header niet te groot! Zorg er ook voor dat je logo mooi uitgesneden is aan de randen en dat er geen witruimte rond je logo zit. Snij de afbeelding eventueel bij.<\/p><\/blockquote>\n
Verschilende instellingen doen aan het menu<\/span><\/h3>\n\n- Zorg ervoor dat het menu geselecteerd is door er in te klikken<\/li>\n<\/ul>\n
INHOUD > LAYOUT<\/p>\n
\n- Menu<\/span>: kies hier welk menu je wil weergeven<\/strong>. Dit is enkel van toepassing indien je meerdere menu’s hebt aangemaakt<\/li>\n
- Layout<\/span>: kies tussen horizontaal<\/strong>, verticaal <\/strong>of hamburger<\/strong> (3 streepjes zoals je op mobile altijd ziet)<\/li>\n
- Pointer<\/span>: dit is een effect dat je kan instellen wanneer je met de muis over een menu item hovert<\/strong>, bv. onderlijnen, een kader er rond, een achtergrondkleur,…<\/li>\n
- Submenu Indicator<\/span>: ja kan hier kiezen welk symbool je wil gebruiken voor menu items die een submenu hebben. Er is keuze uit 4 symbolen<\/li>\n
- Breakpoint<\/span>: dit is het punt wanneer je menu van horizontaal\/verticaal naar hamburger gaat. Standaar staat het op Tablet<\/em><\/li>\n
- Full Width<\/span>: deze zet je best op “ja”, meer info verder in deze les over mobile view<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.53.29.png\" "\\"Screenshot")
<\/span><\/p>\nSTIJL – MAIN MENU<\/p>\n
Hier kan je de typografie<\/strong> aanpassen en voor normal<\/strong>, hover<\/strong> en active state<\/strong> ook nog de tekstkleur<\/strong>, scheidingstekens<\/strong>, padding<\/strong> en ruimte tussen de menu items<\/strong>.<\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.57.58.png\" "\\"Screenshot")
<\/span><\/p>\nSTIJL – DROPDOWN<\/p>\n
Op desktop betreft dit de instellingen van de submenu items<\/strong>. Op mobile zal dit effect hebben op het hele menu, omdat heel het menu een dropdown is. <\/p>\nEen dropdown menu rolt uit wanneer je het activeert.<\/p><\/blockquote>\n
Hier kan je voor normal<\/strong>, hover<\/strong> en active<\/strong> state de volgende instellingen doen:<\/p>\n\n- Tekstkleur<\/li>\n
- Achtergrondkleur<\/li>\n
- Typografie<\/li>\n
- Rand<\/li>\n
- Afgeronde hoeken<\/li>\n
- Boxshadow<\/li>\n<\/ul>\n
En voor alle states samen nog padding<\/strong> en scheidingstekens<\/strong><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-13.59.50.png\" "\\"Screenshot")
<\/span><\/p>\nSTIJL – TOGGLE BUTTON<\/p>\n
De toggle button is het icoontje dat je ziet naast het submenu item (een pijltje).<\/p>\n
Hier kan je voor normal <\/strong>en hover<\/strong> state de volgende instellingen doen:<\/p>\n\n- Kleur<\/li>\n
- Achtergrondkleur<\/li>\n
- Grootte<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.00.44.png\" "\\"Screenshot")
<\/span><\/p>\nGEAVANCEERD<\/p>\n
Zoals bij elke container\/element kan je indien gewenst de marges & padding aanpassen, een rand & achtergrond toevoegen,…<\/p>\n
Je header responsief maken (mobile)<\/h2>\n\n- Zorg ervoor dat het menu geselecteerd is door er in te klikken<\/li>\n
- Klik links onderaan op Responsive modus<\/em> (icoon met computer & gsm)-> het kan zijn dat dit in jouw Elementor versie bovenaan staat ipv onderaan<\/strong><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.07.42.png\" "\\"Responsive")
<\/span><\/p>\nBovenaan verschijnt nu een balk waar je kan wisselen tussen desktop, tablet en mobile view<\/p>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.08.07.png\" "\\"Responsive")
<\/span><\/p>\n\n- Open Mobile view<\/em> door op het icoon van de gsm te klikken<\/li>\n
- Klik op het hamburger symbool (de 3 streepjes) om het dropdown menu open te klikken<\/li>\n
- Zorg ervoor dat links in de instellingen bij Inhoud<\/em> > Mobile Dropdown <\/em>“Full width” aan staat<\/li>\n<\/ul>\n
Wanneer Full width<\/em> uit staat, zal het dropdown menu openen en de sectie daaronder naar beneden duwen. Niet ideaal, dus daarom zet je dit best aan. Zo gaat het dropdown menu mooi over de onderliggende sectie komen.<\/p><\/blockquote>\n\n- Pas indien gewenst de uitlijning van de menu items nog aan bij Align <\/em>(aside, of center)<\/li>\n
- Pas indien gewenst de uitlijning van de hamburger toggle aan bij Toggle Align<\/em><\/li>\n<\/ul>\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.10.39.png\" "\\"Screenshot")
<\/span><\/p>\nElementen naast elkaar zetten in mobile view<\/span><\/h3>\n\n- Selecteer de afbeelding door er in te klikken<\/li>\n
- Wijzig links in de instelligen bij Geavanceerd > Breedte > Aangepast<\/em> de breedte naar 160%<\/em><\/li>\n
- Doe hetzelfde bij het menu element<\/li>\n
- De elementen komen nu mooi naast elkaar ipv onder elkaar<\/li>\n
- Selecteer de afbeelding en doe de volgende instellingen:\n
De template bibliotheek wordt meteen geopend. Als je een kant-en-klare header ziet die je mooi vindt, kan je die invoegen en aanpassen. Meestal moet je er zodanig veel aanpassingen aan doen dat het beter is om van nul te starten.<\/p>\n We gaan eerst beide elementen die we nodig hebben in de header in de containter slepen, daarna worden ze opgemaakt.<\/p>\n Afbeelding invoegen:<\/strong><\/p>\n WordPress Menu invoegen:<\/strong><\/p>\n De volledige breedte van je pagina is 100%, dus de breedte van alle elementen in een container moet altijd samen 100 zijn (op desktop, op mobile moet het samen 320 zijn).<\/p>\n Je wil niet dat je header te veel ruimte op je pagina in beslag neemt, maak daarom het logo in de header niet te groot! Zorg er ook voor dat je logo mooi uitgesneden is aan de randen en dat er geen witruimte rond je logo zit. Snij de afbeelding eventueel bij.<\/p><\/blockquote>\n INHOUD > LAYOUT<\/p>\n STIJL – MAIN MENU<\/p>\n Hier kan je de typografie<\/strong> aanpassen en voor normal<\/strong>, hover<\/strong> en active state<\/strong> ook nog de tekstkleur<\/strong>, scheidingstekens<\/strong>, padding<\/strong> en ruimte tussen de menu items<\/strong>.<\/p>\n STIJL – DROPDOWN<\/p>\n Op desktop betreft dit de instellingen van de submenu items<\/strong>. Op mobile zal dit effect hebben op het hele menu, omdat heel het menu een dropdown is. <\/p>\n Een dropdown menu rolt uit wanneer je het activeert.<\/p><\/blockquote>\n Hier kan je voor normal<\/strong>, hover<\/strong> en active<\/strong> state de volgende instellingen doen:<\/p>\n En voor alle states samen nog padding<\/strong> en scheidingstekens<\/strong><\/p>\n STIJL – TOGGLE BUTTON<\/p>\n De toggle button is het icoontje dat je ziet naast het submenu item (een pijltje).<\/p>\n Hier kan je voor normal <\/strong>en hover<\/strong> state de volgende instellingen doen:<\/p>\n GEAVANCEERD<\/p>\n Zoals bij elke container\/element kan je indien gewenst de marges & padding aanpassen, een rand & achtergrond toevoegen,…<\/p>\n Bovenaan verschijnt nu een balk waar je kan wisselen tussen desktop, tablet en mobile view<\/p>\n Wanneer Full width<\/em> uit staat, zal het dropdown menu openen en de sectie daaronder naar beneden duwen. Niet ideaal, dus daarom zet je dit best aan. Zo gaat het dropdown menu mooi over de onderliggende sectie komen.<\/p><\/blockquote>\n<\/span><\/p>\n\n
<\/span><\/p>\n\n
<\/span><\/span><\/p>\nElementen in de header slepen<\/span><\/h3>\n
\n
<\/span><\/p>\n\n
<\/span><\/p>\n<\/span><\/p>\nDe breedte van de elementen aanpassen<\/span><\/h3>\n
\n
<\/span><\/p>\n\n
De hoogte en uitlijning van de container aanpassen<\/span><\/h3>\n
\n
<\/span><\/p>\nJe logo toevoegen als afbeelding & opmaken<\/span><\/h3>\n
\n
Verschilende instellingen doen aan het menu<\/span><\/h3>\n
\n
\n
<\/span><\/p>\n<\/span><\/p>\n\n
<\/span><\/p>\n\n
<\/span><\/p>\nJe header responsief maken (mobile)<\/h2>\n
\n
<\/span><\/p>\n<\/span><\/p>\n\n
\n
<\/span><\/p>\nElementen naast elkaar zetten in mobile view<\/span><\/h3>\n
\n
![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.17.42.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-19-at-21.21.41-e1682251299564.png\" "\\"Publiceren\\"")
<\/span><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.02.29.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.03.32.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-14.04.21.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/leeromgeving.fixityourself.be\/wp-content\/uploads\/2023\/04\/Screenshot-2023-04-23-at-18.03.28.png\" "\\"Screenshot")
<\/span><\/p>\n![\"\"](\"https:\/\/usercontent.one\/wp\/fixityourself.virtualfixer.be\/wp-content\/uploads\/2022\/02\/Screenshot-2022-02-13-at-13.39.25.png\" "\\"Screenshot")
<\/span><\/p>\n