Verwenden Sie die Standardvoreinstellungen von Divi 5, um Ihre gesamte Website zu stylen

Die Ankunft von Option Group Presets hat in Divi 5 so viele neue Möglichkeiten eröffnet. Nick sagte, dies sei das wichtigste Merkmal, das Divi in ​​Jahren erreicht hat, und während Sie sie testen, werden Sie genau sehen, warum er das gesagt hat .

Sie werden bereits an Element -Presets gewöhnt, aber Option Group Presets fügt eine völlig neue Konstruktionsebene hinzu, die Sie nie mehr verwenden werden. Beide Arten von Voreinstellungen unterstützen jedoch „ Standardvoreinstellungen “. Das möchte ich Ihnen im Verlauf der folgenden 2000 Wörter zeigen.

Was sind Standardvoreinstellungen in Divi 5?

Standardvoreinstellungen sind die ersten Voreinstellungen, die Sie auf Ihren Websites bearbeiten möchten. In vielerlei Hinsicht sind dies ein totaler Ersatz für den Thema Customizer.

Sie haben zwei Arten von Standardvoreinstellungen, mit denen Sie sofort nach der Bearbeitung einer Seite arbeiten können : Standardelement -Voreinstellungen und Standardoptionsgruppenvoreinstellungen . Lassen Sie uns zuerst Element -Voreinstellungen abdecken, da es bekannt ist, aber Sie möchten alle Ihre Designs mit Optionsgruppenvoreinstellungen starten.

Standardelement -Voreinstellungen

Element -Voreinstellungen arbeiten schnell mit der Gestaltung eines Elements, das Sie auf Ihrer Website ein Vielfaches verwenden. Mit Element -Voreinstellungen können Sie ein Modul wie das Blurbmodul einnehmen und das Standardvoreinsatz des Moduls bearbeiten. Sobald die Standardvoreinstellung bearbeitet wurde, wird dieselben Stile verwendet, wenn Sie Ihrer Website ein neues Blurbmodul hinzufügen (da neue Elemente die Standardeinstellungen verwenden).

So bearbeiten Sie ein Standardelement Preset

Die Bearbeitung einer Standardvoreinstellung ist unkompliziert. Klicken Sie auf das Element, für das Sie die Standardeinstellungen ändern möchten (in diesem Fall ein Textmodul). Klicken Sie oben rechts auf den voreingestellten Selektor.

Sie sollten im Dropdown -Menü mindestens ein Voreinsatz sehen - die Standardvoreinstellung für dieses Element. Suchen Sie die Einstellungen (Zahnradsymbol) und klicken Sie darauf, um die Einstellungsoptionen aus dem spezifischen Seitenelement in die Einstellungsoptionen für die Standardvoreinstellung zu ändern.

Sie werden wissen, dass Sie eine Voreinstellung bearbeiten, wenn die Brotkrumen (die die verschachtelte Position des Elements zeigen, an dem Sie gearbeitet haben) verschwinden und das Wort „ Voreinstellung “ oben links im Einstellungsfeld erscheint. Sie werden auch bemerken, dass der voreingestellte Selektor „ Standard -Voreinsatz “ sagt und es blau wird. Navigieren Sie von hier aus zur Elementoptionsgruppe, die Sie bearbeiten möchten. In diesem Fall habe ich beschlossen, auf die Registerkarte Design> Text> Textgröße zu gehen, um die Größe des Textinhalts für dieses Modul zu bearbeiten.

Klicken Sie auf "Voreinstellung speichern", um Ihre Änderungen auf die Website zu halten.

Falls Sie es nicht wussten
Wenn Sie eine Weile in Divi waren, wissen Sie über Modulvoreinstellungen . Elementvoreinstellungen sind die gleichen wie Modul-Voreinstellungen, aber das Aufrufen von Modulvoreinstellungen war verwirrend, da Voreinstellungen auch für nichtmodulierte Elemente wie Abschnitte und Zeilen verwendet werden können.

Wireframe -Ansicht einer Seite in Divi 5. Beachten Sie, wie diese Zeile Voreinstellungen aufweist und nicht die Kriterien für ein Modul, sondern einen Container anpasst.

Standardelement -Voreinstellungen können einfach durch Anwenden eines anderen benutzerdefinierten Elements auf das Modul (mehr dazu unten) oder durch direkte Anwendung von Stilen auf ein bestimmtes Modul oder Element "überschrieben" werden. Divi funktioniert wie CSS mit Spezifitätsregeln und in diesem Fall sind Einstellungen, die direkt an ein Modul angewendet werden, spezifischer als die Einstellungen, die auf ein Standardelement voreingestellt sind.

Aber es gibt eine neue Voreinstellung auf dem Block, mit dem Sie Ihre Divi -Websites zuerst entwerfen sollten.

Standardoptionsgruppenvoreinstellungen

Mit den neuen Optionsgruppen -Voreinstellungen von Divi können Sie Standardstile erstellen, die verschiedene Module und Elemente umfassen, die möglicherweise ähnliche Optionsgruppen verwenden. Dies alles wird mit " Standard" -Optionsgruppengruppenvoreinstellungen geschehen. Wenn Sie über die Details dieses neuen Konzepts von Optionsgruppen verblüfft sind, können Sie in unserem Beitrag mehr darüber lesen, was Ihnen alles sagt, was Sie über sie wissen müssen.

Erfahren Sie mehr über die Option Gruppenvoreinstellungen

Kurz gesagt, unterschiedliche Module haben unterschiedliche Zusammensetzungen (siehe die folgende Tabelle, um vier verschiedene Elemente zu vergleichen).

Wenn sich die zusammengesetzten Funktionen eines Elements mit einem anderen überlappen, können sie Stile auf der Option Gruppenebene teilen - so, dass Sie Zeit sparen, wenn Sie ähnliche Motive in verschiedenen Modulen und Elementen entwerfen (wie der Titeltext in vielen Modulen). Besonders bei Überschriften, Körpertext, Schatten, Animationen, klebrigen Funktionen, Rändern, Abstand und Schaltflächen entwerfen Sie viel schneller Websites.

So bearbeiten Sie eine Standardoptionsgruppe Voreinstellung

Um eine Standardoptionsgruppe vorein zu bearbeiten, gehen Sie zu einem Modul- oder Zeilen-/Abschnitt -Einstellungsbereich . Über die verfügbaren Optionsgruppen schweben (Text, Titeltext, Schaltfläche, Hintergrund usw.). Optionsgruppen, die Voreinstellungen unterstützen, enthüllen ein voreingestelltes Symbol auf der rechten Seite dieses OG -Feldes, wenn sie überlagert werden. Klicken Sie auf das Voreinstellungssymbol, um den Standard- und alle benutzerdefinierten Voreinstellungen für diese Optionsgruppe anzuzeigen.

Hier ist ein Video, das den Unterschied zwischen der Bearbeitung eines bestimmten Aspekts eines einzelnen Moduls und der Bearbeitung desselben Aspekts mit einer Optionsgruppenvoreinstellung zeigt.

Sie wissen, dass Sie eine Optionsgruppe voreinstellen, wenn sich die Benutzeroberfläche von hell zu dunkel wechselt (es sei denn, Sie waren im Dunklen Modus. In diesem Fall ist es nur die Optionskruppe, die Sie derzeit bearbeiten. Sie müssen Änderungen speichern, damit sie wirksam werden.

Was ist der Unterschied zwischen Standard- und benutzerdefinierten Voreinstellungen?

Standardvoreinstellungen sind die Stile, die automatisch auf neue Elemente (Module/Abschnitte/Zeilen) angewendet werden, die auf einer Seite oder Vorlage platziert sind. Egal was passiert, jedes Element und jede Option Gruppe innerhalb von Divi hat eine Standardvoreinstellung. Siehe unten, woher Standardstile kommen.

Benutzerdefinierte Voreinstellungen sind zusätzliche Voreinstellungen, die so einfach zu verwalten sind und anwenden sind wie Standardvoreinstellungen, werden jedoch nicht automatisch verwendet (Sie müssen diese benutzerdefinierten Voreinstellungen anstelle des Standards anwenden). Sie werden in besonderen Situationen wie dunklen Abschnitten, Seitenleisten und dichten Inhaltsanzeigen verwendet - unabhängig von Ihrem Design.

Jede Website sollte so weit wie möglich mit Voreinstellungen der Standardoptionsgruppe konzipiert werden. Anschließend sollten zusätzliche Voreinstellungen für benutzerdefinierte Optionen für Gruppen erstellt werden, um ähnliche Situationen pro Entwurfspezifikationen zu behandeln. Was auch immer von diesen OG -Voreinstellungen abgedeckt wird, kann mit Standardelement -Voreinstellungen und benutzerdefinierten Elementvoreinstellungen ausgelegt werden. Sie können Stile direkt auf einzelne Module anwenden, um verbleibende Kantenfälle zu erhalten, die noch entworfen werden müssen.

Divi befindet sich in einer aufregenden Bühne mit all den neuen Funktionen. Wenn erweiterte Einheiten und Designvariablen fallen, können Sie CSS -Variablen mit allen CSS -Einheiten und -Funktionen festlegen. Von dort aus können Sie diese CSS -Variablen über alle Ihre Voreinstellungen in allen Voreinstellungen verwenden, sodass Ihr Design -Workflow etwa 10x konsistenter und schneller wird.

Es gibt auch eine geplante Funktion, mit der Sie die Voreinstellungen von Elementvoreinstellungen von Nisting -Optionen in Elementvoreinstellungen ermöglichen können, sodass Sie Elementvoreinstellungen mit der Logik der in eingebauten Optionsgruppen -Voreinstellungen erstellen können. Das bedeutet, dass beim Bearbeiten eines OG -Voreinsatzes auch das zugehörige Element -Voreinstellungen geändert wird (und umgekehrt bis zu einem gewissen Grad).

Die Zukunft sieht für Designer und Entwickler auf Divi 5 gut aus!

So verwandeln Sie ein individuelles Voreinsatz in ein Standardvoreinsatz

Wir haben Standardvoreinstellungen und wir haben auch benutzerdefinierte Voreinstellungen. Wir haben gesehen, wie man ein benutzerdefiniertes Voreinstellung anstelle eines Standards anwendet, aber was ist, wenn wir es so sehr mögen, dass wir es zu unserem Standard machen wollen?

Nun, das ist einfach. Gehen Sie zu den Element -Presets oder dem Dropdown -Vorgang der Option Group . Bewegen Sie sich über die benutzerdefinierte Voreinstellung , die Sie ausführen möchten, und klicken Sie auf das Sternsymbol . Speichern Sie dann Ihre Änderungen . Ihr Voreinsatz ist jetzt das Standard -Voreinsatz auf Ihrer gesamten Website.

Woher kommen die Stile in Standard -Voreinstellungen?

Unbearbeitete Standardvoreinstellungen erben einfach im Thema Customizer. Fast alle WordPress -Themen verwenden immer noch einen Aspekt des Themas -Customizer (sogar blockieren Themen), obwohl Divi es so gemacht hat, dass es angeschlossen ist, aber nicht erforderlich ist, um sie zu verwenden . Wir werden den Customizer wahrscheinlich irgendwann in der Zukunft ersetzen, aber im Moment ist es ein Relikt, der vom WordPress -Kern übertragen wird und eine Eigenart moderner WordPress -Themen ist.

Angenommen, ich habe die Finanzberater -Starter -Site verwendet (wie ein konkretes Beispiel). Im Thema Customizer ist die Header -Textgröße auf 30px eingestellt.

Ich kann denselben Wert (30px) sehen, der in Standard -Voreinstellungen verwendet wird, indem ich in den visuellen Editor für eine Seite gehe, auf die Voreinstellung „ Standard -Voreinstellung “ für ein Übergang oder ein Textmodul klickt und unter Design> Überschriftentext für die H1 -Erhöhung überprüft wird.

Ein grauer Wert in einem Divi 5 -Feld bedeutet, dass es sich um einen ererbten Wert handelt, der in diesem Fall aus dem Themen -Customizer geerbt wurde

Aber das ist einfach die Standardeinstellung dieser Starter -Site. Wenn Sie Voreinstellungen aus einem importierten Layoutpaket verwendet oder von Grund auf neu gestartet wurden, werden im Themen -Customizer unterschiedliche Standardwerte festgelegt.

So verwenden Sie Standardvoreinstellungen zum Erstellen einer Website

Ich empfehle, Ihre Builds mit ein paar Seiten mit Drahtrahmen zu starten. Legen Sie alles auf ein paar Seiten mit dem, was Sie wissen, um entworfen zu haben.

Versuchen Sie, sich auf die einfachsten Module zu verlassen, um die Aufgabe zu erledigen und die Verwendung des gleichen Satzes von Modulen nach Möglichkeit zu wiederholen. Überlegen Sie, wie Sie die Überschrift, Text, Klappentext, Menü, Bild, Akkordeon/Umschalten und Videomodule verwenden können, um die meisten Wireframes Ihrer Seite zu erstellen. Fügen Sie bei Bedarf andere Module hinzu, aber wenn Sie sich für die meisten Dinge an einen Kernsatz von Modulen halten, wird es viel schneller, sowohl Optionsgruppen- als auch Element -Standardvoreinstellungen zu verwenden.

Diese Seite verwendet Abschnitte, Zeilen, Spalten, Text, Klappentext, Bild, Schaltfläche und Menümodule. Indem ich die Dinge so einfach wie möglich für diese bestimmte Seite halten kann, reduziere ich die Anzahl der Optionsgruppen, mit denen ich entwerfen muss.

Als nächstes möchten Sie mit dem Entwurf Ihrer wehrerischsten Änderungen mit der Standardoptionsgruppengruppenvoreinstellungen beginnen. Für die meisten Designs wird dies sein:

1. Abschnittsabstand : Beeinflussen Sie die oberen/unteren Ränder, die linken/rechten Ränder und alle erforderlichen Polsterung.
2. Abschnitt Hintergrundfarben : Erstellen Sie eine Standard -Option Gruppe Voreinstellung, die Sie in den meisten Fällen verwenden möchten, und eine benutzerdefinierte Optionsgruppe Voreinstellung für eine alternative/Kontrast -Hintergrundfarbe. Denken Sie daran, dass die Standardvoreinstellungen zur Voreinstellung des Hintergrundoptionsgruppens auch auf den Hintergrund der Spalten angewendet werden können.
3. Typografie : Beginnen Sie mit Ihrem H1-H6s. Abhängig von Ihrer Modulverwendung möchten Sie diese in den Standardoptionsgruppengruppen unter Kopftxt für Überschrift und Textmodule und Titeltext für Dinge wie Blurbmodule starten. Arbeiten Sie dann an normalem Text und konzentrieren Sie sich auf die Textoptionsgruppe in Textmodulen und Körpertextoptionsgruppen , die in Dingen wie dem Blurbmodul enthalten sind.
4. Weitere Designeinstellungen : Erstellen Sie Optionsgruppenvoreinstellungen für Grenzen, Boxschatten, Filter (wenn Sie Bilder stylen) und Animationen. Für diese neige ich dazu, keine Standardvoreinstellungen zu verwenden, sondern benutzerdefinierte Voreinstellungen zu erstellen, die ich selektiv auf Seitenelemente anwenden kann.
5. Erweiterte Einstellungen : Dies ähnelt dem obigen Schritt, aber ich erstelle Optionsgruppenvoreinstellungen für Übergänge und Bildlaufeffekte. Ich neige auch dazu, keine Standardvoreinstellungen zu verwenden, sondern benutzerdefinierte Voreinstellungen zu erstellen, die ich selektiv auf Seitenelemente anwenden kann.

Das Erstellen von Standardoptionsgruppen -Voreinstellungen auf diese Weise beginnt automatisch mit der Anwendung Ihrer Stile auf Ihrer Website. Jedes Mal, wenn eine Standard -OG aktualisiert wird, akzeptieren die relevanten Elemente auf Ihren Websites diese Änderungen automatisch.

Standard -Voreinstellungen sparen Sie Stunden

Standard -Voreinstellungen, sowohl das Element als auch die Option Gruppenvielfalt, sparen Ihnen ein großes Zeitraum. Ich kann es kaum erwarten, dass Sie mit diesen Funktionen mit diesen Funktionen von Divi 5's Blazing-Fast Builder aufgebaut werden. Und das ist nicht einmal das Ende der neuen Funktionen in Divi 5.

Mit den neuen und geplanten Funktionen von Divi haben Sie ein wahres Designsystem für Ihre Fingerspitzen. Haben Sie zuerst versucht, eine Site mit Standardvoreinstellungen zu bearbeiten? Wie ist es gelaufen? Lassen Sie uns im Kommentar unten wissen und teilen, wie Sie diese Funktionen verwenden.

Laden Sie Divi 5 herunter