Erstellen eines Gap-basierten Abstandssystems mit Divi 5

Der konstante Abstand ist die Grundlage einer polierten, professionellen Website. Anstatt die Margen einzelner Elemente einzeln zu verwalten, können Sie sich auf ein einzelnes System verlassen, das die Layouts über Ihre Website sauber und ausgewogen hält.

Mit den neuen Designvariablen und Flexbox-Funktionen von Divi 5 können Sie nun ein Lückenabstandssystem direkt im visuellen Builder erstellen und keine benutzerdefinierte Codierung erforderlich. Schauen wir uns an!

Warum traditionelle Abstandsmethoden zu kurz kommen

Ränder und Polster scheinen einfach genug zu sein. Fügen Sie hier etwas Platz hinzu, passen Sie die Polsterung dort an. Dieser Ansatz kann jedoch leicht chaotisch werden. So spielt es in der Praxis aus:

Sie setzen einen 30px -Rand für einen Textblock. Dann benötigen Sie Platz um eine Taste, also fügen Sie 20px hinzu.

Ein weiteres Modul muss Platz atmen, sodass Sie 40px auswählen. Jede Entscheidung fühlt sich im Moment richtig an, aber Sie bauen ein Kartenhaus.

Wechseln Sie zu Mobilgeräten, und alles könnte nicht ausgerechnet aussehen. Diese sorgfältig ausgewählten Pixelwerte übersetzen nicht. Ihr Abstand sieht auf dem Desktop perfekt aus, ist jedoch auf kleineren Bildschirmgrößen aus dem Gleichgewicht geraten. Daher erstellen Sie mobile Werte und dann Tablet-Werte.

Jetzt verwalten Sie drei verschiedene Abstandssysteme. Dieser geteilte Ansatz macht die Aufrechterhaltung eines konsistenten visuellen Rhythmus auf Ihrer Website schwierig.

Wie Gap -Eigenschaften den Abstand einfach machen

GAP -Eigenschaften funktionieren anders als traditionelle Margen. Sie wenden nicht einzeln auf jedes Element den Abstand an. Stattdessen setzen Sie die Abstandsregeln für den übergeordneten Container fest. Der Container verarbeitet den Abstand zwischen allen untergeordneten Elementen automatisch.

Wenn Flexbox aktiviert ist, erhalten Sie zwei Lückensteuerungen: horizontal und vertikal. Stellen Sie die horizontale Lücke auf 24px ein, und alle untergeordneten Elemente erhalten horizontal 24px Platz zwischen ihnen. Stellen Sie die vertikale Lücke auf 15px ein, und gestapelte Elemente erhalten 15px vertikaler Raum.

Dies funktioniert für Inhalte im Flexbox -Container. Textmodule, Bilder, Schaltflächen, Trennwände und was auch immer Sie dort einsetzen, erhalten den gleichen konsistenten Abstand. Sie müssen nicht einzelne Module durchsuchen und ihre Ränder getrennt anpassen. Gap -Eigenschaften verarbeiten die Abstandsmathematik.

Die herkömmliche Methode trifft zufällige Abstandentscheidungen: 10px hier, 20px dort, 40px woanders. Diese verstreuten Werte verursachen Inkonsistenzen und machen es schwierig zu wissen, welcher Abstand gilt. GAP -Eigenschaften entfernen Vermutungen, indem eine konsistente Regel für alle Elemente verwendet wird.

Dieser Ansatz hat immer noch Einschränkungen. Sie müssen sich immer noch an jeden Wert erinnern, den Sie verwendet haben, und sie manuell anwenden, wo immer Sie ihn benötigen. Sie müssen erraten, welche Werte wo funktionieren. Sobald Sie diese Werte festgelegt haben, bedeutet dies, Ihren Geist zu ändern, jeden einzelnen zu finden und manuell zu ersetzen, um Fehler und Inkonsistenzen zu lassen.

Ein spaltbasiertes Abstandssystem mit Flexbox- und Designvariablen ist ein viel besserer Ansatz.

So richten Sie das Gap -System in Divi 5 ein

Das Aufbau eines spaltbasierten Abstandssystems klingt komplex, aber Divi 5 macht es überraschend unkompliziert. Sie benötigen keine Codierungswissen oder externe Frameworks. Der visuelle Builder behandelt alles über Designvariablen und Flexbox -Steuerelemente. Wir werden Sie durch jeden Schritt führen, von der Erstellung Ihrer Abstandsvariablen bis hin zum Speichern wiederverwendbarer Voreinstellungen.

1. Erstellen Sie Abstandsvariablen

Divi 5 kann Lückenwerte im visuellen Bauunternehmer unter Verwendung von Designvariablen speichern. Sie erstellen Ihr Abstandssystem einmal und wenden diese Werte überall an, wo Flexbox -Steuerelemente angezeigt werden. Es sind keine benutzerdefinierten CSS -Funktionen erforderlich.

Der variable Manager befindet sich in der linken Seitenleiste Ihres visuellen Builders. Klicken Sie auf dieses Symbol und öffnen Sie dann die Registerkarte "Zahlen", in dem Abstandsvariablen hinzugefügt werden können.

Hier erstellen Sie Werte, die auf der gesamten Website anstelle von hartgesottenen Pixeln verwendet werden können. Es sind mehrere Entwurfsvariablen verfügbar; Wir werden diese in diesem Beitrag nicht behandeln, aber wir haben einen hervorragenden Leitfaden.

Beginnen Sie mit Ihrer Basisabstandseinheit. Die meisten Designer arbeiten mit 8-12px als Grundlage, aber Sie können 4px, 10px oder was auch immer zu Ihrem Design-Rhythmus entscheiden. Abgesehen von nur Pixeln können Sie erweiterte Einheiten verwenden. Zum Beispiel beginnen wir mit REM anstelle von Pixel (vorausgesetzt, der Browser Standard 1REM = 16PX):

• Lücke XS: 0,75REM (~ 12px für enge Beziehungen für Spalten mit nur Symbol und Text)
• GAP S: 1,25REM (~ 20px für Spalten mit Textblöcken)
• Lücke M: 2REM (~ 32px für Funktionsboxen, Servicespalten)
• GAP L: 3REM (~ 48PX für Hauptinhaltsabschnitte, Seitenleistelayouts)

Diese Etiketten sind nicht behoben; Sie und Ihr Team können sie nach Bedarf umbenennen. Sie können auch mehr Lückenvariablen hinzufügen. REM -Einheiten skalieren mit Einstellungen der Browser -Schriftarten, sodass Besucher, die die Textgröße erhöhen, einen proportionalen Abstand erhalten. Dies verbessert die Zugänglichkeit.

Verwenden Sie Klemmen, um skalierbare Lücken zu machen

Wir können auch Clamp () verwenden. Wir werden kurz erklären, ob Sie nicht wissen, was für eine Klammer () ist. Erwägen Sie jedoch zunächst auch die Folgen zu den Zahlenvariablen hinzuzufügen:

• Horizontaler Säulenspalt: Clamp (16px, 2VW, 32px) (für horizontale Lücken zwischen Karten, Merkmalen usw.)
• Vertikaler Säulenspalt: Clamp (16px, 1,5 VW, 32px) (für vertikale Lücken zwischen Karten, Merkmalen usw.)

Clamp () ist eine sichere CSS -Einheit. Sie geben drei Werte an: min, bevorzugt und max. Der Browser versucht den bevorzugten Wert, aber wenn er zu klein ist, verwendet er die min, und wenn er zu groß ist, verwendet er das Max.

Beispielsweise horizontaler Säulenspalt: Klemme (16px, 2vw, 32px). Die Lücke skaliert mit Bildschirmbreite (2VW = 2% des Ansichtsfensters). Es wird auf kleinen Bildschirmen oder über 32px auf großen Bildschirmen nicht unter 16px gehen. Dadurch wird der Abstand ohne Haltepunkte oder Medienfragen ausgeglichen.

Sie können alle Werte verwenden. Wir haben diese Methode ausgewählt, weil sie einfach zu pflegen, sich an Veränderungen anzupassen und konsistentere Ergebnisse zu erzielen.

2. Aktivieren Sie das Flexbox -Layout in Ihren Abschnitten

Neue Abschnitte verwenden standardmäßig Flexbox. Konvertieren Sie für ältere Websites einen Abschnitt, indem Sie auf das Symbol "Einstellungen" klicken, die Registerkarte "Design" öffnen, Layoutstil unter der Registerkarte Layout auswählen und "Flex" auswählen. Tun Sie dasselbe für Ihre Zeilen und Spalten.

Nachdem Sie Flex aktiviert haben, erhalten Sie Optionen wie die Rechtfertigung von Inhalten für Ausrichtung und Verteilung. Ausgerichtete Elemente -Steuerelemente können Sie festlegen, wie sich Elemente verhalten, wenn der Platz horizontal ausgeht.

Hier können Sie die Lückensteuerungen erkennen, die separate horizontale und vertikale Schieberegler haben, um den Abstand zwischen Spalten oder Modulen innerhalb einer Zeile festzulegen.

3. Anwenden Sie Lückenwerte mit Ihren Variablen an

Sobald Sie Ihre GAP -Variablen im Variablen -Manager von Divi eingerichtet haben, wird die Anwendung auf die Flexbox -Gap -Einstellungen durch das dynamische Inhaltssystem unkompliziert. Navigieren Sie zu Ihren Layouteinstellungen und bewegen Sie sich über die Beschriftungen in den horizontalen oder vertikalen Lückenfeldern, um das dynamische Inhaltssymbol anzuzeigen.

Klicken Sie auf das Symbol für dynamisches Inhalt, um das Dialogfeld Variable Auswahl zu öffnen. Ihre gespeicherten Lückenvariablen werden in diesem Menü angezeigt.

Wie Sie vielleicht bemerkt haben, haben wir zwei Sätze Lücken hinzugefügt, die auf dem Kontext basieren, in dem sie verwendet würden. Lassen Sie uns einen tieferen Tauchgang machen, um zu verstehen, warum:

Klemmlücken: Zwischen Flex -Spalten

Ihre Klemmlücken würden auf der Ebene „Container“ durch Divi's Flexbox -Einstellungen funktionieren.

Wenden Sie den horizontalen Säulenspalt [Clamp (16px, 2VW, 32px)] an, wenn Sie Spalten nebeneinander angeordnet sind, z. B. drei Servicekarten in einer Zeile. Nach der Auswahl wendet Divi es automatisch auf die Lückeneinstellung an. Das Feld zeigt Ihren Variablennamen an und bestätigt die Verbindung. Dadurch wird der proportionale horizontale Abstand zwischen Spalte 1, Spalte 2 und Spalte 3 erstellt, wenn die Layout -Richtung als Zeile eingestellt wird.

Wenden Sie den vertikalen Spaltenspalt [Klemme (16px, 1,5 VW, 32px)] an, wenn Ihre Layout -Richtung auf die Spalte eingestellt ist, wobei die Elemente vertikal gestapelt sind. Dadurch werden Elemente proportional von oben nach unten gelegt, wenn die Layout -Richtung als Spalte festgelegt wird.

Wenn Spalten mit Zeilenrichtung in mehrere Zeilen eindringen, wie sechs Karten, die in drei Spalten pro Zeile angeordnet sind, wenden Sie beide Lücken an. Ein horizontaler Lückenräume in jeder Reihe, während ein vertikaler Spalt die Reihen selbst spreibt.

Grundlücken: Inhalt innerhalb von Zeilen

Ihre Basislücken steuern die Beziehungen zwischen Inhaltsteilen in jeder Spalte. Wenn auf eine Überschrift einen Absatz und eine Taste in derselben Spalte folgt, sollten Sie einen Absatz (0,75REM) zwischen ihnen anwenden.

Erwägen Sie, GAP S (1.25REM) für Inhaltsgruppen mit mehreren Textelementen oder Gap L (3REM) zu verwenden, wenn Sie einen signifikanten Abstand zwischen zwei Spalten benötigen, insbesondere wenn die Layout -Richtung der Spalte auf eine Zeile eingestellt ist.

Die Konstruktionsvariablen Vorteil

Konstruktionsvariablen haben mehrere Vorteile gegenüber den manuellen Tippwerten. Da Etiketten kontextuell sein können, bleiben sie den Abstand konsistent, ohne sich Pixel- oder REM -Werte auswendig zu lernen.

Wenn Sie die Abstandsphilosophie ändern, aktualisieren Sie eine Variable im Variablenmanager, um jede Lücke zu aktualisieren, die auf der Website verwendet wird.

Diese visuelle Methode vermeidet auch Abstandsfehler, wenn Teammitglieder unterschiedliche Werte eingeben. GAP -Variablen erstellen eine gemeinsame Sprache für den Abstand und halten die Layouts mit den von Ihnen festgelegten Designstandards aus. Dies ist besonders hilfreich bei großen Projekten mit vielen Mitwirkenden oder nach der Übergabe von Kunden, wenn Kunden Seiten bearbeiten oder hinzufügen.

4. Richten Sie ansprechende Lücken ein

Mobiltelefone verfügen über einen begrenzten horizontalen Raum. Ihr dreispaltiges Service-Layout sieht auf dem Desktop großartig aus, wird jedoch auf einem 360px-Telefonbildschirm beengt und steif zu lesen.

DIVI 5 bietet Ihnen sieben anpassbare Haltepunkte mit: Telefon, Telefon, Tablet, Tablet, Desktop, Breitbild und Ultra breit. Jeder Haltepunkt funktioniert unabhängig. Sie können die Layout -Richtung ändern, Lückenvariablen austauschen oder die Ausrichtung auf dem Handy anpassen, ohne den Desktop durcheinander zu bringen. Auf diese Weise können Sie genaue Bildschirmbreiten ansprechen, bei denen sich Ihr Layout ändern muss.

Wechseln Sie zu Ihrem Telefon -Haltepunkt und ändern Sie die Layout -Richtung von "Zeile" auf "Spalte". Löschen Sie die Option Horizontal Gap, da Ihre Spalten vertikal stapeln, anstatt um den horizontalen Raum zu kämpfen.

Die vertikale Lücke auf Klemmbasis schrumpft und wächst automatisch, wenn sich die Ansichtsfenster ändert. Auf einem kleinen Telefonbildschirm entspricht 2 VW etwa 7px, aber die Klemme überschreitet nicht die mindestens 16px. Auf einem größeren Bildschirm könnte 2 VW 18PX und auf einem noch größeren Bildschirm 20px bedeuten.

Der Abstand wächst reibungslos zwischen diesen Grenzen, wenn sich die Bildschirmgröße ändert. Ohne manuell unterschiedliche Werte einzustellen, erhalten Sie einen engen Abstand auf dem mobilen und großzügigen Abstand auf dem Desktop.

Grundlücken benötigen möglicherweise noch manuelle Verbesserungen pro Haltepunkt. Gap M fühlt sich auf dem Handy zu eng an. Wechseln Sie zu Ihrem mobilen Haltepunkt und wenden Sie Lücke L anstelle der Option vertikaler Lücke an.

Sie können auch mobile Variablen wie „Gap Mobile S“ oder „Gap Mobile L“ erstellen und diese auf Telefon- und Tablet-Haltepunkte anwenden. In den meisten Fällen funktionieren die Grund- und Klemmlücken jedoch gut.

5. Speichern Sie Ihre Konfiguration als Voreinstellung

Ihr Gap -System funktioniert jetzt gut. Mit Designvariablen können Sie die Kontrolle über den Abstand über die visuelle Schnittstelle haben, mit der Sie gearbeitet haben. Das Einrichten von Flexbox -Konfigurationen wird jedoch immer wieder alt. Sie müssen Layout -Richtung, Ausrichtung und Verpackungseinstellungen einstellen. Dann wenden Sie Ihre Gap -Variablen auf jeden neuen Abschnitt an. Dieser Prozess frisst Zeit.

Option Group Voreinstellungen beheben dieses Problem. Es speichert Ihr komplettes Flexbox -Setup, einschließlich Layout -Richtung, Ausrichtung, Verpackung, Begründung sowie horizontaler und vertikaler Lücken, die auf Ihre Entwurfsvariablen verweisen.

Wenn Sie alle Flexbox -Einstellungen konfigurieren, schweben Sie über das Layout -Stil. Sie sehen das Symbol für Option Group Presets.

Klicken Sie darauf und wählen Sie "Voreinstellung aus aktuellen Stilen erstellen". Nennen Sie es basierend auf dem, was das Layout tut: "Drei Spaltenraster", "Services Grid" oder "Kartenanzeige".

Das Voreingang überträgt die Flexbox -Konfiguration zu einem beliebigen Container. Es kopiert keine Hintergrundfarben, Schriftarten oder ein anderes visuelles Styling.

Wenden Sie Ihr „Drei -Spalten -Gitter“ voreingestellt auf jede Reihe. Es wird automatisch den gleichen Abstand, die gleiche Ausrichtung und das Verpackungsverhalten eingerichtet. Jede Zeile oder Spalte hält ihren visuellen Look bei der Verwendung derselben Layoutstruktur.

Sie verbringen weniger Zeit damit, Setups nachzubauen, die Sie bereits perfektioniert haben. Die visuelle Identität bleibt für jeden Abschnitt einzigartig. Die strukturelle Fundament bleibt auf Ihrer Website konsistent. Ihr Gap -System bleibt schnell und Ihre bewährten Layoutmuster werden effizient wiederverwendet.

Holen Sie sich jedes Mal den perfekten Abstand mit Divi 5

Mit den neuen Flexbox- und Designvariablen von Divi 5 wird der konstante Abstand mühelos. Gap steuert Gleichgewichtslayouts über Geräte hinweg, während Variablen sicherstellen, dass Aktualisierungen auf Ihrer Website mit einer einzigen Änderung reflektieren.

Anstelle von ständigen Korrekturen erhalten Sie ein klares System, dem Sie vertrauen können. Stellen Sie Ihren Abstand einmal ein, verwenden Sie ihn überall wieder und konzentrieren Sie sich darauf, großartige Erlebnisse für Ihre Besucher zu entwerfen.