Das Hinzufügen von Breadcrumbs zu einer Weebly-Site ist ein unkomplizierter Vorgang, bei dem der HTML-/CSS-Code Ihrer Site angepasst werden muss. Breadcrumbs sind die Navigationselemente, die eine Hierarchie der Position der aktuellen Seite auf Ihrer Website bereitstellen. So können Sie Breadcrumbs zu Ihrer Weebly-Site hinzufügen:

Schritt 1:HTML/CSS bearbeiten

Öffnen Sie den Weebly-Site-Editor und gehen Sie zu der Seite, auf der Sie Breadcrumbs hinzufügen möchten.

Klicken Sie im Menü „Einstellungen“ auf „Website-HTML/CSS bearbeiten“.

Schritt 2:Code-Snippet einfügen

Suchen Sie im HTML/CSS-Editor das Tag „“ und fügen Sie direkt davor den folgenden Codeausschnitt ein:

```html

„

Dieser Code erstellt das Containerelement für die Breadcrumbs und fügt den Home-Link hinzu.

Schritt 3:Passen Sie den Home-Link an

Ersetzen Sie den Text „Home“ und den Link „/“ im Code durch den Homepage-Text und die URL Ihrer tatsächlichen Website.

Schritt 4:Zusätzliche Links hinzufügen

Um zusätzliche Links zu den Breadcrumbs hinzuzufügen, fügen Sie weitere „“ hinzu

`-Elemente mit „“-Tags innerhalb des „#breadcrumbs-list“-Elements, wie folgt:

```html

Kategorie

Unterkategorie

Produktname

„

Dadurch werden Breadcrumbs erstellt, die die Hierarchie von der Startseite bis zur aktuellen Produktseite anzeigen.

Schritt 5:Die Semmelbrösel formen

Fügen Sie den Elementen „#breadcrumbs“ und „#breadcrumbs-list“ CSS-Stile hinzu, um das Erscheinungsbild der Breadcrumbs zu steuern.

Zum Beispiel:

„css

#Semmelbrösel {

Hintergrund:#e5e5e5;

Polsterung:10px;

}

#breadcrumbs-list {

Anzeige:Flex;

}

#breadcrumbs-list li {

Rand rechts:10px;

}

„

Dadurch werden die Brotkrümel als horizontale Liste mit Polsterung und einem hellgrauen Hintergrund dargestellt.

Schritt 6:Änderungen speichern

Klicken Sie auf die Schaltfläche „Speichern“, um Ihre Änderungen zu speichern.

Jetzt verfügt Ihre Weebly-Site über Breadcrumbs, die die Hierarchie des Standorts der aktuellen Seite anzeigen.

Denken Sie daran, dass Sie das Erscheinungsbild und die Funktionalität der Breadcrumbs weiter anpassen können, indem Sie den HTML- und CSS-Code entsprechend Ihren spezifischen Anforderungen und Designvorlieben ändern.