DIVI bietet bereits viele Zeilen-Vorlagen mit verschiedenen Spaltenbreiten. Besteht jedoch der Wunsch, die Spaltenbreite individuell zu bestimmen, so ist dies nur mit entsprechenden CSS-Anpassungen möglich. Da sich die CSS-Felder in den einzelnen Modulen, Sektionen usw. jedoch immer auf die CSS-Klasse des jeweiligen Elements bezieht, muss der CSS-Code an anderer Stelle eingefügt werden:
- in den Seiten- bzw. Beitragseinstellungen oben rechts (die drei waagrechten Striche bei ‚Der Divi Builder‘): So gelten die jeweiligen Definitionen nur für die Seite / Beitrag.
- in den Theme-Einstellungen: So gelten die Spaltendefinitionen für die ganze Seite. Wahlweise kann man auch gezielt einzelne Zeilen ansprechen, indem man den entsprechende CSS-Klassen Namen vergibt.
Spaltenbreite per CSS definieren
Die Breite der einzelnen Spalten anzupassen ist an sich sehr einfach, da DIVI die Spalten durchnummeriert: .et_pb_column_0 .et_pb_column_1 usw. Diesen CSS-Klassen wird nun die Breite zugewiesen, ein !important sorgt für die bevorzugte Behandlung. Schließlich sorgt ein Media-Query für unterschiedliche Spalten bei Mobil-, Tablet- und Desktop-Ansicht.
Beispiel für verschiedene Spaltenbreiten in DIVI per CSS
Das folgende Beispiel definiert auf dem Desktop drei Spalten: Die Erste 15%, die Zweite 60% und die Dritte 25% der Gesamtbreite. Das zweite Media-Query sorgt in der mobilen Ansicht eine konstante Breite von 80%, um bei Handys den Inhalt nicht bis zum Bildschirmrand darzustellen.
@media only screen and (min-width:981px) {
.et_pb_column_0 { width: 15% !important; }
.et_pb_column_1 { width: 60% !important; padding-right: 10em; }
.et_pb_column_2 { width: 25% !important; }
}
@media only screen and (max-width:980px) {
.et_pb_column_0 .et_pb_column_1 .et_pb_column_2 {
width: 80% !important;
margin-right: auto;
margin-left: auto; }
} 