So fügen Sie Ihrem Divi Global Footer Widgets für das Post-Kategorie-Menü hinzu

Wenn Sie eine benutzerdefinierte Fußzeile in Divis Theme Builder erstellen, gibt es mehrere Möglichkeiten, die Fußzeilenelemente hinzuzufügen. Sie könnten sich für eine modulbasierte Fußzeile entscheiden, bei der Sie Seitenfußzeilenelemente innerhalb von Textmodulen mit den richtigen Links hinzufügen, aber Sie könnten sich auch entscheiden, Ihrem Design verschiedene Fußzeilen-Widgets hinzuzufügen, indem Sie das Sidebar-Modul von Divi verwenden, und sie mit Divis integriertem . gestalten Optionen. Im heutigen Tutorial zeigen wir Ihnen, wie Sie mit der zweiten Option vorgehen. Genauer gesagt zeigen wir Ihnen, wie Sie Ihrer Fußzeile Menü-Widgets für Post-Kategorien hinzufügen. Der von uns verwendete Designstil passt perfekt zum Food Recipes Layout Pack. Wir beginnen damit, dass wir die verschiedenen Beitragskategorien zu unserer Website hinzufügen. Wir erstellen dann die Fußzeilenmenüs in WordPress. Als nächstes erstellen wir unsere Widgets und fügen die Widgets zu unserer benutzerdefinierten Divi-Fußzeile im Divi Theme Builder hinzu. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die globale Fußzeilenvorlage KOSTENLOS herunter

Um die kostenlose globale Fußzeilenvorlage in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. Richten Sie Beitragskategorien für Ihre Website ein

Gehe zu deinen Post-Kategorien

Im ersten Teil dieses Tutorials stellen wir sicher, dass alle Beitragskategorien eingerichtet sind, bevor wir sie zu benutzerdefinierten Fußzeilenmenüs hinzufügen. Navigieren Sie dazu zu Ihren Beitragskategorien in Ihrem WordPress-Backend.

Richten Sie die Post-Kategoriestruktur Ihrer Wahl ein

Richten Sie alle verschiedenen Beitragskategorien ein, die Sie in Ihre Fußzeile aufnehmen möchten, falls Sie dies noch nicht getan haben. Für dieses Tutorial benötigen wir drei verschiedene Gruppen von Beitragskategorien, da wir drei verschiedene Menü-Widgets für Beitragskategorien in unsere benutzerdefinierte Fußzeile aufnehmen werden.

2. Erstellen Sie mehrere Kategorie-WordPress-Menüs

Gehen Sie zu Menüs

Als Nächstes erstellen wir ein separates Menü für jede Gruppe von Beitragskategorien. Navigieren Sie zu Menüs in den Darstellungseinstellungen Ihrer WordPress-Website.

Erstes Fußzeilenmenü erstellen

Fügen Sie ein erstes Fußzeilenmenü hinzu und geben Sie ihm einen erkennbaren Namen.

• Menüname: Fußzeilenmenü #1

Beitragskategorien hinzufügen

Fügen Sie diesem neuen Menü Ihre erste Gruppe von Beitragskategorien hinzu.

Zweites und drittes Fußzeilenmenü für andere Beitragskategorien erstellen

Machen Sie dasselbe für zwei andere Beitragskategoriegruppen.

• Menüname: Fußzeilenmenü #2

• Menüname: Fußzeilenmenü #3

3. Erstellen Sie Fußzeilen-Widgets

Gehe zu Widgets

Nachdem wir nun unsere Beitragskategorien und Beitragskategoriemenüs eingerichtet haben, können wir sie in unseren Fußzeilenbereichs-Widgets platzieren. Navigieren Sie dazu in Ihrem WordPress-Backend zu Widgets.

Fußzeilenmenü Nr. 1 zum Fußzeilenbereich Nr. 1 hinzufügen

Fügen Sie dort Ihrem Fußzeilenbereich 1 ein erstes Navigationsmenü-Widget hinzu. Wählen Sie im Navigationsmenü das erste Fußzeilenmenü aus, das Sie im vorherigen Teil dieses Tutorials erstellt haben.

Fußzeilenmenü Nr. 2 zum Fußzeilenbereich Nr. 2 hinzufügen

Platzieren Sie das zweite Post-Kategoriemenü im zweiten Fußzeilenbereich.

Fußzeilenmenü Nr. 3 zum Fußzeilenbereich Nr. 3 hinzufügen

Und das dritte Fußzeilenmenü im dritten Fußzeilenbereich.

Neue Beiträge zum Footer-Bereich hinzufügen #4

Das letzte Widget, das wir brauchen und das wir dem vierten Fußzeilenbereich hinzufügen, ist das Widget für die letzten Beiträge. Dieses Widget zeigt Ihre 5 letzten Beiträge dynamisch als Links an.

3. Erstellen Sie eine globale Fußzeile im Divi Theme Builder

Gehen Sie zu Ihrem Divi Theme Builder und beginnen Sie mit der Erstellung einer Fußzeilenvorlage

Jetzt, da unsere Post-Kategorien, Post-Kategorie-Menüs und Widgets eingerichtet sind, ist es an der Zeit, auf Divi umzusteigen! Gehen Sie zu Ihrem Divi Theme Builder und beginnen Sie mit der Erstellung einer globalen oder benutzerdefinierten Fußzeile.

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich in der Fußzeilenvorlage befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und fügen Sie ihm eine Hintergrundfarbe hinzu. Der Stil, den wir in diesem Design verwenden, passt perfekt zum Food Recipes Layout Pack, aber der Ansatz funktioniert mit jeder Art von Design, das Sie wählen.

• Hintergrundfarbe: #ff7864

Hintergrundbild

Fügen Sie als nächstes ein Hintergrundbild hinzu. Wenn Sie genau dasselbe wie in diesem Tutorial verwenden möchten, finden Sie es in dem Ordner, den Sie zu Beginn dieses Tutorials herunterladen können.

• Hintergrundbildgröße: Fit

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie als nächstes alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Zeile 1 hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und wenden Sie einen Verlaufshintergrund an.

• Farbe 1: rgba(10,10,10,0.05)
• Farbe 2: rgba(10,10,10,0.18)

Größe

Wechseln Sie zur Registerkarte Design der Zeile und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Maximale Breite: 1680px

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Spalte 1 Einstellungen

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und fügen Sie einige benutzerdefinierte Abstandswerte auf der Registerkarte Design hinzu.

• Obere Polsterung: 5%
• Untere Polsterung: 5%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Grenze

Wir verwenden auch einen rechten Rand auf dem Desktop.

• Breite des rechten Rands:
  • Desktop: 2px
  • Tablet & Telefon: 0px
• Farbe des rechten Rands: #ff7864

Spalte 2 Einstellungen

Abstand

Öffnen Sie als Nächstes die Einstellungen von Spalte 2 und wenden Sie die folgenden Padding-Werte darauf an:

• Obere Polsterung: 5%
• Untere Polsterung: 5%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Es ist Zeit, Module hinzuzufügen, beginnend mit einem Bildmodul in Spalte 1. Laden Sie ein Logo Ihrer Wahl hoch und gestalten Sie es nach Ihren Wünschen.

Textmodul zu Spalte 2 hinzufügen

H2-Inhalt hinzufügen

In der zweiten Spalte fügen wir ein Textmodul mit beschreibenden H2-Inhalten hinzu.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftart: Kormoran Garamond
• Überschrift 2 Schriftstärke: Mittel
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße:
  • Desktop & Tablet: 40px
  • Telefon: 35px
• Überschrift 2 Zeilenhöhe: 1.3em

Zeile 2 hinzufügen

Spaltenstruktur

Auf in die nächste Reihe. In dieser Zeile platzieren wir alle unsere Widgets. Wählen Sie die folgende Spaltenstruktur:

Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen und wenden Sie eine Hintergrundfarbe an.

• Hintergrundfarbe: rgba(10,10,10,0.05)

Größe

Wechseln Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Maximale Breite: 1680px

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Alle Spaltenabstände

Öffnen Sie dann die Spalten einzeln und wenden Sie die folgenden Füllwerte auf jede von ihnen an:

• Obere Polsterung: 5%
• Untere Polsterung: 5%
• Linke Polsterung: 5%
• Rechte Polsterung: 5%

Spalte 1 Rahmen

Als nächstes fügen wir Spalte 1 einen Rahmen hinzu.

• Breite des rechten Rands:
  • Desktop & Tablet: 2px
  • Telefon: 0px
• Farbe des rechten Rands: #ff7864

Spalte 2 Rahmen

Wir verwenden denselben Rahmen mit einigen unterschiedlichen Reaktionswerten für die zweite Spalte.

• Breite des rechten Rands:
  • Desktop: 2px
  • Telefon & Tablet: 0px
• Farbe des rechten Rands: #ff7864

Spalte 3 Rahmen

Und zu guter Letzt fügen wir auch der dritten Spalte einen rechten Rand hinzu.

• Breite des rechten Rands:
  • Desktop & Tablet: 2px
  • Telefon: 0px
• Farbe des rechten Rands: #ff7864

Sidebar-Modul zu Spalte 1 hinzufügen

Es ist Zeit, unsere Menü-Widgets für die Post-Kategorie hinzuzufügen! Dazu verwenden wir das integrierte Sidebar-Modul von Divi. Fügen Sie der ersten Spalte der Zeile eins hinzu.

Fußzeilenbereich 1 auswählen

Wählen Sie den ersten Fußzeilenbereich aus. Dies ist mit unserem ersten Post-Kategorie-Menü verknüpft, das wir erstellt haben.

• Widget-Bereich: Fußzeilenbereich #1

Layout

Wechseln Sie zum Design-Tab des Moduls und deaktivieren Sie den Rahmentrenner.

• Grenztrennzeichen anzeigen: Nein

Textkörpereinstellungen

Ändern Sie auch die Textkörpereinstellungen.

• Körperschriftart: Montserrat
• Schriftgewicht des Körpers: Mittel
• Textkörperfarbe: #ffffff
• Körpertextgröße: 13px

Abstand

Und vervollständigen Sie die Moduleinstellungen, indem Sie den Abstandseinstellungen einige obere und untere Auffüllung hinzufügen.

• Obere Polsterung: 5%
• Untere Polsterung: 5%

Seitenleistenmodul zweimal klonen & Duplikate in Spalte 2 & 3 platzieren

Sobald Sie das erste Sidebar-Modul fertiggestellt haben, können Sie es zweimal klonen und die Duplikate in Spalte 2 und 3 platzieren.

Fußzeilenbereiche ändern

Ändern Sie den Widget-Bereich für jedes Duplikat, um die verschiedenen von Ihnen erstellten Beitragskategoriemenüs anzuzeigen.

• Widget-Bereich: Fußzeilenbereich #2

• Widget-Bereich: Fußzeilenbereich #3

Sidebar-Modul zu Spalte 4 hinzufügen

Jetzt fügen wir in der letzten Spalte ein neues Sidebar-Modul hinzu.

Wählen Sie Fußzeilenbereich #4

In diesem Modul wählen wir den vierten Fußzeilenbereich aus, den wir erstellt haben und der unsere letzten Beiträge enthält.

• Widget-Bereich: Fußzeilenbereich #4

Einstellungen für Titeltext

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Einstellungen für den Titeltext wie folgt:

• Titelschrift: Kormoran Garamond
• Titeltextfarbe: #ffffff
• Titeltextgröße: 30px

Textkörpereinstellungen

Nehmen Sie auch einige Änderungen an den Textkörpereinstellungen vor.

• Körperschriftart: Montserrat
• Schriftgewicht des Körpers: Mittel
• Textkörperfarbe: #dddddd
• Körpertextgröße: 13px

Abstand

Vervollständigen Sie die Moduleinstellungen und dieses Tutorial, indem Sie den Abstandseinstellungen des Moduls einige benutzerdefinierte obere und untere Abstände hinzufügen. Das ist es! Stellen Sie sicher, dass Sie alle Änderungen im Divi Theme Builder speichern, bevor Sie das Ergebnis auf Ihrer Website anzeigen.

• Obere Polsterung: 5%
• Untere Polsterung: 5%

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen gezeigt, wie Sie den Divi Theme Builder mit WordPress-Fußzeilen-Widgets und dem Divi Sidebar-Modul kombinieren. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Ihrer globalen Fußzeile Menü-Widgets für Beitragskategorien hinzufügen, um die Navigation Ihrer Besucher zu erleichtern. Dieser Ansatz hilft Ihnen, die Fußzeilenelemente mit den integrierten Optionen von Divi zu gestalten, während Sie die Fußzeilenmenüs und Widgets in Ihrem WordPress-Backend behalten. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.