Lesefortschritt:

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

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

Trick # 120 | Dieser Beitrag beinhaltet 766 Wörter. – Geschätzte Lesezeit: 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

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.