Lesefortschritt:

Divi-Menu-Hack #3: Stylishe Designs für das Divi-Menu-Modul

6. Dezember 2023 | CSS-Stylesheet, Divi-Theme

Trick # 298 | Dieser Beitrag beinhaltet 2456 Wörter. – Geschätzte Lesezeit: ca. 13 Minuten.

Das Divi Menu-Modul verfügt über keine Hover-Stile, abgesehen von einer einfachen Änderung der Linkfarbe. Hier finden Sie eine Liste von sieben verschiedenen Hover-Effekten mit animierter Unterstreichung.

Die Stilanpassungen geschehen allesamt mit CSS-Code. Links sehen Sie den Effekt, wenn Sie die Maus über die Menulinks bewegen – rechts den zugehörigen Code.

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style1.

Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.menu-style1 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style1 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
width: 0;
height: 5px;
bottom: 0px;
border-radius:5px;
left: 50%;
transition: 0.4s cubic-bezier(0.25, 0.1, 0, 2.02);
}.menu-style1 ul.et-menu>li>a:hover:before {
width: calc(100% + 5px);
left: calc(5px / -2);
}

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style2.

Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.menu-style2 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style2 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
width: 0;
height: 5px;
bottom: 0px;
left: calc(5px / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
transform: skew(-10deg);
}.menu-style2 ul.et-menu>li>a:hover:before {
width: calc(100% + 5px);
}

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style3.

Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.menu-style3 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style3 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
width: 0;
height: 5px;
bottom: 0px;
right: calc(5px / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
}.menu-style3 ul.et-menu>li>a:hover:before {
width: calc(100% + 5px);
}

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style4.

Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.menu-style4 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style4 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity:0;
height: 5px;
bottom: calc(var(--BottomOffset) + 12px);
width: calc(100% + (5px / 2));
right: calc(5px / -4);
transition: 0.4s cubic-bezier(0,.54,.52,.76);
border-radius: 2px;
}.menu-style4 ul.et-menu>li>a:hover:before {
bottom: 0px;
opacity: 1;
}

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style5.

Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.menu-style5 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style5 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity: 0;
height: 5px;
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (5px / 1.5));
right: calc(5px / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
border-radius: 5px;
}.menu-style5 ul.et-menu>li>a:hover:before {
bottom: 0px;
opacity: 1;
}

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style6.

Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.menu-style6 ul.et-menu>li>a {
position: relative;
z-index:1;
}
.menu-style6 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity: 0;
height: 5px;
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (5px / 1.5));
right: calc(5px / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: rotate(45deg);
transform-origin: left;
}.menu-style6 ul.et-menu>li>a:hover:before {
bottom: 0px;
opacity: 1;
transform: rotate(0);
}

Um diesen Effekt zu nutzen, vergeben Sie dem Divi-Menu die CSS-Klasse menu-style7.

Bearbeiten Sie dafür das Menü-Modul, öffnen Sie «Erweitert», dann «CSS-ID & Klassen» und fügen Sie den Klassennamen unter «CSS-Klasse» ein.
Zusätzlich fügen Sie den folgenden CSS-Code (unter Design/Customizer/Zusätzliches CSS ein.

.menu-style7 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.menu-style7 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: #59B14B;
opacity:0;
height: 5px;
bottom: 0px;
width: calc(100% + (5px / 1.5));
right:calc(5px / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: rotateY(25deg) rotateX(35deg) translate(20px, -20px) skew(-35deg, 10deg);
border-radius:2px;
transform-origin: right;
}.menu-style7 ul.et-menu>li>a:hover:before {
opacity:1;
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
}

Dynamischen Banner aus dem Beitragsbild im Divi-Template anlegen

4. September 2022 CSS-Stylesheet | Divi-Theme | Mediathek | WordPress

Wenn Sie Beitragsbilder als Header in einem besonderen Zuschnitt (etwa im Letterbox-Style mit 1500x500px) anzeigen wollen, stossen Sie mit WordPress an Grenzen. Zwar lassen sich dynamische Beitragsbilder durchaus als Hintergrund verwenden - ...

Bilder wahlweise automatisch oder manuell scrollen

12. Januar 2025 CSS-Stylesheet | Divi-Theme | Bild-Modul | Text-Modul

Sehr grosse und hohe Bilder können im Divi-Theme ganz einfach scrollbar eingebunden werden. Das ist total simpel und kann auch mal hilfreich sein. Der Trick, der zeigt wie's geht, folgt hier.

Ade Bullet-Points im Footer: Aufzählungspunkte aus der Fusszeile des Divi-Themes entfernen

28. April 2024 CSS-Stylesheet | Divi-Theme

Standardmässig fügt das Divi-Theme zu jedem Ihrer Widget-Listenelemente in Ihrem Footer-Bereich Aufzählungspunkte (Bullet-Points) hinzu. Einige Divi-Fusszeilendesigns können mit diesen Aufzählungspunkten arbeiten, aber viele Webdesigner ziehen ...

Divi-Suchsymbol in mobiler Ansicht ausblenden

26. Januar 2021 CSS-Stylesheet | Divi-Theme

Das Suchsymbol im Divi-Theme ist nett - aber besonders auf den kleinen Anzeigen der mobilen Geräte oft eine Platzverschwendung. Die Lupe lässt sich aber ganz einfach ausblenden. Wir zeigen wie.

Divi-Menu-Hack #3: Stylishe Designs für das Divi-Menu-Modul

Dynamischen Banner aus dem Beitragsbild im Divi-Template anlegen

Bilder wahlweise automatisch oder manuell scrollen

Ade Bullet-Points im Footer: Aufzählungspunkte aus der Fusszeile des Divi-Themes entfernen

Divi-Suchsymbol in mobiler Ansicht ausblenden

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Werbung

Pin It on Pinterest