Navigation im Divi-Theme mit einer erläuternden Textzeile ergänzen
7. Februar 2024 | CSS-Stylesheet, Divi-Theme
Der Navigation Ihrer WordPress-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
Ähnliche Beiträge
- Zweite Textzeile zu den Divi-Schaltflächen hinzufügen Eine gute Möglichkeit, zusätzliche Marketinginformationen auf einer Landing-Page bereitzustellen, ist eine zweite Textzeile auf einer Call-to-Action-Schaltfläche. Da es standardmässig keine Möglichkeit gibt, dem Divi-Button eine zweite Textzeile hinzuzufügen, werden wir…
- Hamburger- oder Standard-Navigation: Breakpoint im… Im Divi-Theme wechselt die Navigation standardmässig bei 980px Bildschirmbreite auf das Hamburger-Menu. Das ist meist sinnvoll - aber nicht in jedem Fall. Sie können den so genannten «Breakpoint» darum ganz…
- Divi-Header-Navigation ausblenden Die Header-Navigation in Divi eignet sich nicht für alle Websites gleichermassen. Besonders auf den kleinen One-Pagern, wo alle Inhalte direkt auf der Startseite untergebracht sind, ist der Sinn einer Header-Navigation…
- Divi: Accordion-Inhalte per Link direkt öffnen Mit dem Accordion-Modul aus dem Divi-Theme lassen sich Websites übersichtlich strukturieren. Die einzelnen Accordion-Inhalte lassen sich aber auch über einen Link direkt öffnen. Das ist eine nette Dienstleistung an Ihre…
Kategorien
Divi-Module
Dr.-Code-Specials
Neueste Beiträge
Beliebige Divi-Module, -Zeilen oder -Sektionen per Button-Klick anzeigen oder verstecken
publiziert am 24. April 2024
Slideshow mit wechselnden Bildern – aber statischer Texteinblendung
publiziert am 21. April 2024
WordPress-User ohne Mailadresse einrichten
publiziert am 17. April 2024
Informationstext-Module (Blurbs) des Divi-Themes als Teaser verwenden
publiziert am 14. April 2024
Bullet-Points mit Divi-Icons ersetzen
publiziert am 10. April 2024
sowie 333 weitere publizierte Tipps & Tricks
Geplante Beiträge
Ade Bullet-Points im Footer: Aufzählungspunkte aus der Fusszeile des Divi-Themes entfernen
erscheint am 28. April 2024
Bestätigunsmeldung in Divi-Kontaktformularen stylen
erscheint am 1. Mai 2024
Divi-Button auf ganzer Seiten- oder Spaltenbreite anzeigen
erscheint am 5. Mai 2024
sowie 193 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.
Tipps & Tricks per Mail
Mit dem Newsletter von Dr. Code erhalten Sie sporadich die neuesten Hacks und Tricks zu CSS, Divi, Wordpress & Co. direkt in Ihr Mailpostfach.
Themenidee?
Können wir Ihnen zu einem ganz bestimmten Thema weiterhelfen? Unsere Leserinnen und Leser haben oft die besten Ideen.
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.
Werbung
