Beiträge zum Divi-Menu-Modul
Wir empfehlen Ihnen den Einsatz eines Child-Themes – damit sind Sie sicher, dass Ihre Anpassungen bei einem Theme-Update nicht überschrieben werden. Wie Sie ein Child-Theme erstellen, erfahren Sie im Beitrag «Ein Child-Theme anlegen – ein Must im Webdesign».
Mit dem Menu-Modul des Divi-Themes lassen sich auch Submenüs darstellen - es gibt aber keine Option, solche Submenüs auch ständig anzuzeigen, wenn die übergeordnete Seite aktiv ist. Mit ein wenig CSS-Code lässt sich aber dies beheben.
Die Submenu-Links im Divi-Theme werden normalerweise angezeigt, wenn man die Maus über den höher eingeordneten Menülink bewegt - beim hovern also. Doch das ganze funktioniert auch per Mausklick. Wir zeigen Ihnen wie.
Unlängst haben wir Ihnen gezeigt, wie Sie Separatoren im Divi-Menu-Modul platzieren. Das funktioniert natürlich auch, wenn Sie das Standard-Menu des Divi-Themes verwenden. Der CSS-Code ist freilich etwas anders.
Das Menu-Modul des Divi-Themes kennt zahlreiche Einstellungsmöglichkeiten. Aber nirgends lassen sich Separatoren zwischen den einzelnen Menupunkten festlegen. Mit diesem Trick gelingt auch dies.
Das Divi Menu-Modul verfügt über keine Hover-Stile, abgesehen von einer einfachen Änderung der Linkfarbe. Hier finden Sie eine Liste von sieben verschiedenen Hover-Effekten mit animierter Unterstreichung.
Icons sind eine tolle Möglichkeit, das Menü der Website interessanter zu gestalten. Das richtige Icon sieht gut aus und gibt dem Nutzer einen Hinweis darauf, worum es sich bei dem Link handelt. Icons im Menü anzuzeigen ist überdies kein Hexenwerk.
Das Menümodul des Divi-Themes lässt einige Einstellungen zu: Logo und Menü zentrieren; Logo links und Menü rechts - was aber fehlt, ist die Option das Menü links und das Logo rechts darzustellen. Mit ein wenig Code kriegen Sie aber auch dies hin.
Das Website-Logo lässt sich im Divi-Menü zentriert darstellen. Es erscheint dann oberhalb der Navigationspunkte. Besonders wenn man dann das Menümodul auf «sticky» trimmt, bleibt so beim Scrollen oft ein sehr mächtiger Inhalt stehen, der Platz wegnimmt. Doch es gibt auch hierfür einen Trick, welcher das zentrierte Menü-Logo beim Scrollen ganz einfach nach links verfrachtet.
Normalerweise zeigt das Divi-Theme mobile Menüs mit einem so genanten «Hamburger». Egal, ob es geöffnet oder geschlossen ist. Mit einem kleinen Trick kann in geöffneten Mobilmenüs ein «X» angezeigt werden, welches zum Schliessen des Menüs einlädt.
Das Menümodul des Divi-Themes bietet schon einige Styling-Möglichkeiten. Um so richtig Chef über die Darstellung zu werden, bedarf es aber ein wenig CSS-Code. Diesen stellen wir Ihnen hier vor.
Das Divi-Menümodul verwendet standardmässig das horizontale Layout, das für den Header als horizontale Navigation konzipiert wurde. Aber es gibt bestimmte Situationen (zum Beispiel bei der Erstellung eines Footer- oder Sidebar-Layouts), in denen wir alle Menüpunkte untereinander anzeigen möchten, als einfache Liste von Links, ohne die mobile Hamburger-Menü-Version
Keine Inhalte gefunden.
Werbung
