Divi 3 ist ein Theme von Elegant-Themes. Durch den integrierten Page-Builder ist eine sehr einfache Erstellung von Webseiten möglich. Die meisten Einstellungen kann man hier machen. Es kann aber manchmal erforderlich werden, dass man mittels eines CSS-Snippets Einstellungen per Code macht.

Einige Beispiele findet ihr hier…

[toggle title=”Primäres Menü an Bildschirmbreite anpassen” state=”close”]Das primäre Menü in Divi ist bei jeder Installation das Standardmenü und wird immer dargestellt. Änderungen kann man über den Customizer durchführen, z.B. die Schrift- oder Hintergrundfarbe, die Schriftart usw. Man kann auch ein Logo festlegen, welches dann in entsprechender prozentualer Höhe zur Menühöhe angezeigt wird. Und hier kann ein Problem liegen. Je nachdem, wie viele Haupteinträge das Menü hat, kann es eine Überlagerung zwischen dem Text und dem Logo geben, wenn die Bildschirmbreite eine bestimmte Größe unterschreitet. Man kann aber mit einem simplen CSS-Code einstellen, ab welches Bildschirmbreite das Menü responsiv angezeigt wird, um eine Überlagerung zu vermeiden.

@media only screen and (max-width: 1500px) and (min-width: 961px) { #et_mobile_nav_menu { display: block; } #top-menu { display: none; } }

Der Code sollte in den Theme-Optionen ganz unten bei “Benutzerdefiniertes CSS” eingefügt werden.[/toggle]

[toggle title=”Beitragshintergrund an Seitenhintergrund angepasst” state=”close”]In Divi kann man den Seitenhintergrund für jede einzelne Sektion einzeln anpassen. So ist beispielsweise eine halbtransparente Darstellung möglich, um den “Gesamthintergrund” zu sehen. Leider funktioniert dies in den Beiträgen nicht, hier ist der Hintergrund weiß. Mittels dieses CSS-Codes, den man auch wieder in den “Theme-Optionen” unter “Benutzerdefiniertes CSS” einfügt, kann man das ändern und den Hintergrund analog zu den Seiten darstellen.

#main-content { background-color: rgba(255, 255, 255, 0); }[/toggle]