Individuelle Spaltenbreite im DIVI WordPress-Theme

Divi bietet bereits viele Zeilen-Vorlagen mit verschiedenen Spaltengrößen. 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.
    Achtung: Zur Zeit (in Divi 3.40) scheint sich dort ein Bug zu befinden. Inhalte in diesem CSS-Feld werden beim Speichern teilweise wieder mit alten Werten überschrieben!
  • 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.

Hier ein Beispiel für veschiedene Spaltenbreiten in CSS: Auf dem Desktop drei Spalten, die Erste 15%, die Zweite 60% und die Dritte 25%. In der mobilen Ansicht jeweils 80%, um bei Handys den Inhalt nicht bis zum Bildschirmrand darzustellen.

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

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