Schnellste Möglichkeiten, Ihr Seitendesign mit Divi 5 zu aktualisieren

Divi 5 führt eine Handvoll intelligenter neuer Tools vor, mit denen Sie schneller arbeiten und freier werden können. Aber mit so viel Kraft an Ihren Fingerspitzen ist es leicht, sich nicht sicher zu sein, wo Sie anfangen sollen, insbesondere bei der Aktualisierung eines vorhandenen Layouts.

Sie wissen wahrscheinlich bereits, wie Sie den Abstand optimieren, Farben anpassen und Layouts aufräumen. In diesem Beitrag geht es also nicht darum, die Grundlagen neu zu lernen. Es geht darum, sie mit Divi 5 schneller zu machen. In den folgenden Schritten gehen wir einen praktischen Update -Workflow durch, den Sie auf jeder vorhandenen Seite befolgen können. Und wenn sich die jüngsten Veränderungen überwältigend gefühlt haben, beginnen Sie hier. Sie werden mit Klarheit und Vertrauen nachlassen.

8 Schritte zur Aktualisierung Ihres Seitendesigns mit Divi 5

Für dieses Tutorial verwenden wir die Business CV -Zielseite aus der Divi -Layout -Pack -Bibliothek.

Abonnieren Sie unseren YouTube -Kanal

Wir gehen durch die Aktualisierung der Seite mit den neuen Tools von Divi 5, z. B. Finden und Ersetzen, Entwurfsvariablen und erweitern Attribute, um Ihren Workflow zu beschleunigen und sich wiederholende Änderungen zu reduzieren. Fangen wir an.

1. Optimieren Sie Ihr Dashboard für ablenkungsfreie Bearbeitung

Selbst geringfügige Unterbrechungen können Ihren Fokus brechen, wenn Sie ein Layout aktualisieren. Sie können zwischen Abschnitten springen, die Einstellungen wiederholt öffnen und den Überblick verlieren, wo Sie aufgehört haben. Diese Art von Verzögerungen summieren sich schnell, insbesondere auf längeren oder komplexeren Seiten.

Divi 5 hilft, diese Reibung mit einer flexibleren Bearbeitungsumgebung zu verringern. Sie können Panels anlegen , um die wichtigsten Einstellungen sichtbar zu halten, mehrere Module in Registerkarten zu öffnen und mit dem Layers -Feld ohne endloses Scrolling in Ihr Layout zu navigieren. Anstatt in Module ein- und auszuklicken, können Sie alles offen und zugänglich halten, während Sie sich bewegen.

Das Ebenenfeld bietet Ihnen einen vollständigen strukturellen Überblick über das Layout, sodass Sie sofort durch Klicken zu einem beliebigen Abschnitt, Zeilen oder Modul springen können. Es ist besonders nützlich, um über große Seiten zu springen, ohne zu scrollen.

Früher bedeutete der Workflow oft, ein Modul zu öffnen, zu retten, erneut zu scrollen, das nächste zu öffnen und diesen Zyklus zu wiederholen. Divi 5 überspringt das alles. Sie können mehrere Module von Rücken an Rücken öffnen. Jedes bleibt als Registerkarte in Ihrem Bearbeitungsfeld sichtbar. Dies erleichtert das Vergleich der Einstellungen oder das Umschalten zwischen Elementen, ohne dass die Einstellungen für die Elemente wiederholt geschlossen und wiedereröffnet werden.

Es kann einige Anpassungen erfordern, um sich an den neuen Workflow zu gewöhnen. Wenn sich die Panels anders verhalten, wird das Wechsel zwischen den Modulen nicht sofort die zweite Natur anfühlen. Aber geben Sie es ein bisschen Übung, und diese kleinen Änderungen fügen sich zu.

Wenn Sie die folgenden Schritte ausführen, versuchen Sie, mit Panels unterschiedlich zu arbeiten, ein paar zu docken, ein Paar in Registerkarten zu stapeln oder das Schichtenfeld offen zu halten. Sie werden anfangen zu spüren, was für Ihren Fluss am besten funktioniert.

2. Stellen Sie Ihre globalen Designvariablen zuerst fest

Wenn Sie ein vollständiges Layout verwalten, ist das Letzte, was Sie möchten, sich zu wiederholen. Genau das passiert jedoch, wenn jeder Stil manuell in jedem Modul eingestellt wird. Es mag zunächst funktionieren, aber im Laufe der Zeit wird Ihre Seite zu einem Patchwork von getrennten Entscheidungen. Schließlich wird etwas immer vermisst.

Designvariablen helfen Ihnen, dies zu vermeiden. Sie geben Ihnen einen zentralen Ort, um Ihre Designsprache zu definieren. Sie definieren wiederverwendbare Werte für Schriftarten, Farben, Abstand, Bilder, URLs oder Links. Sobald diese Werte angewendet werden, bleiben sie mit jedem Modul verknüpft, das sie verwendet.

Hier ist ein einfaches Beispiel. Sagen Sie, Sie möchten, dass alle Überschriften die Lato -Schriftart verwenden. Anstatt Lato in jedem Modul auszuwählen, erstellen Sie eine Schriftvariable . Geben Sie ihm einen Namen, wählen Sie Lato und speichern Sie ihn. Jede Überschrift, die Sie an diese Variable verbinden, bleibt nun synchron.

Wenn Sie später zu einer anderen Schriftart wechseln möchten, aktualisieren Sie einfach die Variable. Jedes angeschlossene Modul spiegelt automatisch die Änderung wider.

Und das ist nur ein Anwendungsfall. Sie können auch Variablen für konsistente Abschnitte, Tastenstile, Hintergrundfarben oder alles andere festlegen, was Sie wiederholt verwenden. Sie müssen nicht alles auf einmal definieren, wenn es sich zu überwältigend anfühlt. Beginnen Sie mit den Stilen, von denen Sie wissen, dass Sie wiederverwenden werden, und erweitern Sie Ihr Designsystem von dort aus.

3. Ersetzen Sie statische Werte durch Konstruktionsvariablen

Manchmal haben Layouts hartcodierte Stile, sodass die Aktualisierung des Prozesses den Prozess inkonsistent macht. Deshalb ersetzen wir statische Werte durch die gerade definierten globalen Variablen.

Sie müssen sie nicht einzeln jagen. Das Fund- und Ersatzwerkzeug von Divi erleichtert es einfach, statische Werte für Variablen in nur wenigen Klicks auszutauschen. Nehmen wir an, Ihre Überschriften verwenden alle manuell ausgewählte Schriftarten. Öffnen Sie ein beliebiges Überschriftenmodul, klicken Sie auf das Feld Schriftart und wählen Sie Suchen und Ersetzen.

Bewegen Sie im Bereich Value Panel über das Feld und öffnen Sie den Variablenmanager . Wählen Sie alle Überschriften Schriftvariable aus und bestätigen Sie die Änderung.

Sie werden die Magie sofort sehen: Jede Instanz dieser Schriftart über das Layout wird sofort ersetzt. Dieselbe Methode eignet sich für Farben, Abstand, Schaltflächenstile und alles, wofür Sie eine Variable festgelegt haben.

Und Sie müssen nicht alles auf einmal ändern. Starten Sie kleine, Pick -Styles, die Sie am meisten wiederverwenden werden, z. Während Sie gehen, verschiebt sich Ihr Layout von einem Patchwork mit manuellen Bearbeitungen zu einem vollständig verbundenen System. Und wenn dieses System vorhanden ist, wird jede zukünftige Veränderung standardmäßig einfacher, schneller und konsistenter.

4. Verwenden Sie Erweiterungsattribute, um Aktualisierungen in Sekunden anzuwenden

Sobald Ihre globalen Werte vorhanden sind, ist der nächste Schritt die Verfeinerung. Sie werden oft kleine Änderungen an einzelnen Abschnitten vornehmen und wünschen, dass Sie diese Änderungen zum Rest des Layouts übertragen könnten, ohne die Arbeit zu ermitteln. Es ist mit Erweiterungsattributen möglich.

Sie können sofort Stile, Inhalte oder Voreinstellungen aus einem Element kopieren und auf andere anwenden. Es funktioniert auch, auch wenn die Module nicht der gleiche Typ sind. Wenn Sie beispielsweise einen benutzerdefinierten Rand und Schatten für ein Bild entworfen haben, können Sie diese als Referenz für jedes Bild im Abschnitt verwenden.

Klicken Sie mit der rechten Maustaste auf das gestaltete Bild und wählen Sie Erweiterungsattribute.

Wenn das Verlängerungspanel geöffnet wird, docken Sie es zur Seite, da Sie wahrscheinlich darauf zurückkommen. Stellen Sie in den Dropdowns den Bereich auf übergeordneter Abschnitt und den Elementtyp auf Bild ein und bestätigen Sie dann.

Diese eine Aktion wendet Ihr Update auf jedes Bild in diesem Abschnitt an, ohne sie einzeln berühren zu müssen.

Und hier verdient Extend -Attribute seinen Platz wirklich. Es dauert eine Reihe von manuellen, sich wiederholenden Änderungen und verwandelt sie in einen konsistenten Schritt. Sie können es für Abschnitte mit mehreren ähnlichen Spalten oder Modulen verwenden, wie eine Bildergalerie oder Unglaub. Es ist der schnellste Weg, um Ihr Design zu verleihen, ohne die Zeit auf jedem Modul zu verbrennen.

5. Wiederverwendbare Änderungen als Option Gruppenvoreinstellungen speichern

Wenn Sie Ihr Layout verfeinern, werden Sie wahrscheinlich den Abstand, die Grenzen oder die Hintergrundfarben optimieren, um die Dinge genau richtig zu machen. Speichern Sie diese Anpassungen jedes Mal, sondern speichern Sie sie als Optionsgruppenvoreinstellung.

Angenommen, Sie haben den Abstand, den Rand und den Hintergrund einer Spalte angepasst. Sie mögen, wie es aussieht und möchten es woanders wiederverwenden. Öffnen Sie die Einstellungen für diese Spalte, scrollen Sie zu der von Ihnen geänderten Stilgruppe (wie Abstand oder Rand) und klicken Sie auf das voreingestellte Symbol, um sie zu speichern.

Um die Voreinstellung auf andere Spalten anzuwenden, klicken Sie mit der rechten Maustaste auf das Original und wählen Sie die Extend-Attribute> Spaltenvoreinstellungen erweitern . Stellen Sie im Panel Ihren Bereich auf die übergeordnete Zeile ein, wählen Sie die Spalte als Elementtyp und drücken Sie die Erweiterungsattribute.

Dieser eine Voreinstellung gilt jetzt für jede Spalte in der Zeile in einem Zug. Es ist besonders nützlich für Layouts mit sich wiederholenden Elementen wie Preistabellen, Mippen, Testimonials oder überall, wo Sie eine visuelle Konsistenz ohne manuelle Anstrengung wünschen. Und da Voreinstellungen auf dem Layout -Paket gespeichert werden, werden sie auch auf anderen Seiten verwendet werden.

6. Kopieren/Einfügen für schnelle einmalige Änderungen verwenden

Sobald Sie die Stile auf einen vollständigen Abschnitt oder eine Reihe erweitert haben, möchten Sie möglicherweise noch kleine, gezielte Änderungen vornehmen. Vielleicht benötigt nur eine Spalte oder ein Modul einen etwas anderen Look. Verwenden Sie die Attributverwaltungsfunktion, anstatt erneut Voreinstellungen zu erweitern.

Wenn Sie beispielsweise den Rand und den Schatten einer Spalte angepasst haben und nur ein oder zwei andere übereinstimmen möchten, klicken Sie mit der rechten Maustaste auf die gestylerische Spalte und wählen Sie Elementstile kopieren . Klicken Sie dann mit der rechten Maustaste auf die Spalte, die Sie aktualisieren und Elementstile einfügen möchten.

Dies überschreibt andere Einstellungen nicht und funktioniert sofort. Dies ist ideal für Situationen, in denen Sie flexibel bleiben möchten. Sie können Stile aus fast jedem Element kopieren und einfügen und genau entscheiden, was zu kopieren ist, egal ob es sich um Abstand, Farben, Ränder oder andere Design -Optimierungen handelt.

Erweitern Sie die Attribute verarbeitet die Bulk -Änderungen und kopieren/einfügen die Details. Es ist perfekt für die Feinabstimmung eines Layouts, das größtenteils gemacht wird, aber noch ein paar persönliche Details benötigt.

7. Wechseln Sie zwischen benutzerdefinierten Haltepunkten, um die Responsive View zu perfektionieren

Stellen Sie sicher, dass Ihr Desktop -Layout bei jeder Bildschirmgröße großartig aussieht. Die anpassbaren Haltepunkte von Divi 5 machen dies einfach, indem Sie mit einem einzigen Klick zwischen Tablet, Telefon und sogar benutzerdefinierte Bildschirmbreiten wechseln. Die Gerätesymbole befinden sich direkt im Bauunternehmer, sodass Sie schnell vorschauen können, wie sich Ihre Abschnitte auf kleineren Bildschirmen verhalten.

Bei Bedarf können Sie auch Ihre eigenen Haltepunkte definieren, um mehr Kontrolle zu erhalten.

Dies ist der perfekte Zeitpunkt, um den Abstand, die Schriftgrößen und die Bildausrichtung zu überprüfen. Es dauert nur ein paar Minuten, erspart Sie jedoch später vor größeren Layoutproblemen, insbesondere auf inhaltshörigen oder konversionorientierten Seiten. Und Sie müssen Ihren Workflow nicht ändern. Divi -Tools funktionieren genauso reibungslos in reaktionsfreudiger Ansicht. Führen Sie also Ihre Verbesserungen vor, Vorschau des Layouts und fahren Sie fort.

8. Aktualisieren Sie Ihre Designvariablen, um das gesamte Layout sofort zu aktualisieren

Früher haben wir Ihre globalen Designvariablen eingerichtet und statische Werte anhand von Find und Ersatz ersetzt. Und jetzt ist Ihr Layout vollständig mit einem zentralisierten Designsystem verbunden.

Designvariablen machen Website-weite Updates extrem einfach. Nehmen wir an, Ihre Marken aktualisiert ihre Typografie oder Hauptfarbe. Anstatt jedes Modul durchzugraben, um wiederholt die gleichen Änderungen vorzunehmen, aktualisieren Sie einfach die gespeicherte Variable. Diese eine Änderung gilt sofort in Ihrem gesamten Layout.

Um dies in Aktion zu sehen, werfen Sie einen Blick auf diesen Side-by-Side-Vergleich. Die Layoutstruktur bleibt gleich, aber der Prozess dahinter wird dramatisch einfacher und schneller.

Denken Sie nun darüber nach, wie diese Skala. Stellen Sie sich Ihre gesamte Website, jede Seite und jeden Abschnitt vor, das auf demselben System basiert. Sie nehmen Ihre Schritte nicht mehr für jede Änderung zurück. Eine einzelne Optimierung an eine variable aktualisiert alles. Sie verwalten Ihre gesamte Marke, indem Sie Werte über den Variablenmanager verwalten.

Diese Art von Flexibilität ist genau das, wofür Divi 5 ausgelegt war. Es geht nicht nur um schnellere Änderungen, sondern um die Reduzierung der Wiederholung, die Steigerung der Genauigkeit und die Vermittlung von mehr Kontrolle mit weniger Aufwand.

Passen Sie Ihren Divi 5 -Workflow an

Inzwischen haben Sie gesehen, wie Tools wie Designvariablen, Erweiterung von Attributen und Optionsprozessvoreinstellungen nach dem Aktualisieren von Layouts umgestalten können. Aber es gibt keine einzige Möglichkeit, sie zu benutzen.

Diese Walkthrough ist nur eine Version des Prozesses. Sie können die Schritte in einer anderen Reihenfolge befolgen, ein paar überspringen oder in Ihre eigene Routine mischen. Und das ist völlig in Ordnung, da das Ziel nicht, einer Formel zu folgen, sondern einen Rhythmus zu finden, der sich natürlich anfühlt und wie Sie gerne arbeiten.

Ein wenig experimentieren. Je mehr Sie mit den Tools herumspielen, desto mehr werden Sie erkennen, was für Ihren Fluss am besten funktioniert. Wenn sich die Dinge reibungsloser anfühlen, sind Ihre Updates schneller und Ihr Design bleibt konsistent, dies ist Ihr Zeichen dafür, dass es funktioniert.

Und wenn Sie sich fragen, ob diese Tools mit dem Entwicklung Ihres Workflows mithalten können, können sie es absolut, weil ...

Divi 5 ist so konzipiert, dass sie sich an Ihre Arbeitsweise anpassen soll

Das ist das Denken hinter jeder Funktion, die wir abgedeckt haben. Unabhängig davon, ob Sie jeden Stil im Voraus definieren oder Änderungen vornehmen möchten, die beim Erstellen vornehmen, passen sich die Tools an die Art und Weise an, wie Sie es vorziehen, zu arbeiten.

Sie können sich schnell bewegen oder sich Zeit nehmen. Beginnen Sie von einer leeren Seite oder verfeinern Sie ein vorhandenes Layout. Der Baumeister zwingt Sie nicht in einen starren Workflow. Es wurde entwickelt, um Besetzungsarbeit zu reduzieren, sich wiederholende Änderungen zu überspringen und sich auf das zu konzentrieren, was tatsächlich wichtig ist: Entwerfen mit Klarheit, Geschwindigkeit und Selbstvertrauen.

Letztendlich geht es darum, einen Prozess zu erstellen, der sich wie Ihr eigenes anfühlt und mit Ihnen mit Ihnen ein Schritt hält, wenn Ihre Projekte und Ideen wachsen. Sind Sie bereit, einen Design -Workflow zu erstellen, der sich mit Ihnen verbessert?