Schritt 1: Füge dem Link, der als Button angezeigt werden soll unter Design > Menüs zuerst die Klasse dt-menu-cta hinzu.
Tipp: Falls du das Feld „CSS-Klassen (optional)“ nicht sehen solltest, kannst du oben rechts unterhalb der Werkzeugleiste deine Ansicht anpassen. Setze im Dropdown Menü unter „Erweiterte Menüeigenschaften anzeigen“ einfach das Häkchen bei „CSS-Klassen“. Dann solltest du das Feld sehen.
Schritt 2: Füge nun folgenden Code in das Stylesheet deines Child-Themes oder in den Custom-CSS Bereich im Divi Theme Customizer ein. Du kannst nun deinen Button sowie deine Menühöhe individuell im CSS anpassen.
/* Button Styling */ .dt-menu-cta a, .et-fixed-header #top-menu .dt-menu-cta a { background: #2ACCB3; /* Button Hintergrundfarbe hier austauschen */ border-radius:25px 25px 25px 25px; /* Radius hier anpassen, oder Zeile komplett entfernen für eckigen Button */ color:#fff !important; padding:12px 20px !important; /* Innenabstand des Buttons hier anpassen */ opacity:1; } @media (min-width:981px) { /* Setzt den oberen und unteren Abstand des Hauptmenüs zurück */ .et_header_style_left #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a, .et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a, .et_header_style_split #et-top-navigation nav > ul > li:not(.dt-menu-cta) > a { padding-bottom:0 !important; } /* Korrigiert die Position des Suchicons */ #et_search_icon:before { top:-10px; } /* Positioniert die Menülinks vertikal mittig */ .et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation { display: flex; align-items: center; } /* Hier Menühöhe anpassen */ .et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation { padding:25px 0 !important; } /* Hier Menühöhe für fixiertes Navgationsmenü anpassen (Menühöhe beim scrollen) */ .et_header_style_left .et-fixed-header #et-top-navigation { padding:15px 0 !important; } }
Hey Tobias,
vielen Dank für diesen Codeschnipsel. Ich hatte schon lange nach einer Lösung in dieser Sache gesucht. Kannst du dir auch eine Variante vorstellen bei der sich der Button farblich verändert (Mouseover)? Ich sende dir gerne mal eien PN für eine Beispielseite.
Viele Grüße Ole
Hey Ole,
vielen Dank für deinen Kommentar! Freut mich, dass dir der Codeschnipsel weitergeholfen hat. Klar, die Variante mit Hover-Effekt macht auf jeden Fall Sinn. Sobald ich die Zeit dafür finde ergänze ich es 🙂 Danke für den Hinweis!
Viele Grüße,
Tobias
Guten Morgen.
Ich bin erst heute auf Deine Seite aufmerksam geworden und finde Deine Idee toll! Hoffe sie wird weiter fortgeführt!
Ich arbeite ähnlich wie Du und bin ebenfalls selbstständiger Webdesigner und (leider) erst vor kurzem auf DIVI aufmerksam geworden. Nun aber ein riesengroßer Fan!
Vielleicht hättest Du Interesse daran, mal unsere Arbeiten untereinander auszutauschen um zu sehen, was der Andere so macht und ggf. wertvolle Tips und Tricks zu erfahren?
Ach ja, fehlt zu diesem Code-Schnippsel nicht noch ein teil?
Würde mich freuen!
Viele Grüße aus dem Rheinland,
Arndt
Hallo Arndt,
vielen Dank für deinen Kommentar! Das freut mich, dass dir meine Tipps gefallen.
Es ist nicht immer einfach, neben meinem Webdesigner Job den Blog regelmäßig mit neuen Tipps zu füttern,
aber ich gebe mein Bestes und bin fest entschlossen, das ganze noch weiter auszubauen 🙂
Besonders die Codeschnipsel sind sehr gefragt… dazu sollen demnächst auch noch weitere folgen.
Ich finde es toll, dass du als selbstständiger Webdesigner ebenfalls Divi für deine Projekte nutzt.
Gerne können wir uns dazu mal austauschen. Ich schreibe dir dazu mal eine PN.
Und ja, du hast Recht. Das Codeschnipsel ist nicht vollständig.
Ich korrigiere das schnellstmöglich.
Danke für den Hinweis!
Viele Grüße,
Tobias