Ga naar hoofdinhoud

Header

De header en navigatiemenu van je webshop is een van de belangrijkste onderdelen voor een goede gebruikerservaring. In Inspire bestaat dit gedeelte uit drie samenwerkende secties: de Topbar (bovenste smalle balk), de Hoofdheader (met je logo en menu), en de Aankondigingsbalk (voor acties en kortingscodes).

Je kunt de volgorde van deze secties aanpassen en ze afzonderlijk inrichten.

1. Topbar​

De Topbar is de smalle balk helemaal bovenaan je website. Deze wordt vaak gebruikt om je belangrijkste voordelen (USP's - Unique Selling Points) te communiceren, zoals "Gratis verzending" of "Voor 23:59 besteld, morgen in huis".

  • Kleurenschema & Typografie: Kies een kleurenschema dat past bij je huisstijl en bepaal de lettergrootte (in pixels).
  • Aangepaste klasse (Custom Class): Voor geavanceerde gebruikers die extra CSS willen toevoegen.
  • USP Blokken toevoegen: Je kunt maximaal 5 USP-blokken toevoegen. Per blok kun je het volgende instellen:
    • Icoon: Vul de naam van een FontAwesome icoon in (bijv. fa-regular fa-check) om een icoontje naast je tekst te tonen.
    • Tekst: De korte tekst van jouw voordeel.

2. Hoofdheader​

Dit is het hart van je navigatie, waar bezoekers je menu, zoekbalk, account en winkelwagen vinden.

Algemene instellingen​

  • Kleurenschema's: Stel apart een kleurenschema in voor de header zelf en een schema voor de uitklapmenu's (navigatie).
  • Header Type: Kies voor een compacte weergave (Small) of een ruimere, grotere weergave (Large).
  • Lettergrootte: Bepaal de grootte van de menulinks.
  • Schaduw (Shadow): Voeg een subtiele schaduw toe onder de header zodat deze mooi loskomt van de pagina.
  • Submenu pijltjes: Kies of je een pijltje (chevron) wilt tonen naast menulinks die een uitklapmenu hebben.

Merknaam​

Als je geen logo-afbeelding hebt geüpload bij de algemene thema-instellingen, kun je hier een Merknaam (tekst) invoeren. Je hebt ook de optie om deze merktekst op mobiele schermen te verbergen voor een schonere weergave.

Zoekfunctie & Sliders​

  • Zoeksuggesties: Koppel een speciaal menu (link list) dat als suggesties wordt getoond wanneer iemand begint met zoeken.
  • Slider instellingen: Voor product- of collectiesliders binnen het zoekmenu of megamenu kun je exact bepalen hoeveel items er zichtbaar zijn op Desktop, Tablet en Mobiel. Je kunt ook de paginatie (bolletjes) aanzetten en bepalen of items buiten het scherm mogen vallen (carousel overflow).

Icoon Achtergronden​

Wil je de iconen (zoeken, account, winkelwagen) extra laten opvallen? Schakel dan Icoon achtergronden (Icon background) in.

  • Vormgeving: Bepaal de afronding (Border radius) van 0% (vierkant) tot 50% (volledig rond).
  • Kleuren per icoon: Je kunt voor de zoek-, account- én winkelwagen-iconen afzonderlijk de achtergrondkleur en de kleur van het icoontje zelf instellen.
  • Winkelwagen badge: Kies de achtergrondkleur van het bolletje dat het aantal producten in de winkelwagen toont.
  • Winkelwagen icoon type: Kies tussen een traditioneel winkelwagentje (Shopping cart) of een winkeltasje (Shopping bag).

Je kunt je navigatie opbouwen door middel van verschillende blokken:

  • Eenvoudige navigatie (Nav-simple): Koppel hier je standaard hoofdmenu zonder complexe uitklap-opties (max. 1).
  • Submenu (Nav-submenu): Koppel een menu en geef het een titel en link. Hier kun je ook een Uitgelichte collectie (Featured collection) aan toevoegen om visueel de aandacht te trekken (max. 10).
  • Megamenu (Nav-megamenu): Voor grote webshops. Maakt een brede balk aan met meerdere kolommen, plus de optie voor een uitgelichte collectie (max. 10).
  • Secundaire navigatie (Nav-secondary): Een extra, vaak kleiner menu dat naast de hoofdnavigatie wordt geplaatst (max. 1).

3. Aankondigingsbalk (Announcement Bar)​

De aankondigingsbalk is perfect voor tijdelijke acties, belangrijk nieuws of het weggeven van een kortingscode.

Opmaak & Inhoud​

  • Inschakelen: Vink aan of uit om de balk zichtbaar te maken.
  • Kleurenschema & Uitlijning: Kies je kleuren, de lettergrootte (10px tot 22px) en bepaal of de tekst links, gecentreerd of rechts moet staan.
  • Icoon & Tekst: Voeg een passend icoon toe (bijv. fa-regular fa-bolt) en schrijf je boodschap, zoals "Gratis verzending vanaf €50 🎉".

Kortingscode functionaliteit (Behavior)​

Je kunt deze balk interactief maken door een kortingscode te delen:

  • Kortingscode: Vul hier de daadwerkelijke kortingscode in (bijv. 'ZOMER20').
  • Kopieer-knop tekst: Zodra je een code invult, kun je de tekst voor een klikbare knop instellen (bijv. "Kopieer code"). Bezoekers kunnen de code dan met één klik kopiëren!
  • Sluit-knop: Bepaal of bezoekers de aankondigingsbalk weg kunnen klikken via een kruisje.