Individuelle Spaltenbreite im DIVI WordPress-Theme

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; } 
}

Schreibe einen Kommentar