Navigation

Je größer deine Website wird, desto schwieriger ist es für den Kunden, alles zu finden. Eine gute Navigation durch die Seite ist ein Schlüsselfaktor für den Erfolg!

Die Navigation auf deiner Seite besteht aus verschiedenen Elementen:

• Menüs: Alle Menüs findest du im CMS > Layout
  • Das Sidebar-Menü (linkes Widget, linkes Menü): links auf deiner Website
  • Das Header-Menü (Header-Widget): der Balken oben auf deiner Website mit verschiedenen Rubriken
  • Das mobile Hamburger-Menü (Mobilmenü): die drei Striche auf dem Handy. Die meisten deiner Besucher sind mobil unterwegs. Deine Navigation auf dem Handy ist daher am allerwichtigsten.
  • Die Footer: unten auf deiner Website
• Andere Navigation:
  • Die Suchleiste
  • Die Filter auf der Seite
  • Blöcke und Buttons, die du selbst erstellst und platzierst und auf verschiedene Seiten verlinken lässt

1. Sidebar-Menü

Im Shop befindet sich auf der linken Seite ein Navigationsmenü, das Sidebar-Menü (auch bekannt als linkes Widget, linkes Menü und Sidewidget). Du kannst dies selbst mithilfe von „Widgets“ einrichten, weshalb ein Sidebar-Menü auch als „Widget-Gruppe“ bezeichnet wird. Du kannst auf verschiedenen Seiten unterschiedliche Sidebar-Menüs platzieren. Zur Video-Erklärung.

Über das CMS > Layout > Widgets kannst du hier selbst loslegen.

1.1 Standard-Widget-Gruppe

Hierunter siehst du die Widget-Gruppen „producten-menu“, „info-menu“ und „geboortekaarten“. „Info-menu“ wird grün angezeigt, was bedeutet, dass dies das Standard-Sidebar-Menü ist. Alle Seiten, die du erstellst, erhalten automatisch diese Widget-Gruppe als Sidebar-Menü, es sei denn, du änderst dies auf der Seite. Du kannst ein anderes Standardmenü wählen, indem du auf das Sternchen deines gewünschten Menüs klickst. Du siehst dann, dass dieses grün wird.

1.2 Linkes Menü/Widget-Gruppe erstellen

Um eine Widget-Gruppe zu erstellen, gibst du den Namen ein (kleingeschrieben und zusammengeschrieben) und wählst den Typ aus. Wähle für den Moment „Sidebar group“. Auf Navigation group kommen wir später zurück.

Nachdem du auf „Speichern“ geklickt hast, erscheint deine Widget-Gruppe in der Übersicht. Durch Klicken auf das Stiftsymbol kannst du die Widget-Gruppe weiter ausfüllen.

Die Widget-Gruppe kann aus einem Menü-Widget, Filter-Widget oder einem HTML-Widget bestehen. Durch Klicken auf das Pluszeichen fügst du diese hinzu. Du kannst ihre Reihenfolge ändern, indem du sie weiter nach oben oder unten ziehst.

HTML/Text-Widget	Ist oft nicht notwendig. Dies ist der Teil in der Widget-Gruppe, den du ganz nach deinen Wünschen selbst gestalten kannst. Denke zum Beispiel an einen Banner mit einem Rabattcode. Du benötigst HTML-Kenntnisse, um dies aufzubauen.
Filter-Widget	Dieser Teil sorgt dafür, dass Filter auf der Seite angezeigt werden können. Welche Filter das sind, stellst du auf der entsprechenden Seite ein. Abhängig von deinen Einstellungen werden die Filter im linken Menü oder über deinen Karten angezeigt.
Menü-Widget	Dies ist das wichtigste Widget. Dies ist der Teil, in dem die Links zu anderen Seiten stehen. Hier kannst du Menüpunkte einfügen.

1.3 Menü-Widget ausfüllen

Das Befüllen des Menü-Widgets ist ganz einfach. In der Abbildung findest du noch einige zusätzliche Erklärungen. Das Menü-Widget besteht aus:

• Einer Kategorie
• Menüpunkten
• Unterpunkten

Durch Klicken auf das Quadrat kannst du die verschiedenen Elemente verschieben oder unter ein anderes platzieren.

Bevor du das Menü-Widget speicherst, findest du ein paar Optionen, die du ankreuzen kannst:

Align menu right	Falls du das Menü rechtsbündig ausgerichtet haben möchtest.
Dropdown menu full width	Musst du nicht verwenden.
Menü ist einklappbar	Der Kunde kann auf deiner Seite das Menü durch Anklicken einklappen.
Menü ist eingeklappt	Das Menü ist standardmäßig eingeklappt. Der Kunde kann darauf klicken, um es auszuklappen.

Du kannst mehrere Menü-Widgets untereinander platzieren. Zum Beispiel eines für deine Ankündigungsprodukte und eines für die meistbesuchten Seiten.

1.4 Sidebar-Menü mit Seite verknüpfen

Um eine spezifische Widget-Gruppe als Sidebar-Menü auf einer bestimmten Seite anzuzeigen, musst du die Widget-Gruppe mit der Seite verknüpfen. Dies tust du im Block „Seiteneinstellungen“ beim Erstellen oder Bearbeiten der Seite (CMS > Content > Seiten):

Anschließend wird das Sidebar-Menü auf deiner Seite wie in der Abbildung dargestellt:

• Grün: Menü-Widget 1
• Blau: Menü-Widget 2
• Rosa: HTML-Widget

Abhängig davon, wie deine Seite die Filter anzeigt, werden diese dem Sidebar-Menü hinzugefügt oder oben über deinen Karten platziert.

---

2. Header-Menü

Seit 2021 erstellen wir das Header-Menü ebenfalls aus den Widgets, genau wie das Sidebar-Menü. Normalerweise hat Sparkles das Header-Menü bereits für dich erstellt, du musst es nur noch selbst anpassen. Aber der Vollständigkeit halber erklären wir auch, wie man ein Header-Menü erstellt. Zur Video-Erklärung.

2.1 Widget-Gruppe hinzufügen

Beim Erstellen des Header-Menüs wählst du „navigation group“ anstelle von „sidebar group“:

2.2 Widget-Gruppe ausfüllen

Die Funktionalität der Widgets ist dieselbe wie beim Sidebar-Menü. Nur verwendest du eigentlich nie das HTML-Widget und nie das Filter-Widget.

2.3 Widget-Gruppe als Header einstellen

Nun, da du eine Navigation-Widget-Gruppe erstellt hast, kannst du diese über CMS > Layout > Header als Header einstellen. Du hakst „Widget Navigation-bar tonen“ an.

Anschließend siehst du die verschiedenen Stellen auf deiner Seite, an denen du ein Widget-Menü anzeigen kannst. Platziere das richtige Widget an der richtigen Stelle. Hier kannst du auch ankreuzen, ob du ein Suchfeld haben möchtest. Dieses erscheint standardmäßig in der Navigationsleiste.

Das Header-Menü besteht aus verschiedenen Teilen:

• Widget für Notifikationsleiste Desktop/Mobil: bedeutet ganz oben, wie eine Nachrichtenleiste
• Widget für Topbar Desktop/Mobil: bedeutet der mittlere Balken (unter dem obersten Balken)
• Widget für Navigationsleiste Desktop/Mobil: bedeutet der unterste Balken (unter dem mittleren Balken)

Auf der Desktop-Seite sieht das dann wie folgt aus:

Die Plätze für die Icons für „Info“, „Konto“, „Warenkorb“ und „Suche“ sind nicht selbst anpassbar, sondern fest vorgegeben. Das Dropdown-Menü unter „Info“ kannst du jedoch über die Widgets anpassen. Mache Dropdowns aus Gründen der Benutzerfreundlichkeit nicht länger als 10 Punkte.

---

3. Mobiles Hamburger-Menü

Das mobile Hamburger-Menü ist eigentlich dasselbe wie ein Header-Menü. Du erstellst dies über die Widgets und stellst unter CMS > Layout > Header ein, wo du das Hamburger-Menü platzieren möchtest.

---

4. Footer

Der Footer ist der unterste Teil deiner Seite, der auf jeder Seite gleich ist. Die Links im Footer funktionieren auf die gleiche Weise wie im Header. Normalerweise hast du hier bereits selbst angegeben, was du darin haben möchtest, und Sparkles hat dies bereits für dich erstellt. Um den Footer anzupassen, gehst du zu CMS > Layout > Footer.

So erscheint es auf der Seite:

---

5. Die Suchleiste (Suchbegriffe)

Kunden können über die Suchleiste nach Karten oder Seiten suchen. Es ist dafür nützlich, Suchbegriffe mit bestimmten Seiten zu verknüpfen. So kannst du „Geburtskarten“ mit deiner Seite für Geburtskarten verknüpfen oder „Elefant“ mit der Seite für Elefanten-Karten.

Du kannst die Suchbegriffe über CMS > Content > Search terms einstellen. Gib ein Wort ein, nach dem Kunden suchen, und gib die Seite, den Link oder die URL (Website) an, auf die verwiesen werden soll.

• Link interne Seite: Gib die URL ab dem ersten Schrägstrich ein.
• Link externe Seite (zum Beispiel zu PostNL): Gib die gesamte URL ein.

---

6. Filter

Filter auf Seiten kannst du in den Einstellungen deiner Seite festlegen. Setze die Tags, die du als Filter verwenden möchtest, auf „Menü“. Zur Filter-Erklärung.

---

7. Blöcke und Buttons

Du hast mit Sparkles besprochen, wie deine Seite aussehen soll. Dazu gehören auch Blöcke und Buttons, zum Beispiel auf der Startseite. Normalerweise wird dies vollständig an dich geliefert und du musst hier aktuell nichts tun.

7.1 Styleguide

Wenn deine Seite wächst, kann es sein, dass du auch auf anderen Seiten Blöcke oder Buttons hinzufügen möchtest, und wenn du eine Weile dabei bist, möchtest du vielleicht Texte oder Bilder von Blöcken und Buttons ändern. Daher erstellt Sparkles für dich einen Styleguide. Diesen findest du unter /styleguide.

Im Styleguide findest du alles, was mit dem Styling deiner Seite zu tun hat. Dies kannst du nutzen, um deine Seiten aufzubauen.

7.2 HTML-Blöcke und Buttons

Im Styleguide findest du auch den Code, den du für Blöcke und Buttons benötigst. Du siehst jeweils ein Beispiel und darunter steht der dazugehörige HTML-Code. Diesen kannst du kopieren, auf deiner Seite einfügen und dort anpassen.

---

8. Promoblock in mobilem Widget hinzufügen

Du kannst das mobile Menü nutzen, um zum Beispiel neue Geburtskollektionen ins Rampenlicht zu rücken, Ankündigungsprodukte hervorzuheben oder platziere zum Beispiel einen Promoblock, um direkt zu zeigen, wo Kunden ihre Umschläge bestellen können.

• Schau nach, welches Navigations-Widget auf dem Handy verwendet wird.
• Aktiviere beim Menü-Widget die Option „Mobile menu with featured images“ und speichere.
• Erstelle einen neuen Menüpunkt oder passe einen bestehenden Punkt an. Gib den Link zum Bild wie folgt ein: /media/xxxx.png und gib bei der Seiten-URL den Link ein, auf den der Block verweisen soll.

---

Auch interessant