Eine übersichtliche Navigation auf Ihrer Website ist sehr wichtig, so dass Sie schnell finden können, was Sie suchen, ohne sich umschauen zu müssen. Aber manchmal kann auch das strukturiertesten Menü nicht klar genug Informationen darüber liefern, wo Sie sind und wie Sie wieder dorthin gelangen, wo Sie waren.
Ein Breadcrumb-Trail ist eine effektive Möglichkeit, um deutlich zu zeigen, wo Sie sind und wie Sie schnell zur Seite oder nach vorne zurückkehren können. Ein Breadcrumb-Trail ist einfach eine Reihe von Links, die direkt über dem Inhalt der Seite erscheinen.
Wenn Sie denken, dass ein Breadcrumb-Trail mit nur Textlinks langweilig ist, können Sie ihn mit einem etwas schöneren Design stylen, wenn Sie es wünschen.
Einen Breadcrumb-Trail in Webflow zu erstellen, ist ganz einfach:
- Erstellen Sie eine Sammlung und rufen Sie sie z.B. Produktkategorie ( = Hauptkategorie)
- Erstellen einer Sammlung und Aufrufen einer Produktgruppe (= Unterkategorie)
- Verbinden Sie diese beiden, indem Sie Referenzfelder eingeben.
- Hinzufügen von 1 und 2 als Referenzfelder in der Produktkategorie
Auf der Produktseite:
- Geben Sie einen Flexbox-Container mit 4 Links nacheinander ein. Geben Sie jedem Link eine 1 em-Auffüllung auf der rechten Seite.
- Stellen Sie die erste nach vorne
- Legen Sie das andere auf "aktuelles Produkt" fest – und wählen Sie das Feld "Produktkategorie" aus.
- Legen Sie das dritte auf "aktuelle Produktion" fest, und wählen Sie das Feld "Produktgruppe" aus.
- Legen Sie das vierte auf "aktuelles Produkt" fest und wählen Sie "Name"
Auf der Seite Produktgruppe:
- Wie Abschnitt 1 oben
- Wie Abschnitt 2 oben
- Legen Sie diese Option auf "Link zur Seite" "Produktkategorie" fest und wählen Sie die Produktkategorie "Name" aus.
- Legen Sie diese Option auf "Link zur Seite" "aktuelle Produktgruppe" fest und wählen Sie "Name"
Auf der Seite Produkt kateori:
- Wie Abschnitt 1 oben
- Wie Abschnitt 2 oben
- Legen Sie diese Option auf "Link zur Seite" "aktuelle Produktkategorie" fest und wählen Sie "Name"
Wenn Sie ein wenig mehr Informationen möchten, lesen Sie bitte ein Tutorial hier:
how-to-build-breadcrumb-navigation-for-webflow
Oder Video hier:
https://www.youtube.com/watch?v=mFF5jaGGqfA&feature=youtu.be