Header (menubalk)

De header is de balk bovenaan elke pagina, met je logo en het menu. Op de Header-pagina bepaal je hoe die eruitziet.

Wat je kunt instellen

• Achtergrondkleur hoofdmenu: kies een van je vijf kleuren of een lichte tint ervan, uit het kleurenschema bij Stijl & kleuren.
• Achtergrondkleur submenu: de achtergrond van de uitklapmenu's: wit of een lichte tint.
• Tekstkleur: die stel je niet zelf in; de kleur van het menu wordt automatisch licht of donker gekozen, afgestemd op je achtergrondkleur, zodat het altijd goed leesbaar blijft.
• Lettertype hoofdmenu: kies het lettertype van je lopende tekst of dat van je titels. Wil je een heel ander lettertype, kies dat dan bij Stijl & kleuren.
• Tekstgrootte hoofdmenu: Klein, Middel of Groot.
• Indeling: hoe logo en menu over de balk verdeeld staan (zie hieronder).
• Logo grootte: een schuif waarmee je het logo traploos groter of kleiner maakt. Ernaast zie je hoe hoog je logo ongeveer wordt (in pixels). De balk past zijn hoogte automatisch aan het logo aan, of je logo nu breed, vierkant of staand is.
• Logo op telefoon: op een telefoon is het logo begrensd, zodat het menu ernaast past; de schuif geldt alleen voor grote schermen. Kies Normaal, Groot of Volle breedte. Volle breedte is bedoeld voor een brede banner als logo bij de indeling Gecentreerd of Menu 2e rij: de banner vult dan de breedte van de telefoon en de menuknop staat eronder. Bekijk het resultaat met de knop Mobiel rechtsboven.
• Menubalk tijdens het scrollen: kies Vast, op volle grootte, Vast, krimpt tot smalle balk of Scrolt gewoon mee. Een krimpende balk houdt het menu altijd bereikbaar zonder veel ruimte in te nemen.

Klik na het kiezen op Opslaan.

Logo

Bij Logo klik je op Logo uploaden (of Logo vervangen als er al een staat). Gebruik bij voorkeur een PNG met transparante achtergrond; SVG, JPG en WebP kan ook. Een logo mag maximaal 8 MB zijn (een SVG maximaal 2 MB). Het logo wordt meteen opgeslagen. Met Verwijderen haal je het weg; zonder logo toont de balk netjes je bedrijfsnaam. Lukt het niet om je logo er mooi in te krijgen? Via Neem contact op helpen we je graag.

Indeling van de balk

Onder Indeling kies je hoe logo en menu over de balk verdeeld staan. Er zijn zeven indelingen; probeer ze gerust uit, het live voorbeeld laat meteen zien wat past bij jouw logo.

• Klassiek: logo links, menu rechts. De vertrouwde standaard.
• Gecentreerd: logo gecentreerd op een eigen rij, met het menu daaronder. Mooi bij een vierkant of staand logo, en een goede keuze als je je logo wat groter wilt tonen.
• Zwevend: een losse, afgeronde balk die over de pagina "zweeft", een moderne, luchtige look.
• Menu 2e rij: logo bovenaan, het menu op een eigen rij eronder. Fijn bij veel menu-items, en net als Gecentreerd toont deze indeling het logo wat groter.
• Gesplitst: het menu links én rechts van een gecentreerd logo.
• Minimalistisch: een strakke balk waarbij het menu altijd achter een menu-knop (☰) zit, ook op de computer.
• Met actieknop: zoals Klassiek, maar met rechts een opvallende knop, bijvoorbeeld "Offerte aanvragen". Vul daarvoor de Tekst op de knop en de Link in (een pagina van je site zoals /contact, of een webadres dat met https:// begint). Op een telefoon staat de knop onderin het uitklapmenu.

Achtergrondfoto in de balk

Wil je een foto in plaats van een egale kleur? Klik bij Achtergrondafbeelding op Achtergrond kiezen. Je snijdt de foto daarna bij tot een brede band (slepen om te verplaatsen, scrollen om te zoomen, met knoppen om te draaien) en klikt op Bijsnijden & uploaden. De foto vult de hele balk; de tekst wordt automatisch wit en er komt een donkere waas overheen voor de leesbaarheid. Met de schuif Achtergrondfoto donkerder maken bepaal je hoe donker die waas is (vergeet daarna niet op Opslaan te klikken). Gebruik bij voorkeur een rustige foto of een kleurverloop; drukke beelden lezen slecht achter een menu. Met Verwijderen haal je de foto weer weg.

Op je telefoon

Past het menu niet naast je logo (op een telefoon, of bij veel menu-items op een smal scherm), dan komt het vanzelf achter een menuknop (☰). Klikt een bezoeker daarop, dan klapt het menu open. Bij de indeling Met actieknop staat de actieknop onderin dat uitklapmenu. Heb je geen logo geüpload, dan staat je bedrijfsnaam in de balk; een lange naam loopt op een telefoon over maximaal twee regels in plaats van afgekapt te worden. Hoe je header op een telefoon uitziet, bekijk je met de knop Mobiel rechtsboven in je beheer.

Ook de kleur van de browserbalk bovenaan een telefoon (de adresbalk) kleurt automatisch mee met je header.

Bovenaan het scherm zie je steeds een voorbeeld van je header, zodat je meteen ziet wat je verandert. Klik in het voorbeeld op een menu-item om te zien hoe een actieve pagina eruitziet.