Elementor Grid Line Overlay (Pro): Ein Design-Grid für ausgerichtete Layouts
Grid Line ist eine Master Addons Pro Erweiterung, die ein Spaltenraster über Ihre Seite innerhalb des Elementor Editors zeichnet Sie setzen die Anzahl der Spalten, die Dachrinne, die maximale Breite und den Offset in Seiteneinstellungen, dann reihen Sie Abschnitte und Widgets gegen die Spalten, die Art und Weise, wie Designer in Figma arbeiten Das Raster zeigt nur während der Bearbeitung, und Besucher sehen es nie auf der veröffentlichten Seite.
So verwenden Sie Grid Line in Elementor
Grid Line ist eine Einstellung pro Seite, also schalten Sie es nur dort ein, wo Sie es brauchen Schauen Sie sich das an Dokumente zur Gitterlinienerweiterung.
- Wenn Master Addons Pro aktiv ist, gehen Sie zu Master-Addons > Erweiterungen Und schalten Sie ein Gitterlinie.
- Öffnen Sie eine Seite in Elementor und klicken Sie auf die Seiteneinstellungen Symbol in der oberen Leiste.
- Auf der Einstellungen Tab, erweitern Gitterlinie und eingestellt Aktivieren An.
- Einstellen Spalten, Max Breite und Dachrinne Ihrem Design entsprechen und ein hinzufügen Versatz Wenn Ihr Layout Seitenränder hat.
- Wechseln Sie zur Tablet- und Mobilansicht, um Werte für diese Bildschirme festzulegen.
- Richten Sie Ihre Abschnitte und Widgets gegen die Spalten aus Das Raster erscheint nicht auf der veröffentlichten Seite.
Säulen, Dachrinne, Breite und Versatz
Der Abschnitt Gitterzeile in Seiteneinstellungen hat eine Aktivieren Schalter, Gitterfarbe (standardmäßig ein helles, durchscheinendes Grau), Spalten Von 1 bis 12 Max Breite, Versatz, Dachrinne und Z-Index. Spalten, Max Breite, Offset und Gutter können auf Desktop, Tablet und Mobilgeräten unterschiedliche Werte annehmen.
- Standardeinstellungen: 12 Spalten, 1140 px maximale Breite und eine 15 px Dachrinne auf dem Desktop, 1025 px und 10 px auf dem Tablet, 768 px und 8 px auf dem Handy.
- Passen Sie Ihr Thema an: Stellen Sie Max Width auf die Inhaltsbreite Ihrer Website ein, damit die Spalten mit dem tatsächlichen Layout übereinstimmen.
- Sichtbarkeit: Wählen Sie eine Farbe mit Transparenz, damit Ihr Inhalt lesbar bleibt, und halten Sie Z-Index bei 999, damit das Raster über dem Design liegt.
Möglichkeiten, ein Layout anhand eines Gitters in Elementor zu überprüfen
Elementor hat keine eigene Design-Grid-Überlagerung Das sind die üblichen Optionen.
| Merkmal | Elementor allein | Browser DevTools Gitterinspektor | Master Addons Gitterlinie |
|---|---|---|---|
| Preis | Kostenlos | Kostenlos | Master Addons Pro |
| Gestalten Sie das Spaltenraster über der Seite | Nein | Nur auf Elementen, die CSS Grid verwenden | Ja, über die ganze Seite |
| Im Elementor-Editor einrichten | Nein | Nein, Sie prüfen den Vorschaurahmen | Ja, in den Seiteneinstellungen |
| Säulen, Dachrinne und Breite pro Gerät | Nein | Folgt dem elementeigenen Raster | Ja |
| Für Besucher sichtbar | Nein | Nein | Nein |
Wenn Ihr Layout bereits den Grid-Container von Elementor verwendet, kann der Grid-Inspektor des Browsers diese Tracks kostenlos anzeigen. Grid Line dient dazu, jedes Layout, einschließlich Flexbox-Container, anhand eines festen Design-Gitters wie dem in Ihrer Figma-Datei zu überprüfen.
Weitere Redakteurshelfer: Welches Element (kostenlos) und Positionierung (kostenlos) bezeichnet.
Häufig gestellte Fragen für Grid Line
Hat das Raster Einfluss darauf, wie meine Seite auf dem Frontend aussieht?
Nein. Das Raster zeigt nur innerhalb des Elementor-Editors an Besucher sehen die veröffentlichte Seite ohne, auch wenn Sie Enable auf lassen.
Was ist der Unterschied zwischen Gutter und Offset?
Gosse ist der Raum zwischen Spalten Offset ist der Raum zwischen dem Rand des Bildschirms und wo das Gitter beginnt Zusammen mit Max Breite lassen sie Sie die Inhaltsbreite und den Spaltenabstand Ihres Themes kopieren.
Kann ich das mit dem elementoreigenen Flexbox Container System nutzen?
Ja. Das Gitter wird über die ganze Vorschau gezeichnet, funktioniert also mit Flexbox-Containern, Gittercontainern und älteren Abschnitten gleichermaßen, es schnappt keine Elemente an die Spalten, also reiht man sie selbst an.
Ist Grid Line kostenlos?
No. Grid Line ist Teil von Master Addons Pro.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
