Navigatie

Hoe groter je website wordt, hoe lastiger het is voor de klant om alles te vinden. Een goede navigatie door de site is een key factor voor succes!

De navigatie op je site bestaat uit verschillende elementen:

• Menu’s: Alle menu’s zijn te vinden in het CMS > Layout
  • Het sidebar menu (linkerwidget, linkermenu): links van je website
  • Het headermenu (header-widget): de balk bovenaan je website met verschillende kopjes
  • Het mobiele hamburgermenu (mobielemenu): de drie streepjes op mobiel. De meeste van je bezoekers zitten op mobiel. Je navigatie op mobiel is daarom het allerbelangrijkste.
  • De footer: onderaan op je website
• Andere navigatie:
  • De zoekbalk
  • De filters op de pagina
  • Blokken en buttons die je zelf maakt en plaatst en laat linken naar verschillende pagina’s

1. Sidebar menu

In de shop staat aan de linkerzijde een navigatiemenu, het sidebar menu (ook bekend als linkerwidget, linkermenu en sidewidget). Je kunt dit zelf inrichten aan de hand van ‘widgets’, daarom is een sidebar menu ook wel een ‘widget group’. Je kunt op verschillende pagina’s verschillende sidebar menu’s plaatsen. Naar video uitleg.

Via het CMS > Layout > Widgets, kun je hier zelf mee aan de slag gaan.

1.1 Standaard widget groep

Hieronder zie je de widget groups ‘producten-menu’, ‘info-menu’ en ‘geboortekaarten’. ‘Info-menu’ is groen weergegeven, dit betekent dat dit het standaard sidebar menu is. Alle pagina’s die je aanmaakt, zullen automatisch deze widget groep als sidebar menu meekrijgen, tenzij jij dit op de pagina verandert. Je kunt een ander standaardmenu kiezen door op het sterretje van je gewenste menu te klikken. Je ziet dan dat deze groen wordt.

1.2 Linkermenu/widgetgroep aanmaken

Om een widgetgroep aan te maken vul je de naam in (met kleine letters en aan elkaar) en kies je het type. Voor nu kies je voor ‘Sidebar group’. Op Navigation group komen we later terug.

Nadat je op ‘opslaan’ hebt geklikt, verschijnt je widgetgroep in het overzicht. Door op het potloodje te klikken kan je de widgetgroep verder invullen.

De widgetgroep kan bestaan uit een menu widget, filter widget of een html widget. Door op het plusje te klikken voeg je deze toe. Je kunt ze van volgorde veranderen door ze meer naar boven of meer naar beneden te slepen.

Html/tekst widget	Is vaak niet noodzakelijk. Dit is het stukje in de widgetgroep dat je helemaal zelf kan maken zoals je wilt. Denk bijvoorbeeld aan een banner met een kortingscode. Je hebt html-kennis nodig om dit op te bouwen.
Filter widget	Dit deel zorgt dat er filters op de pagina getoond kunnen worden. Welke filters dat zijn, stel je in op de betreffende pagina. Afhankelijk van jouw instellingen worden de filters in het linkermenu getoond of boven je kaarten.
Menu widget	Dit is het belangrijkste widget. Dit is het deel waar de links naar andere pagina’s komen te staan. Je kunt hier menu-items in zetten.

1.3 Menu widget invullen

Het vullen van het menuwidget gaat heel makkelijk. In de afbeelding zie je nog wat extra uitleg. De menu widget bestaat uit:

• Een categorie
• Menu-items
• Sub-items

Door op het vierkantje te klikken kun je de verschillende items verslepen of onder een andere plaatsen.

Voor je de menu widget opslaat vind je een paar opties die je aan kunt vinken:

Align menu right	Voor als je het menu rechts uitgelijnd wilt hebben.
Dropdown menu full width	Hoef je niet te gebruiken.
Menu is inklapbaar	De klant kan op je site het menu inklappen door erop te klikken.
Menu is ingeklapt	Het menu is standaard ingeklapt. De klant kan erop klikken om het uit te klappen.

Je kunt meerdere menuwidgets onder elkaar plaatsen. Bijvoorbeeld 1 voor je aankondigingsproducten en 1 voor de meest bezochte pagina’s.

1.4 Sidebar menu aan pagina koppelen

Om een specifieke widgetgroup als sidebar menu te tonen op een specifieke pagina moet je de widgetgroep koppelen aan de pagina. Dit doe je bij het blokje ‘pagina instellingen’ bij het aanmaken of bewerken van de pagina (CMS > Content > Pagina’s):

Vervolgens wordt het sidebar menu op je pagina weergegeven zoals in de afbeelding:

• Groen: Menu widget 1
• Blauw: Menu widget 2
• Roze: Html widget

Afhankelijk van hoe jouw site de filters toont, worden deze aan de sidebar menu toegevoegd of bovenaan je kaarten geplaatst.

---

2. Headermenu

Sinds 2021 maken we het headermenu ook vanuit de widgets, net als het sidebar menu. Als het goed is heeft Sparkles al het headermenu voor je aangemaakt, deze hoef je alleen nog zelf aan te passen. Maar voor de volledigheid leggen we ook uit hoe je een headermenu aanmaakt. Naar video uitleg.

2.1 Widgetgroep toevoegen

Bij het aanmaken van het headermenu kies je voor ‘navigation group’ in plaats van ‘sidebar group’:

2.2 Widgetgroep invullen

De functionaliteit van de widgets is hetzelfde als die van het sidebar menu. Alleen gebruik je eigenlijk nooit de HTML widget en nooit de filter widget.

2.3 Widgetgroep als header instellen

Nu je een navigation widget group hebt aangemaakt, kun je dit instellen als header via CMS > Layout > Header. Je vinkt ‘Widget Navigation-bar tonen’ aan.

Vervolgens zie je de verschillende plaatsen op je site waar je een widget-menu kunt tonen. Zet de juiste widget op de juiste plek. Ook kun je hier aanvinken of je een zoekveld wilt hebben. Deze komt standaard in de navigatiebar.

Het headermenu bestaat uit verschillende delen:

• Widget voor notificatiebar desktop/mobiel: betekent volledig bovenaan, zoals een berichtenbalk
• Widget voor topbar desktop/mobiel: betekent de middelste balk (onder de bovenste balk)
• Widget voor navigatiebar desktop/mobiel: betekent de onderste balk (onder de middelste balk)

Op de desktop site ziet er dan als volgt uit:

De plek voor het icoontje voor ‘info’, ‘account’, ‘winkelmandje’ en ‘zoeken’ zijn niet zelf aanpasbaar, maar staan vast. Het drop-down menu onder ‘info’ kun je wel aanpassen via de widgets. Maak drop-downs niet langer dan 10 items vanwege de gebruiksvriendelijkheid.

---

3. Mobiele hamburgermenu

Het mobiele hamburgermenu is eigenlijk hetzelfde als een headermenu. Je maakt dit aan via de widgets en stelt bij CMS > Layout > Header in waar je het hamburgermenu wilt plaatsen.

---

4. Footer

De footer is het onderste gedeelte van je site die op elke pagina hetzelfde is. De links in de footer werken op dezelfde manier als in de header. Als het goed is heb je hier zelf al voor aangegeven wat je erin wilt hebben en heeft Sparkles dit al voor je aangemaakt. Om de footer aan te passen ga je naar CMS > Layout > Footer.

Zo verschijnt het op de site:

---

5. De zoekbalk (zoekwoorden)

Klanten kunnen via de zoekbalk zoeken naar kaarten of pagina’s. Het is hiervoor nuttig om zoekwoorden te koppelen aan bepaalde pagina’s. Zo kun je ‘geboortekaartjes’ koppelen aan je pagina met geboortekaartjes of ‘olifant’ koppelen aan de pagina met olifanten-kaartjes.

Je kunt de zoekwoorden instellen via CMS > Content > Search terms. Vul een woord in waarop klanten zoeken en vul de pagina, link of URL (website) in waarnaar verwezen moet worden.

• Link interne pagina: vul de url vanaf de eerste slash in.
• Link externe pagina (bijvoorbeeld naar PostNL): vul de hele url in.

---

6. Filters

Filters op pagina’s kun je instellen bij de instellingen van je pagina. Zet de tags die je als filters wilt gebruiken op ‘menu’. Naar filters uitleg.

---

7. Blokken en buttons

Je hebt met Sparkles besproken hoe je je site eruit wilt laten zien. Hierbij zitten ook blokken en buttons op bijvoorbeeld de home. Als het goed is wordt dit volledig aan je afgeleverd en hoef je hier nú niets mee te doen.

7.1 Styleguide

Wanneer je site groeit, kan het zijn dat je op andere pagina’s ook blokken of buttons toe wilt voegen en wanneer je even onderweg bent, wil je misschien teksten of afbeeldingen van blokken en buttons wijzigen. Daarom maakt Sparkles voor jou een Styleguide aan. Deze kun je vinden via /styleguide.

In de styleguide vind je van alles wat met de styling van jouw site te maken heeft. Dit kun je gebruiken om je pagina’s op te bouwen.

7.2 HTML blokken en buttons

In de styleguide vind je ook de code die je nodig hebt voor blokken en buttons. Je ziet steeds een voorbeeld en daaronder staat de html hiervan. Deze kun je kopiëren en op je pagina plaatsen en daar aanpassen.

---

8. Promoblok toevoegen in mobiele widget

Je kunt het mobiele menu gebruiken om bijvoorbeeld nieuwe geboortecollecties in de spotlight te plaatsen, aankondigingsproducten op te laten vallen of plaats bijvoorbeeld een promoblok om direct te laten zien waar klanten hun enveloppen kunnen bestellen.

• Kijk welk navigatiewidget wordt gebruikt op mobiel.
• Zet bij het menu-widget de optie ‘Mobile menu with featured images’ aan en sla op.
• Maak een nieuw menu-item aan of pas een bestaand item aan. Vul de link naar de afbeelding in als volgt: /media/xxxx.png en vul bij pagina url de link in waar het blok naar moet verwijzen.

---

Ook interessant