So fügen Sie Ihren Blog-Vorlagen in Divi . ein klebriges Kategoriemenü hinzu

Veröffentlicht: 2019-11-09

Kategoriemenüs sind eine reizvolle Ergänzung für jeden Blog. Sie geben Bloggern die Möglichkeit, die verschiedenen verfügbaren Themen vorzustellen, damit die Leser schnell und einfach zu den Dingen gelangen, die sie interessieren. Daher ist es wichtig, dass Sie für alle Blog-bezogenen Vorlagen auf Ihrer Website ein gut gestaltetes Kategoriemenü haben.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divis Theme Builder Ihrem Blog ein klebriges Kategoriemenü hinzufügen. Wir zeigen Ihnen, wie Sie mit dem Divi Builder das klebende Kategoriemenü erstellen und wie Sie die Kategoriemenüs zu verschiedenen Vorlagen auf Ihrer Website hinzufügen, aus denen Ihr Blog besteht.

Lass uns anfangen.

Vorgeschmack

Hier ist das Sticky Category Menu, das der Beitragsvorlage hinzugefügt wurde

Hier ist das untere klebrige Kategoriemenü auf dem Handy.

Hier ist das Kategoriemenü auf der Kategorieseitenvorlage.

Und hier ist eine schnelle und einfache Blog-Vorlage, die wir mit dem Sticky Category Menu erstellen, das unter dem Post-Slider beginnt und beim Scrollen oben auf der Seite bleibt.

Laden Sie die Vorlage(n) KOSTENLOS herunter

Um die Vorlagen mit dem klebrigen Kategoriemenü aus diesem Tutorial in die Hände zu bekommen, müssen Sie es 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 in der Liste sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht abgemeldet und erhalten keine zusätzlichen E-Mails.

Laden Sie die Dateien herunter
Kostenlos herunterladen

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.

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!

Um das Layout in Ihre Seite zu importieren, extrahieren Sie einfach die ZIP-Datei und fügen Sie eine der JSON-Dateien mit der Option „Theme Builder Portability“ zum Divi Theme Builder hinzu.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

  1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
  2. Laden Sie Theme Builder Pack #6 herunter, um mit dem neuen Design zu beginnen.

Danach sind Sie bereit zu gehen.

Abonnieren Sie unseren Youtube-Kanal

Hinzufügen eines klebrigen sekundären Kategoriemenüs zu Ihren Blog-Vorlagen

Hochladen des Theme Builder Pack #6

Für dieses Tutorial verwenden wir das Theme Builder Pack #6. Nachdem Sie das Paket aus dem Blog-Post heruntergeladen haben, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Divi > Theme Builder.

Klicken Sie dann oben rechts auf das Portabilitätssymbol. Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Datei Divi-Theme-Builder-Pack-6-All.json. Klicken Sie dann auf die Schaltfläche "Divi Theme Builder-Vorlagen importieren".

Dadurch werden alle Vorlagen in den Theme Builder importiert.

Jetzt können wir mit der Erstellung unseres Kategoriemenüs beginnen.

Erstellen eines neuen Kategoriemenüs in WordPress

Ein Kategoriemenü kann wie ein normales Menü in WordPress erstellt werden. Navigieren Sie im WordPress-Dashboard zu Darstellung > Menüs. Klicken Sie auf den Link Neues Menü erstellen, geben Sie dem Menü einen Namen und klicken Sie auf die Schaltfläche „Menü erstellen“.

Öffnen Sie unter den Menüpunkten den Schalter Kategorien und wählen Sie alle Kategorien/Seiten aus, die Sie dem Menü hinzufügen möchten. Stellen Sie sicher, dass bereits Kategorien erstellt wurden, damit Kategorieelemente im Kategorienumschalter angezeigt werden. Kategoriemenüelemente werden auf die Kategorieseite für eine bestimmte Beitragskategorie umgeleitet.

Entwerfen eines klebrigen Kategoriemenüs im Textbereich der Beitragsvorlage.

Nachdem das Kategoriemenü erstellt wurde, ist es an der Zeit, unser Kategoriemenü zu gestalten. Dazu müssen wir es einem Body-Bereich einer der Vorlagen hinzufügen. Wir werden das Kategoriemenü schließlich zu anderen Vorlagen im Zusammenhang mit dem Blog hinzufügen, aber jetzt fügen wir es der Vorlage für alle Beiträge (oder der Beitragsvorlage) hinzu.

Vorlagenlayout-Editor für Körperbereich öffnen

Suchen Sie in der Theme Builder-Oberfläche die Vorlage, die bereits „Alle Beiträge“ zugewiesen ist, und klicken Sie im benutzerdefinierten Textbereich auf das Bearbeitungssymbol.

Neuen Abschnitt und Zeile oben in der Vorlage hinzufügen

Erstellen Sie im Vorlagenlayout-Editor einen neuen Abschnitt mit einer einspaltigen Zeile und ziehen Sie ihn ganz nach oben im Layout.

Abschnitt anpassen

Bevor Sie ein Modul hinzufügen, öffnen Sie die Abschnittseinstellungen und geben Sie ihm wie folgt einen Hintergrund und etwas Auffüllung:

  • Hintergrundfarbe: #f92c8b
  • Polsterung: 1vw oben, 1vw unten

Zeile anpassen

Aktualisieren Sie als Nächstes die Zeileneinstellungen wie folgt:

  • Hintergrundfarbe links: #f92c8b
  • Hintergrund mit Farbverlauf rechts: #ffd625
  • Verlaufsrichtung: 90deg
  • Padding: 0px oben, 0px unten
  • Abgerundete Ecken: 20px

Menümodul hinzufügen

Fügen Sie innerhalb der einspaltigen Zeile ein neues Menümodul hinzu.

Wählen Sie dann das Kategoriemenü, das Sie zuvor erstellt haben, aus dem Dropdown-Menü aus. Nach der Auswahl erscheinen Ihre Menüpunkte im Menü.

Menümodul entsprechend der Vorlage gestalten

Löschen Sie die Standardhintergrundfarbe, damit die Zeilenhintergrundfarbe angezeigt wird.

Aktualisieren Sie die folgenden Designeinstellungen:

  • Stil: zentriert
  • Menüschrift: Ubuntu
  • Schriftstärke des Menüs: Fett
  • Menüschriftart: TT (Großschreibung)
  • Menütextfarbe: #ffffff
  • Menübuchstabenabstand: 2px
  • Menüzeilenhöhe: 2em
  • Hintergrundfarbe des Dropdown-Menüs: #ffffff
  • Farbe der Dropdown-Menüzeile: #f92c8b

  • Textfarbe des Dropdown-Menüs: #222222
  • Textfarbe des mobilen Menüs: #222222
  • Farbe des Hamburger-Menüsymbols: #ffffff
  • Hamburger Menüsymbol Schriftart: 40px
  • Breite: 90%
  • Modulausrichtung: Mitte

Schnitt- und Zeilensichtbarkeit

Um zu verhindern, dass Menü-Dropdowns ausgeblendet werden, müssen wir sicherstellen, dass die Sichtbarkeit unseres Abschnitts und unserer Zeile sichtbar ist. Außerdem müssen wir dem z-Index eine hohe Zahl zuweisen, um die gesamte Menüreihenfolge über allen anderen Inhalten auf der Seite zu halten. Dies wird benötigt, um die Sichtbarkeit des Dropdown-Menüs auf dem Handy und auch des Sticky-Menüs zu maximieren.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

  • Horizontaler Überlauf: Sichtbar
  • Vertikaler Überlauf: Sichtbar
  • Z-Index: 999

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

  • Horizontaler Überlauf: Sichtbar
  • Vertikaler Überlauf: Sichtbar

Den Abschnitt (der das Menü enthält) klebrig machen

Dies ist natürlich optional, aber um ein klebriges Kategoriemenü zu erstellen, öffnen Sie die Abschnittseinstellungen und fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu: 

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

Abschnitt duplizieren, um das unterste Kategoriemenü zu erstellen

Für eine bessere Benutzererfahrung auf Mobilgeräten können wir ein weiteres Kategoriemenü erstellen, das am unteren Rand der Seite angezeigt wird. Um das Menü zu erstellen, duplizieren Sie einfach den Abschnitt, der das gerade erstellte Menü enthält.

Optimieren Sie das untere Sticky-Menü für Mobilgeräte

Aktualisieren Sie Sticky CSS mit der unteren Positionierung.

Da wir dieses Menü nur zum „kleben“ auf dem Handy benötigen, öffnen Sie die Abschnittseinstellungen und löschen Sie das benutzerdefinierte CSS für Desktop. Fügen Sie dann das folgende benutzerdefinierte CSS auf der Registerkarte Tablet hinzu. 

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

Ändern Sie die Dropdown-Menürichtung für das untere Kategoriemenü

Da sich das Menü auf dem Handy am unteren Bildschirmrand befindet, ändern Sie die Richtung des Dropdown-Menüs:

  • Dropdown-Menürichtung: Aufwärts

Menübezeichnung „Kategorien“ hinzufügen

Um neben dem Symbol für das mobile Menü ein Label hinzuzufügen, fügen Sie auf der Registerkarte "Erweitert" der Menüeinstellungen das folgende benutzerdefinierte CSS zum Element "Vorher" hinzu: 

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

So sieht das Menü bisher auf dem Handy aus.

Top-Menü auf dem Handy ausblenden

Um die Kopfzeile auf Mobilgeräten nicht zu überfüllen, deaktivieren Sie das obere Menü auf Telefon und Tablet. Dadurch wird nur das oberste Sticky-Menü auf dem Desktop angezeigt.

Speichern Sie beide Menüs/Zeilen in der Divi-Bibliothek.

Wir sind mit der Erstellung der beiden Kategoriemenüs für das Layout fertig. Um das Hinzufügen zu anderen Vorlagen zu vereinfachen, können wir sie in unserer Divi-Bibliothek speichern. Um das Hauptmenü zu speichern, wählen Sie das Symbol „Zur Bibliothek hinzufügen“ aus dem Abschnittsmenü. Geben Sie dann dem Layout einen Namen und klicken Sie auf die Schaltfläche „In Bibliothek speichern“.

Wiederholen Sie den gleichen Vorgang, um auch das untere Menü in der Bibliothek zu speichern. Stellen Sie einfach sicher und geben Sie ihm einen Namen, an den Sie sich erinnern werden.

Endergebnis der Blog-Post-Vorlage

Schauen wir uns an, wie ein Live-Post mit unserem neuen Sticky-Kategorie-Menü aussieht.

Desktop-Ansicht (Hauptmenü)

Mobile Ansicht (unteres Menü)

Hinzufügen des Sticky Secondary Category Menu zur Kategorieseitenvorlage

Da wir unsere Menüabschnitte der Divi-Bibliothek hinzugefügt haben, können wir sie jedem Vorlagenlayout hinzufügen. Die nächste Vorlage, der wir die Kategoriemenüs hinzufügen werden, ist die Kategorieseitenvorlage.

Bearbeiten Sie den Textbereich der Kategorieseitenvorlage

Suchen Sie die Vorlage, die „Alle Kategorieseiten“ zugewiesen ist, und klicken Sie auf das Bearbeitungssymbol im benutzerdefinierten Textbereich.

Top-Kategoriemenü aus der Bibliothek hinzufügen

Klicken Sie im Vorlagenlayout-Editor auf das blaue Plussymbol, um einen neuen Abschnitt hinzuzufügen. Wählen Sie dann die Registerkarte Aus Bibliothek hinzufügen und wählen Sie das oberste Kategoriemenü aus der Liste.

Verschieben Sie dann den Abschnitt an den Anfang des Vorlagenlayouts.

Unteres Kategoriemenü aus Bibliothek hinzufügen

Klicken Sie anschließend auf , um ganz unten im Layout einen neuen Abschnitt hinzuzufügen. Fügen Sie dann das untere Kategoriemenü aus der Bibliothek hinzu.

Aktualisieren Sie die Farbe des aktiven Links für das Menü

Für diese Vorlage empfiehlt es sich, die Farbe des aktiven Links zu aktualisieren, da die Menüelemente Links zu Kategorieseiten enthalten, die diese Vorlage verwenden. Öffnen Sie die oberen Menüeinstellungen und aktualisieren Sie Folgendes:

  • Farbe des aktiven Links: #4160fd

Wenn Sie nun eine Kategorieseite besuchen, wird der aktive Link blau angezeigt.

Endergebnis der Kategorieseitenvorlage

Hinzufügen des Sticky-Kategoriemenüs zu einer Blog-Seitenvorlage

Wir können auch unser klebriges Kategoriemenü zur Blog-Seite unserer Website hinzufügen. Eine Blog-Seite ist im Grunde die Startseite Ihres Blogs und zeigt normalerweise einen Feed aller Ihrer Blog-Beiträge an. Mit dem Divi Theme Builder können wir eine Vorlage für die Blogseite erstellen und das Kategoriemenü einfach hinzufügen.

Erstellen der Blog-Vorlage

Duplizieren Sie zunächst die Kategorieseitenvorlage.

Weisen Sie dann die duplizierte Vorlage dem Blog zu.

Bearbeiten Sie den benutzerdefinierten Textkörper der Blog-Vorlage.

Passen Sie das Layout der Blog-Vorlage an

Verwenden Sie den Vorlagen-Layout-Editor, um die Blog-Vorlage zu gestalten. Für den Moment geben wir ihm einfach einen schönen Post-Slider in voller Breite oben auf der Seite. Erstellen Sie dazu einen neuen Abschnitt mit voller Breite.

Fügen Sie einen Post-Slider in voller Breite hinzu

Fügen Sie dann dem Abschnitt ein Post Slider-Modul in voller Breite hinzu.

Stellen Sie den Inhalt so ein, dass die "Beiträge für die aktuelle Seite" abgerufen werden. Dann wird sichergestellt, dass der richtige dynamische Inhalt für die Blog-Seite abgerufen wird.

Aktualisieren Sie die Einstellungen für den Post-Slider in voller Breite wie folgt:

  • Titelschriftart: Ubuntu
  • Schriftstärke des Titels: Mittel
  • Körperschriftart: Ubuntu

Menü unter Post-Slider verschieben

Ziehen wir für dieses Layout den Post-Schieberegler an den oberen Rand der Seite, sodass sich das oberste Kategoriemenü unter dem Schieberegler befindet.

Erstellen und zuweisen Sie die Seite mit Beiträgen (oder Blogs)

Stellen Sie sicher, dass Sie eine in WordPress festgelegte Blog-Seite haben. Gehen Sie dazu zu Einstellungen > Lesen. Wählen Sie dann für Startseitenanzeigen eine statische Seite aus. Wählen Sie dann die Seite aus, die Sie für die Seite Posts verwenden möchten.

Endergebnis der Blog-Seitenvorlage

Beachten Sie, wie das Kategoriemenü klebrig wird, wenn es den oberen Rand der Seite erreicht.

Abschließende Gedanken

Ein klebriges Kategoriemenü kann Ihren Blog wirklich auf die nächste Stufe heben. Eine zu erstellen ist wirklich einfach mit dem Divi Builder. Und der Theme Builder macht es einfach, das Menü an einer beliebigen Stelle auf Ihrer Website hinzuzufügen. Außerdem können Sie sogar ein separates Sticky-Menü für Mobilgeräte erstellen, um Ihren Benutzern das beste Erlebnis zu bieten. Hoffentlich wird dies in Ihrem eigenen Blog oder Ihrem nächsten Projekt nützlich sein.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!