TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich Breadcrumbs in der Weebly-Site hinzu?

18

Die interne Site-Struktur ist einer der wichtigen SEO- Faktoren, die Google und anderen Suchmaschinen helfen, Ihre Site leicht zu verstehen. Neben dem Verlinken anderer Seiten auf Ihrer Website kann das Hinzufügen von Breadcrumb Benutzern helfen, zu verschiedenen Abschnitten zu navigieren. Wenn Sie Breadcrumb nicht kennen, handelt es sich um zusätzliche Navigationslinks, die im Allgemeinen oben auf der Webseite mit der Struktur angezeigt werden. Es hilft Benutzern, von der aktuellen Seite aus einfach zu den Kategorien oder Abschnitten der oberen Ebene der Website zu navigieren.

Verwandte: Wie füge ich Breadcrumbs in der WordPress-Site hinzu?

Beispiele für Brotkrumen

Unten sehen Sie ein Beispiel dafür, wie horizontale und vertikale Breadcrumbs aussehen.

Wie füge ich Breadcrumbs in der Weebly-Site hinzu?

Beispiele für Semmelbrösel

Wie Sie sehen können, zeigt es die relative Position der aktuellen Seite innerhalb der gesamten Site an, etwa wie eine „Sie sind hier!”-Pinnwand in der Karte.

Weebly und Breadcrumb

Weebly bietet kein Standard- Breadcrumb- Element, um es Ihrer Website hinzuzufügen. Sie können jedoch benutzerdefiniertes CSS/HTML verwenden und den Breadcrumb manuell auf jeder Seite einfügen. Hier zeigen wir Ihnen sechs verschiedene CSS-Stil-Breadcrumbs, die Sie Ihrer Weebly-Site hinzufügen können.

Hinweis: Denken Sie daran, dass dies einfache und manuelle Breadcrumbs sind. Es ist nicht Teil des Schemas und daher zeigen Suchmaschinen sie nicht in den Suchergebnissen wie WordPress-Websites an.

Bevor wir beginnen, ist die Voraussetzung für einen Breadcrumb, dass Ihre Seiten strukturiert gehalten werden. Obwohl es nicht erforderlich ist, Seiten gemäß dem Breadcrumb anzuordnen, empfehlen wir dringend, die erforderliche Hierarchie unter der Registerkarte "Seiten" beizubehalten und Ihre Navigation entsprechend auszurichten. Wir erklären das anhand einer Beispielstruktur als „Home > Site Building > Weebly > Weebly Tips & Tricks > This Page”. Dies benötigt fünf Blöcke mit entsprechenden Links, um einen Breadcrumb zu erstellen.

Die Breadcrumbs verwenden einfachen CSS- und HTML-Code, daher ist der CSS-Code dem Stylesheet hinzuzufügen und der HTML-Code auf der gewünschten Seite einzubetten. Da Sie die Breadcrumbs möglicherweise auf mehr als einer Seite platzieren müssen, wird empfohlen, den CSS-Code unter „Theme > HTML bearbeiten / CSS > Stile > main.less” wie unten gezeigt hinzuzufügen:

Wie füge ich Breadcrumbs in der Weebly-Site hinzu?

Bearbeiten der Haupt-CSS-Datei in Weebly

Der HTML-Code soll auf einer Seite mit dem Element „ Embed Code ” über dem Inhalt eingefügt werden.

Stil 1 & 2

Unterhalb der Breadcrumbs von Stil 1 und 2 teilen sich die gemeinsame CSS-Klasse mit geringfügigem Hinzufügen von Code für den zweiten Stil.

CSS-Breadcrumb-Stil 1

CSS-Breadcrumb-Stil 2

Stil 3, 4, 5 & Bonus 6

CSS-Breadcrumb-Stil 3

CSS-Breadcrumb-Stil 4

CSS-Breadcrumb-Stil 5

Bonus CSS Breadcrumb Style 6

Klicken Sie auf die Schaltfläche unten, um CSS / HTML-Code für alle oben genannten Breadcrumbs zu erhalten. Der CSS- Code wird für jeden Stil hervorgehoben.

Für diese Breadcrumbs sind vier Bilder erforderlich, die Sie unten herunterladen und auf Ihre Weebly-Site hochladen können. Vergessen Sie nicht, die Bild-URLs in CSS durch Ihre eigenen URLs zu ersetzen.

Hinweis: Die Breadcrumbs-Stile 1, 2, 3 und 4 im heruntergeladenen CSS stellen die Beispiele 3, 4, 5 und 6 dar, wie oben gezeigt. Vergessen Sie nicht, die Bildlinks durch Ihre eigenen URLs zu ersetzen.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen