Een header / menu maken en/of aanpassen

Verander je logo of menu!

Kim Kunstman avatar
Geschreven door Kim Kunstman
Meer dan een week geleden bijgewerkt

Met Phoenix kun je de menubalk volledig aanpassen! Verander je logo, voeg menu items toe en maak een CTA button in je menubalk.

1. Een header aanmaken/ bewerken

Om een nieuwe header aan te maken of de huidige header te bewerken ga je in het menu naar > Design > Headers:

A. Een bestaande header bewerken

Bewerk een bestaande header door op het potloodje bij de header te klikken.

B. Een nieuwe header aanmaken

Of maak een nieuwe header aan met forge 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. 

2. 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

3. 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.

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 main menu item en de items daaronder zijn ingesteld als submenu. Het main menu is hierdoor een categorie geworden en dit is geen link meer naar een pagina.

4. Een CTA button toevoegen

In de 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!

5. De kleuren aanpassen

Boven de menubalk 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!

6. Instellingen en design van de header

Pas de instellingen en design van de header aan via > Settings

A. Tabblad 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 menubalk.

B. Tabblad 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 menubalk 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).

7. Bepaal hoe je menu eruit ziet op mobiel

Onder het kopje Mobile kun je instellen hoe je wil dat jouw menu 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.

8. Je menu activeren

Je kunt maar één menu 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: PHOENIX: Cache legen en wijzigingen weergeven

Was dit een antwoord op uw vraag?