Header module

Gewijzigd op Fri, 22 Dec 2023 om 10:03 AM

In dit artikel wordt stap voor stap uitgelegd hoe je de header kunt toevoegen aan een pagina of hoe je deze aanpast.

Voor dit artikel heb ik de header op de homepagina als voorbeeld gebruikt, maar dit werkt hetzelfde op alle andere pagina's.

Wanneer je alleen de bestaande header wilt wijzigen ga dan direct na stap 1 naar stap 9.

Om een header toe te voegen volg je eerst alle onderstaande stappen:

Schakel de 'Visual Builder' in
Wanneer je de header per ongeluk hebt verwijderd moet je eerst even naar de onderkant van de pagina scrollen om een nieuwe 'Sectie' in te voegen. Zoals je kunt zien ontbreekt het '+' icoon nu op de bovenzijde van de pagina.
Scroll dus even naar beneden tot je een blauwe '+' icoon ziet.
Wanneer je een blauwe '+' icoon ziet klik je hierop.
Kies voor een header altijd de 'Volle breedte' sectie.
Vervolgens kies je voor de 'Volle breedte header'.
De instellingen van de header worden nu automatisch geopend. Klik op het groene vinkje om deze even af te sluiten.Nu de sectie bovenaan de pagina is geplaatst, kun je verder met de header module instellingen:
Beweeg met je muis over de header en klik in het grijze menu op het 'instellingen' icoon
Klik onder 'Content' op 'Tekst'. Hier kun je de standaard tekst in de header aanpassen en de tekst voor in de knoppen invullen.
Vul bij 'Link' de URL in voor 'Knop #1' en eventueel 'Knop #2' (LET OP: Verwijder eerst de '#'!)
Klik nu 'Achtergrond' open. Je kunt nu een foto kiezen of uploaden naar de bibliotheek. Let er op dat de afbeelding is geoptimaliseerd voor het internet en dat de afbeelding de juiste afmetingen heeft. Je kunt dit via het volgende artikel doen; afbeeldingen-bewerken-met-canva. De juiste afmeting voor een header is 1920x800 pixels.
Hierna kun je eventueel naar beneden scrollen en bij 'Achtergrond positie' de positie van de afbeelding aanpassen. Doe dit op basis van het 'focuspunt' van de afbeelding.
Onder 'Ontwerp' bij 'Lay-out' kun je de 'Tekst en logo-uitlijning' aanpassen.
Bij 'Tekst' kun je de 'Tekstkleur' aanpassen van 'Licht' (wit) naar 'Donker' (zwart)
Onder 'Ontwerp' bij 'Afstand' hebben we op de homepage de 'Buffer' op '10%' ingesteld. Op de Diensten pagina is dit '5%'. Dit zorgt ervoor dat je een hogere afbeelding krijgt rondom de tekst.
Als je klaar bent met alle aanpassingen, klik dan op het groene vinkje om de wijzigingen op te slaan
Vergeet niet om de pagina op te slaan al je klaar bent. :-)