Designer arbeiten oben auf einem Spaltenraster. So reihen sich Schlagzeilen, Karten und Schaltflächen an, anstatt ein paar Pixel voneinander entfernt zu driften. Elementor zeigt Ihnen keines an, daher erfolgt die Ausrichtung normalerweise nach Augenmaß. Die Gitterlinie Erweiterung in Master-Addons für Elementor Behebt, dass Sie mit einer Spaltenrasterüberlagerung direkt im Editor einschalten können.
Sie steuern die Anzahl der Spalten, die Dachrinne, die maximale Breite, den Versatz und die Farbe des Overlays direkt aus den Seiteneinstellungen von Elementor. Hier erfahren Sie, wie Sie es aktivieren und was jede Option tut.
Was die Grid Line-Erweiterung bewirkt #
Grid Line zeichnet einen Satz gleichmäßig verteilter vertikaler Spalten über Ihre Seite im Elementor-Editor. Das Overlay befindet sich oben auf Ihrem Design, sodass Sie überprüfen können, ob Ihre Abschnitte und Widgets tatsächlich im Raster ausgerichtet sind, das ein Designer in Figma oder Photoshop verwenden würde.
Standardmäßig ist ein 12-Spalten-Raster mit maximal 1280 px Breite mit einer 40 px-Rinne, die gleiche Konvention, die die meisten Designsysteme verwenden. Jeder Wert ist pro Gerät einstellbar und die gesamte Überlagerung schaltet sich mit einem Kipphebel ein und aus.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? folgen Sie dem Installationsführung Zuerst.
- Grid Line ist eine kostenlose Erweiterung, daher ist keine Pro-Lizenz erforderlich.
So aktivieren Sie die Grid Line-Erweiterung #
Schritt 1: Schalten Sie es auf der Registerkarte Erweiterungen ein #
Gehen Sie von Ihrem WordPress-Dashboard aus zu Master Addons Und öffnen Sie die Erweiterungen Tab. Gitterlinie lebt in der Widgets anzeigen Gruppe mit einem beliebten Abzeichen, neben Glassmorphism and Patterns Klicken Sie auf den Kipphebel, damit er violett wird.
Schritt 2: Speichern Sie Ihre Änderungen #
Scrollen Sie nach oben und klicken Sie Änderungen speichern. Ein grüner Hinweis “Einstellungen erfolgreich gespeichert” bestätigt, dass die Erweiterung aktiv ist Wenn der Elementor-Editor geöffnet war, laden Sie ihn einmal neu.
So zeigen Sie das Raster im Elementor-Editor an #
Öffnen Sie eine beliebige Seite mit Elementor und klicken Sie auf die Seiteneinstellungen Icon in der oberen Leiste Unter der Einstellungen Tab finden Sie eine neue Gitterlinie Abschnitt mit dem violetten MA-Abzeichen gekennzeichnet. Flip Aktivieren zu On, und die Spaltenüberlagerung erscheint sofort auf der Leinwand.
Da die Einstellung in Seiteneinstellungen gespeichert ist, erfolgt das Raster pro Seite: Sie entscheiden, wo sie angezeigt wird, und sie folgt Ihnen nicht in jedes Dokument.
Einstellungen der Gitterleitung erklärt #
- Aktivieren: Schaltet das Overlay für diese Seite ein und aus.
- Gitterfarbe: Die Farbe der Spalten Wählen Sie den globalen Swatch oder legen Sie mit dem Picker eine benutzerdefinierte Farbe fest Ein niedriger Opazitätswert hält Ihren Inhalt unter dem Overlay lesbar.
- Spalten: Wie viele Spalten zu zeichnen. 12 ist der Standard, aber Sie können das von Ihrem Design verwendete Raster anpassen.
- Maximale Breite: Die Gesamtbreite des Gitters, standardmäßig 1280 px. Passen Sie es an die Inhaltsbreite Ihrer Website an, sodass die Spalten mit Ihrem tatsächlichen Layout übereinstimmen.
- Versatz: Drückt das Gitter von den Rändern hinein, wenn Ihr Layout es benötigt.
- Dachrinne: Der Raum zwischen Spalten, standardmäßig 40 px.
- Z-Index: Die Stapelreihenfolge des Overlays beträgt standardmäßig 999, sodass das Raster über Ihrem Inhalt sichtbar bleibt.
Spalten, Max Width, Offset und Gutter sind reaktionsfähige Steuerelemente: Klicken Sie auf das Gerätesymbol neben jeder einzelnen, um unterschiedliche Werte für Desktop, Tablet und Mobilgerät festzulegen.
Ändern Sie die Gitterfarbe #
Klicken Sie auf den benutzerdefinierten Swatch neben Gitterfarbe Farbwähler zu öffnen Jeder HEXA-Wert funktioniert, und der Alphakanal ist am wichtigsten: So etwas wie 50 Prozent Deckkraft gibt Ihnen sichtbare Spalten, ohne das Design darunter zu verbergen.
Stimmen Sie die Säulen und die Dachrinne #
Ziehen Sie die Schieberegler und die Overlay-Updates live. Im Beispiel unten ist die Dachrinne bis zu 58 px groß und das Raster trägt eine benutzerdefinierte Tönung, sodass es vor dem hellen Hintergrund klar liest, während die Preiskarten lesbar bleiben.
Wenn das Layout ausgerichtet ist, wenden Sie es Aktivieren Zurück aus. Die Einstellung speichert mit der Seite, so dass man das Overlay leicht vergessen kann.
Wenn Grid Line Ihnen Zeit spart #
- Passend zu einer Designdatei. Erstellen Sie ein Figma- oder XD-Layout auf demselben 12-Säulen-Gitter, auf dem es entworfen wurde, anstelle von Augenhöhlenabständen neu.
- Ausrichtungsabschnitte. Überprüfen Sie, ob Elemente in verschiedenen Abschnitten in derselben Spalte beginnen und enden.
- Konsistente Seitenreihen. Führen Sie Landingpages durch, die von verschiedenen Teammitgliedern auf einem gemeinsamen Raster erstellt wurden.
- Polieren importierter Vorlagen. Lassen Sie das Overlay von a auf eine Seite fallen Vorlagenkit und die Elemente erkennen, die netzunabhängig sitzen.
- Abstandsentscheidungen. Verwenden Sie die Dachrinnenlinien als schnelles Lineal bei der Einstellung der Säulenbreiten und der Polsterung.
Video-Tutorial #
Sehen Sie es lieber in Bewegung? Dieses Video geht durch die Aktivierung der Grid Line und die Anpassung der Überlagerung im Elementor-Editor.
Häufig gestellte Fragen #
Was ist die Grid Line-Erweiterung in Master Addons?
Es handelt sich um eine freie Erweiterung, die im Elementor-Editor eine Spaltenrasterüberlagerung zeichnet Sie legen die Anzahl der Spalten, die Dachrinne, die maximale Breite, den Versatz und die Farbe aus den Seiteneinstellungen fest und verwenden dann die Spalten, um Abschnitte und Widgets so auszurichten, wie es Designer in Figma tun.
Wo finde ich die Einstellungen der Grid Line?
Öffnen Sie im Elementor-Editor die Seiteneinstellungen von der oberen Leiste und bleiben Sie auf der Registerkarte Einstellungen Nachdem Sie die Erweiterung im Master Addons-Dashboard aktiviert haben, erscheint dort ein Rasterzeilenabschnitt mit einem MA-Abzeichen, der den Umschalter aktivieren und alle Rasteroptionen hält.
Kann ich die Anzahl der Säulen und die Dachrinne ändern?
Ja. Das Feld Spalten nimmt eine beliebige Zahl an, standardmäßig 12, und der Gutter-Schieberegler steuert den Raum zwischen Spalten Max Breite und Offset formen die Grundfläche des Gitters. Jedes davon ist responsive, sodass Desktop, Tablet und Mobilgeräte unterschiedliche Werte verwenden können.
Zeigt die Rasterüberlagerung auf jeder Seite?
No. Grid Line ist eine Einstellung pro Seite innerhalb der Seiteneinstellungen, so dass Sie es nur auf den Seiten aktivieren, auf denen Sie die Überlagerung wollen Schalten Sie den Aktivieren-Umschalter aus, wenn Sie die Ausrichtung beendet haben, und diese Seite geht zurück zu einer sauberen Leinwand.
Ist die Grid Line Verlängerung kostenlos?
Ja. Grid Line wird mit der kostenlosen Version von Master Addons for Elementor ausgeliefert, in der Gruppe Display Widgets der Registerkarte Erweiterungen Überprüfen Sie die Preisseite Zu sehen, was die Pro-Pläne über die kostenlosen Erweiterungen hinaus hinzufügen.
Einwickelnd #
Die Grid Line-Erweiterung gibt Elementor das Einzige, was jedes Designtool bereits hat: ein echtes Spaltengitter zum Aufbau gegen Aktivieren Sie es einmal im Dashboard, drehen Sie es von den Seiteneinstellungen ein, wenn Sie es brauchen, und stimmen Sie die Spalten, die Dachrinne und die Farbe passend zu Ihrem Designsystem durch den Rest des Master Addons Widgets und Erweiterungen Für weitere Tools wie dieses, einschließlich der Welches Element Hover-Etiketten für den Editor.
