Met Phoenix kan je een eigen header aanmaken. Zo kan je zelf naar andere pagina's verwijzen, een logo toevoegen en zelfs een CTA-knop verwerken in je header!
Wat is een header?
Een header is de menubalk die bovenaan je website staat. Hierin verwerk je menu items, oftewel linkjes naar pagina's op je website of naar een andere website.
Jouw Phoenix website heeft altijd een header. Er kan maar één header tegelijkertijd actief zijn. Verschillende headers op verschillende pagina's is dus niet mogelijk.
Een header maken of wijzigen
Standaard heeft jouw Phoenix al een header. Om een bestaande header te wijzigen, ga je in de admin naar Design > Headers en klik je op het potloodje.
Om een nieuwe header aan te maken klik je op Create new header
Geef de nieuwe header een naam en kies een template uit. Je kunt kiezen uit:
Basic header: Hierbij staat het logo aan de linkerkant staat.
Centered header: Hierbij staat het logo gecentreerd boven het menu.
Ga vervolgens aan de slag met de indeling van je header. Hieronder worden alle onderdelen van de header besproken.
1. Je logo uploaden
Klik op het logo om deze aan te passen. In de pop-up kies je vervolgens voor update logo om de Media Library te openen en jouw logo te selecteren. Snijd het logo indien nodig nog wat bij zodat deze precies in de header past. De maximale afmeting is 350x200
2. Een menu item toevoegen
Je voegt een nieuw menu item toe door op het plusje te klikken in de menubalk.
Er zijn 2 opties om een pagina toe te voegen:
Een Phoenix pagina: Hiermee kun je direct een pagina uit jouw overzicht selecteren
Een custom item: Hiermee kun je zelf een url ingeven. Bijvoorbeeld voor een pagina buiten jouw Phoenix website.
Indien je voor een Phoenix pagina kiest, selecteer de gewenste pagina en geef aan of het om een Main menu of Sub menu gaat.
Hoofdmenu of submenu?
Standaard worden de menu items die je aanmaakt toegevoegd als hoofdmenu (main menu). Wil je een menu item onder een categorie hangen? Dan kun je hier een submenu van maken. Deze optie vind je aan de rechterkant bij de instellingen van het menu item.
Op de website ziet dit er dan bijvoorbeeld zo uit:
Inspiratie is hier het hoofdmenu geworden en de items daaronder zijn ingesteld als submenu. Het hoofdmenu is hierdoor een categorie geworden en daardoor geen link meer naar een eigen pagina.
3. Een CTA-button toevoegen
In iedere header kun je een CTA (call to action) button toevoegen. Deze button trekt dus meer aandacht dan de rest van de menubalk! Dit doe je door op het sterretje te klikken en de functie aan te zetten. Dan kun je de button tekst en URL invullen!
ℹ️ Bewerk je de standaard header, dan is de CTA-button al toegevoegd. Deze kan je aanpassen door op de button te klikken.
4. De kleur van de header aanpassen
Boven de header staat de optie om de tekstkleur en de achtergrondkleur van de menubalk aan te passen:
Zo kun je het dus aanpassen zodat het volledig bij je website en huisstijl past!
5. Instellingen en design van de header
Pas de instellingen en design van de header aan via Settings
Set-up
Onder set-up vind je deze instellingen:
Header fixed: wanneer dit ingeschakeld staat, blijft de header altijd op dezelfde positie staan, ook als je scrollt.
Call to action button: Via deze instellingen kun je de CTA button ook aan- of uitzetten
Phone number: Als je dit inschakelt, kun je je telefoonnummer invullen. Dit telefoonnummer wordt dan ook getoond in de header.
Design
Onder design vind je deze instellingen:
Header size: Dit geeft de mogelijkheid voor een smalle of brede header
Full-width: Hier kun je aangeven of je wil dat je header van normale grootte is, of op volledige breedte (full-width).
Hover effect: Je hebt verschillende opties voor het effect dat je krijgt wanneer je met je muis over het menu item gaat: een andere achtergrondkleur (background color), onderstreept (underline text) of dat de tekst een klein beetje naar beneden verplaatst (move text down).
6. Bepaal hoe je header eruit ziet op mobiel
Onder het kopje Mobile kun je instellen hoe je wil dat jouw header getoond wordt op mobiel. Er zijn drie mogelijkheden: normal, bottom en full-screen.
Voor de mobiele header kun je apart de kleur van de achtergrond en de tekst bepalen. Dit doe je bij het voorbeeld rechts van de template instellingen.
7. Menu items bewerken
Mocht je aanpassingen willen maken aan je menu items, dan kan je dit doen door het menu item te selecteren. In de groene balk die verschijnt, kan je via het potloodje de eigenschappen van de menu item zelf aanpassen.
Voeg eventueel een icoontje toe door op de smiley te klikken, of maak je menu item dikgedrukt.
💡Tip: Wil je de url wijzigen van een menu item? Voeg dan een nieuw menu item toe. De bestaande url kan je namelijk niet wijzigen van je menu items!
8. Je header activeren
Je kunt maar één header tegelijkertijd geactiveerd hebben. Heb je een nieuw menu gemaakt en wil je die online zetten? Dan zul je deze moeten activeren door het schuifje om te zetten!
9. Wijzigingen worden niet getoond
Heb je jouw header aangepast en opgeslagen maar worden de wijzigingen niet op de live versie van de website getoond? Waarschijnlijk moet je even de cache vernieuwen van jouw website. Hier lees je hoe je dat kunt doen: Cache legen en wijzigingen doorgeven