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);
}

Wider den Spambots: Maillinks sicherer machen

17. Juli 2022 CSS-Stylesheet | HTML | Plugins | Sicherheit | Kontaktformular-Modul

Nun ja: So richtig sicher vor Spambots auf Harvest-Tour sind Ihre Mailadressen nicht, sobald Sie diese auf einer Website anzeigen. Aber immerhin: Es gibt ein paar Tricks, wie Sie wenigstens etwas mehr Sicherheit erreichen können. Und wir räumen ...

Schaltflächen im Divi-Visual Builder links gruppieren

8. September 2024 CSS-Stylesheet | Divi-Theme

Der Visual-Builder des Divi-Themas bietet am unteren Rand des Monitors eine Reihe von Schaltflächen, mit denen Sie verschiedene Aktionen durchführen können – etwa das Speichern der Seite etc. Einige dieser Schaltflächen befinden sich unten ...

Call-To-Action-Special #1: Aus einfachem Text-Link einen ansprechenden Handlungsaufruf erstellen

25. Juni 2025 CSS-Stylesheet | Divi-Theme | Handlungsaufruf-Modul | Text-Modul

Weitere Informationen auf Ihren Seiten und in Ihren Beiträgen zu verlinken, ist bestimmt eine gute Idee. Richtig auffällig wird der Link aber erst dann, wenn Sie ihn als Button darstellen. Geht ganz einfach.

DashIcons – die Alternative zu Font Awesome

25. Januar 2021 CSS-Stylesheet | Fonts & Icons | WordPress

Vor kurzem haben wir Ihnen gezeigt, wie Sie Font-Awesome-Icons auf Ihrer Website verwenden. Es gibt aber noch eine Alternative, welche direkt in WordPress sitzt. Die so genannten Dash-Icons auf der Website einzusetzen ist ebenfalls nicht ...

Keine Inhalte gefunden.

Divi-Module

Dr.-Code-Specials

Geplante Beiträge

Child-Theme erstellen

Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden.

mehr Infos

Member-Bereich

Dr. Code bietet Ihnen kostenlosen Zugang zu unserer umfangreichen Hack-Datenbank. Neben den bislang veröffentlichten Beiträgen und Tricks sind aberdutzende weitere Themen für Member bereits jetzt verfügbar.

Jetzt kostenlos und spamfrei registrieren

Themenidee?

Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.

Themenvorschlag

Treffen Sie Vorsichtsmassnahmen bei der Nutzung der Inhalte dieser Website. Auch wenn die Tipps und Tricks erprobt sind, kann mal was schiefgehen.

Wir empfehlen, möglichst in einer Testumgebung zu arbeiten und/oder Sicherungskopien anzulegen, bevor Sie ans Werk gehen.

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

Wider den Spambots: Maillinks sicherer machen

Schaltflächen im Divi-Visual Builder links gruppieren

Call-To-Action-Special #1: Aus einfachem Text-Link einen ansprechenden Handlungsaufruf erstellen

DashIcons – die Alternative zu Font Awesome

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Child-Theme erstellen

Member-Bereich

Themenidee?

Werbung

Pin It on Pinterest