Erstellen eines Größen- und Abstandssystems mit Divi 5 -Designvariablen

DIVI 5 bietet Ihnen eine strukturierte Möglichkeit, die Entscheidungen für die Größe und Abstand auf Ihrer gesamten Website zu definieren, zu verwalten und wiederzuverwenden. Mit Entwurfsvariablen und Voreinstellungen können Sie ein skalierbares Designsystem erstellen, das einfach zu pflegen, anzupassen und zu replizieren ist.

In diesem Beitrag zeigen wir Ihnen, wie Sie in Systemen denken und Sie durch den Aufbau eines umfassenden Größen- und Abstandssystems führen.

Divi 5 ist bereit, auf jeder neuen Website zu verwenden, die Sie erstellen, aber es wird vorgeschlagen, dass Sie (vorerst) die Migration bestehender Websites abhalten.

Warum ein Größen- und Abstandssystem verwenden?

Die meisten Divi -Benutzer möchten Konsistenz in Layouts, Margen und Typografie. Aber nur wenige nehmen sich die Zeit, diese Standards frühzeitig zu definieren. Oder wenn Sie dies tun, haben Sie es wahrscheinlich über ein stark gestaltetes Kinderthema gemacht. Jetzt können Sie:

Abonnieren Sie unseren YouTube -Kanal

1. Definieren Sie einmal eine Zahlenvariable (wie 16px oder Clamp (16px, 4vw, 48px))
2. Weisen Sie es Modul-/Element -Voreinstellungen zu
3. Oder Option Gruppenvoreinstellungen (wie Abstand oder Größe)
4. Aktualisieren Sie die Variable später und sehen
5. Verwenden Sie insgesamt weniger CSS für schlankere Seiten

Mit anderen Baustellenbauern neigen Designer dazu, sich stark auf CSS -Frameworks zu stützen, um einen konsistenten Abstand und die Größe anzuwenden, während sie ein System verwenden, das sie von Projekt zu Projekt nehmen können. Mit Divi 5 können Sie Ihr eigenes „Design -Framework“ erstellen, das in der Divi -UI mithilfe der Entwurfsvariablen von Divi funktioniert, ohne eine einzelne Codezeile zu berühren.

Elementgröße, Polsterung und Ränder

Jedes Webelement verfügt über drei Komponenten, die den Gesamtabstand und die Gesamtgröße beeinflussen:

• Elementgröße : Die Kerninhaltsgröße eines Elements, definiert durch Breite und Höhe.
• Polsterung : Platz in einem Element hinzugefügt, um den klickbaren Bereich und die visuelle Größe zu erhöhen.
• Rand : Platz außerhalb eines Elements hinzugefügt und von anderen Elementen wegdrückt.

Praktische Beispiele für Divi -Elemente

Im Allgemeinen können Sie so erwarten, dass Sie Polster und Marge in Divi verwenden:

• Abschnitte haben normalerweise die obere und untere Polsterung (nicht den Rand), um einen vertikalen Abstand innerhalb einer Seite zu erstellen.
• Zeilen profitieren oft von vertikaler Polsterung, lassen sich jedoch inhaltlich ausfüllen.
• Spalten konzentrieren sich hauptsächlich auf den Rand, um Spaltenlücken zu erstellen.
• Module verwenden üblicherweise einen unteren Rand, um gestapelte Elemente klar zu trennen, aber die Menge an Rand hängt von visuellen Gruppierungen ab.

Divis Standardabstandswerte

Anfänger des Webdesigns, die Divi verwenden, erkennen wahrscheinlich nicht einmal, dass Divi einige Abstandsentscheidungen für Sie aus dem Box trifft. Erfahrene Designer passen diese häufig an ihre Ziele an, aber diese Standardeinstellungen lassen die meisten Menschen ihre Projekte schnell beginnen.

Diese Standardeinstellungen können hilfreich sein, aber Designer ziehen es häufig vor, ihre eigenen Abstandsstandards festzulegen. Wenn Sie sehen möchten, wie Ihre Seite ohne die Standardpolsterung aussehen würde, können Sie dies tun:

1. Gehen Sie zu jedem Element und finden Sie die Abstandsoptionsgruppe unter der Registerkarte "Entwurf" .
2. Öffnen Sie die Standardoptionsgruppe und stellen Sie die obere und untere Polsterung auf 0 (Null) ein.
3. Speichern Sie den Standardabstand OG Preset, um ihn auf jedes Element auf jedes Element anzuwenden.

Dies zeigt Ihnen, wie Ihre Seiten ohne Divi -Standardeinstellungen aussehen. Es sieht nicht so gut aus, aber Sie werden sehen, was Sie tun müssen, um Ihr eigenes Designsystem zu erstellen (oder Sie können die Standardeinstellungen von Divi verwenden und Änderungen vornehmen, wie Sie es für richtig halten).

Verwenden einer 8-Punkte-Abstandskala

Die 8-Punkte-Skala ist ein Layoutschema, bei dem Abstandswerte unter Verwendung von Inkrementen von 8 erstellt werden. Anstatt willkürliche Werte wie 13px oder 27px zu verwenden, halten Sie sich an Werte wie 8, 16, 24, 32, 40, 48 und so weiter.

Dieses System hilft:

• Halten Sie den vertikalen und horizontalen Rhythmus mit einer konsistenten Rubrik von Größen bei
• Stellen Sie sicher, dass Abstandsstapel über Haltepunkte hinweg sauber übernommen werden
• Beschleunigen Sie die Entscheidungsfindung (weniger Auswahlmöglichkeiten = schnelleres Design)

Sie können die Skala in PX oder REM abhängig von Ihrer Präferenz oder Ihrer Skalierung verwenden. Beispielsweise wird 16px 1rem, wenn die Basis -Schriftgröße 16px beträgt.

Modell einer Seite, die Ihre Aufmerksamkeit auf ausgewählte Bereiche gruppiert und Besucher mit vertikalem Abstand auf die Seite drückt

Der vertikale Abstand sagt dem Leser, wo er sich konzentrieren soll. Elemente, die mit engerem Abstand zusammengeklustert sind, werden natürlich als miteinander verbunden angesehen. Die Dinge, die durch mehr Raum getrennt sind, zeigen eine neue Idee.

So erstellen Sie ein Größen- und Abstandssystem

Ein System für Ihre Größen und Räume besteht aus zwei Dingen: Setzen von Variablen oder Token, die während eines Designs verwendet werden und diese Variablen im gesamten Site -Design konsequent verwenden. So können Sie das mit Divi tun.

Schritt 1: Erstellen Sie Zahlenvariablen im Designvariablenmanager

Divi 5 führt eine visuelle Schnittstelle zur Definition wiederverwendbarer numerischen Werte ein. Jede Zahlenvariable enthält:

1. Ein leicht zurückgerufener Name (z. B. Gap-SM, Text-H1), der nicht zu lang ist
2. Ein numerischer Wert oder Funktion Calc () oder Clamp ()
3. Eine CSS -Einheit (PX, REM, %, VW usw.)

Aufgrund des variablen Managers müssen Sie keine CSS -Variablen in einem separaten Stylesheet schreiben. Sie setzen alle diese im Entwurfsvariablenmanager ein und wählen sie dann aus den Eingabefeldern im Visual Builder aus.

Im Folgenden finden Sie einen vollständigen Startsatz von Zahlenvariablen, die einem 8-Punkte-Designsystem entsprechen. Sie müssen dies nicht verwenden, aber es gibt Ihnen eine Vorstellung davon, was möglich ist.

Und so sieht es so aus, als hätte dies im Variablenmanager ausgefüllt.

Beachten Sie, dass diese Abstandswerte in der kommenden Flexbox -Funktion von Divi 5 hilfreich sein werden

Schritt 2: Planen Sie Ihr 8-Punkte-Abstandssystem

Ihre Seiten enthalten normalerweise wiederholte Elementmuster. Suchen Sie nach allgemeinen Gruppen oder Clustern wie:

• Überschrift, Absatz, Button
• Kleine Überschrift, große Überschrift, Absatz
• Ikone, Absatz
• Karten mit mehreren Elementen

Mit Ihren ersten Wireframes (oder Platzhalterentwürfen) haben Sie die Möglichkeit, potenzielle Muster zu erstellen. Sie werden auch Dinge erstellen, die nicht in Muster passen, die Sie entscheiden müssen, wie Sie umgehen sollen. Aber das ist alles Teil des Entwerfens.

Sie können dies in Figma oder durch direkte Erstellung einer Drahtbeamtenseite mit Platzhalterelementen in Divi erstellen. Holen Sie sich einfach alles, was Sie auf einer Seite auslegen können. Sie können eine Chromverlängerung namens Mess alles verwenden, um den Abstand (zunächst mit Divi -Standardabstand) zu visualisieren, wenn Sie diese einstellen.

Um die Erweiterung zu verwenden, aktivieren Sie sie aus der Chrome -Erweiterungs -Symbolleiste. Klicken Sie dann auf ein Element auf der Seite, an dem Sie interessiert sind, und konzentrieren Sie sich auf das Tool auf dieses Element. Bewegen Sie Ihre Maus von dort aus, um verschiedene Aspekte zwischen dem aktuell ausgewählten Element und anderen Elementen zu messen, während Sie über sie schweben.

Schritt 3: Zahlen Sie Zahlenvariablen an Option Gruppenvoreinstellungen zu

Mit einem Drahtmodus einer Seite eingerichtet und einer Entwurfsvariablen können Sie mit Abstand und Größenänderungen auf Ihrer Seite beginnen. Sie können zuerst mit Gruppen von Inhalten beginnen. Konzentrieren wir uns auf die Überschrift, den Absatz und den Button im Heldenabschnitt.

Wireframe mit Platzhalterinhalt und Schrift-/Schriftgröße an Ort und Stelle

Beachten Sie, dass Sie zu diesem Zeitpunkt bereits einen ersten Entwurf Ihrer Typografie einrichten möchten. Dies umfasst Schriftarten, Schriftgrößen und Leitungshöhe/Buchstabenabstand. Ohne dies ist es sehr wahrscheinlich, dass Sie alle Ihre Größen neu ausbalancieren, sobald Sie Ihr typografisches System festlegen.

Beispiel für Typografie -Größenoptionen als Zahlenvariablen eingerichtet

Jetzt möchten wir beurteilen, welchen Standardabstand im Design angewendet wird. Dazu können Sie sich das Diagramm früher in der Post ansehen und es mit dem vergleichen, was wir in der Heldenabteilung vor sich gehen. Offensichtlich gibt es einen Abschnitt (Nr. 1) und zwei Zeilen (#2 und#3). Im Moment setzen wir die Standardzeile oben/untere Polsterung auf Null.

Als nächstes haben wir zwei Optionen für den Abschnitt: Wir können die Polsterung auf Null einstellen und später herausfinden, oder wir können einige vorläufige Ober- und Bodenpolsterung im Standardelement voreinstellen, damit Abschnitte so etwas aussehen:

• Desktop : Oben und untere Polsterung auf Space-XXXL eingestellt
• Tablet : Oben und untere Polsterung auf Space-xxl eingestellt
• Mobile : Oben und untere Polsterung auf Space-XL eingestellt

Aber was Sie tun, liegt ganz bei Ihnen und den Abstandsdesignvariablen, die Sie am Ende einrichten (oder die Standardeinstellungen verwenden, wenn Sie sie lieber als Ihre eigene annehmen). Was wir gerade haben (mit Standardzeilenpolster auf Null und benutzerdefinierter Abschnittpolster):

Schritt 4: Modulabstand

Das nächste, was Sie tun müssen, ist, den Abstand zwischen den Modulen innerhalb von Abschnitten/Zeilen zu arbeiten. Der Schlüssel besteht darin, eine konsistente Möglichkeit zu wählen, den Abstand auf Module anzuwenden.

Sie haben Optionen, Sie können den Abstand auf verschiedene Weise aufteilen:

• Wenden Sie den Abstand auf den Rand auf
• Wenden Sie den Abstand auf Randtopf auf
• Wenden Sie den Abstand gleichmäßig auf Randtop- und Randboden auf

Es ist wichtig, sich daran zu erinnern, dass in vielen Modulen standardmäßig ein Randboden angewendet wird. Ich empfehle, dass Sie mit dieser Konvention gehen und dort beginnen, wenn Sie Ihr Abstandsparadigma festlegen. Für den Anfang können Sie die oberen/unteren Ränder auf Null einstellen, um zu sehen, wie der Abstand zwischen Modulen ohne Standardeinstellungen aussieht.

In diesem Abschnitt haben wir 0PX auf den Rand oben und unten angewendet, um alle diese Module ohne Standardabstand zu sehen

Jetzt können wir dem Rand dieses Modulen mit dem Rand dieses Modules ab dem Rand des Randes zuweisen, um ein Abstandssystem zu erstellen. Wir beginnen mit der Überschrift und dem Körpertext.

Wenn Sie anfangen, Muster mit Ihrem Modulabstand zu sehen, möchten Sie diese Abstandsauswahl möglicherweise zu den Standardelement -Voreinstellungen hinzufügen. Da Sie Abstandsregeln für Elemente erstellen müssen, die abweichen, können Sie benutzerdefinierte Elementvoreinstellungen erstellen. Neue Elemente verwenden die Standardvoreinstellung von dort aus, können jedoch schnell ein benutzerdefiniertes Element -Preset für verschiedene Situationen auswählen.

Wie werden Sie Divi 5 für die Größe und den Abstand verwenden?

Das Erstellen eines Abstands- und Größensystems, mit dem Sie zufrieden sind, hängt davon ab, die Grundlagen zu üben und sich in die anstehenden Werkzeuge zu lehnen. Divi 5 ist auf dem Weg, das De -facto -Designsystem für WordPress -Websites zu erstellen. Es trifft den Sweet Spot, viel Flexibilität zu haben, aber es ist einfach, den Kopf herumzuwickeln.

Wenn Sie noch nie darüber nachgedacht haben, Designsysteme zu erstellen, können Sie DIVI nicht nur auf einem individuellen Modul oder einer Elementebene aus einer Entwurfsvariablen und voreingestellten Ebene nachdenken. Auf diese Weise können Sie konsequent Basisdesignentscheidungen auf Elemente anwenden.

Probieren Sie das 8-Punkte-System aus oder haben Sie andere Dinge geplant? Denken Sie auch zum ersten Mal über Divis Standardabstand nach? Das Entwerfen mit Divi automatisch, aber für professionelle Designer möchten Sie möglicherweise einige dieser Standardeinstellungen ändern, um Ihre Pixel-Perfekt-Sicht zu erreichen.

Divi 5 ist bereit für jede neue Website, die Sie erstellen.