Divi-Theme: Spalten-Inhalte oben, unten oder mittig platzieren

17. Oktober 2021 | CSS-Stylesheet, Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 4 Minuten.

Im Divi-Theme werden Module ohne Zutun vertikal am oberen Rand der Spalte dargestellt. Das passt meistens – doch bei mehrspaltigen Zeilen kann man sich dies auch mal anders wünschen. Mittiges Ausrichten oder  Module, welche vertikal unten platziert werden, sind mit ein paar Zeilen CSS-Code ganz einfach möglich.

Fügen Sie zunächst folgende Zeilen in das CSS-Stylesheet Ihrer Website ein. Sie finden es unter Design/Customizer/zusätzliches CSS:

/* Inhalt vertikal zentrieren*/
.content-vertical-align-center {  
  display: flex;  
  flex-direction: column;  
  justify-content: center; 
}

/* Inhalt vertikal unten ausrichten */
.content-vertical-align-bottom {  
  display: flex;  
  flex-direction: column;  
  justify-content: flex-end; 
}

Die folgenden Einstellungen müssen in der Divi-Zeile (Row) erledigt werden. Sie funktionieren nicht in den einzelnen Modulen.

  1. Öffnen Sie die Einstellungen der Zeile (Row), welche die Spalten enthält, welche Sie nun ausrichten möchten.
  2. Klicken Sie auf den Design-Tab und dort auf «Grösse einstellen».
  3. Aktivieren Sie «Spaltenhöhe ausgleichen».
  4. Wechseln Sie auf den Inhalt-Tab. Dort sehen Sie alle Spalten untereinander angezeigt – in jener Reihenfolge, in welcher sie dereinst im Frontend von links nach rechts angezeigt werden.
  5. Bearbeiten Sie die Einstellungen jener Spalte(n), welche Sie vertikal ausrichten möchten.
  6. Wechseln Sie auf den «Erweitert»-Tab – auch «Advanced» genannt und klicken Sie dann auf «CSS-ID & Klassen»
  7. Im Feld «CSS-Klasse» fügen Sie nun die zutreffende Klasse aus obigem Code ein:
    • für eine Ausrichtung vertikal-mittig: content-vertical-align-center
    • für eine Ausrichtung vertikal-unten: content-vertical-align-bottom
  8. Wiederholen Sie allenfalls die Schritte 5-7 für weitere auszurichtende Spalten.

Die einzelnen Module innerhalb der betreffenmden Spalten werden nun nach Ihren Vorgaben ausgerichtet; massgebend für die Zeilenhöhe ist dabei immer der längste Inhalt.

Das kann dann etwa so aussehen:

Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert. Längerer Text, der die Höhe der Divi-Zeile definiert.

Kürzerer Inhalt in einer Spalte ohne CSS-Klasse.

Darum wird er in Divi oben ausgerichtet.

Kürzerer Inhalt in einer Spalte mit der CSS-Klasse «content-vertical-align-center».

Er wird in Divi mittig dargestellt.

Kürzerer Inhalt in einer Spalte mit der CSS-Klasse «content-vertical-align-bottom».

Der Text wird in Divi am unteren Ende der Spalte angezeigt.

Problem gelöst.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This