Hoe stel je de header layout in binnen Datamotive?

Met het fragment Header layout in Datamotive bepaal je hoe de header van je website eruitziet op desktop, tablet en mobiel. Je stelt per apparaattype in welke componenten zichtbaar zijn en welke functies worden toegevoegd, zoals zoeken of toegang tot het klantportaal.

Een fragment aanmaken of openen

Stap 1 – Nieuw fragment aanmaken
Navigeer via Content > Ga naar CMS naar het CMS. Klik op Fragmenten > Nieuw fragment, kies het fragmenttype Header layout en geef het fragment een duidelijke naam, bijvoorbeeld "Header hoofdnavigatie".

Of: bestaand fragment bewerken
Ga naar Webspaces > Standaard fragmenten en klik op het fragment in de regel Header layout om het te openen en te bewerken.

Desktop layout instellen

Stap 2 – Voeg balken toe
Voor desktop kun je componenten plaatsen in statische of sticky balken. Klik op + Balk toevoegen bij Statische balken of Sticky balken en klik vervolgens binnen een balk op + Component toevoegen.

Stap 3 – Kies een componenttype
Kies uit de volgende componenttypes:

• Primaire navigatie
• Meta navigatie
• Logo
• Merken
• Functies
• Witruimte
• Scheidingslijn
• Taal switch
• Tekst
• HTML
• Icon link

Stel per component de uitlijning (links, gecentreerd of rechts) en de breedte (minimaal 1,75%) in.

Tablet en mobiel layout instellen

Stap 4 – Voeg componenten toe voor tablet en mobiel
Klik op + Component toevoegen onder het betreffende apparaattype. De beschikbare componenttypes zijn vergelijkbaar met desktop, met uitzondering van Primaire navigatie en Meta navigatie. In plaats daarvan is het componenttype Menu beschikbaar.

Voor mobiel kun je daarnaast de optie Verberg tekst 'Menu' activeren om alleen het hamburgericoon te tonen.

Mobiele overlay instellen

Stap 5 – Stel de mobiele overlay in
De mobiele overlay verschijnt wanneer een bezoeker op de menuknop tikt. Klik op + Component toevoegen onder Mobiele overlay en kies de gewenste componenten, zoals:

• Primaire navigatie
• Meta navigatie
• Logo
• Merken
• Functies
• Scheidingslijn
• Taal switch
• Tekst
• HTML
• Icon link

Stel per component de breedte en uitlijning in.

Functies toevoegen

Stap 6 – Voeg functies toe
Naast componenten kun je ook specifieke functies toevoegen aan de header. Scroll naar het onderdeel Functies, klik op + Functie toevoegen en kies uit:

• Klantportaal
• B2B portaal
• Zoeken
• Extern klantportaal
• Favorieten
• Vergelijken

Plaats de functie op de gewenste plek binnen de header layout.

Opslaan en koppelen

Stap 7 – Sla op en koppel het fragment
Klik rechtsboven op Opslaan. Koppel het fragment daarna aan je webspace via Webspaces > Standaard fragmenten en selecteer bij de regel Header layout het juiste fragment. Controleer vervolgens op verschillende apparaten of de header correct wordt weergegeven, alle componenten zichtbaar zijn en het mobiele menu goed werkt.

Overzicht componenten per apparaattype