Ein Menü ist weit mehr als ein simples Element. Es ist der erste Eindruck, den deine Besucher von deiner Website bekommen – eine Einladung, die den Weg zu deinen Inhalten weist.
Mit Divi hast du gleich zwei Möglichkeiten: Das klassische Standardmenü über den WordPress-Customizer und das flexible Theme-Builder-Menü.
Beide Systeme haben ihre Vor- und Nachteile. Zudem sind die Design-Möglichkeiten mit Bordmitteln eher beschränkt. Das trifft insbesondere auf die Menus auf Mobilgeräten zu. Dem werden wir mit ein wenig CSS zu Leibe rücken.
Dieser Beitrag geht auf die Anpassungen des Divi Standard-Menüs ein. Die Erstellung eines Theme-Builder-Menus wird Inhalt eines anderen Blogposts.
Inhalt
1. Standard-Menü vs. Theme-Builder-Menü – Wo liegt der Unterschied?
Das Standardmenu
Das Standardmenu ist ein einfach aufgebautes, klassisches Navigationsmenu ohne viel Schnick-Schnack. Dieses kann rudimentär im Customizer -> Header & Navigation -> Primäre Menuleiste angepasst werden (Layout, Farben und Schriftarten).
Standarmässig zeigt Divi – eben – das Standardmenu an:
Für „nüchterne“ Websites reicht dieses Standardmenu völlig aus. Das Menu ist Sticky und schrumpft (nur auf dem Desktop!), und mit nur einem Mausklick wird das Menu im Vollbild angezeigt (Desktop und Mobile). Cool.
Das Themebuilder Menu
Das eigene Menu – bzw. ein eigener Header mit Menu – kann im Divi Themebuilder angelegt werden:
-> Divi -> Theme Builder -> Globale Kopfzeile hinzufügen
Füge eine Zeile ein und wähle dann das Modul „Menü“. Das Menu muss hier komplett selbst gestylt werden, inkl. aller Abstände.
Sobald Du im Themebuilder eine eigene Kopfzeile anlegst, verschwindet der gesamte Abschnitt „Header & Navigation“ für das Standard-Menu im Customizer.
Das selbst erstellte Menu mit dem Themebuilder kann mannigfaltig gestylt werden mit Divi Bordmitteln. Das gilt allerdings nur für den Desktop. Für etwas „speziellere“ Menus auf Mobilgeräten kommt man ohne CSS nicht weiter.
2. Standardmenu ausblenden
Es kann vorkommen, dass du weder das Standardmenu noch ein eigenes Menu verwenden willst, für eine spezifische Landingpage zum Beispiel. So blendest Du das Standardmenu aus:
Möglichkeit 1: Seitenweise ausblenden
Wähle aus der linken Seitenleiste in WordPress „Seiten“, unter der entsprechenden Seite -> „Bearbeiten“, dann rechts unter -> „Template“ -> „Blank-Page“. Und zack: das Menu ist weg.
Damit verschwindet das Menu und die Kopfzeile (Top Menu Bar) genau für diese Seite.
Wenn Du das Menu komplett weghaben möchtest, gibt es die Möglichkeit 2.
Möglichkeit 2: Komplett ausblenden
Unter „Design“ -> „Theme-Datei-Editor“ -> „style.css“ oder im Customizer folgenden Code eingeben:
/* Divi Menu verbergen */
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}Soll die Kopfleiste verschwinden, entferne im Customizer -> Header & Navigation -> Headerelemente alle Einträge oder füge folgenden Code ein:
/*-------Top Menubar ausblenden-------*/
#top-header {
display: none !important;
}Nun sind Menu und Top-Header für die gesamte Website entfernt.
💡 Für die Möglichkeit 2 empfehle ich die Erstellung eines Divi-Child-Themes, um die eigenen CSS-Anweisungen vor Updates zu schützen. Sonst sind diese Anweisungen nämlich nach einem Divi-Update wieder weg. Wie du das tun kannst, liest Du hier.
3. Standard-Menü mit Call-to-Action Button
Du willst, dass der Menüpunkt „Jetzt buchen“, „Kontakt“ oder „Gratis-Check“ richtig ins Auge fällt? Mit ein paar kleinen Design-Tricks verwandelst du einen normalen Menüeintrag in einen Call-to-Action, der klickt. Wir zeigen dir, wie du das direkt im WordPress-Menü definierst.
So soll das Menu aussehen:
Dazu gehst Du auf -> Design -> Menüs -> Menüeinträge hinzufügen -> Individuelle Links und legst als letzten Menupunkt „Jetzt buchen“ oder ähnlich an. Vergib eine CSS-Klasse.
Wenn kein Feld „CSS-Klasse“ angezeigt wird, öffnest Du ganz oben rechts „Ansicht anpassen“ und klickst die Checkbox „CSS-Klassen“ an.
Füge nun in der style.css-Datei im Theme-Datei-Editor, im Customizer oder in den Divi Optionen folgenden CSS-Code ein:
/* Menu CTA stylen Desktop */
@media (min-width: 980px) {
.ad-cta {
padding: 0!important;
border-radius: 30px;
border: solid 2px #045ae2; /* Rahmenfarbe */
transition: 0.3s;
background-color: #045ae2; /* Hintergrundfarbe */
}
.ad-cta a{
color: #ffffff!important; /* Textfarbe */
padding: 15px 30px 15px 30px!important;
}
.et-fixed-header #top-menu .ad-cta a{
color: #ffffff!important; /* Textfarbe */
padding: 15px 30px 15px 30px!important;
}
/* Hover Style */
#top-menu-nav .ad-cta a:hover {
color: #045ae2 !important;
}
.ad-cta:hover {
border: solid 2px #045ae2; /* Hover Rahmenfarbe */
background: #ffffff; /* Hover Hintergrundfarbe */
}
}
Den Button möchten wir für Mobile Menüs etwas anders stylen.
Dazu fügst du den zusätzlichen CSS-Code ein:
/* Menu CTA stylen Mobile */
@media (max-width: 980px) {
.ad-cta {
padding: 0!important;
border-radius: 30px;
border: solid 2px #045ae2; /* Rahmenfarbe */
transition: 0.3s;
background-color: #045ae2; /* Hintergrundfarbe */
}
.ad-cta a{
text-align: center;
color: #ffffff!important; /* Textfarbe */
padding: 10px 20px 10px 20px!important;
}
}
Du kannst Deine eigene Klasse angeben, und natürlich auch die Farben, Schriftgrösse und das Verhalten bei Hover ändern, wie Du lustig bist.
4. Icons vor Menupunkten hinzufügen
Jetzt wollen wir das Menu etwas weiter „aufbohren“ und vor jedem Menupunkt ein Icon einfügen. Wir machen das am Beispiel „Home“. Für die restlichen Menüpunkte einfach CSS-Code kopieren und das Icon ändern:
Um das zu erreichen, müssen alle Menüeinträge über eine CSS-Klasse verfügen. Ich habe jedem Eintrag, ausser dem Call-to-Action-Button, zwei Klassen hinzugefügt:
- ad-home (bzw. ad-angebot usw.) wird angesprochen, um das Icon zu hinterlegen und zu stylen
- ad-icon wird angesprochen, um alle Menu-Icons für den Hover-Status oder Active-Link-Status anzusprechen. Dann müssen wir diese Anweisung nur einmal schreiben.
Die Klassen im Menü müssen ohne Punkt (.) angegeben werden. In der CSS-Anweisung muss der Punkt aber hin (.ad-home).
Nun muss nur noch für jeden Eintrag der folgende CSS-Code eingefügt werden:
/* Icons den Menueinträgen hinzufügen */
.ad-home > a:before {
font-family: 'ETMODULES';
content: '\e009';
text-align: center;
vertical-align: middle;
margin-right: 5px;
margin-left: -5px;
color: #045ae2;
font-size: 1em;
transition: all .3s ease;
}Zur Erklärung:
- font-family: „ETMODULES“ legt fest, dass die Divi-Icons verwendet werden sollen.
- content:“\e009″ legt fest, welches Icon verwendet soll
Ein komplette Übersicht über die Divi-Icons und deren Code gibt es hier.
Um die Stati für Hover und Active festzulegen, können wir noch diesen Code hinzufügen:
/* Farbe ändern im Hover- und Active-Status */
.ad-icon a:hover:before {
color: #2da3f2 !important;
transition: all .3s ease;
}
.ad-icon a:active:before {
color: #2da3f2 !important;
transition: all .3s ease;
}Viel einfacher wäre die Einbindung von Icons mit Font-Awesome. Dann müsste vor jedem Menueintrag nur die CSS-Klasse eingefügt werden. Da wir aber Wert legen auf DSGVO-konforme Websites, müssten wir Font-Awesome wiederum lokal einbinden.
Eigene Icons aus der Mediathek verwenden
Man kann auch eigenen Icons verwenden, die man zuvor in die Mediathek geladen hat. Dann ist der Code etwas anders, und wir müssen berücksichtigen, dass Divi dem Standard-Menü bereits ein eigenes Layout verpasst hat, das wir „umbiegen“ müssen. Hier ist der Code:
.ad-icon a {
display: flex;
align-items: center;
}Zuerst werden wir mit der „allgemeinen“ Klasse .ad-icon alle Menüeinträge ansprechen und das von Divi zugewiesene Layout „umbiegen“.
Jetzt können wir das Icon einbinden, das geht am besten mit „Background-Image“:
.ad-home a::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url('/wp-content/uploads/dein-pfad/dein-bild.png');
background-size: contain;
background-repeat: no-repeat;
margin-right: 8px;
vertical-align:middle;
}
Mit „width“ und „height“ lässt sich die Grösse des Icons anpassen. Dieser Code passt übrigens auch für Mobilgeräte. Man könnte allerdings den gleichen Code mit einem Media Query (z.B. @media (max-width: 980px) für Mobilgeräte anpassen, z.B. den margin-right oder die Icon-Grösse ändern.
5. Mobile Menu mit „X“ schliessen
Standardmässig wird das Divi-Menü auf Mobilgeräten als Hamburger angezeigt, und zwar im geschlosssenen wie im geöffneten Zustand. Viel schöner ist es aber, ein Kreuz „X“ zum Schliessen anzuzeigen, wenn das Menü geöffnet ist.
Auch das können wir mit ein wenig CSS-Code erreichen:
/* Offenes Hamburger-Menu mit "X" ersetzen */
.mobile_menu_bar:before {
color: #045ae2;
content: "\63";
}
.mobile_menu_bar::before {
display: block;
transition: all .4s ease;
}
.mobile_nav.opened .mobile_menu_bar::before {
content: "\51";
transform: rotate(90deg);
}
6. Bonus: Footer Menu nicht als Hamburger
Manchmal möchte man in seiner Fusszeile – dem Footer – das Menü nochmal abgebildet haben. Ich empfehle – wenn man mit Divi arbeitet – den Footer immer mit dem Themebuilder zu gestalten. Das erspart einem den Umweg über die Widgets.
Was auf dem Desktop noch mehr oder weniger – ohne weiteres Styling – ok aussieht…
…sieht auf Mobilgeräten so aus:
Ein bisschen schrecklich, nicht?
Aber mit einer paar Zeilen CSS können wir das Problem beheben:
/*-------Hamburger Menu nicht als Hamburger darstellen-------*/
@media only screen and (max-width : 980px) {
footer .et_pb_menu__menu {
display: block !important;
}
footer .et_mobile_nav_menu {
display: none!important;
}
}
Das sieht schon viel besser aus. Mit ein bisschen zusätzlichem Styling, Kontaktdaten und evtl. rechtlichen Links ergibt das einen tollen Footer.
So, das war’s mit diesem Beitrag. Ich wünsche Dir viel Spass beim Umsetzen, Spielen, Basteln, oder einfach beim Nachvollziehen und Lernen.
Hol Dir Divi noch heute: Risikofreie 30-Tage-Geld-zurück-Garantie! (Affiliate Link)
0 Kommentare