Open de Header Builder
- In je WordPress dashboard ga je naar Weergave > Customizer
- Klik op het Header panel om de header builder te openen.
De Header Builder layout leren kennen
De Header Builder bestaat uit twee gedeelten:
- Header Live View: Hier zie je een live preview van hoe de header er uit zal zien op je website.
- Header Builder: Waar je onderdelen kan toevoegen, verwijderen, verplaatsen en het formaat kan veranderen.
De Header Builder rijen
De header builder heeft drie rijen (Header Top, Header Main en Header Bottom ) waarin je makkelijk componenten kan selecteren en verdelen.
Componenten toevoegen
Klik op het “+” (Toevoegen) icoon terwijl je met je muis over elk gedeelte van de rij beweegt en een lijst met componenten verschijnt. Elk component heeft zijn eigen specifieke opties die je kan aanpassen wanneer je op het toegevoegde component klikt.
Component formaat veranderen
Het formaat van alle componenten die je toevoegt aan de header is aan te passen.
Om het formaat aan te passen beweeg je de muis over de linker of rechterkant van het component, klik en houdt vast, dan sleep je naar links of rechts om het formaat aan te passen.
Componenten verwijderen
Beweeg met je muis over het component wat je wil verwijderen. Klik op de “X” in de rechter hoek van het component.
Componenten aanpassen
Om de beschikbare opties te zien van een component, klik je er op. Dit opent het bijbehorende paneel aan de linkerkant, waar je het kan aanpassen.
De Header Builder op mobiele apparaten
De Header Builder stelt je in staat om verschillende headers te hebben voor mobiele en desktop apparaten. Klik op het Desktop/Mobile icoon en je hebt toegang tot de corresponderende builder.
- In de Customizer is het mobiele menu standaard verborgen.
- Componenten toevoegen aan de mobiele header gaat op dezelfde manier. Klik op het “+” (Toevoegen) icoon terwijl je met je muis over elk gedeelte van de rij beweegt en een lijst met componenten verschijnt.
Aantekening
Even though the header builder only accounts for desktop and mobile, all settings have three media-queries: Desktop, Tablet, and Mobile. Each setting can be set separately for tablet by switching to the respective media query in customizer from the bottom left on the sidebar.
[Mobiel] Verander de achtergrondkleur van de header of gebruik een achtergrond afbeelding.
Nadat je de Mobiele versie van de header builder hebt gekozen, zie je ook de mobiele content zoals deze zichtbaar is op mobiele apparaten. Er zijn diverse opties voor de layout (waar je de mobiele content kan openen vanaf links) en stijl. Hier kan je ook de achtergrond aanpassen, kleur of afbeelding.
Mobiel sidebar menu – open eigenschappen
De manier waarop het mobiele menu opent en sluit, kan veranderd worden naar de volgende opties:
- Slide van Links
- Slide van Rechts
- Push vanaf beneden
- Push vanaf Rechts
- Volledig Canvas
- Slide naar beneden
Deze optie is beschikbaar onder Weergave > Customizer > Header, zet mobiele weergave aan en klik op het icoon bij het mobiele menu.
Mobiele sidebar breedte
De mobiele sidebar breedte kan worden aangepast in de Customizer opties, met een verschillende instelling voor elk apparaat. (Desktop | Tablet | Mobiel).
Automatisch drop-down menus uitklappen op mobiele apparaten
Het is ook mogelijk om in te stellen dat de menu’s al zijn uitgevouwen op mobiele apparaten.
