De pagina header is het gebied onder de koptekst / navigatie-bar waar de paginatitel meestal wordt weergegeven.
Laten we eens kijken hoe dit gebied werkt. Het is eigenlijk een builder met twee rijen waaraan elementen zoals knoppen, HTML-widgets of een menu kunnen worden toegevoegd.
De builder van de paginaheaders is toegankelijk via Dashboard -> Uiterlijk -> Aanpassen -> Paginaheaders.
Note
Houd er rekening mee dat deze sectie standaard zichtbaar is op alle pagina’s, onder de navigatiebalk, na het toevoegen van enkele elementen aan die rijen.
Om het alleen op bepaalde pagina’s weer te geven, gebruik je de tags die beschikbaar zijn in de Algemene instellingen voor pagina headers.
Paginaheader rijen
Er zijn twee rijen beschikbaar in dit gebied, dat zijn de locaties waar je de beschikbare elementen kan toevoegen. Het feit dat ze rijen worden genoemd, betekent niet dat de sectiehoogte aangepast kan worden, zoals 500px.
Elke rij kan worden onderverdeeld in maximaal 12 kolommen en heeft zijn eigen instellingen zoals
- Indeling – Volledige breedte ingesloten | Volledige breedte | Ingesloten
- Stijl – Rijhoogte | skin modus | Rij achtergrond (kleur of afbeelding) | Overlay-kleur | Overlay doorzichtigheid
Note
Opvallend hierbij is dat de achtergrondafbeelding van een rij kan worden ingesteld om de uitgelichte afbeelding van de pagina te gebruiken. In dit geval wordt de afbeelding die je hier instelt, alleen gebruikt als een terugval voor de pagina’s zonder een uitgelichte afbeelding.
Pagina header elementen
Elk element kan op een rij worden toegevoegd door op de plusknop (+) te klikken. Alle elementen die hier beschikbaar zijn, kunnen worden aangepast door middel van slepen en neerzetten, door de muisaanwijzer op de kantlijn te plaatsen.
Laten we alle elementen bekijken die hier beschikbaar zijn, en voor meer details over elk van hen, klik je gewoon op een componentnaam.
- Knop
- HTML
- PaginaHeader Menu
Het knop element
Algemene opties
Vanaf hier kun je de knop-link en tekst instellen. Door op de drie puntjes aan het einde van de rij te klikken, krijg je een dynamisch label of URL.
Indeling
De knop kan zijn eigen marges / vullingen en uitlijning hebben. De uitlijningsopties zijn handig als je de grootte van het knop element wijzigt om meer kolommen binnen de paginakop te bezetten.
Stijl
Kies de gewenste kleur, achtergrondkleur, randradius (rechthoekige of afgeronde knop) en de knopstijl.
Het HTML element
Dit is een tekstgebied waar je platte tekst of HTML kunt toevoegen. Dit element heeft drie tabbladen met opties zoals de andere componenten, Algemeen | Indeling | Stijl.
De krachtige functies hier zijn de magische tags die beschikbaar zijn in de editor.
Deze tags zijn zoiets als, geef hier de paginatitel weer, maar haal de titel van elke pagina op. Omdat de hele paginakop op de hele site wordt weergegeven, zijn deze magische tags erg handig bij het tonen van informatie die specifiek is voor elke pagina, zoals de titel of de beschrijving.
Hieronder zie je een screenshot van hoe je deze magische tags kunt instellen om een sectie te bouwen waarin de paginatitel en beschrijving worden weergegeven.
Dit is een voorbeeld van een blogpagina die ook een beschrijving heeft.
Voor het toevoegen van de achtergrondafbeelding en het vergroten van de sectiehoogte zijn de rij-instellingen handig.
Pagina Header Menu element
Dit is een normale menulocatie, voor het geval je hier een ander menu wilt hebben. Je kan hier een menu toewijzen vanuit Dashboard -> Uiterlijk -> Menu’s, of rechtstreeks vanuit het element, op het tabblad Algemeen.
Algemeen – stel het gewenste menu in op deze locatie
Indeling – bewerk de hoogte en ruimte rond de menu-items. De uitlijning, opvulling en marges kunnen voor het hele element worden ingesteld.
Stijl – voor de menu-items kun je de kleur, de hover-kleur en de hover-skin-modus wijzigen. Daarnaast zijn er speciale typografische opties.