Laatste update: 25-10-2022
In deze uitleg: Sidebar menu | Headermenu | Hamburgermenu | Footer | Zoekbalk (zoekwoorden) | Filters | Blokken en buttons | Promoblok
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:
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.
Made for Moments: voorbeeld sidebar menu
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.
Standaard widget groep
alle pagina’s waar je het sidebar menu op Standaard hebt ingesteld, wijzigen nu van sidebar menu.
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.
Sidebar menu toevoegen in het CMS
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.
Beschikbare widgets
Html/tekst widget |
is vaak niet noodzakelijk. Dit is het stukje in de widgetgroep die 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 getoont 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. |
Het vullen van het menuwidget gaat heel makkelijk. In de afbeelding zie je nog wat extra uitleg. De menu widget bestaat uit:
Door op het vierkantje te klikken kun je de verschillende items verslepen of onder een andere plaatsen.
elke menu-item moet een pagina URL meekrijgen. Doe je dit niet, dan kan de klant wel klikken, maar gebeurd er niets.
Widgetgroep invullen
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.
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):
Widget aan pagina koppelen.
Vervolgens wordt het sidebar menu op je pagina weergegeven zoals in de afbeelding:
Afhankelijk van hoe jouw site de filters toont, worden deze aan de sidebar menu toegevoegd of bovenaan je kaarten geplaatst.
Voorbeeld van een sidebar menu.
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.
Bij het aanmaken van het headermenu kies je voor ‘navigation group’ in plaats van ‘sidebar groep’:
Headermenu toevoegen in het CMS.
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.
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 als headermenu instellen.
Op de desktop site ziet er dan als volgt uit:
Pretty Orange: voorbeeld headermenu.
Op mobiel gebruiken sites vaak 2 van de 3 headermenu widgets.
De plek voor het het icoontje voor ‘info’, ‘account’ en ‘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.
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.
Voorbeeld mobiele hamburgermenu.
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.
Hippe-geboortekaartjes: voorbeeld footer navigatie.
Zo verschijnt het op de site:
Footer op Hippe-geboortekaartjes.
Maak altijd éérst een kopie van de (html) code van de footer voor je de footer gaat bewerken. Dit doe je door op ‘source’ te klikken, alles te selecteren, dit te kopieëren en het dan ergens op te slaan. Zo kun je altijd de code terugzetten als er iets fout gaat.
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.
Voorbeeld zoekwoorden toevoegen in het CMS.
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.
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.
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.
Pretty Orange: voorbeeld styleguide.
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.
Pretty Orange styleguide: buttons.
Pretty Orange styleguide: blokken.
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.
Als je een promoblok toevoegt, kies dan een ander navigatiewidget voor mobiel dan voor desktop.
Alles over verkoopcijfers, categorieën en SEO. Je shop begrijpen is je shop laten groeien.
Hoe maak ik een gebruiksvriendelijk ontwerp van een kaart? Alles ins & out over de editor.
Alles stap voor stap uitgelegd om je shop gereed te maken voor Google zoekresultaten.