Was ist das Breadcrumb-Element in GemPages?
A Brotkrümel ist ein Navigationselement, das Benutzern hilft, ihre aktuelle Position innerhalb einer Website oder Anwendung zu erkennen. Es erscheint normalerweise als eine Reihe anklickbarer Links oben auf einer Webseite oder Benutzeroberfläche und zeigt die Hierarchie der Seiten oder Abschnitte an, durch die der Benutzer navigiert ist, um zur aktuellen Seite zu gelangen.
Bei der Arbeit mit Unterkategorieseiten In Shopify (z. B. „Herrenschuhe“ unter „Schuhe“) werden Breadcrumbs noch wichtiger. Sie ermöglichen es Kunden, schnell zur übergeordneten Sammlung zurückzukehren oder zwischen gleichgeordneten Unterkategorien zu navigieren, ohne manuell durch Menüs blättern zu müssen.
Die Verwendung von Breadcrumbs für Unterkategorieseiten hilft Suchmaschinen außerdem dabei, die Site-Struktur besser zu verstehen, was die SEO verbessern kann, indem die Beziehung zwischen Hauptkategorien und ihren Unterkategorien klar signalisiert wird.
Wie füge ich das Breadcrumb-Element hinzu und konfiguriere es?
Wir werden alle Einstellungen für das Breadcrumb-Element in GemPages Editor Version 7 im Abschnitt unten.
Schritt 1: Zurück Nach GemPages Dashboard > Einstellungen > Einstellungen speichern. Unter dem Andere Einstellungen Abschnitt, schalten Sie „Fügen Sie den Sammlungs-Handle in den URL-Pfad für Produkte ein, auf die aus einer Sammlung zugegriffen wird."
Schritt 2: Gehen Sie zurück zu die Seiten Abschnitt und suchen Sie Ihre Zielseite, um den Editor zu öffnen.
Schritt 3: Geben Sie in der linken Seitenleiste Folgendes ein: Brotkrümel in die Suchleiste ein und ziehen Sie das Element dann per Drag & Drop an den Anfang Ihrer Seite.
Konfigurieren der Registerkarte „Einstellungen“
Das Einstellungen des Breadcrumb-Elements hilft Ihnen, das Erscheinungsbild, das Layout und das interaktive Verhalten des Navigationspfads zu optimieren.
Trennzeichensymbol
Passen Sie das Trennzeichen zwischen Breadcrumb-Elementen an (z. B. /, >, →):
- Icon: Wählen Sie ein Symbol oder eine Figur. Sie können auch Ihr eigenes SVG-Symbol hochladen.
- Farbe,: Wählen Sie die Symbolfarbe über HEX oder Farbwähler aus.
- Größe: Passen Sie die Symbolgröße mit den Tasten +/– an.
Textstil
Gestalten Sie den Breadcrumb-Text mit allen typografischen Steuerelementen:
| Option | Beschreibung |
| Stile | Wählen Sie einen vordefinierten Textstil (z. B. Absatz 1, Überschrift 3 usw.) |
| Schriftart | Wählen Sie eine Schriftfamilie aus den verfügbaren Optionen (z. B. Ui-sans-serif) |
| Größe | Passen Sie die Schriftgröße mit den Tasten +/– an |
| Formatierung: | Formatierungsoptionen aktivieren: BOLD, Italicden unterstreichen |
| Farbe, | Wählen Sie eine benutzerdefinierte Farbe mit HEX oder einem Farbwähler |
| Font Gewicht | Wählen Sie zwischen den Gewichtsstufen: Normal, Mittel, Fett usw. |
| Linienhöhe | Stellen Sie den vertikalen Abstand zwischen den Zeilen ein (z. B. 160 %) |
| Buchstaben-Abstand | Definieren Sie den Abstand zwischen den Zeichen (z. B. 0.6). |
| Transformieren | Wählen Sie die Texttransformation: AA (Großbuchstaben), Aa (profitieren), aa (Kleinbuchstaben) |
Elementabstand, Größe und Hintergrund
Spalt: Passen Sie den horizontalen Abstand zwischen Breadcrumb-Elementen an, indem Sie den Schieberegler ziehen oder manuell einen bestimmten Wert eingeben.
Polsterung: Passen Sie den inneren Abstand des Breadcrumb-Containers (oben, rechts, unten, links) an, um Platz zum Atmen zu schaffen oder das Element an Ihr Layout anzupassen.
Hintergrundfarbe: Legen Sie mithilfe der Farbauswahl oder durch Eingabe eines HEX-Codes eine Hintergrundfarbe für die Breadcrumb-Leiste fest, um eine präzise Steuerung zu ermöglichen.
Shape
Sie können dem Brotkrümelbehälter ein unverwechselbares Aussehen verleihen:
- Rand: Legen Sie Farbe, Dicke und Strichart fest.
- Ecke: Definieren Sie den Randradius zum Abrunden von Ecken (z. B. 8 Pixel).
- Schatten: Fügen Sie subtile oder kräftige Schatten hinzu und ändern Sie dann Typ, Richtung, Farbe, Entfernung, Unschärfe und Größe.
Ergebnisse
- Schweben: Aktivieren Sie Hover-Stile, wenn Benutzer mit Breadcrumb-Links interagieren.
- Aktiv: Markieren Sie das aktuelle (aktive) Breadcrumb-Element anders als den Rest.
Anzeigeoptionen
Aktive Seite ausblenden:
- Ja: Aktuelle Seite ausblenden (letztes Breadcrumb-Element, z. B. Happy Dog Snack).
- Nein: Zeigt den vollständigen Breadcrumb-Pfad an.
Ausrichten
Mit diesem Parameter können Sie bestimmen, wie das Element auf Ihrer Seite positioniert wird. Sie haben drei Möglichkeiten: linksbündig, zentriert und rechtsbündig.
Konfigurieren der Registerkarte „Erweitert“
Für erweiterte Anpassungen navigieren Sie bitte zur Registerkarte „Erweitert“ und folgen Sie den Anweisungen in Dieser Artikel.
Weitere hilfreiche Tipps und Video-Tutorials finden Sie auch unter GemPages-Akademie.
Häufig gestellte Fragen
1. Wie helfen Breadcrumbs bei Unterkategorieseiten?
Breadcrumbs zeigen die Hierarchie von Hauptkategorien zu Unterkategorien deutlich an und verbessern so sowohl die Benutzernavigation als auch die SEO. So wissen Kunden genau, wo sie sich befinden, und können problemlos zwischen den Abschnitten wechseln.
2. Kann ich Breadcrumbs für Unterkategorieseiten unterschiedlich anpassen?
Ja. Sie können unterschiedliche Stile, Trennzeichen oder Hintergrundfarben für die Breadcrumbs auf Unterkategorieseiten verwenden, um sie hervorzuheben.
3. Was passiert, wenn meine Unterkategorieseite nicht in der Brotkrümelnavigation angezeigt wird?
Dies kann passieren, wenn die Produkt-URL den Sammlungs-/Unterkategorie-Handle nicht enthält. Stellen Sie sicher, dass die Shopify-Einstellung „Sammlungs-Handle in den URL-Pfad einschließen“ aktiviert ist.
4. Verbessern Breadcrumbs die SEO für Unterkategorieseiten?
Ja. Sie helfen Suchmaschinen, die Beziehung zwischen Ihren Hauptkategorien und Unterkategorien zu verstehen, was die Indexierung und die interne Linkstruktur verbessern kann.
Vielen Dank für Ihre Kommentare