So präsentieren Sie Blog-Post-Kategorien visuell in Ihrem Divi-Header

Veröffentlicht: 2020-07-15

Wenn Sie Ihren globalen Header erstellen, ist die Wahrscheinlichkeit hoch, dass Sie ein Blog-Menüelement einfügen. Wenn Sie nicht viele Blog-Post-Kategorien auf Ihrer Website haben, kann es ausreichen, sich für einen Blog-Menüpunkt zu entscheiden. Wenn Sie jedoch eine Reihe verschiedener Kategorien haben und jede einzelne hervorheben möchten, sollten Sie einen anderen Ansatz ausprobieren, z. B. die visuelle Präsentation jeder Blog-Kategorie in einem Dropdown-Menü.

In diesem Tutorial zeigen wir Ihnen genau, wie Sie das mit Divis Theme Builder machen. Wir erstellen das Dropdown-Menü mit den integrierten Elementen und Optionen von Divi und kombinieren es mit etwas Code, der es uns ermöglicht, das Dropdown-Menü innerhalb des Blog-Menüelements zu platzieren. 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

Dropdown-Postkategorien

Handy, Mobiltelefon

Dropdown-Postkategorien

Laden Sie den Global Header KOSTENLOS herunter

Um den kostenlosen globalen Header in die Hände zu bekommen, müssen Sie ihn 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.

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!

So laden Sie die JSON-Datei hoch

Entpacken Sie den komprimierten Ordner, den Sie oben herunterladen konnten. Navigieren Sie dann zu Ihrer WordPress-Website > Divi > Divi-Bibliothek und laden Sie die JSON hoch.

Dropdown-Postkategorien

Sobald Ihr Layout in der Divi-Bibliothek gespeichert ist, können Sie zum Divi Theme Builder navigieren und das gespeicherte Layout importieren, indem Sie auf „Globalen Header hinzufügen“ oder „Benutzerdefinierten Header hinzufügen“ klicken und „Globalen/Benutzerdefinierten Header erstellen“ auswählen. Gehen Sie in der Divi-Bibliothek zum Tab "Ihre gespeicherten Layouts", wählen Sie das Layout aus, das Sie im vorherigen Schritt hochgeladen haben, und speichern Sie alle Änderungen im Divi-Theme-Builder.

Dropdown-Postkategorien

Um auf Anhieb ein funktionierendes Menü zu haben, müssen Sie den ersten Teil dieses Tutorials unten durchgehen; Hinzufügen der CSS-Klassen zu Menüpunkten auf individueller Ebene. Sie müssen auch eine der CSS-Klassen im Codemodul aktivieren, wie in Teil 5 dieses Tutorials gezeigt.

1. CSS-Klasse zum Blog-Menüelement hinzufügen

Gehen Sie zu Menüs in der Darstellung

Im ersten Teil dieses Tutorials fügen wir dem Menüelement der Blog-Seite im WordPress-Menü zwei benutzerdefinierte CSS-Klassen hinzu. Navigieren Sie dazu zu Menüs in Ihrem WordPress-Dashboard.

Dropdown-Postkategorien

CSS-Klassenoption aktivieren

Stellen Sie oben auf der Seite sicher, dass Sie die Option CSS-Klassen in der Bildschirmoption aktivieren.

Dropdown-Postkategorien

CSS-Klassen zum Blog-Menüelement hinzufügen

Suchen Sie dann Ihren Blog-Menüpunkt und fügen Sie zwei CSS-Klassen hinzu. Stellen Sie sicher, dass Sie zwischen den CSS-Klassen ein Leerzeichen lassen.

CSS-Klassen: First-Level First-Level-1

Dropdown-Postkategorien

2. Erstellen Sie einen benutzerdefinierten Header mit Divis Theme Builder

Gehe zum Divi Theme Builder

Sobald der Menüpunkt CSS-Klassen eingerichtet ist, ist es Zeit, zu Divi zu wechseln. Gehen Sie zum Divi Theme Builder und wählen Sie „Globalen/benutzerdefinierten Header hinzufügen“.

Dropdown-Postkategorien

Beginnen Sie mit dem Erstellen eines globalen Headers

Wählen Sie dann "Globalen Header erstellen", um zum Vorlageneditor weitergeleitet zu werden.

Dropdown-Postkategorien

Abschnittseinstellungen

Hintergrundfarbe

Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und wenden Sie eine weiße Hintergrundfarbe an.

Hintergrundfarbe: #FFFFFF

Dropdown-Postkategorien

Abstand

Wechseln Sie zur Registerkarte Design und entfernen Sie alle standardmäßigen oberen und unteren Polster.

Obere Polsterung: 0px
Untere Polsterung: 0px

Dropdown-Postkategorien

Zeile 1 hinzufügen

Spaltenstruktur

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

Dropdown-Postkategorien

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen entsprechend:

Benutzerdefinierte Dachrinnenbreite verwenden: Ja
Dachrinnenbreite: 1
Breite: 95%
Maximale Breite: 100%

Dropdown-Postkategorien

Abstand

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

Obere Polsterung: 0px
Untere Polsterung: 0px

Dropdown-Postkategorien

Menümodul zu Zeile hinzufügen

Menü auswählen

Fügen Sie dann ein Menümodul hinzu und wählen Sie das Menü aus, das Sie im ersten Teil dieses Tutorials geändert haben.

Dropdown-Postkategorien

Logo hochladen

Laden Sie als nächstes ein Logo hoch.

Dropdown-Postkategorien

Menütexteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Menütexteinstellungen wie folgt:

Menüschrift: Roboto Mono
Menüschriftart: Großbuchstaben
Menütextfarbe: #000000
Menütextgröße: 18px
Menübuchstabenabstand: -1px

Dropdown-Postkategorien

Dropdown-Menüeinstellungen

Ändern Sie auch die Farbe der Dropdown-Menüzeile.

Farbe der Dropdown-Menüzeile: #FFFFFF

Dropdown-Postkategorien

Symboleinstellungen

Ändern Sie als Nächstes die Farbe des Hamburger-Menüsymbols in den Symboleinstellungen.

Hamburger Menüsymbol Farbe: #000000

Dropdown-Postkategorien

CSS-Klasse

Und vervollständigen Sie die Moduleinstellungen, indem Sie eine CSS-Klasse hinzufügen.

CSS-Klasse: category-menu

Dropdown-Postkategorien

3. Erstellen Sie ein Blog-Dropdown-Design

Zeile 2 hinzufügen

Spaltenstruktur

Sobald Ihre Zeile mit dem Menümodul vorhanden ist, ist es an der Zeit, das Dropdown-Menü mit visuellen Blogkategorien zu erstellen. Fügen Sie dazu eine neue Zeile mit zwei gleich großen Spalten hinzu. Die gesamte Zeile wird unser Dropdown-Menü für den Blog-Menüpunkt sein.

Dropdown-Postkategorien

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen und verwenden Sie eine weiße Hintergrundfarbe.

Hintergrundfarbe: #FFFFFF

Dropdown-Postkategorien

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
Breite: 80vw (Desktop), 100% (Tablet & Telefon)
Max. Breite: 50vw (Desktop), 100 % (Tablet & Telefon)

Dropdown-Postkategorien

Abstand

Ändern Sie als nächstes die Padding-Werte.

Obere Polsterung: 10px
Untere Polsterung: 10px
Linke Polsterung: 10px
Untere Polsterung: 10px

Dropdown-Postkategorien

Box Schatten

Wir verwenden auch einen subtilen Boxschatten.

Stärke der Box-Schattenunschärfe: 30px
Schattenfarbe: rgba(0,0,0,0.13) (Desktop), rgba(0,0,0,0) (Tablet & Telefon)

Dropdown-Postkategorien

CSS-Klasse

Dann fügen wir unserer Zeile zwei CSS-Klassen hinzu. Diese CSS-Klassen (in Kombination mit späterem Code) helfen uns, den gesamten Zeilencontainer als Dropdown-Menü im Blog-Menüpunkt zu platzieren.

CSS-Klasse: Dropdown-Menü Dropdown-Menü-1

Dropdown-Postkategorien

Position

Wechseln Sie zur Registerkarte Erweitert und positionieren Sie die Zeile ebenfalls neu.

Position: Absolut (Desktop), Relativ (Tablet & Telefon)
Ort: Oben rechts
Vertikaler Versatz: 100px (Desktop), 0px (Tablet & Telefon)
Z-Index: 11

Dropdown-Postkategorien

Beide Spalten Hauptelement

Vervollständigen Sie zu guter Letzt die Zeileneinstellungen, indem Sie dem Hauptelement jeder Spalte eine Zeile CSS-Code hinzufügen. Dies wird uns helfen, die Spaltenstruktur auf kleineren Bildschirmgrößen beizubehalten.

width: 50% !important;

Dropdown-Postkategorien

Textmodul zu Spalte 1 hinzufügen

Kategorienamen hinzufügen

Zeit, unsere Blog-Kategorien visuell darzustellen! Fügen Sie in Spalte 1 ein erstes Textmodul hinzu und fügen Sie den Kategorietitel in das Inhaltsfeld ein.

Dropdown-Postkategorien

Kategorielink hinzufügen

Fügen Sie als Nächstes einen Link zu Ihrer Kategorie hinzu.

Dropdown-Postkategorien

Hintergrund mit Farbverlauf

Wenden Sie dann den folgenden Farbverlaufshintergrund an:

Farbe 1: rgba(0,0,0,0.08)
Farbe 2: #0a0a0a
Startposition: 60%
Endposition: 60%
Farbverlauf über dem Hintergrundbild platzieren: Ja

Dropdown-Postkategorien

Hintergrundbild

Laden Sie ein Hintergrundbild Ihrer Wahl hoch. Wenn Sie genau das gleiche Ergebnis wie in diesem Tutorial wünschen, laden Sie eine der Illustrationen hoch, die Sie in dem Ordner finden, den Sie zu Beginn dieses Beitrags herunterladen konnten.

Hintergrundbildgröße: Tatsächliche Größe
Hintergrundbild wiederholen: Wiederholung X (horizontal)

Dropdown-Postkategorien

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

Textschriftart: Roboto Mono
Schriftstärke des Textes: Fett
Textfarbe: #ffffff
Textgröße: 1,9 vw (Desktop), 3 vw (Tablet), 3,5 vw (Telefon)
Text Buchstabenabstand: -0.1vw
Textzeilenhöhe: 1em

Dropdown-Postkategorien

Größe

Ändern Sie als nächstes die Größeneinstellungen.

Breite: 99%
Modulausrichtung: Links

Dropdown-Postkategorien

Abstand

Ändern Sie auch die Abstandseinstellungen.

Unterer Rand: 10px
Rechte Marge: 1% (Tablet & Telefon)
Obere Polsterung: 60% (Desktop), 40% (Tablet & Telefon)
Untere Polsterung: 4%
Linke Polsterung: 2%

Dropdown-Postkategorien

Hauptelement-CSS

Und vervollständigen Sie die Moduleinstellungen, indem Sie dem Hauptelement des Moduls eine Zeile CSS-Code hinzufügen.

cursor: pointer;

Dropdown-Postkategorien

Textmodul klonen und Duplikat in Spalte 2 platzieren

Wenn Sie das erste Textmodul fertiggestellt haben, klonen Sie das Modul und platzieren Sie das Duplikat in Spalte 2.

Dropdown-Postkategorien

Textmodul in Spalte 2 ändern

Kategoriename und Link ändern

Ändern Sie den Kategorietitel und den Link im Duplikatmodul.

Dropdown-Postkategorien

Hintergrundbild ändern

Ändern Sie auch das Hintergrundbild. Die Abbildung finden Sie im Download-Ordner.

Hintergrundbild wiederholen: Keine Wiederholung

Dropdown-Postkategorien

Größe ändern

Ändern Sie als nächstes die Modulausrichtung in den Größeneinstellungen.

Modulausrichtung: Rechts

Dropdown-Postkategorien

Beide Module einmal klonen

Sobald Sie beide Module abgeschlossen haben (eines in jeder Spalte), können Sie beide einmal klonen.

Dropdown-Postkategorien

Kategorienamen und Links ändern

Ändern Sie die Kategorienamen und Links in den duplizierten Modulen.

Dropdown-Postkategorien

Hintergrundbilder ändern

Zusammen mit den Hintergrundbildern. Die neuen Illustrationen finden Sie in der Mappe, die Sie am Anfang dieses Beitrags herunterladen konnten.

Hintergrundbildgröße: Fit
Hintergrundbild wiederholen: Keine Wiederholung

Dropdown-Postkategorien

Hintergrundbildgröße: Fit
Position des Hintergrundbilds: Unten rechts

Dropdown-Postkategorien

4. CSS- und JQuery-Code hinzufügen

Codemodul unter Menümodul in Zeile 1 hinzufügen

Nachdem Sie die Zeile mit den Kategorienamen des Dropdown-Menüs ausgefüllt haben, fügen Sie ein Code-Modul zur ersten Zeile in Ihrem Abschnitt direkt unter dem Menü-Modul hinzu.

Dropdown-Postkategorien

CSS-Code hinzufügen

Fügen Sie dem Codemodul die folgenden CSS-Codezeilen hinzu:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

Dropdown-Postkategorien

JQuery-Code hinzufügen

Zusammen mit etwas JQuery-Coe, das hilft, die Zeile mit den Kategorien in Ihrem Blog-Menüelement zu platzieren. Stellen Sie sicher, dass Sie den JQuery-Code zwischen Skript-Tags platzieren, wie Sie im Druckbildschirm unten sehen können.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

Dropdown-Postkategorien

5. Aktivieren Sie die CSS-Klasse, sobald Sie mit dem Anpassen der Blog-Dropdown-Elemente fertig sind

Sobald Sie alle Dropdown-Elemente angepasst haben, müssen Sie nur noch eines tun: die gesamte Zeile mit den Dropdown-Menüelementen ausblenden. Dies, in Kombination mit einer Ladefunktion in unserem Code, verhindert, dass das Dropdown-Menü beim Laden der Seite angezeigt wird. Sobald Sie diese CSS-Klasse aktivieren, sehen Sie die zweite Zeile im Visual Builder nicht mehr, können aber im Drahtmodellmodus darauf zugreifen und/oder die CSS-Klasse vorübergehend deaktivieren, wenn Sie Änderungen an Ihrem Dropdown-Menü vornehmen. Um die Klasse zu aktivieren, entfernen Sie die Klammern '/* */' am Anfang und am Ende der CSS-Klasse.

Dropdown-Postkategorien

6. Weitere Dropdowns für Post-Kategorien hinzufügen

Blog-Kategoriezeile klonen

Wenn Sie weitere Kategorie-Dropdowns hinzufügen möchten, können Sie die gesamte von Ihnen erstellte Dropdown-Zeile klonen.

Dropdown-Postkategorien

Auf doppelte Zeile im Ebenenbedienfeld zugreifen

Da wir auf dem Desktop die absolute Positionierung verwenden, werden die Zeilen übereinander platziert. Um einzeln auf die Zeilen zuzugreifen, öffnen Sie das Ebenenbedienfeld in Ihrem Divi Builder und öffnen Sie die Einstellungen der duplizierten Zeile.

Dropdown-Postkategorien

CSS-Klasse für doppelte Zeilen ändern

Ändern Sie die zweite CSS-Klasse in Ihrer doppelten Zeile. Stellen Sie sicher, dass die von Ihnen verwendete Nummer fortlaufend ist.

CSS-Klasse: Dropdown-Menü Dropdown-Menü-2

Dropdown-Postkategorien

CSS-Klassen zu Menüelementen in der Darstellung hinzufügen

Navigieren Sie dann zurück zu Ihrem WordPress-Menü in Ihrem Dashboard und fügen Sie die folgenden CSS-Klassen zu einem anderen Menüpunkt hinzu und Sie sind fertig:

CSS-Klassen: First-Level First-Level-2

Dropdown-Postkategorien

Vorschau

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

Desktop

Dropdown-Postkategorien

Handy, Mobiltelefon

Dropdown-Postkategorien

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit Ihrem Divi-Header und dem Blog-Menüpunkt kreativ werden. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Blog-Kategorien visuell als Dropdown-Menüelemente einfügen, die auf allen Bildschirmgrößen großartig aussehen. Dieser Ansatz hilft Ihnen, jede einzelne Blog-Kategorie hervorzuheben, während Sie auf den ersten Blick ein minimales Erscheinungsbild beibehalten. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen 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.