Der Unterstrich-Hover-Effekt ist ein beliebtes Stilmittel im Webdesign. Dieser Effekt erzeugt eine visuelle Rückmeldung, wenn Benutzer mit der Maus über Menüpunkte fahren, was die Benutzererfahrung verbessert und die Navigation intuitiver macht.
Das Divi Menü Modul spielt eine zentrale Rolle bei der Erstellung attraktiver Navigationsmenüs in WordPress. Mit Divi kannst du benutzerdefinierte Menüs gestalten, die nicht nur funktional, sondern auch ästhetisch ansprechend sind.
In diesem Tutorial lernst du:
- Wie du CSS verwendest, um den Unterstrich-Hover-Effekt zu erstellen.
- Die Bedeutung von Pseudo-Elementen und deren Einsatz im Divi Menü.
- Schritt-für-Schritt-Anleitungen zur Implementierung des Effekts im Divi Menü Modul.
Grundlagen von CSS und Pseudo-Elementen
CSS (Cascading Style Sheets) ist eine Sprache, die verwendet wird, um das Aussehen und Layout von Webseiten zu gestalten. Mit CSS kannst du Farben, Schriftarten, Abstände und vieles mehr anpassen. Ein zentraler Aspekt von CSS ist seine Fähigkeit, Stile auf HTML-Elemente anzuwenden, um die Benutzererfahrung zu verbessern.
Was sind Pseudo-Elemente?
Pseudo-Elemente sind spezielle Schlüsselwörter in CSS, die es dir ermöglichen, bestimmte Teile eines Elements zu stylen. Diese Elemente existieren nicht im HTML-Code selbst, sondern werden durch CSS generiert. Zwei der am häufigsten verwendeten Pseudo-Elemente sind ::before und ::after. Diese können dazu genutzt werden, zusätzliche Inhalte vor oder nach einem HTML-Element einzufügen, was ideal für Effekte wie den Unterstrich Hover-Effekt ist.
/*SYNTAX */
::after {
content: /* value */;
/* properties */
}
a::after {
display: block;
width: 0;
height: 2px;
background: #cccccc;
transition: width 0.2s;
}
a:hover::after {
width: 100%;
}
Verwendung von CSS-Klassen
Mit CSS-Klassen kannst du spezifische Stile auf bestimmte Elemente anwenden. Diese CSS-Klassen nutzt du dann im Divi Menü, um das Erscheinungsbild deiner Menülinks zu verändern. Dies erlaubt die gezielte Anpassung eines einzelnen Elements – ohne den restlichen Code zu beeinflussen.
.mein-menu-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #cccccc;
transition: width 0.2s;
}
.mein-menu-link:hover::after {
width: 100%;
}
Durch die Kombination von CSS, Pseudo-Elementen und CSS-Klassen hast du alle Werkzeuge zur Verfügung, um dynamische und ansprechende Effekte zu kreieren.
Vorbereitung des Divi Menüs
Divi Menü Modul: Das Divi Menü Modul ist ein leistungsstarkes Tool von Elegant Themes, das es dir ermöglicht, benutzerdefinierte und stilvolle Navigationsmenüs in WordPress zu erstellen. Mit diesem Modul kannst du das Layout, die Farben und die Typografie deines Menüs anpassen, um sicherzustellen, dass es perfekt zu deinem Website-Design passt.
Erstellen eines benutzerdefinierten Menüs mit dem Divi Builder
Um ein benutzerdefiniertes Menü mit dem Divi Builder zu erstellen, folge diesen Schritten:
Navigiere zum WordPress Dashboard:
- Gehe zu Aussehen > Menüs.
- Erstelle ein neues Menü oder bearbeite ein bestehendes Menü.
Füge Menüelemente hinzu:
- Wähle Seiten, Beiträge, Kategorien oder benutzerdefinierte Links aus und füge sie deinem Menü hinzu.
- Ordne die Elemente per Drag & Drop an.
Aktiviere den Divi Builder:
- Gehe zur Seite oder zum Beitrag, wo du dein Menü implementieren möchtest.
- Aktiviere den Divi Builder und füge eine neue Zeile hinzu.
Füge das Menü Modul hinzu:
- Klicke auf das "+" Symbol, um ein neues Modul hinzuzufügen.
- Wähle das Menü-Modul aus der Liste der verfügbaren Module.
Passe das Design an:
- Im Modul-Editor kannst du verschiedene Einstellungen ändern, wie z.B. das Layout des Menüs (horizontal oder vertikal), die Schriftart, Farben und Abstände.
- Verwende die erweiterten Designoptionen für weitere Anpassungen.
Durch diese Schritte erstellst du ein individuelles und stilvolles Navigationsmenü mit dem Divi Menü Modul.
Erstellung des Unterstrich Hover-Effekts mit CSS
1. Anlegen einer benutzerdefinierten CSS-Klasse für das Menü
Um den Unterstrich Hover-Effekt zu implementieren, müssen wir zunächst eine benutzerdefinierten CSS-Klasse.
Füge deinen CSS-Code unter Divi > Theme Optionen > Eigenes CSS hinzu. Den Namen kannst du frei festlegen, er muss nur einzigartig sein. Diese Klasse können wir dann dem gewünschten Menüpunkt zuweisen, z.B. meinhoverlink.
/* Beispiel einer benutzerdefinierten Klasse */
.meinhoverlink a {
position: relative;
text-decoration: none; }
2. Verwendung von ::after oder ::before zur Erstellung des Unterstrichs und Anpassung seiner Position und seines Aussehens
Benutze Pseudo-Elemente wie ::after oder ::before, um den eigentlichen Unterstrich zu erstellen. Diese Elemente erlauben es dir, zusätzlichen Inhalt vor oder nach einem Element hinzuzufügen, ohne das HTML-Dokument direkt ändern zu müssen.
.meinhoverlink a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #e75151; /* Farbe des Unterstrichs */
visibility: hidden;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
}
3. Definition der Stile für den Hover-Zustand und Unterschiede zwischen dem normalen Zustand und dem Hover-Zustand
Beim Hover-Zustand wird der Unterstrich sichtbar gemacht und animiert. Dies erreichst du durch das Ändern der visibility und transform Eigenschaften.
.meinhoverlink a:hover::after {
visibility: visible;
transform: scaleX(1);
}
4. Übergangseigenschaft für einen sanften Effekt und Anpassung der Geschwindigkeit des Effekts
Die Übergangseigenschaft (transition) sorgt dafür, dass der Wechsel zwischen Normalzustand und Hover-Zustand glatt verläuft.
.meinhoverlink a::after {
transition: transform 0.3s cubic-bezier(0.3, 0.75, 0.3, 1);
}
Erklärung der Funktion:
- Die Werte
(0.25, 0.8, 0.25, 1)bestimmen die Beschleunigungskurve. - Diese Kurve sorgt dafür, dass die Animation am Anfang schnell beginnt, dann langsamer wird und zum Schluss wieder etwas schneller abläuft.
Mit diesen Schritten hast du deinen Unterstrich Hover-Effekt für dein Divi Menü erstellt!
Glückwunsch!
Benutzerdefiniertes CSS zuweisen
WordPress fügt automatisch spezielle Klassen wie current-menu-item zu aktiven Menüelementen hinzu. Verwende diese Klasse, um spezifische Stile für das aktive Element festzulegen.
Hier ist der Beispielcode für den Unterstrich Hover-Effekt im Divi Menü Modul. Dieser Code kann direkt in das Custom CSS-Feld deines Divi-Themes eingefügt werden (siehe oben).
/* Benutzerdefinierter Menülink */
.meinhoverlink a::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #e75151;
transition: width .3s ease-in-out;
}
/* StileHover-Zustand */
.meinhoverlink a:hover::after {
width: 100%;
}
/* Aktiven Link hervorheben */
.meinhoverlink .current-menu-item a::after {
width: 100%;
}
Schritt-für-Schritt-Anleitung zur Implementierung
Zuweisen der benutzerdefinierten Klasse zum Menü:
- Gehe zu deinem WordPress-Dashboard.
- Wähle Design > Menüs und wähle das Menü aus, das du anpassen möchtest.
- Klicke auf die Bildschirmeinstellungen oben rechts und aktiviere die Option CSS-Klassen.
- Füge deine CSS-Klasse (z.B.
meinhoverlink)als Klasse zu jedem Menüpunkt hinzu.
Speichern und Überprüfen:
- Speichere deine Änderungen und aktualisiere deine Webseite.
- Bewege den Mauszeiger über die Menüpunkte, um den Unterstrich Hover-Effekt zu sehen.
Dieser einfache, aber effektive CSS-Trick verleiht deinem Divi-Menü eine moderne und professionelle Note.
Fazit und weitere Ressourcen
Mit den in diesem Tutorial erlernten Techniken kannst du deinem Divi Menü ein professionelles und ansprechendes Design verleihen.
Zusätzliche Ressourcen rund um WordPress und Divi findest du hier.
Tipp 1: Mehr Tipps bekommst du in meiner Divi Masterclass.
Tipp 2: Die Divi Masterclass ist in unserem Divi Bundle für 24 Euro enthalten!
Tipp 3: WorkShop: WordPress von A bis Z
Diese Ressourcen helfen dir dabei, Divi zu meistern 🙂