Trick # 346 | Dieser Beitrag beinhaltet 871 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Im Menü-Modul des Divi-Themes wird die Breite der einzelnen Menülinks von der Länge der Linktexte bestimmt. Das passt aber nicht immer. Hier erfahren Sie, wie Sie die Menüpunkte gleichmässig verteilen und deren Breite ausgleichen können..
Das Menü-Modul des Divi-Themes zeigt sich standardmässig so:
Um die einzelnen Menüpunkte gleichmäössig auf der gesamten Seiten- oder Spaltenbreite zu verteilen gibt es zwei Vorgehensweisen – abhängig davon, ob ein Logo gezeigt wird oder eben nicht.
Menü ohne Logo ausgleichen
Befassen wir uns erst mit Menüs ohne Logo. Hierfür müssen Sie dem Menü-Modul eine CSS-Klasse vergeben. Das können Sie im Tab «Erweitert» tun. Klicken Sie auf «CSS-ID und Klassen» und fügen Sie den Text «menu-without-logo» ins Textfeld «CSS-Klassen» ein.
Nun wechseln Sie zum Tab «Design» und legen die Darstellung des Menütexts auf «Blocksatz» fest.
Nun kopieren Sie den folgenden CSS-Codeblock und fügen Sie ihn in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS – ein:
Passen Sie vor allem die Zeile 2 im Code an: Das Beispiel ist für 4 Menüpunkte ausgelegt – dies ist der letzte Wert der Zeile. Passen Sie ihn an, wenn Sie mehr oder weniger Menüpunkte haben.
Das oben verwendete Menü-Modul zeigt sich nun so:
Soweit so gut. Wenn Sie aber ein Menü MIT Logo verwenden, benötigen Sie einen leicht angepassten Code.
Menü mit Logo ausgleichen
Vergeben Sie (im Tab «Erweitert», «CSS-ID und Klassen» unter «CSS-Klassen») die Klasse «menu-with-logo». Erneut wechseln Sie in den Tab «Design» und stellen den Menütext auf Blocksatz.
Nun kopieren Sie den folgenden CSS-Code und fügen ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzlcihes CSS:
Das Divi-Theme bietet ein Galeriemodul, mit dem Sie eine Diashow von Bildern in Ihren Beiträgen anzeigen können. Mit einem Hack - bestehend aus PHP-Code - können Sie die enthaltenen Galeriebilder zusätzlich zählen lassen.
Ein Blitztipp: Falls Sie auf Ihrem Blog Kommentare zulassen stören Sie sich vielleicht am grossen Einzug auf der linken Seite, mit welchem die Unterkommentare und Antworten auf andere Kommentare der BesucherInnen angezeigt werden. Das lässt ...
Das Kontaktformular-Modul des Divi-Themes zeigt auf der Website eine Bestätigungsmeldung, wenn die Nachricht verschickt wurde. Diese Bestätigung ist reichlich diskret gestaltet und wenig auffällig. Sie lässt sich aber leicht stylen, damit sie ...
Wenn Sie eine neue Website aufbauen werden Sie zweifelsohne oft im CSS-Stylesheet unterwegs sein und Anpassungen vornehmen. Praktisch wäre es, wenn Sie da eine Übersichtsseite mit den gängigsten Darstellungen hätten. So sehen Sie am besten, wie ...
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.
Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.
Unbedingt notwendige Cookies
«Unbedingt notwendige Cookies» sollte immer aktiviert sein, damit wir Ihre Präferenzen für Cookie-Einstellungen speichern können.
Wenn Sie dieses Cookie deaktivieren, können wir Ihre Einstellungen nicht speichern. Das bedeutet, dass Sie jedes Mal, wenn Sie diese Website besuchen, Cookies erneut aktivieren oder deaktivieren müssen.
Cookies von Drittanbietern
Diese Website verwendet Google Analytics, um anonyme Informationen wie die Anzahl der Besucher auf der Website und die beliebtesten Seiten zu sammeln.
Wenn Sie dieses Cookie aktiviert lassen, können wir unsere Website verbessern.
Bitte aktivieren Sie zunächst «Unbedingt notwendige Cookies», damit wir Ihre Einstellungen speichern können.