So ersetzen Sie statische Stile durch Designvariablen von Divi 5

Wenn Sie jemals Farben, Polsterung oder Schriftarten jeweils optimiert haben, haben Sie wahrscheinlich erkannt, wie langsam, fehleranfälliger und langweiliger manueller Stiländerungen sein können.

Divi 5 führt eine intelligentere Möglichkeit vor, damit umzugehen. Mit Entwurfsvariablen und Finden und Ersetzen können Sie statische Stile in Ihrem Layout aktualisieren und ein wiederverwendbares Designsystem in Minuten erstellen. Mal sehen, wie.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden.

Was sind „statische Stile“?

Wenn Sie ein Divi-Layout importieren oder einen vorgezeichneten Abschnitt verwenden, ist alles festgelegt, alles wie Schriftarten, Farben, Abstand und Grenzen. Wenn ein Layout keine Voreinstellungen verwendet, werden Sie feststellen, dass diese Werte auf Elementebene angewendet werden.

Eine Überschrift hat möglicherweise die Schriftgröße manuell eingegeben. Eine Taste kann einen bestimmten Farbcode verwenden, und das Polsterung oder Abstand kann feste Zahlen verwenden. Diese direkt angewandten Werte werden als statische Stile bezeichnet.

Und obwohl sie zunächst harmlos wirken, können sie schnell zu einem Problem werden, wenn Sie Änderungen vornehmen möchten. Das Problem mit statischen Stilen ist, dass sie mehr Zeit für die Verwaltung in Anspruch nehmen. Wenn Sie die Farbe aller Schaltflächen ändern oder den Abschnitt über Abschnitte einstellen möchten, müssen Sie jeden manuell bearbeiten. Das ist langsam und frustrierend.

Stellen Sie sich nun vor, Sie aktualisieren eine komplette Website -Marke manuell oder arbeiten an einem komplexen Layout voller wiederholter Stile. Viele Designer haben geteilt, wie frustrierend dieser Prozess sein kann. Aber jahrelang gab es keinen zuverlässigen Weg, es zu beheben. Deshalb haben wir in Divi 5 eine intelligentere Lösung gebaut.

Wie Divi 5 das Ersetzen statischer Stile erleichtert

Eines unserer Ziele mit Divi 5 ist es, Ihren Design -Workflow schneller und weniger wiederholend zu gestalten. Um dabei zu helfen, haben wir zwei leistungsstarke Funktionen hinzugefügt: Designvariablen , mit denen Sie Ihre Stile zentralisieren und finden und ersetzen können , mit denen Sie sie sofort über Ihr Layout informieren können. Lassen Sie uns sie im Detail verstehen.

Mit Designvariablen können Sie Ihre globalen Stile definieren

Mit Divi 5 können Sie endlich Ihr eigenes Design -Framework visuell erstellen und Ihre Markenstile schnell ändern.

Anstatt die gleiche Farbe, Schriftart oder Abstand auf jedes Modul manuell anzuwenden, können Sie diese Werte jetzt als Designvariablen speichern. Dies sind wiederverwendbare Werte, auf die Sie auf Ihrer Website verweisen können, um Ihr Design konsistenter und leichter zu warten.

Mit dem Variable Manager können Sie im visuellen Bauunternehmer Variablen in sechs verschiedenen Typen erstellen und organisieren: Farben, Schriftarten, Zahlen (wie Abstand oder Größen), Text, Bilder und Links.

Sie können jede Variable mit einem klaren Namen speichern, z. B. die Polsterung des Abschnitts, also ist es einfacher, sie zu finden und wiederzuverwenden. Im Gegensatz zum manuellen Schreiben von CSS -Variablen können Sie diese Werte visuell verwalten, ohne den Code zu berühren.

Das Anwenden dieser gespeicherten Variablen ist ebenfalls einfacher. Gehen Sie beim Anpassen eines Moduls zu Einstellungen, suchen Sie das Symbol Variable Manager und wählen Sie Ihre Variable aus der Liste.

Sie werden den wirklichen Vorteil sehen, wenn es Zeit ist, Änderungen vorzunehmen. Nehmen wir an, Sie möchten die Polsterung überall ändern. Anstatt Dutzende von Modulen zu bearbeiten, aktualisieren Sie die Werte nur einmal im Variablen -Manager und aktualisieren Sie auf Ihrer Website.

Beachten Sie die Werte, die sich in Echtzeit in angewandten Einstellungsfeldern ändern? Das ist die Kraft eines globalen Designsystems.

Und das ist auch nicht auf Designstile beschränkt. Um wiederholte Inhalte effektiv zu verwalten, können Sie auch Text, Bilder und Links wie eine Adresse, E -Mail oder Unternehmens -Slogan als Inhaltsvariable speichern. Es ist nicht mehr erforderlich, das Pasten zu kopieren. Fügen Sie es einfach wie dynamischen Inhalt ein, und es bleibt auf Ihrer Website konsistent.

Erfahren Sie alles über Designvariablen

Mit Finden und Ersetzen können Sie von statischen zu globalen Stilen wechseln

Mit der Find & Ersatzfunktion von Divi 5 können Sie die Stilwerte in Ihrem Layout schnell aktualisieren, ohne jedes Modul einzeln zu bearbeiten. Es soll Ihnen helfen, statische Werte wie Farben, Schriftarten, Abstand oder andere Einstellungen zu ändern, die sich über Abschnitte aus einem einzigen Startpunkt mit nur wenigen Klicks wiederholen.

Um es zu verwenden, klicken Sie mit der rechten Maustaste auf ein beliebiges Stilfeld im visuellen Builder oder schweben Sie über die drei Punkte. Sie werden die Option Find & Ersatz im Dropdown -Bereich sehen.

Dadurch wird ein neues Fund- und Ersetzungsfeld geöffnet. Hier können Sie die gewünschten Änderungen vornehmen und sie in großen Mengen anwenden.

• (1.) Quellelement: Die Einstellung, die Sie abzielen (z. B. Text, Farbe oder Abstand). Öffnen Sie den Dropdown und Sie werden feststellen, dass es tatsächlich die Ebenenhierarchie ist.
• (2.) Wert finden: Der genaue Wert, den Sie ersetzen möchten, z. B. eine bestimmte Schriftart oder eine bestimmte Farbcode.
• (3.) Wert ersetzen: Der neue Wert oder die neue Variable, die Sie stattdessen anwenden möchten.
• (4.) Suchen und ersetzen Sie sie an Ort und ersetzen Sie, wo Sie die Änderung anwenden. Dieses Modul, der Abschnitt oder die gesamte Seite.
• (5.) Suchen und ersetzen Sie in Elementtypen: Entscheiden Sie, ob die Änderung für alle Elemente oder nur bestimmte Modulypen gelten sollte.
• (6.) Ersetzen Sie nur identische Felder: Wenn aktiviert, erfolgen die Austausch nur dann, wenn sowohl die Einstellung als auch der Wert genau übereinstimmen.

So funktioniert es. Nehmen wir an, Sie möchten die auf der Seite verwendete Kopfschrift ändern. Anstatt das Modul mit Modul zu machen, verwenden wir das Fund- und Ersetzen -Panel.

Wenn Sie es aus den Einstellungen einer Überschrift öffnen, ist das Quellelement automatisch ausgewählt, sodass Sie es nicht immer manuell auswählen müssen.

(Sie können auch auf verschiedene Elemente klicken, und die Paneloptionen werden automatisch angepasst.)

Geben Sie im Suchwert den zu ersetzenden Wert ein. Für unser Beispiel ist es Medula 1, die aktuelle angewandte Schriftart. Wählen Sie im Wert Ersetzen Sie den neuen Wert, den Sie bewerben möchten, im Wert. Wählen wir Aclonica.

Wählen Sie dann aus, ob Sie alle Instanzen auf der gesamten Seite oder nur in der Spalte, der Zeile oder im Abschnitt im Suchen und im Abschnitt in der Position aktualisieren möchten. Halten Sie das Fund und Ersetzen in Elementtyp als alle Elemente, da wir alle Überschriftenmodule ansprechen möchten.

Und das war's. Klicken Sie einfach auf Find und Ersetzen, und in Sekunden werden 20 Heading -Instanzen aktualisiert. Beachten Sie, dass der Körpertext und die Schaltflächenschriften unberührt bleiben? Das liegt daran, dass sie unterschiedliche Werte verwenden. Und so genau ist das System.

Divi wendet nur Änderungen an, wenn es eine genaue Übereinstimmung findet. Dies bedeutet, dass Sie statische Stile sicher aufräumen können, ohne Designs durcheinander zu bringen, die sich nicht ändern müssen. Aber wie passen Designvariablen hierher?

Sie sind wie das i -Tüpfelchen. Sie können auch Entwurfsvariablen im Feld Ersetzen Sie den Ersatz -Wert -Feld verwenden. Überflüssig darüber, klicken Sie auf das Symbol Variable Manager und fügen Sie eine gespeicherte Variable ein.

Dies verbindet Ihre Stile mit einem weltweit wiederverwendbaren System, das viel einfacher und effizienter zu aktualisieren ist. Genau auf diese Weise werden wir alle unsere statischen Werte durch Designvariablen ersetzen, um unsere Website für einfachere Updates zu künftigsicher zu machen.

Erfahren Sie alles über Finden und Ersetzen

Beide Funktionen (und viele weitere) sind in Divi 5 erhältlich. Der Bauherr wurde neu interpretiert, um eine schnellere Leistung, intelligentere Workflows und mehr Kontrolle zu bieten. Ehrlich gesagt ist es aufregend, über sie zu lesen, aber Sie werden die wirkliche Veränderung bemerken, wenn Sie diese Funktionen selbst erleben.

So ersetzen Sie statische Stile durch gespeicherte Variablen

Nachdem Sie wissen, welche Tools wir verwenden werden, ist es Zeit, sie in Aktion zu sehen.

Um Sie durch den Prozess zu führen, habe ich das Pie Shop -Landing -Page -Layout als Beispiel importiert. Die Entwurfsdetails dieses Layouts wie Schriftarten, Farben und Abstand wurden als statische Stile angewendet. Der traditionelle Weg erfordert, dass Sie es mit Modul anpassen. In diesem Tutorial werden wir sie jedoch Schritt für Schritt mit dem gerade abgedeckten Workflow ersetzen.

Bevor Sie sich jedoch eintauchen, nehmen Sie sich einen Moment Zeit, um Ihr Layout nach Mustern zu scannen. Suchen Sie nach wiederholten Stilen, wie beispielsweise dieselbe Farbe, die über Tasten verwendet wird, ähnliche Schriftgrößen in Überschriften, einen konsistenten Abstand zwischen Abschnitten oder identische Randeinstellungen. Diese Wiederholungswerte sind Ihre besten Kandidaten für Designvariablen, insbesondere wenn Sie sie wahrscheinlich später ändern.

1. Speichern Sie Ihre Designvariablen

Nachdem ich das Pie -Shop -Layout analysiert habe, habe ich einige Werte identifiziert, die auf der Seite konsequent erscheinen und sie mit meinen bevorzugten Stilen aktualisieren möchten. Dazu gehören:

• Reihenrandbreite
• Knopfpolsterung
• Übergangstext
• Körpertext
• Körpertextfarbe

Im Moment werden sie als statische Stile angewendet. Anstatt dieselben Einstellungen manuell zu wiederholen, werde ich sie in Designvariablen umwandeln. Dies gibt mir ein einfaches, wiederverwendbares Framework, um Seitenstile mit nur wenigen Klicks zu aktualisieren.

Beginnen wir mit der Grenzbreite auf Reihen. Öffnen Sie zum Erstellen und Speichern einer Variablen den Variablenmanager und wählen Sie den Typ. Für die Grenzbreite einer Reihe werde ich eine Zahlenvariable wählen. Nennen Sie als nächstes Ihre Variable und weisen Sie ihr einen Wert zu. Klicken Sie auf Variablen speichern.

Sobald Sie gespeichert sind, ist diese Variable bereit, mit einem Klick wiederverwendet zu werden. Es wird überall dort angezeigt, wo die Grenzbreite festgelegt werden kann. Ich werde den gleichen Vorgang für den Übergangstext, die Körperschrift, die Textfarbe und die Schaltflächenpolsterung befolgen. Diese gespeicherten Variablen bilden nun die Grundlage für die Designsprache meines Layouts. Du machst das Gleiche.

Wenn Sie sich entscheiden, Ihren Schaltflächenabstand zu optimieren oder die Schriftart später zu ändern, müssen Sie nicht jedes Modul nacheinander aktualisieren. Aktualisieren Sie einfach die Variable und der Rest wird sich aktualisieren.

2. Verwenden Sie Find und Ersetzen, um statische Stile auf Variablen zu wechseln

Mit unseren Konstruktionsvariablen ist der nächste Schritt, die statischen Werte über das Layout durch Fund und Ersetzen zu ersetzen. Beginnen wir mit der Knopfpolsterung.

Im Moment verwendet jede Taste eine manuell eingegebene Polsterung: 6px für obere und unten und 1px für links und rechts. Um Konsistenz zu erzielen und Updates zu erleichtern, habe ich zwei Variablen erstellt:

• Taste-T = 12px für die obere und untere Polsterung.
• Taste-L = 32px für die linke und rechte Polsterung.

Um diese anzuwenden, öffne ich die Einstellungen von Button, gehe zu Design> Abstand> Polsterung , klicke mit der rechten Maustaste auf den Padding-Wert und wähle aus den Optionen Suchen und Ersetzen .

Im Fund- und Ersetzungsfeld ersetze ich den vorhandenen statischen Wert durch die gespeicherte Variable aus dem Variablenmanager.

Nach dem Klicken auf Suchen und Ersetzen alle fünf Schaltflächeninstanzen über der Seite Update können Sie sofort die neuen Padding -Werte verwenden.

Sie können dieselben Schritte für alle anderen statischen Stile befolgen, die wir zuvor identifiziert haben. Verwenden Sie Find und Ersatz, um jeden mit Ihren gespeicherten Variablen auszutauschen, und Sie werden ein Layout haben, das vollständig mit Ihrem globalen Designsystem verbunden ist.

3.. Konvertieren Sie Ihre bevorzugten Stile in Voreinstellungen (optional)

Dieser Schritt ist für den Umfang dieses Artikels optional, aber es ist eine leistungsstarke Möglichkeit, Ihr Designsystem zu erweitern.

Sobald Sie statische Stile durch Variablen ersetzt haben, können Sie diese Module als Option Group -Voreinstellung speichern. Nachdem ich beispielsweise eine gespeicherte Variable für die Grenzbreite einer Reihe zugewiesen hatte, habe ich diese Reihe als Zeilenrandvoreinstellung gerettet.

Die Verwendung von Variablen in Voreinstellungen bedeutet, dass zukünftige Aktualisierungen Ihres Designsystems, z. B. das Ändern des Variablenwerts, über alle Module mit diesem Voreinsatz automatisch reflektiert werden. Es ist nicht nötig, etwas manuell erneut zu beantragen oder zu aktualisieren.

Wir haben also nicht nur die gesamte Seite mit neuem Branding in nur wenigen Klicks aktualisiert, sondern wir haben auch ein flexibles System erstellt, das zukünftige Updates schneller, einfacher und vollständig verbunden macht. Wie funktioniert das in einem echten Layout? Zeit, es in Aktion zu sehen.

Das Aktualisieren Ihrer Seitenstile ist einfacher als je zuvor

Der Grund, warum wir von statischen Stilen zu Designvariablen wechseln, ist einfach: Sie erleichtern Updates. Mit Entwurfsvariablen wird das Bearbeiten Ihres Layouts unglaublich einfach.

Wenn Sie jemals die Schriftart auf Ihrer Website ändern möchten, müssen Sie nicht jedes Modul nacheinander bearbeiten. Öffnen Sie einfach den Variablenmanager, aktualisieren Sie den zuvor gespeicherten Schriftartwert, und die Änderung gilt überall, wo die Variable verwendet wird.

Ihre Optionsgruppenvoreinstellungen aktualisieren auch automatisch, wenn sie Designvariablen verwenden. Dies hält Ihre Stile angeschlossen, sodass Sie nicht die gleichen Änderungen auf verschiedenen Modulen oder Seiten wiederholen müssen.

Als ich das Pie -Shop -Layout früher angepasst habe, habe ich nicht jeden Knopf oder eine Überschrift manuell angepasst. Ich habe einfach meine gespeicherten Variablen bearbeitet. Die Schriftart, die Polsterung und die Farben, die ich zuvor definiert habe, wurde automatisch auf der Seite angewendet. Das Layout folgte dem System, das ich bereits gebaut hatte.

Sicher, das Polsterung oder das Ändern einer Farbe in einem Modul nicht schwierig. Wenn Sie jedoch Dutzende von Stilen auf einer gesamten Website aktualisieren, ist der Unterschied massiv. Es ist nicht nur schneller, es ist sauberer, zuverlässiger und weitaus weniger anfällig für Fehler.

Dies ist der eigentliche Wert des Umschaltens auf Variablen: Ihr gesamtes Design wird leichter zu verwalten. Und wenn Ihr Kunde nächsten Monat nach einem schnellen Markenwechsel fragt? Sie werden fertig sein, bevor sie ihren Kaffee beenden.

Machen Sie Schüttleitungen leicht mit Find und Ersetzen

Sie müssen nicht jedes Mal von vorne anfangen, wenn sich Ihr Design ändert. Mit dem System von Divi 5 fühlen sich die Updates weniger wie eine lästige Aufgabe und eher wie ein einfacher Schritt nach vorne an.

Dieser Workflow ist während des Setups nicht nur hilfreich. Es ist das, was zukünftige Updates erleichtert. Unabhängig davon, ob Ihr Kunde nach einer neuen Schriftart oder eine andere Markenfarbe testen möchten, können Sie die Änderung einmal vornehmen und sehen, wie sie überall reflektiert werden.

Divi 5 soll unterstützen, wie echte Menschen Websites entwerfen. Und jetzt kann Ihr Designsystem genauso flexibel sein wie Ihre Ideen.