Lesefortschritt:

    Navigation im Divi-Theme mit einer erläuternden Textzeile ergänzen

    7. Februar 2024 | CSS-Stylesheet, Divi-Theme

    Trick # 316 | Dieser Beitrag beinhaltet 933 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.

    Der Navigation Ihrer Word­Press-Website lässt sich eine zweite Zeile mit zusätzlichem Text hinzufügen – Sie benötigen nur das Menümodul des Divi-Themes und ein paar Zeilen CSS-Code. Die zusätzliche Infozeile kann eine unterhaltsame und hilfreiche Methode sein, um Ihren Menülinks mehr Kontext zu geben. Sie können einen Aufruf hinzufügen, den Link erklären oder den Menüpunkt um eine clevere Phrase ergänzen. Ach ja: Einfach umzusetzen ist das ganze auch noch.

    Das Menu-Modul des Divi-Themes ermöglicht, Navigationen einfach darzustellen. «Out of the box» sieht das etwa so aus:

    Um den Menülinks eine zusätzliche Textzeile hinzuzufügen, bearbeiten Sie das entsprechende Menü unter Design/Menüs.

    Öffnen Sie einen der Menülinks – danach können Sie im Feld «Angezeigter Name» den gewünschten Text hinzufügen. Setzen Sie ihn dazu zwischen zwei <span>-Tags. Etwa so: Home<span>Lorem ipsum</span>.

    Wiederholen Sie den Schritt mit den weiteren Menüpunkten.

    Nun benötigen Sie etwas CSS-Code. Diesen fügen Sie in das CSS-Stylesheet Ihrer Website ein. Im Backend unter Design/Customizer/Zusätzliches CSS:

    /* Zusatzzeile in Navigation stylen */
.nav li a span {
display: block;
color: #59B14B;
font-size: 80%;
font-style: italic;
line-height: 1.7em;
}

    Das Styling können Sie natürlich nach Wunsch anpassen. In unserem Fall sieht das Menü nun so aus:

    Damit haben Sie dem Menü eine Unterzeile spendiert, die übrigens ebenfalls verlinkt wird.

    Variante: Zusatztext nur beim hovern anzeigen

    Vielleicht soll der Zusatztext aber nur angezeigt werden, wenn Sie die Maus über den entsprechenden Link bewegen. Hierfür wird der obige Code leicht ergänzt. Kopieren Sie ihn in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS):

    /* Zusatzzeile in Navigation ausblenden */
.nav li a span {
display: none;
}/* Zusatzzeile in Navigation beim hovern anzeigen */
.nav li a:hover span {
display: block;
color: #59B14B;
font-size: 80%;
font-style: italic;
line-height: 1.7em;
}

    Auch diese CSS-Definitionen können Sie natürlich nach eigenem Gusto anpassen. In unserem Fall präsentiert sich das Menü nun so:

    Ziemlich einfach. Nicht wahr?

    Werbung

    Submenu-Special #1: Submenüs mit CSS stylen

    10. Januar 2024 CSS-Stylesheet | Divi-Theme
    Das Submenü im Divi-Theme lässt sich in den Design-Optionen des Menü-Moduls zwar stylen - so richtig anpassen können Sie die Submenüs aber bloss mit CSS. Die dafür nötigen Klassen haben wir in einem Bausatz zusammengestellt. Möge er Ihnen das ...

    Cooler Eselsohren-Effekt im Divi-Theme

    3. Mai 2026 CSS-Stylesheet | Divi-Theme
    Das Erstellen eines Eselsohr-Effekts auf Ihren Elementen der Divi-Website kann eine ansprechende visuelle Note hinzufügen und den Eindruck erwecken, dass eine Ecke der Seite umgeknickt ist. Geht mit Divi und ein wenig CSS ganz einfach.
    Keine Inhalte gefunden.

    Kategorien

    CSS-Stylesheet Divi-Theme Fonts & Icons functions.php header.php htaccess HTML Mediathek NAS Plugins Scripts SEO Sicherheit SocialMedia Word­Press wp-config.php

    Divi-Module

    Akkordeon-Modul Audio-Modul Bild-Modul Blog-Modul Button-Modul Code-Modul Countdown-Modul Filterbares Portfolio Galerie-Modul Handlungsaufruf-Modul Kontaktformular-Modul Login-Modul Menu-Modul Portfolio-Modul Posttitel-Modul Registerkarten-Modul Seitenleisten-Modul Slider-Modul Suche-Modul Testimonial-Modul Text-Modul Umschalter-Modul Video-Modul

    Dr.-Code-Specials

    Anker-Special Aufräum-Special Bilder-Special Blog-Modul-Special Call-To-Action-Special Dateidownload-Special Eyecatcher-Special Font-Special Icon-Special Login-Special

    Neueste Beiträge

    Word­Press: Login-Zwang für bestimmte IPs deaktivieren
    publiziert am 27. Mai 2026

    Starke Passwörter erzwingen
    publiziert am 24. Mai 2026

    Word­Press-Bildskalierung: Bildergrösse selber festlegen
    publiziert am 20. Mai 2026

    Schwarze Word­Press-Admin-Bar nach Login ein- und ausblenden
    publiziert am 17. Mai 2026

    Hexagon-Bildergalerie – Marke «Eigenbau»
    publiziert am 13. Mai 2026

    sowie 569 weitere publizierte Tipps & Tricks

    Geplante Beiträge

    RSS-Feed auf der Website anzeigen
    >>> erscheint am 31. Mai 2026

    Word­Press-Fehlermeldungsseite stylen
    >>> erscheint am 3. Juni 2026

    Immer aktuelle Backups: Word­Press-Datenbank automatisch sichern
    >>> erscheint am 7. Juni 2026

    sowie 163 weitere geplante Themen

    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 Vor­sichts­mass­nah­men 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 Test­um­ge­bung zu arbeiten und/oder Si­che­rungs­ko­pien anzulegen, bevor Sie ans Werk gehen.

    Werbung

     

    Pin It on Pinterest

    Share This