So ändern Sie schnell Layout -Packstile mit Find & Ersatz

Das Aktualisieren des Designs eines vollständigen Layout -Packs klingt einfach, bis Sie feststellen, dass Sie die gleichen Stile auf fünf oder sechs verschiedenen Seiten ändern müssen. Da diese Stile als statische Werte angewendet werden, wird selbst ein kleines Update, wie das Ändern der Schriftart oder das Anpassen der Abschnittspolsterung, zeitaufwändig, wenn die Seite für Seite ausgeführt wird.

Aber was wäre, wenn Sie all diese wiederholten Stile in nur wenigen Klicks aktualisieren könnten? Genau das macht Fund und Ersatz in Divi 5. Unabhängig davon, ob Sie Schriftarten austauschen, Farben ersetzen oder den Abstand anpassen, hilft Ihnen diese Funktion dabei, sich sofort zu ändern. Wir zeigen Ihnen, wie Sie es verwenden, um ein ganzes Layout -Paket aufzuräumen und neu zu style.

Was wird in Divi 5 gefunden und ersetzt

Find and Ersatz ist eine Funktion in Divi 5, mit der Sie wiederholte Stilwerte in Ihrem Layout aktualisieren können. Egal, ob es sich um eine Schriftart, ein Farbcode, eine Polsterung oder sogar einen Schatteneffekt handelt, Sie können diesen Wert jetzt einmal ändern und über mehrere Elemente hinweg anwenden.

Wie funktioniert das eigentlich? Es beginnt mit jedem Modul im visuellen Bauunternehmer. Bewegen Sie sich über ein Stilfeld wie Textfarbe oder Schriftgröße, und Sie werden ein Drei-Punkte-Symbol sehen. Klicken Sie darauf (oder klicken Sie mit der rechten Maustaste auf das Feld) und wählen Sie Suchen und Ersetzen .

Dadurch wird ein Panel geöffnet, in dem Sie definieren, welcher Wert ersetzen soll, wie der neue Wert sein sollte und wo die Änderung angewendet werden soll. Sie können es auf genau dieses Modul konzentrieren, es auf den gesamten Abschnitt erweitern oder auf der Seite auf der Seite gehen.

Sobald Sie diesen Workflow erlebt haben, werden Sie verstehen, warum er ein so hilfreiches Werkzeug ist. Anstatt Dutzende von Modulen zu jagen, um dieselbe Farbe oder Schriftart zu ändern, machen Sie ein gezielter Update und sehen, wie es in Sekundenschnelle über Ihr gesamtes Layout rippt. Um das Potenzial von Fund und Ersatz wirklich freizuschalten, müssen Sie sehen, wie es mit Designvariablen funktioniert, was alles verändert.

Wie Finden und Ersetzen hilft, Layoutstile schneller zu aktualisieren

Wir werden zwei Szenarien durchlaufen: Erstens eine einfache Fund- und Ersetzungsoperation und dann dieselbe Aufgabe unter Verwendung von Designvariablen (dies ist die geheime Waffe).

Verwenden von Find und Ersatz in Divi 5

Der Vorgang ist unkompliziert: Triggen Sie ihn von jedem Stil aus, wählen Sie, was ersetzen soll, und wenden Sie die Änderung über mehrere Module hinweg an. Gehen wir mit einem wirklichen Beispiel durch.

Angenommen, Sie möchten die Schriftgröße aller Seitenüberschriften erhöhen. Klicken Sie zunächst auf ein beliebiges Überschriftenmodul im visuellen Builder. Gehen Sie zu Einstellungen> Design> Heading Text> Heading Text H1 -Schriftgröße. Klicken Sie mit der rechten Maustaste oder schweben Sie die Option Find & Ersatz unter anderem.

Dadurch wird das Fund- und Ersetzen mit vielen Optionen geöffnet:

• (1) Quellelement: Dies definiert die Einstellung, die Sie abzielen, z. B. Textgröße, Farbe oder Polsterung. Es wird automatisch ausgewählt, basierend darauf, wo Sie das Panel geöffnet haben.
• (2) Wert finden: Der aktuelle Wert, der in Ihrem Layout verwendet wird. Dies kann eine Schriftgröße wie 30px, ein Farbcode wie #000000 oder eine andere Designeinstellung sein. Dies wird automatisch hinzugefügt.
• (3) Wert ersetzen: Der neue Wert, den Sie anwenden möchten. Divi sucht nach dem passenden Wert und ersetzt ihn durch diesen.
• (4) Suchen und ersetzen Sie sie an Ort und ersetzen Sie, wo die Änderung angewendet werden soll. Sie können es auf ein einzelnes Modul, seinen Abschnitt oder die gesamte Seite beschränken.
• (5) Suchen und ersetzen Sie in Elementtypen: Entscheiden Sie, welche Module die Änderung beeinflussen sollte. Sie können es auf alle Module oder nur bestimmte Typen wie Schaltflächen, Text oder Molle anwenden.
• (6) Ersetzen Sie nur identische Felder: Schalten Sie dies ein, um nur Felder zu aktualisieren, die genau mit dem Suchwert übereinstimmen. Dies hilft, zufällige Änderungen an nicht verwandten Elementen zu vermeiden.

Zum Beispiel ersetzen wir die Schriftgröße von 30px zu einer Flüssigkeitsklemme (20px, 4VW, 50px). Wir haben die gesamte Seite und alle Elemente ausgewählt, da wir alle Überschriften auf der Seite aktualisieren möchten.

Klicken Sie auf die Schaltfläche Suchen und Ersetzen und beobachten Sie, was passiert. Alle Überschriften mit einer Schriftgröße von 30px haben jetzt einen Fluid -Clamp () -Wert.

Die anderen Überschriften blieben unverändert, da Divi nur Werte aktualisiert, die genau in Ihrem ausgewählten Bereich übereinstimmen. Keine manuelle Bearbeitung erforderlich und nicht einmal zufällige Änderungen an nicht verwandten Elementen. Diese Genauigkeit macht es perfekt, um Standardstile in Layout -Packs zu reinigen.

Erfahren Sie alles über Divis Fund und Ersetzen

Verwenden von Entwurfsvariablen in Find und Ersetzen

Finden und Ersatz werden in Kombination mit Designvariablen noch leistungsfähiger. Anstatt einen statischen Wert durch einen anderen statischen Wert zu ersetzen, können Sie ihn durch eine gespeicherte Variable aus dem Variablenmanager ersetzen. Dies erstellt ein konsistentes Designsystem, das später leicht zu aktualisieren ist.

Lassen Sie uns mit dem gleichen Beispiel fortfahren und alle Schriftgrößen der Überschrift aktualisieren. Anstatt 30px durch einen direkten Klemmwert zu ersetzen, ersetzen wir ihn jedoch durch eine Variable mit dem Namen H3 -Schriftgröße.

Erstellen Sie zunächst die Variable. Öffnen Sie den variablen Manager aus der linken Seitenleiste und gehen Sie zur Nummernspalte . Nennen Sie Ihre Variable, weisen Sie einen Wert zu und speichern Sie.

Dies macht die Variable über alle Font -Größenfelder verfügbar. Jetzt kommt die Magie: Sie können sie direkt im Fund- und Ersetzen verwenden, um die gespeicherte Variable allen Schriftgrößen gleichzeitig zuzuweisen.

Öffnen Sie das Fund- und Ersetzen Sie wie zuvor. Bewegen Sie im Feld Value -Wert über die Eingabe und klicken Sie auf das Symbol Variable Manager . Wählen Sie Ihre gespeicherte Variable, H3 -Schriftgröße aus und fahren Sie mit denselben Einstellungen fort.

Klicken Sie auf Suchen und Ersetzen , um die Änderung anzuwenden. Alle Überschriften, die 30px verwenden, verweisen nun auf die H3 -Schriftgrößenvariable anstelle einer festen Zahl.

Hier wird es interessant. Müssen Sie diese Schriftgröße später anpassen? Gehen Sie zum Variablen -Manager , öffnen Sie die Variable der H3 -Schriftgröße und ändern Sie den Wert. Aktualisieren Sie die Klemme in Clamp (24px, 5VW, 60px) und jede Überschrift mit diesen variablen Aktualisierungen automatisch.

Es ist nicht erforderlich, Fund und Ersetzen zu wiederholen. Mit einem Update passt Ihr Layout überall, wo die Variable verwendet wird.

Diese Kombination aus Find- und Ersatz- und Designvariablen macht die Aktualisierung der gesamten Layout -Packs so effizient, und wir werden diesen Prozess in diesem Tutorial verfolgen. Sie definieren Ihre Entwurfsvariablen einmal und verwenden dann Find und Ersetzen, um von statischen Werten auf gespeicherte Variablen auf allen Seiten zu wechseln. Danach wird die Aktualisierung mühelos.

Erfahren Sie alles über Divis Designvariablen

Bereit, dies in die Praxis umzusetzen? Sie benötigen Divi 5, um sowohl Find- als auch Austauschvariablen zu verwenden. Der Baumeister wurde vollständig für schnellere Leistung und intelligentere Workflows umgebaut.

So ersetzen Sie Stile in einem Layoutpaket

Nachdem Sie wissen, wie Finden und Ersetzen funktioniert und wie Sie es mit Designvariablen kombinieren, lassen Sie es auf einem echten Layout -Paket in Aktion setzen. In unserem Beispiel werden wir das Lernmanagementsystem importieren, das mehrere Seiten wie Home, über, Kontakt, Kurslandung und Preise enthält.

Jede Seite verwendet dieselben Schriftarten, Farben und Abstand, aber alle als statische Werte. Im folgenden Tutorial aktualisieren wir diese auf allen Seiten, verwandeln sie in Variablen und verbinden alles mit einem zentralen Designsystem.

1. Prüfen Sie die Designstile Ihres Layouts

Nehmen Sie sich ein paar Minuten Zeit, um Ihr Layout -Paket zu überprüfen. Öffnen Sie jede Seite und listen Sie schnell alle Designstile auf, die sich wiederholen, z. Hier ist, was ich nach der Überprüfung des LMS -Layouts gefunden habe:

• Schriftgrößen: 30px wird für alle H3 -Überschriften und 48px für H2S auf mehreren Seiten verwendet
• Schriftarten: Poppins wird für alle Überschriften konsistent verwendet
• Primärtaste: Hintergrundfarbe ist #4449e0 mit weißem Text
• Polsterung: Die meisten Abschnitte verwenden 60px oben und unten
• Blubertikonen: Die Symbolgröße ist auf 24px eingestellt
• Klappentextgrenze: Es wird kein Rand auf Klappentextenmodule angewendet
• Abschnitt Hintergrund: Die grüne Farbe #47Be68 wird im Fußzeilenabschnitt fast jeder Seite angezeigt

Diese werden alle manuell als statische Werte in jedem Modul eingegeben. Zum Beispiel verwendet das Blupping -Modul #4449E0 für die Symbolfarbe und eine Breite von 24 px.

Sobald Sie wiederholte Stile wie diese identifiziert haben, wissen Sie genau, was in Designvariablen umgewandelt werden soll.

Dieser Prüfungsschritt schafft die Grundlage für alles, was folgt. Es hilft Ihnen, einen systematischen Ansatz aufzubauen, der Ihr Layout konsistent und wartbar hält.

2. Speichern Sie Ihre Designvariablen

Sobald Sie Ihr Layout geprüft und die Wiederholungsstile festgestellt haben, erstellen Sie im nächsten Schritt Designvariablen Ihrer bevorzugten Werte. Auf diese Weise können Sie hartcodierte Stile in wiederverwendbare Token verwandeln, sodass Ihr Layout später einfacher zu aktualisieren ist. Nachdem wir alle unsere Werte gespeichert haben, werden wir die aktuellen durch unsere ersetzen.

Erstellen einer Farbvariablen

Im Beispiel zuvor stellte ich fest, dass die Blupping -Symbole die Farbe Nr. 4449E0 verwenden, aber ich möchte diese in meine primäre Markenfarbe #6C012A wechseln. Dazu werde ich eine Farbvariable erstellen.

Gehen Sie aus der linken Seitenleiste zum Variablenmanager und öffnen Sie dann die Farbspalte .

Scrollen Sie nach unten und klicken Sie auf die Option Global Color hinzufügen . Nennen Sie Ihre Variable und geben Sie einen Wert ein. Klicken Sie auf Variablen speichern und es ist fertig.

Erstellen einer Zahlenvariablen

Als nächstes möchte ich einen 2px -Rand um Mischungen hinzufügen, also brauche ich eine Zahlenvariable . Der Prozess ist ähnlich, jedoch in einer anderen Spalte. Gehen Sie zur Nummernspalte . Klicken Sie auf + globale Nummer hinzufügen, benennen Sie Ihre Variable, weisen Sie einen Wert zu und speichern Sie.

Erstellen einer Schriftvariablen

Ich möchte auch alle Kopfschriften in Askhar, meine Marke -Schriftart, ändern. Dies erfordert eine Schriftvariable . Navigieren Sie zur Schriftspalte , erstellen Sie eine neue Variable, weisen Sie einen Namen zu, wählen Sie eine Schriftart und speichern Sie.

Es ist fertig. Diese Schriftart ist nun in allen Heading -Textfeldern während des gesamten Layouts ausgewählt.

Befolgen Sie den gleichen Prozess für den Rest Ihrer Prüfungsbefunde, z. Jeder wiederholte Stil aus Ihrem Layout kann (und sollte) eine Variable werden.

Auf diese Weise müssen Sie sich nicht an Hex -Codes, Schriftnamen oder spezifische Werte erinnern. Sie leben in Ihrem variablen Manager und folgen Ihnen über Module und Seiten hinweg. Und das Beste von allen ist, dass Sie Fund und Ersatz verwenden können, um sie auf Layout anzuwenden, was wir als nächstes tun werden.

3.. Verwenden Sie Find und Ersetzen, um Variablen anzuwenden

Hier ist der interessanteste Teil, auf den wir gewartet haben. Wenn unsere Variablen gespeichert sind, ist das Ändern der Stile dieses gesamten Layouts schnell und einfach. Mal sehen, wie.

Ändern der Farben der Symbole

Lassen Sie uns zunächst die Farbe der Symbole in unsere gespeicherte Primärmarken -Farbvariable ändern. Navigieren Sie zu den Einstellungen des Klappentextes> Design> Bild und Symbol. Bewegen Sie nun die Option Symbolfarbe und klicken Sie auf die drei Punkte. Wählen Sie suchen und ersetzen .

Im Fund- und Ersetzungsfeld müssen Sie lediglich schweben, um das Symbol Variable Manager zu finden und Ihre Variable auszuwählen.

Und so haben alle Symbole eine neue Farbe. Ich hätte es auch auf die andere Weise tun können, indem ich meine Markenfarbe als statischen Wert zugewiesen habe, anstatt eine Designvariable zu speichern, aber wir haben einen zusätzlichen Schritt hinzugefügt, um zukünftige Updates zu vereinfachen.

Wie? Stellen Sie sich vor, Sie haben alle Ihre Layoutseiten geändert, möchten aber Ihre Markenfarbe wechseln. Sie müssen sich nicht überfordert fühlen, wenn Sie alle Seiten erneut besuchen oder es mit Modul machen. Da Sie bereits eine Markenfarbdesign-Variable gespeichert haben, müssen Sie nur den Wert ändern, um ihn auf der Website zu aktualisieren.

Alle Überschriften ändern

Als nächstes wechseln wir alle Überschriften zu meiner Markenschrift. Greifen Sie auf die Einstellungen eines Übergangs zu> Design> Title Text. Bewegen Sie sich über die Titelschrift und öffnen Sie Find & Ersetzen . Weisen Sie in der Spalte Value -Value Ihre Marke -Kopf -Schriftvariable zu.

Aktualisieren der Grenzbreite aller Klappentextmodule

Für das Update für die Grenzbreite werde ich meine Variable des Blurbmoduls verwenden. Der Prozess bleibt konsistent. Navigieren Sie zu den Grenzeinstellungen eines Klappentextes, öffnen Sie Find & Ersetzen, wählen Sie Ihre Variable und bewerben Sie sich.

Nachdem Sie alle statischen Werte mit Ihren Designvariablen gewechselt haben, haben Sie Ihre Layoutstile direkt mit Variablen verknüpft. Dies bedeutet, wenn Sie jemals die Markenfarbe ändern, die Typografie optimieren oder die Randbreiten anpassen möchten, müssen Sie die Ersetzungen nicht wiederholen. Aktualisieren Sie einfach die Variable und alle verknüpften Elemente werden sofort eingestellt.

Bonusschritt: Voreinstellungen erstellen und speichern (optional)

Während Sie Variablen finden und ersetzen und entwerfen, bieten Ihnen ein solides Fundament, aber es gibt einen optionalen Schritt, der auf diesem System noch weiter aufbaut. Mit Voreinstellungen können Sie komplette Stile verpacken und sie überall mit nur einem Klick wiederverwenden.

Sobald Sie mit Ihren Basisvariablen zufrieden sind, können Sie einen Schritt tiefer gehen und Voreinstellungen für ein detaillierteres Styling erstellen. Dies ist für den Kernprozess, den wir gerade durchlaufen haben, nicht notwendig, aber es lohnt sich, eine maximale Effizienz zu erforschen.

Nehmen wir an, Sie möchten all Ihren Unglaub einen Schatteneffekt hinzufügen, sodass Sie den perfekten Schattenstil für Ihr Blurbmodul entworfen haben. Anstatt diesen Stil jedes Mal manuell zu kopieren, können Sie ihn als Voreinstellung speichern.

Erledigt. Diese Voreinstellung erscheint nun im Dropdown jedes Moduls voreingestellt. Sie können es sofort auf andere Module anwenden. Es ist nicht nötig, den Abstand, die Grenzen, Schatten oder andere Design -Optimierungen zu wiederholen.

Was Voreinstellungen noch leistungsfähiger macht, ist ihre Flexibilität. Sie können voreingestellte Gruppen für verschiedene Einstellungskombinationen erstellen, um eine bessere Workflow -Optimierung und eine detaillierte Kontrolle zu erhalten. Beispielsweise haben Sie möglicherweise eine voreingestellte Gruppe für Tastenstile mit Variationen wie Primärlicht-, Primär- und Primärlicht -Umriss, die jeweils unterschiedliche Kombinationen von Hintergründen, Grenzen und Abstand enthalten.

Auf diese Weise behalten Sie Konsistenz bei und haben gleichzeitig Optionen für verschiedene Kontexte. Voreinstellungen sind besonders nützlich, wenn Ihr Layout 10+ Module mit demselben Stil enthält. Anstatt sich auf Speicher- oder manuelle Änderungen zu verlassen, standardisieren Sie alles im Voraus.

Erfahren Sie alles über Divis Option Group Presets

Nachdem Sie alle gespeicherten Designvariablen angewendet haben, sehen Sie die Vorher und Nachher -Versionen aus:

4. Wenden Sie denselben Prozess auf andere Seiten an

Sobald Ihre Designvariablen und -voreinstellungen eingerichtet sind, wird das Aktualisieren des Restes Ihres Layout -Pakets viel schneller.

Nehmen Sie zum Beispiel die Landing Page. Hier werden die gleichen statischen Werte angezeigt, die hier mit Schriftarten, Knopffarben, Klappentextgrenzen, Symbolfarben und vielem mehr gesteckt werden. Anstatt jede Einstellung manuell zu optimieren, öffnen Sie das relevante Modul, das Finden und die Ersetzen von Trigger und die übereinstimmende Entwurfsvariable zuweisen.

Wiederholen Sie diesen Vorgang für jeden sich wiederholenden Stil auf allen Seiten. Wenn Sie fertig sind, wird Ihr gesamtes Layout -Paket mit Variablen und Voreinstellungen verbunden, wodurch zukünftige Änderungen nahezu mühelos vorgenommen werden.

Aktualisierte Kurs -Landing -Seite mithilfe von Divis Find & Ersatz- und Designvariablen

Nehmen Sie Layout-weite Änderungen in Sekunden vor und ersetzen Sie sie

Das Einrichten von Designvariablen und das Lernen finden und ersetzen Sie in Divi 5 möglicherweise einige Zeit im Voraus. Aber sobald Sie es für ein Layout -Paket getan haben, möchten Sie nie wieder auf Dutzende von Modulen klicken.

Wir haben ein ganzes Layoutpaket von verstreuten statischen Werten in ein angeschlossenes Designsystem verwandelt. Was uns Minuten mit Find & Ersatz gebraucht hätte, hätte es stundenlang dauern, als wir es auf die alte Art und Weise, Modul für Modul, Seite für Seite, gemacht hätten.

Hier geht es nicht nur darum, Zeit in diesem Projekt zu sparen. Sie erstellen ein Designsystem, das jedes zukünftige Divi -Projekt schneller und konsistenter macht.