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 Erweiterung der Gitterleitung In Master Addons Pro 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 nur im Editor über Ihrem Design, sodass Besucher es nie sehen, und Sie können überprüfen, ob Ihre Abschnitte und Widgets tatsächlich auf dem Raster ausgerichtet sind, das ein Designer in Figma oder Photoshop verwenden würde.
Standardmäßig ist ein 12-Spalten-Raster mit maximal 1140 px Breite und einer 15-px-Rinne, das sich auf Tablet auf 1025 px und 10 px verengt und auf Mobilgeräten auf 768 px und 8 px. Jeder Wert ist pro Gerät einstellbar, und das gesamte Overlay schaltet sich mit einem Kippschalter 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.
- A Master Addons Pro Lizenz, denn Grid Line ist eine Pro-Erweiterung.
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, von 1 bis 12. 12 ist der Standard, aber Sie können das Raster, das Ihr Design verwendet, anpassen.
- Maximale Breite: Die Gesamtbreite des Gitters, standardmäßig 1140 px. Passen Sie es an die Inhaltsbreite Ihrer Website an, damit 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 15 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, können Sie umdrehen Aktivieren Zurück für eine saubere Leinwand Einlassen schadet nicht, denn das Raster wird auf der veröffentlichten Seite nie angezeigt.
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 Master Addons Pro-Erweiterung, die eine Spaltenrasterüberlagerung im Elementor-Editor zeichnet. Sie legen die Anzahl der Spalten, die Rinne, die maximale Breite, den Offset 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 1 bis 12, mit 12 als Standard, und der Gutter-Schieberegler steuert den Raum zwischen Spalten Max Breite und Offset formen die Grundfläche des Gitters Jedes davon ist responsive, so dass Desktop, Tablet, und Mobil verschiedene 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 Das Raster erscheint so oder so nie auf der veröffentlichten Seite.
Ist die Grid Line Verlängerung kostenlos?
No. Grid Line ist eine Pro-Erweiterung in Master Addons, aufgelistet in der Gruppe Display Widgets der Registerkarte Erweiterungen Siehe die Preisseite für die Pläne.
Einwickelnd #
Die Erweiterung der Gitterleitung Gibt Elementor das eine, was jedes Design-Tool bereits hat: ein echtes Spaltengitter, gegen das man bauen kann Aktivieren Sie es einmal im Dashboard, drehen Sie es von Seiteneinstellungen ein, wenn Sie es brauchen, und stimmen Sie die Spalten, die Dachrinne und die Farbe so ab, dass sie zu Ihrem Design-System passen Durchsuchen Sie 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.
