Container oder Grid? Wie Ihr CSS-Layout in Elementor umgesetzt wird

Elementor hat zwei Layout-Modi für einen Container: Flexbox und Grid. Welcher verwendet wird, entscheidet der display-Wert, den der Browser tatsächlich für Ihr Element berechnet – nicht die Klassennamen.

display:flex → Flexbox-Container

Der Konverter übernimmt die relevanten Eigenschaften: Richtung (row/column), Umbruch, justify-content, align-items und den Abstand (gap). Eine horizontale Kartenzeile, die mit Flexbox erstellt wurde, wird daher zu einem Container mit Richtung = row und demselben gap wie in Ihrem CSS.

display:grid → Grid-Container

Grid-Layouts werden zu einem Grid-Container, und der Editor bezeichnet sie im Struktur-Panel mit dem Grid-Icon als Grid. Spalten, Zeilen, Abstände und die Optionen zur Ausrichtung der Elemente werden übernommen.

Gleiche Spalten bleiben als fr erhalten

Diesen Punkt sollten Sie verstehen. Der Browser löst grid-template-columns: repeat(5, minmax(0, 1fr)) in konkrete Pixel auf – so etwas wie 241.597px 241.597px 241.604px …. Beachten Sie die winzigen Subpixel-Unterschiede. Würde ein Konverter diese Zeichenketten naiv vergleichen, würde er die Spalten als ungleich einstufen und feste Pixelbreiten schreiben, wodurch Ihr Grid nicht mehr responsiv wäre.

Stattdessen werden die Spalten numerisch mit einer Toleranz verglichen, sodass nahezu identische Spuren als gleich erkannt und als N fr geschrieben werden – ein wirklich responsives Grid, das sich beim Ändern der Container-Größe neu anordnet. Tatsächlich ungleiche Spuren (zum Beispiel 2fr 1fr) bleiben als benutzerdefinierte Spaltenvorlage erhalten.

Zeilen passen sich dem Inhalt an

Zeilen werden auf auto gesetzt statt auf Elementors Standard mit gleich hohen Zeilen. So behalten Karten mit unterschiedlich langen Texten ihre natürliche Höhe, statt auf die höchste Karte gestreckt zu werden.

Breiten, Innenabstände und die Zentrierungsfalle

Ein sehr häufiges Muster ist eine zentrierte Inhaltsspalte: max-width: 760px; margin: 0 auto;. Hier löst der Browser auto in einen konkreten Pixelwert auf, der vom aktuellen Viewport abhängt – bei einer Breite könnten es beispielsweise 260px auf jeder Seite sein.

Diese Pixelwerte in Elementor zu übernehmen, würde die Zentrierung sofort zerstören, sobald sich die Bildschirmgröße ändert. Ein Block mit max-width und symmetrischen auto-Margins wird daher als auto-zentriert erkannt und stattdessen auf Elementor-Art ausgedrückt: Inhaltsbreite = Boxed mit Ihrer max-width, wodurch die Zentrierung bei jeder Bildschirmgröße nativ funktioniert. Die aufgelösten seitlichen Margins werden verworfen.

Spaltenanzahl wird an jedem Breakpoint gemessen, nicht geschätzt

Ein Grid, das auf dem Desktop vier Spalten und auf dem Tablet zwei zeigt, ist nicht ein Layout, das nur schrumpft – es sind unterschiedliche Werte bei unterschiedlichen Breiten. Ein Konverter, der nur die Desktop-Darstellung betrachtet, übersieht den Rest.

Deshalb wird die Seite mehr als einmal gemessen. Das Layout wird bei jeder Breakpoint-Breite erneut gelesen, und die Spaltenanzahl für diese Breite wird in Elementors eigenes responsives Feld für das jeweilige Gerät geschrieben. In der Standardeinstellung sind das zwei zusätzliche Durchläufe bei 820px und 390px – ein typisches Tablet im Hochformat und ein typisches Smartphone – und die Ergebnisse fließen in Elementors Standardfelder für Tablet (bis 1024px) und Mobil (bis 767px) ein. Das Messen bei einer realen Gerätebreite statt an der Obergrenze jedes Bereichs ist wichtig: Eine handgeschriebene Media Query bei 760px oder 640px greift bei 767px nicht, sodass ein Durchlauf dort die meisten mobilen Layouts verpassen würde.

Wenn Sie erweiterte Breakpoints aktivieren, wird fünfmal gemessen: Laptop bei 1280px, Tablet-Extra bei 1100px, Tablet bei 960px, Mobil-Extra bei 820px und Mobil bei 390px. Verwenden Sie das nur, wenn Sie diese Breakpoints in Ihren Elementor-Website-Einstellungen aktiviert haben – Werte für ausgeschaltete Geräte zu schreiben, fügt nur Rauschen hinzu, an dem Sie später vorbeiscrollen müssen.

Ausgeblendete Elemente werden ausgeblendet, nicht gelöscht

Elemente, die als display: none oder visibility: hidden berechnet werden, sind eine kleine Falle. Sie sind unsichtbar, daher liegt die Annahme nahe, ein Konverter sollte sie überspringen – aber ein Nur-Mobil-Menü, ein Off-Canvas-Panel oder ein standardmäßig geschlossenes Modal ist zum Zeitpunkt der Konvertierung unsichtbar und trotzdem Teil des Designs.

Sie werden konvertiert und erhalten Elementors responsives Flag Auf Desktop ausblenden, statt verworfen zu werden. Der Inhalt bleibt erhalten; Sie entscheiden später, ob er dazugehört. Wenn etwas, das Sie erwartet haben, auf der Arbeitsfläche fehlt, prüfen Sie zuerst die responsiven Sichtbarkeits-Umschalter, bevor Sie annehmen, dass es verloren gegangen ist.

Layouts ohne jegliche Zuordnung

Drei Quellmuster haben keine Entsprechung in Elementor, und es ist besser, das vor der Konvertierung zu wissen als danach:

• Float-basierte Layouts. Floats werden nicht gelesen, da Elementor-Container kein Konzept dafür haben. Ein altes Zwei-Spalten-Layout mit float: left wird als gestapelte Blöcke konvertiert. Das ist das deutlichste Zeichen dafür, dass das Markup aus der Zeit vor Flexbox stammt und sich eine Modernisierung an der Quelle lohnt.
• Tabellen-Layouts. Hier gilt dasselbe – eine Layout-Tabelle ist Struktur, kein Design, und sie kommt als verschachtelte Blöcke an statt als Spalten.
• Benannte Grid-Bereiche. grid-template-columns wird konvertiert, grid-template-areas nicht, da Elementors Grid keine Entsprechung für benannte Bereiche hat. Die Kindelemente fallen auf die Quellreihenfolge zurück.

Nach dem Import den richtigen Modus wählen

An der Konvertierung ist nichts endgültig. Der Layout-Modus eines Containers ist in Elementor ein Dropdown, und beim Umschalten bleiben die enthaltenen Elemente erhalten – wenn also ein Abschnitt als Flexbox übernommen wurde und Sie ihn lieber als Grid verwalten möchten, ändern Sie ihn und legen Sie die Spalten fest. Zwei Faustregeln:

• Grid, wenn Kindelemente in beide Richtungen ausgerichtet sein sollen – Kartenraster, Feature-Matrizen, Bildergalerien, alles, bei dem es darauf ankommt, dass Zeile zwei mit Zeile eins ausgerichtet ist.
• Flexbox, wenn Kindelemente in eine Richtung fließen und die Größen vom Inhalt bestimmt werden – Navigationsleisten, Button-Gruppen, eine Überschrift neben einem Badge, Media-Object-Zeilen.

Der Konverter wählt den Modus, der zur Quelle passt – das ist die richtige Standardeinstellung. Aber Quell-Markup ist oft das Ergebnis von Gewohnheit statt einer bewussten Entscheidung, und ein Layout, das mit Flexbox gebaut wurde, weil der Autor immer Flexbox verwendet, könnte durchaus ein Grid sein.

Praktische Tipps

• Bevorzugen Sie gap gegenüber Außenabständen zwischen Grid-/Flex-Kindelementen – Abstände (gaps) lassen sich sauber übertragen, Außenabstände pro Kindelement dagegen nicht.
• Verwenden Sie max-width + margin:0 auto für zentrierte Abschnitte; das wird korrekt in einen Boxed-Container umgewandelt.
• Mischen Sie Floats nicht mit Flex/Grid. Floats haben keine Entsprechung in Elementor und erfordern manuelle Nacharbeit.
• Wenn eine Zeile auf Mobilgeräten nicht umbrechen darf, legen Sie das nach dem Import in Elementor fest – das responsive Umbruchverhalten lässt sich dort leichter einstellen.
• Stellen Sie die Einstellung für erweiterte Breakpoints auf das ein, was in Elementor tatsächlich aktiviert ist, sonst erhalten Sie responsive Werte für Geräte, die Ihre Website nicht verwendet.