Beim Aufbau einer Landingpage mit Elementor sieht das Desktop-Raster perfekt aus: drei Spalten, strenge Reihenfolge, alles atmet. Öffnen Sie die Seite auf einem Tablet, und die dritte Spalte fliegt nach unten, durchbricht den Rhythmus und hinterlässt eine Lücke rechts. Kommt Ihnen das bekannt vor?

Elementor umbricht standardmäßig Spalten, die auf schmaleren Bildschirmen nicht in eine Zeile passen. Aber was, wenn Sie auf einem Tablet nicht drei, sondern exakt zwei Spalten pro Zeile benötigen, ohne Umbrüche und ohne leeren Raum? Oder auf dem Mobilgerät nicht eine, sondern zwei?

Nachfolgend zwei funktionierende Methoden: die bordmitteleigene (für Elementor-Versionen ab 2024) und individuelles CSS (für volle Kontrolle über alle Versionen hinweg). Beide sind getestet und kollidieren nicht mit der DOM-Optimierung.

💡 Kurzer Überblick:

• Legen Sie die Spaltenbreiten in Elementor über den Tab „Erweitert" für jeden Breakpoint separat fest
• Wenn die Standardeinstellungen nicht ausreichen, ergänzen Sie individuelles CSS mit flex-wrap und Media Queries
• Prüfen Sie das Layout auf allen Geräten: Die Spalten ordnen sich ohne Umbrüche und leere Flächen neu an

Der Ablauf wird in diesem Video anschaulich gezeigt:

1. Bordmitteleigene Methode: responsive Spaltenbreiten

Ab Elementor 3.18+ (und insbesondere mit dem Übergang zu Flexbox-Containern 2024) können Sie die Spaltenbreiten auf jedem Gerät ohne eine einzige Codezeile steuern.

Erstellen Sie einen Abschnitt mit Spalten

Fügen Sie einen neuen Abschnitt hinzu und wählen Sie eine dreispaltige Struktur:

Duplizieren Sie jede der drei Spalten, um sechs zu erhalten. Das ist nötig, damit sich die Spalten auf Tablets in zwei Reihen zu je zwei umordnen, statt die dritte allein zu lassen:

Um das Layout zu sehen, befüllen Sie die Spalten mit Zahlen über das Widget „Überschrift", sodass die Vorschau sofort zeigt, welche wohin gewandert ist:

Breite für jedes Gerät festlegen

Gehen Sie in die Einstellungen jeder Spalte → Tab Erweitert. Im Bereich Breite wechseln Sie in den responsiven Modus (Tablet-/Telefon-Symbol) und setzen die Werte gemäß der Elementor-Dokumentation:

• Desktop: drei Spalten pro Zeile (die Breite wird automatisch aufgeteilt)
• Tablet: zwei pro Zeile
• Mobil: eine pro Zeile (oder zwei, falls Sie auch mobil zwei benötigen)

Entscheidender Punkt: Die Breite wird für jede der sechs Spalten einzeln festgelegt, Elementor wendet den Wert auf alle Spalten innerhalb eines Abschnitts an. Einen Umbruch wird es nicht geben, denn sechs Spalten ergeben auf Tablets exakt zwei Reihen zu je zwei.

2. Individuelles CSS: volle Kontrolle

Die bordmitteleigene Methode deckt die meisten Szenarien ab, aber manchmal benötigen Sie auf Tablets eine andere Spaltenanzahl (2 statt 3) und auf Mobilgeräten eine nicht standardmäßige (2 statt 1). Oder Sie haben eine ältere Elementor-Version ohne responsive Breiten. Dann kommt CSS ins Spiel.

Weisen Sie dem Abschnitt eine CSS-Klasse zu

Öffnen Sie die Abschnittseinstellungen → Tab Erweitert → Feld CSS-Klassen. Tragen Sie eine eindeutige Klasse ein, zum Beispiel elementor-custom-columns:

CSS-Regeln hinzufügen

Fügen Sie den Code in den Abschnittseinstellungen ein (Tab Erweitert → Individuelles CSS) oder im Theme-Customizer (Design → Customizer → Zusätzliches CSS). Hier die aktuelle Version:

1
selector.elementor-custom-columns .elementor-container {
2
  flex-wrap: wrap;
3
  justify-content: center;
4
}

Nun die Spaltenbreiten für jedes Gerät über Media Queries. Für Sektionen (Sections) verwenden Sie den Selektor .elementor-top-column, für Container (Containers) .e-con-inner > .e-con:

1
/* Base: three columns on desktop */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Tablet: two columns */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Mobile: one column */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

Was hier passiert: flex-wrap: wrap erlaubt den Zeilenumbruch der Spalten, wenn sie nicht in eine Zeile passen, und justify-content: center zentriert die verbleibenden Spalten (ohne Lücke rechts). Die Media Queries überschreiben die Breite an jedem Breakpoint, exakt so viele Spalten pro Zeile wie benötigt.

Ergebnis auf den Geräten

Auf dem Desktop drei ordentliche Spalten:

Auf dem Tablet exakt zwei pro Zeile, ohne Umbrüche und Lücken:

Auf dem Mobilgerät eine Spalte über die volle Breite:

Für diejenigen, die die DOM-Optimierung aktiviert haben

Wenn in den Elementor-Einstellungen (Elementor → Einstellungen → Experimente) die Option Verbesserte DOM-Optimierung aktiv ist, ändern sich die Selektoren, .elementor-row entfällt. Angepasstes CSS für diesen Modus:

1
selector.elementor-custom-columns {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
}
6
 
7
.elementor-custom-columns .elementor-top-column {
8
  width: 33.33%;
9
}
10
 
11
@media (min-width: 768px) and (max-width: 1024px) {
12
  .elementor-custom-columns .elementor-top-column {
13
    width: 50%;
14
  }
15
}
16
 
17
@media (max-width: 767px) {
18
  .elementor-custom-columns .elementor-top-column {
19
    width: 100%;
20
  }
21
}

Ein geprüftes Codebeispiel für dieses Szenario finden Sie auch im GitHub Gist von oooh-boi, funktionierend, getestet mit Elementor 3.19+ bei aktiver DOM-Optimierung.

Welche Methode soll man wählen: Vergleichstabelle

Wenn Sie eine aktuelle Elementor-Version und ein Standardraster (2-4 Spalten) haben, nutzen Sie die bordmitteleigene Methode, sie ist schneller und erfordert kein CSS. Wenn Sie ein nicht standardmäßiges Layout benötigen, eine alte Plugin-Version einsetzen oder die DOM-Optimierung aktiviert haben, gibt Ihnen individuelles CSS die volle Kontrolle.

⁉️🤔 Häufig gestellte Fragen

Warum brechen Spalten auf Tablets mit einem Umbruch um?

Elementor verwendet standardmäßig flex-wrap: nowrap für die Spaltenzeile. Wenn drei Spalten nicht in die Tablet-Breite passen, entsteht ein Umbruch: zweite Spalte in der ersten Zeile, die dritte geht in die zweite und bleibt allein. Mit flex-wrap: wrap und Spaltenbreiten von der halben Zeilenbreite auf Tablets passen sechs Spalten exakt in drei Reihen zu je zwei, ohne Umbrüche. justify-content: center zentriert Spalten, falls in der letzten Reihe weniger als nötig sind. Lösung: entweder responsive Breite über die UI (Methode 1) oder flex-wrap: wrap mit Media Queries (Methode 2).

Funktioniert die Methode mit Containern (Flexbox Containers)?

Ja, aber die Selektoren sind anders. Für Container verwenden Sie statt .elementor-top-column den Selektor .e-con-inner > .e-con und statt .elementor-container den Container selbst. Die bordmitteleigene responsive Methode (Nr. 1) funktioniert mit Containern ohne Anpassungen.

Ist das Duplizieren der Spalten zwingend erforderlich?

Ja, wenn Sie auf Tablets weniger Spalten pro Zeile benötigen als auf dem Desktop. Beispiel: Desktop 3 Spalten, Tablet 2. Drei ursprüngliche Spalten lassen sich nicht in zwei saubere Reihen zu je zwei umordnen. Sechs Spalten (jede dupliziert) ordnen sich in drei Reihen zu je zwei um.

Kollidiert das mit Caching-Plugins?

CSS-Regeln, die über das individuelle CSS des Abschnitts oder den Customizer eingefügt werden, gelangen in Inline-Styles oder wp_head, sie passieren jedes Cache-Plugin (WP Rocket, W3 Total Cache, LiteSpeed) problemlos. Leeren Sie nach einer CSS-Änderung den Cache.

Was tun, wenn Spalten auf Mobilgeräten zu schmal sind?

Prüfen Sie, ob die Breite nicht vom Tablet-Breakpoint vererbt wird. In Elementor sind die Einstellungen kaskadierend: Mobil erbt von Tablet, Tablet erbt von Desktop. Setzen Sie die Breite explizit an jedem Breakpoint, auch wenn der Wert dem des nächsthöheren entspricht.

Lohnt sich der Aufwand mit CSS im Jahr 2026?

Die bordmitteleigenen responsiven Einstellungen von Elementor genügen für die meisten Aufgaben, nutzen Sie sie als Hauptwerkzeug. Wenn Sie aber auf Tablets nicht zwei und nicht drei, sondern sagen wir vier Spalten mit ungleichen Breiten benötigen, bleibt individuelles CSS der einzige Weg, um exakt das Gewünschte umzusetzen.

Probieren Sie beide Methoden auf einer Testseite aus: Beginnen Sie mit der bordmitteleigenen (schneller), und wenn Ihnen Flexibilität fehlt, greifen Sie zum CSS-Ansatz. Die Fertigkeit, Media Queries für Elementor einzurichten, wird Ihnen auch bei anderen Aufgaben nützlich sein: individuelle Schriften auf Geräten, Ausblenden von Blöcken, nicht standardmäßige Abstände für Tablets.