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

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.

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:

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):

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?