Divi-Plugin-Highlight – Divi Breadcrumbs-Modul

Wenn ich auf einer Website navigiere, suche ich nach Breadcrumbs. Sie eignen sich hervorragend, um Ihnen zu zeigen, wo Sie sich innerhalb der Navigationshierarchie befinden, und erleichtern das Auffinden anderer Artikel innerhalb der Struktur. Breadcrumbs können mit einem Plugin namens Divi Breadcrumbs Module zu Divi hinzugefügt werden.

Divi Breadcrumbs Module ist ein Drittanbieter-Plugin von CodeCrater, das ortsbasierte Breadcrumbs erstellt. Mit anderen Worten, es zeigt Ihnen die Hierarchie der Kategorien der Seite, die Sie gerade lesen. Das bietet auch Links für jedes Element in der Hierarchie, sodass Sie die neuesten Beiträge für jede der Kategorien leicht sehen können. Die Breadcrumbs sind hochgradig anpassbar.

Mit dem Breadcrumbs-Modul können Sie Breadcrumbs auf einzelnen Seiten und Beiträgen platzieren, die den Divi Builder verwenden. Es funktioniert auch mit Extra und dem Divi Builder-Plugin. In diesem Plugin-Highlight werfen wir einen Blick auf das Plugin in Divi und Extra und sehen einige der Möglichkeiten, wie es angepasst werden kann.

Warum Brotkrumen verwenden?

Brotkrümel hinterlassen eine Spur, die die Kategoriehierarchie anzeigt und eine großartige Möglichkeit ist, die Navigation zu verbessern. Sie nehmen nicht viel Platz ein und können die Anzahl der Aktionen reduzieren und vereinfachen, die ein Benutzer ausführen muss, um durch Ihre Inhalte zu navigieren. Dies ist besonders wichtig, wenn Sie viele eingebettete Kategorien haben.

Das Divi Breadcrumbs-Modul verbessert die SEO, indem es Google mit Hierarchieinformationen über Ihre Website versorgt. Das bedeutet, dass Sie Keywords für Ihre Kategorien auswählen sollten, für die Sie ein Ranking erstellen möchten. Dies zwingt Designer auch dazu, Kategorienamen zu verwenden, die leichter verständlich sind.

Breadcrumbs verbessern sowohl UX als auch UI. Sie sollten nicht Ihre Standardmenünavigation ersetzen, können jedoch Interesse wecken und Besucher länger auf Ihrer Website halten.

Divi Breadcrumbs-Modul

Laden Sie das Plugin wie gewohnt hoch und aktivieren Sie es. Das Modul erscheint in einem leuchtenden Rot namens Hollywood Cerise. Viele Breadcrumbs-Plugins benötigen Yoast, weil sie ihre Breadcrumbs aus dem Yoast-Plugin ziehen, aber das Divi Breadcrumbs-Modul benötigt Yoast nicht. Stattdessen erstellt es seine eigenen Breadcrumbs. Es sind also keine weiteren Plugins erforderlich.

Zu den Inhaltseinstellungen gehören das Ausblenden des Home-Breadcrumbs, das Hinzufügen Ihres eigenen Home-Breadcrumb-Texts, das Auswählen des Trennsymbols (aus 12 Auswahlmöglichkeiten), das Ausblenden der aktuellen Seite, Hintergrundeinstellungen und das Admin-Label. Zu den Designeinstellungen gehören der Stil für Symbole, Text und Links sowie die Standardabstandsoptionen.

Divi Breadcrumb Module Beispiele

Dies ist ein grundlegendes Artikellayout mit dem Beitragstitelmodul mit Bild, dem Breadcrumbs-Modul und dem Textmodul der Artikel. Ich habe die Breadcrumbs-Einstellungen auf den Standardwerten belassen.

So sieht das Modul mit den Standardeinstellungen aus. Die Links für Haus und Zaun sind blau, um anzuzeigen, dass sie anklickbar sind. Die Semmelbrösel können links, mittig oder rechts platziert werden.

In diesem Beispiel habe ich die Brotkrümel in der Mitte platziert und einen Verlaufshintergrund hinzugefügt und die Schriftgrößen sowohl für den Titel des Artikels (14 Punkt) als auch für die Links (12 Punkt) erhöht. Der Text ist weiß. Da sie über einen Farbverlauf gedruckt sind, habe ich sie in der gleichen Farbe gemacht. Ich habe auch den Zeilentrenner geändert. In einem regulären Beitrag würde ich nicht auf Breadcrumbs mit Verlaufshintergrund aufmerksam machen, aber das zeigt, was man damit machen kann.

Hinzufügen von Brotkrumen unter einem Menü mit voller Breite

Der beste Ort, um Breadcrumbs hinzuzufügen, ist oben auf der Seite. In diesem Beispiel habe ich einen Beitrag mit einem Menü in voller Breite erstellt und den Abstand und die Ränder sowohl für den Abschnitt mit voller Breite als auch für den Standardabschnitt auf 0 gesetzt. Ich habe die Kategorien eingebettet, um die Hierarchie anzuzeigen.

Ich habe die Schriftfarben des Breadcrumbs so geändert, dass sie dem Menü in voller Breite entsprechen, sie dann aber weicher gemacht, damit sie nicht auffallen. Ich habe das Trennzeichen in einen Pfeil geändert und Home und die aktuelle Seite aus der Navigation des Breadcrumbs entfernt.

Beachten Sie, dass die Breadcrumbs dieselbe eingebettete Struktur haben wie die Kategorien im Bild darüber. Der Artikel selbst enthält auch diese Kategorien, aber es gibt keine hierarchische Struktur. Sie können aus dem Titel entfernt werden, wenn Sie dieselben Kategorien nicht mehrmals anzeigen möchten.

In diesem Beispiel habe ich die Hintergrundfarbe in der Zeile platziert, sie in voller Breite gemacht, die Farbe der Schriftart geändert, damit sie das Menü nicht überwältigt, und 1 Pixel zum Buchstabenabstand hinzugefügt. Kleine Veränderungen können einen großen Unterschied machen.

Dies sind die gleichen Einstellungen, bei denen der Hintergrund im Breadcrumbs-Modul anstelle der Zeile verwendet wird. Ich habe Polsterung hinzugefügt, um die Breite zu reduzieren. Ich mag, dass es ein kleines Element erstellt, das separat aussieht, aber an das Menü darüber angehängt ist.

Styling des Separators

Der Separator hat auch Styling-Features. Ändern Sie den Schriftstil, die Größe, die Farbe, den Abstand und die Höhe. Zwischen den Trennzeichenoptionen und den Gestaltungsfunktionen können Sie ganz einfach Trennzeichen erstellen, die dem Branding Ihrer Website entsprechen.

In diesem Beispiel wird die Standardschriftart Lila und eine Schriftgröße von 20 für die Trennzeichen verwendet.

Hier ist das gleiche Trennzeichen mit einer Georgia-Schriftart als Trennzeichen. Es genügt, die Schriftart des Trennzeichens zu ändern, um ihm ein neues Aussehen zu verleihen.

Hier ist das gleiche Trennzeichen mit der Schriftart Black Ops One. Es ist mutiger und fällt mehr auf.

Dies ist Droid Serif in 20-Punkt-Schrift mit einem Zeilenabstand von 4 Pixeln. Ich habe die Schrift dunkelrot gemacht.

Sogar die Punkte ändern ihre Form mit der Auswahl der Schriftart. Dies ist Passion One mit 24 Punkten. Es lohnt sich, etwas Zeit damit zu verbringen, mit Schriftarten, Farben und Größen zu experimentieren, um etwas Einzigartiges zu schaffen. Mit den standardmäßigen Styling-Steuerelementen ist dies ganz einfach.

Verwenden des Divi Breadcrumbs-Moduls mit Extra

Das Divi Breadcrumbs-Modul funktioniert mit Extra und dem Divi Builder-Plugin. Hier ist ein Blick auf Extra mit Breadcrumbs unter dem Bild rechts. Ich habe den Namen des Beitrags eingefügt, da die Breadcrumbs so weit vom Titel oben auf dem Bildschirm entfernt sind. Es verwendet einen Balkentrenner.

Idealerweise befinden sich die Breadcrumbs oben auf der Seite. In meinem Seitenlayout steht das Breadcrumbs-Modul ganz oben. Der Grund dafür, dass es unter dem Bild angezeigt wird, ist, dass ich Extra erlaube, das vorgestellte Bild anzuzeigen.

In diesem Beispiel habe ich das Bild innerhalb des Layouts platziert und den Abschnitt so eingestellt, dass er den oberen Abstand von 0 hat. Ich habe den aktuellen Beitrag entfernt und das Trennzeichen rot gemacht.

Lizenz, Updates, Support

Das Plugin kann auf unbegrenzten Websites für Sie und Ihre Kunden installiert werden. Updates sind ein Leben lang. Es beinhaltet sechs Monate Unterstützung.

• Klicken Sie hier, um zu kaufen: Divi Breadcrumbs-Modul

Abschließende Gedanken

Brotkrumen sind eines dieser kleinen Dinge, die Sie bemerken, wenn sie fehlen. Wenn sie richtig gestaltet sind, sind sie da, wenn der Benutzer sie braucht, und bleiben ihnen aus dem Weg, wenn sie dies nicht tun. Das Divi Breadcrumbs-Modul ist eine großartige Möglichkeit, sie zu Ihren Divi-Seiten und -Beiträgen hinzuzufügen, und sie können leicht so gestaltet werden, dass sie in das Branding Ihrer Website passen. Es ist einfach und intuitiv.

Wenn Sie Breadcrumbs zu Ihren Divi-Layouts hinzufügen möchten, ist das Divi Breadcrumbs-Modul möglicherweise das Plugin, das Sie benötigen.

Wir möchten von Ihnen hören! Haben Sie das Divi Breadcrumbs-Modul ausprobiert? Teilen Sie uns Ihre Erfahrungen in den Kommentaren unten mit.

Ausgewähltes Bild über Yevgenij_D / shutterstock.com