facebook_pixel

Das vertikale Zentrieren von Modulen ist leider bisher keine Option, die der Divi Builder direkt anbietet. Beispielsweise bei der Darstellung von zwei Modulen nebeneinander: links einen Screenshot und rechts einen kurzen Text.

Divi Builder: Module Editoransicht 1

Damit es besser aussieht soll der Text nun vertikal zentriert neben dem Screenshot erscheinen.

Divi Builder: Module vertikal zentrieren Beispiel 1

Vertikales Zentrieren mit einem Teiler Modul

Erstmal die weniger elegante Variante. Du kannst ein Teiler Modul (ohne Anzeige eines Trennstriches) verwenden, um den Text weiter nach unten zu versetzen.

Divi Builder: Teiler Modul hinzufügen

Allerdings musst Du nun die passende Höhe in den Einstellungen des Teilers eintragen, damit der Text zentriert wirkt.

Dazu ist etwas Herumprobieren erforderlich. Im visuellen Builder ist das etwas leichter, aber immer noch mühsam. Ein weiterer Nachteil: Falls das größere Element irgendwann verändert wird, musst Du die Höhe des Teilers erneut anpassen. Außerdem kann die Anzeige auf dem Handy Display unpassend wirken, wenn die Module nicht mehr nebeneinander, sondern untereinander angezeigt werden.

Vertikales Zentrieren mit Hilfe von benutzerdefiniertem CSS

Die geschicktere Variante ist der Einsatz von CSS zur automatischen vertikalen Zentrierung der Module.

1. CSS-Code eintragen

Zunächst trägst Du idealerweise in die style.css Deines Divi Child Themes folgenden CSS-Code ein:

2. Erweiterte Designoptionen anpassen

Anschließend gehst Du in die Einstellungen der Zeile (row, grün dargestellt) in der sich das zu zentrierende Modul befindet.

Divi Builder: Module Editoransicht 2

Dort aktivierst Du unter “Erweiterte Designoptionen” die Einstellung “Spaltenhöhe anpassen”.

Zeilen Einstellungen: Erweiterte Designoptionen

3. Spalten CSS zuweisen

Zuletzt muss noch der passenden Spalte das neue CSS zugewiesen werden. Dies wird ebenfalls in den Einstellungen der Zeile (row , grün dargestellt) erledigt.

Diesmal im Bereich “Benutzerdefinierte CSS”.

Einstellungen für benutzerdefiniertes CSS

Wichtig ist, dass Du genau der Spalte, die das horizontal zu zentrierende Modul enthält, das vertikal-zentrieren CSS zuweist.

In unserem Beispiel soll das rechte Textmodul vertikal zentriert werden. Dies befindet sich in Spalte 2 und daher wird der Spalte 2 CSS-Klasse “vertikal-zentrieren” zugeordnet.

Nach dem Speichern der Einstellungen wird das Modul in Spalte 2 automatisch horizontal zentriert angezeigt.

Divi Builder: Modul vertikal Zentrieren 2

Sehr praktisch: Falls Du links später ein Bild mit anderer Größe einfügst, passt sich die Zentrierung des Textes automatisch an.

Aufpassen

Gerade bei dieser Lösung, kann einerseits die Darstellung alter Daten aus dem Browsercache oder einem Cachingplugin verhindern, dass das gewünschte Ergebnis angezeigt wird.

Außerdem musst Du sehr präzise mit der Zuweisung des CSS sein:

  1. Es muss in den Zeileneinstellungen (nicht Modul- oder Sektionseinstellungen) erfolgen.
  2. Es muss der richtigen Spalte (oder Spalten) zugeordnet werden: die Spalte(n) des Moduls mit dem kleineren Inhalt(en).
  3. Es darf nicht in die allgemeine CSS-ID oder CSS-Klasse der Zeile eingetragen werden.

Du kannst auch mehreren Spalten das CSS zuweisen, wenn Dein Design drei oder vier Module nebeneinander darstellt. Das CSS wird dann allen Spalten zugewiesen außer derjenigen mit dem höchsten Inhalt.

Quelle: Divi Soup

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen