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 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?

Blog-Modul-Special #2: Gesamte Beitragsvorschau im Divi-Blog-Modul verlinken

24. Dezember 2022 CSS-Stylesheet | Divi-Theme | Blog-Modul

Normalerweise wird im Blog-Modul des Divi-Themes nur der Titel, das Bild und (sofern vorhanden) der Read-More-Link mit einer Verknüfung auf den vollständigen Beitrag verlinkt. Das lässt sich aber soweit ändern, dass der gesamte Teaser mit dem ...

Google-Maps in Schwarz-Weiss statt farbig

27. April 2025 CSS-Stylesheet | Divi-Theme

Mit dem Karten-Modul des Divi-Themes können Sie auf einfache Weise eine Google-Karte auf Ihrer Website einblenden. Diese wird farbig dargestellt – hin und wieder passt aber die Kartenfarbe nicht zum übrigen Webdesign. Mit ein wenig CSS-Code ...

Informationstext-Module (Blurbs) des Divi-Themes als Teaser verwenden

14. April 2024 CSS-Stylesheet | Divi-Theme

Das Blurb- oder Informationstext-Modul des Divi-Themes ermöglicht es, kurze Textblöcke adrrett darzustellen. Es lässt sich aber auch zu einem eigentlichen Teaser umfunktionieren. Wie Sie dies stylen können, erfahren Sie in diesem Beitrag.

Beitragsbilder im Blog-Modul des Divi-Themes nicht mit dem Beitrag verlinken

13. Juli 2025 CSS-Stylesheet | Divi-Theme

Die Beitragsbilder, welche im Blog-Modul des Divi-Themes gezeigt werden, sind normalerweise mit dem Beitrag verlinkt. Ein Klick – und der Beitrag wird geöffnet. Falls Sie dies stört, können Sie den Link ganz einfach deaktivieren. Sie benötigen ...

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.

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

Variante: Zusatztext nur beim hovern anzeigen

Blog-Modul-Special #2: Gesamte Beitragsvorschau im Divi-Blog-Modul verlinken

Google-Maps in Schwarz-Weiss statt farbig

Informationstext-Module (Blurbs) des Divi-Themes als Teaser verwenden

Beitragsbilder im Blog-Modul des Divi-Themes nicht mit dem Beitrag verlinken

Kategorien

Divi-Module

Dr.-Code-Specials

Neueste Beiträge

Geplante Beiträge

Child-Theme erstellen

Member-Bereich

Themenidee?

Werbung

Pin It on Pinterest