Header maken met Oxygen

Stap in de wereld van WordPress met Oxygen en maak kennis met het ultiem flexible “Header builder” element. Het vullen van de Header Builder werkt werkt min of meer hetzelfde als het vullen van andere secties in je template, of op je pagina’s. Je kunt het zo geavanceerd en uitgebreid maken als je klant/designer/ het je voorschrijft, of je jezelf hebt voorgeschreven. Wel bestaat een Header Builder altijd uit maximaal 3 kolommen. 

Minder dan 3 kolommen nodig? Heb je voldoende aan 2 kolommen, bijvoorbeeld omdat je alleen een logo en een menu hebt te plaatsen in de header dan verberg je de derde kolom, dat doe je met de CSS selector Display, die zet je op None, komt verderop in dit artikel aan bod. 

Header element plaatsen

Ik er van uit dat je een menu gemaakt hebt in WordPress (via Weergave > Menu’s) dat je wilt gaan gebruiken in de header van de website. Anders dan wat je misschien gewend bent bij het werken met WordPress premium themes is dat het uploaden van een logo niet nodig is in Oxygen. Het logo toevoegen doe je gewoon rechtstreeks in het “Header builder” element. 

Het invoegen van het Header builder element doe je zoals gezegd op dezelfde manier als het plaatsen van andere elementen. 

1. Open het template waarin je de header wilt plaatsen, dat zal over het algemeen het main template zijn (andere template erven de header vaak over uit het main template waardoor je de header dus maar eenmalig hoeft aan te maken). 
2. Voeg het Header Builder element toe door op de blauwe Add knop te klikken links bovenin Oxygen.

Functies van de Header Builder

In het Header Builder element kun je aangeven of de header: 

• Sticky moet zijn, dat betekend of ie bovenaan je browser window vastgeplakt moet blijven terwijl je naar beneden scrollt.
• Overlay moet zijn, dus over de eerste sectie heen moet vallen in plaats van dat de volgende sectie onderaan de header moet aansluiten. 

Elementen die je altijd zult gebruiken in de Header Builder

Een header van een WordPress site, of elke andere site, bestaat doorgaans uit verschillende elementen. 

Logo in de header

Wat er in ieder geval in de header staat is het logo. Hiervoor heeft Oxygen geen specifiek element, er is geen element dat Logo heet. Dat is juist goed want aangezien het gewoon een afbeelding is (vooruit, met daarin een link naar de homepage) kun je een logo plaatsen in een, je raad het al, Afbeeldings element. 

Een logo in svg formaat werkt het beste, altijd scherp, ook op kleinere schermen en de bestandsgrootte is gering, en aangezien het bestand op iedere pagina geladen moet worden zal het in belangrijke mate bijdragen aan de laadtijd van je website.

Menu in de header

Voor het plaatsen van het menu kun je kiezen uit maar liefst 6 elementen. Heb je geen dropdown knoppen nodig, laat staan een heel mega enu, kies dan voor het element Pro Menu. In de instellingen geef je aan welk menu daarin gebruikt moet worden. 

Mega menu en Mega menu? Wat is het verschil?

Het Mega Menu element in de afbeelding hierboven waar je een paarse ‘O’ in ziet staan is een zogenaamd samengesteld element. Dat zijn dus elementen die bestaan uit een combinatie van andere elementen. Daarnaast is er stuk code aan toegevoegd voor de gewenste functionaliteit. Een Mega menu element bijvoorbeeld bestaat zoals je in de afbeeling hieronder ziet uit de volgende elementen:

• Code block element
• Link wrapper element
• Columns element
• Text element
• Div element
• Icon element.

Het andere Mega menu, dus zonder die ‘O’ is eigenlijk ook een samengesteld element maar niet als zodanig aangeduid want van Oxyextras.

Meerdere menu’s in de header

Het komt voor dat je niet alle knoppen kwijt kunt in 1 menu, dan zie je vaak dat knoppen als ‘Contact’, ‘Over ons’, en ‘Blog’ in een ander menu gezet worden, vaak in kleiner lettertype en minder styling.

Styling van het menu 

Voor het stylen van het menu beschik je, zoals voor elk element, voor het hele arcenaal aan CSS selectors onder de Advanced tab. Daarnaast uit de volgende aanvullende instelmogelijkheden: 

Typografie (lettertype) 

Spacing (Ruimte om de tekst in de menu knop heen en tussen de menu knoppen onderling)

Hover & active 

Een knop ziet er niet altijd hetzelfde uit. Bepaal hier hoe de knoppen er uit moeten zien wanneer:
Er overheen bewogen worden (hover)
Je je op de betreffende pagina bevindt (active). 

In Oxygen heb je in Pro Menu, nog een aantal extra opties tot je beschikking. 

Social media knoppen in header of elders

Wil je de links naar de social media kanalen een prominente plek geven op de WordPress site kies dan voor een plek in de header. Het element Social Icons kun je daarvoor gebruiken. Daarin kun je kiezen voor brandcolor of je kiest zelf je kleuren, bijvoorbeeld uit de centraal ingestelde (huisstijl) kleuren. Voor recherchebureaudaniluk.nl deed ik beide; brandcolored icons in de footer, zelf gekozen kleuren op de contactpagina om niet te veel de aandacht daar naartoe te leiden: 

Hier kun je ook instellen of de icons afgerond of hoekig moeten worden, wat de grootte en de onderlinge afstand moet zijn.

Je hebt binnen het element Social icons geen controle over de volgorde, dat vind ik persoonlijk een nadeel. Om dit probleem te ondervangen gebruik ik daarvoor custom css, dat is in dit geval css die niet te genereren is via de Advanded tab, de handgeschreven CSS voeg je toe in het veld ‘custom css’. Voor het in een aandere volgorde zetten van items binnen een element (Linkedin icon vooraan zetten in het Social icons element) gebruik ik de Flex selector:

.oxy-social-icons a.oxy-social-icons-linkedin {
order: 1;
}
.oxy-social-icons a.oxy-social-icons-twitter {
order: 2;
}
.oxy-social-icons a.oxy-social-icons-instagram {
order: 3;
}

Omdat je social icons bestaan uit icons, kun je er ook voor kiezen icon elementen te gaan gebruiken, dan kun je niet aanklikken ‘Use brand colors’ maar zo ingewikkeld is het niet om die kleuren zelf op te geven in de CSS instellingen.

Contactgegevens in de header

Contactgegevens zie je wel eens helemaal bovenin de site staan, technisch gezien staan ze niet in de header maar in de een sectie die veelal ‘topbar’ genoemd word. In Oxygen voeg je een nieuwe row to in de header, van die nieuwe row verberg je 2 van de 3 kolommen en in de overgebleven kolom plaats je een Text element, eventueel doe je dat binnen een div als je extra eigenschappen wilt toevoegen. 

Zoekveld in de header

Een WordPress website met veel content worden vaak uitgerust met een zoekveld in de header. Je kunt gebruik maken van het Oxygen element ‘Search Form’ maar die is eigenlijk vrij beperkt in mogelijkheden. 

Als je een Oxyextras licentie hebt, ga dan voor het element ‘Header Search’, daarin heb je een stuk meer mogelijkheden, zie hieronder de toepassing ervan in de jarabee.nl website: 

Meerdere Header Builders gebruiken

Heb je aan meerdere rijen niet voldoen kies er dan voor meerdere Header Builder elementen in te zetten. Ik koos daarvoor in de situatie dat het ene deel van de header sticky moest zijn maar tegelijkertijd toch ook direct al in beeld moest komen. Dus een extra rij voldeed niet want die kan alleen op ‘Only show in sticky’ of ‘Hide in sticky’ gezet worden en het menu moest juist in plaats van only ‘always’ getoond worden, en in plaats van hide moest ik ‘m ‘show’ in sticky hebben.

Mocht je nu door de bomen het bos niet meer zien. Het wordt je vanzelf duidelijk wanneer je er zelf mee aan de slag gaat en gewoon ‘ns wat gaat uitproberen.

Header geschikt maken voor mobiel

Sinds Google “Mobile first” uit rolde, of eigenlijk al daarvoor, is het erg belangrijk dat een (WordPress) website ook op mobiele apparaten goed toegankelijk is. 

De header is een belangrijk onderdeel van de website dus je wilt voorkomen dat het logo of menu daarop slecht wordt uitgelijnd of überhaupt niet werkt. Ook dat kan relatief eenvoudig met Oxygen geregeld worden. 

Responsive menu

Zodra je de header af is voor mobiel begin je aan de instellingen voor mobiel. Het breakpoint heb ik hieronder ingesteld “Toon het mobiele menu bij schermen smaller dan 768px”. Op schermen die kleiner zijn verschijnt daardoor niet het menu maar de hamburger knop. Overigens kun je de breakpoints zelfs wijzigen in de van Oxygen.

Via de knoppen Mobile Menu en Mobile Dropdowns heb je weer een groot aantal instelmogelijkheden zoals uitlijnen, kleuren, animatie, submenu indicator (icoon om aan te geven dat er zich een dropdown onder het menu item bevindt) etcetc.

Voor het logo heb ik @media regels gemaakt, maar dan met behulp van Oxygen, dus veel intuïtiever. Een voor schermen kleiner dan 1120 px breed en een voor schermen kleiner dan 992 px breed. Van die tweede laat ik weer een printscreen zien. Omdat er op schermen kleiner dan 992px toch geen menu te zien zal zijn (alleen de hamburger knop) kies ik ervoor het logo meer ruimte te geven, dus een groter deel van de header te laten beslaan.

Divs (met elementen) onzichtbaar maken op mobiel

Tenslotte kun je er nog voor zorgen dat bepaalde onderdelen van de header helemaal niet te zien zullen zijn op klein beeldscherm. Dat doe je weer door de css selector ‘Display’ te gebruiken, en op ‘None’ te zetten. Ook voor deze selector hoeft geen css regel geschreven te worden want ook hierin voorziet Oxygen

Let op. Anders dan in een WordPress Builder zoals Elementor heb je nergens een schuifjes ‘Toon op mobiel’, ‘Toon op tablet’ en ‘Toon op desktop’, die je alleen maar even aan en uit hoeft te zetten; in Oxygen wordt je helaas (of gelukkig!) overgeleverd aan je kennis van CSS, met als beloning dat je veel meer mogelijkheden hebt. Zo hoeft je bijvoorbeeld geen verschillende knoppen aan te maken voor groot beeldscherm en voor klein beeldscherm. Bijvoorbeeld omdat je op een klein beeldscherm te weinig ruimte hebt om een icon te laten zien in een button.  In bijvoorbeeld Elementor wil dit nog wel eens de ‘minst slechte’ methode is om tegemoet te komen aan de gewenste afmetingen van een knop in zowel groot als klein beeldscherm: 

1. Maak een knop voor groot beeldscherm die je verbergt op klein beeldscherm
2. Maak een knop voor klein beeldscherm, die je dus verbergt op groot beeldscherm 

De CSS selector die je tot je beschikking hebt vind je overigens in elk element onder de tab ‘Advanced’. 

Header uitschakelen

Stel dat je een landingspagina bouwt waar de header niet te zien moet zijn, om te voorkomen dat mensen naar een andere pagina gaan, dan kun je dat instellen bij Conditions.

Header met verticaal menu

De header builder is niet geschikt voor het maken van een verticaal menu. Het element dat je wel gebruikt als je een template bouwt voor een site met een verticaal menu is een basaal Div element, met als instelling dat de child divs horizontaal achter elkaar getoond moeten worden. In het eerste child div dat je plaatst zet je het menu, in de volgende child div plaats je het Innercontent element, dat is zoals gezegd het element dat de pagina (of post) inhoud laat zien. De breedte van div met het verticale menu stel je in op bijvoorbeeld 200px. De hoogte ervan is meestal de hoogte van het beeldscherm, hoe hoog dat beeldscherm ook moge zijn, kies daarom de eenheid ‘vh’ (viewport height) en de waarde ‘100’ . In het Pro Menu stel je bij Orientation in dat het menu verticaal moet worden weergegeven, dus met de knoppen onder elkaar ipv naast elkaar. 

Verticaal menu voor kleine beeldschermen

Ook een verticaal menu gebruikt moet natuurlijk te gebruiken zijn op kleinere beeldschermen. Voor tablet kun je nog de breedte van de kolom wat kleiner maken, voor mobiel zal dat niet mogelijk zijn, op mobiel zal een hamburger knop te zien moeten zijn, die je maakt met een icon (de hamburger knop zelf) en een Modal element met daarin het menu. De Modal wordt getriggerd, geopend in dit geval, door een klik (of een hover) op de hamburger knop, eigenlijk hetzelfde dus als hoe een horizontaal menu zich “gedraagt” op mobiel, maar dan nu maak je ‘m zelf, dus met een icoon en een Modal element. Alle ins en outs van een verticaal menu in Oxygen kan ik je nog niet mededelen want heb zo’n menu simpelweg nog niet gemaakt..