Wenn du mit Divi arbeitest, kennst du das sicher: Du hast mehrere Spalten nebeneinander – zum Beispiel für Angebote, Features oder Leistungen – und möchtest, dass sie alle die gleiche Höhe haben. Dafür gibt es in Divi die praktische Funktion „Spaltenhöhen ausgleichen“. Doch viele machen hier einen entscheidenen Fehler und es wirkt als würde die Funktion nicht funktionieren.

In diesem Artikel zeige ich dir, woran das liegt und wie du den Fehler in wenigen Schritten behebst.

Play

Warum Spaltenhöhen ausgleichen in Divi oft nicht klappt

Divi bietet bei Zeilen die Option „Spaltenhöhen ausgleichen“. Damit sollen alle Spalten innerhalb einer Zeile die gleiche Höhe bekommen – zumindest theoretisch. In der Praxis klappt das aber oft nicht, und das liegt an einem kleinen, aber entscheidenden Unterschied:

Diese Funktion gleicht die Höhe der Spalten, nicht die der Module innerhalb der Spalten aus.

Viele machen den Fehler, ihre Gestaltung – also Hintergrundfarbe, Schatten oder Abstände – direkt im Modul (zum Beispiel im Infotext-Modul) vorzunehmen. Das sieht zwar erst mal gut aus, führt aber dazu, dass die Spaltenhöhen unterschiedlich bleiben. Denn Divi gleicht nur die tatsächliche Spaltenhöhe an, nicht die Höhe der einzelnen Module.

Wenn du also den Eindruck hast, dass der Spaltenausgleich nicht funktioniert, liegt das fast immer daran, dass du deine Einstellungen an der falschen Stelle gemacht hast.

So gleichst du Spaltenhöhen in Divi richtig aus

Der Trick ist ganz einfach: Du verschiebst die Einstellungen aus dem Modul in die Spalte.

So gehst du vor:

1. Öffne die Zeile, in der deine Spalten liegen (erkennbar am grünen Rahmen).
2. Wähle die erste Spalte aus.
3. Übertrage alle Styles, die du bisher im Modul hattest, in die Spalte. In meinem Beispiel im Video waren das:
   • Hintergrundfarbe
   • Abstände (Padding)
   • Schatten
4. Kopiere die Spalten-Styles anschließend auf die anderen Spalten.
   Das geht am schnellsten, indem du auf die 3 Punkte einer Spalte und „Kopieren Artikel Styles“ klickst. Nun gehst du auf die 3 Punkte bei den Spalten, die den gleichen Stil haben sollen. Dort klickst du „Einfügen Artikel Styles“ an.
5. Aktiviere jetzt „Spaltenhöhen ausgleichen“ in den Zeileneinstellungen.

Wenn du alles richtig gemacht hast, siehst du sofort den Unterschied: Alle Boxen sind nun exakt gleich hoch, unabhängig davon, wie viel Text oder Inhalt sie enthalten.

Merke dir für zukünftige Projekte

Wenn du also möchtest, dass deine Spalten die gleiche Höhe bekommen, mach die Einstellungen von Anfang an in deiner Spalte. So stellst du sicher, dass der Spaltenausgleich funktioniert.

Bleib auf dem Laufenden

Wenn dir dieser Tipp geholfen hat, dann trag dich in meinen Newsletter ein. Dort bekommst du regelmäßig praxisnahe WordPress-Tutorials, Tipps für deinen Alltag als Technik-VA und Einblicke in meine Tools und Workflows.

Ähnliche Artikel