Wie voreingestellter Design das Divi-Design-Paradigma verändert

Die Entwurfsfunktionen von Divi haben sich mit der Einführung von Optionsprodukte in Divi 5 entwickelt. Während Elementvoreinstellungen es seit langem einfach gemacht haben, vollständig gestaltete Elemente zu sparen und wiederzuverwenden, fügen die neuen Optionsgruppen -Voreinstellungen eine Flexibilitätsebene hinzu, indem Sie Designeigenschaften wie Typografie, Abstand und Effekte über verschiedene Elemente hinweg wiederverwenden können.

Zusammen helfen diese eingebauten Divi-Funktionen, die Konsistenz und Effizienz der Konsistenz und der Effizienz zu ändern und schnellere Design-Iterationen und einfachere globale Updates zu ermöglichen. In diesem Beitrag werden wir uns mit der Zusammenarbeit dieser Voreinstellungen befassen, um Ihren Divi 5 -Design -Workflow zu verändern!

Die beiden Säulen des voreingestellten Designs

Bevor wir uns mit den Details eintauchen, ist es wichtig, die beiden Hauptkomponenten zu verstehen, die voreingestellter Design in Divi so mächtig machen. Durch die Kombination von Elementvoreinstellungen und Voreinstellungen der Option Gruppen können Sie einen effizienteren, konsistenten und skalierbaren Entwurfsprozess erstellen. Schauen wir uns diese beiden Säulen an und wie sie zusammenarbeiten, um Ihren Design -Workflow zu erhöhen.

Elementvoreinstellungen: Wiederverwendbare Designpakete

Elementvoreinstellungen speichern ganze Designkonfigurationen für bestimmte Divi -Elemente. Divi hat derzeit 4 verschiedene Elementtypen: Module, Spalten, Zeilen und Abschnitte. Und wenn es um Module geht, sind die Elementvoreinstellungen auch für den Modultyp (Schaltfläche, Text, CTA usw.) eindeutig. Wenn Sie ein voreingestellter Element anwenden, werden alle zugeordneten Einstellungen wie Typografie, Farben, Abstand und Effekte bei der Anwendung sofort geerbt. Der Schwerpunkt der Elementvoreinstellungen liegt wie folgt:

• Stellen Sie die visuelle Konsistenz über Seiten hinweg sicher
• Reduzieren sich wiederholte Styling -Aufgaben
• Ermöglichen Sie globale Updates für schnellere Änderungen

Option Gruppenvoreinstellungen: Modulare Konstruktionskontrolle

Option Group Presets Fokus auf Stylingeigenschaften wie Typografie, Boxschatten, Grenzen und Bildlaufeffekte. Sie arbeiten über mehrere Elemente hinweg und ermöglichen es Desigern, Stile zu mischen und zu kombinieren, ohne an einen einzelnen Elementtyp gebunden zu werden. Das heißt, Sie können beispielsweise das gleiche Box Shadow Preset in einer Reihe und einem Modul verwenden. Die Hauptvorteile der Verwendung von Optionsgruppenvoreinstellungen sind:

• Wenden Sie gemeinsame Stile auf verschiedene Elemente an
• Stapelbar für eine fortgeschrittene Anpassung
• Erlauben Sie globale Echtzeit-Änderungen, ohne einzelne Module zu beeinflussen

Erstellen eines strukturierten Workflows mit Voreinstellungen

Jetzt, da wir Ihnen die beiden Säulen von Voreinstellungen in Divi gezeigt und den Unterschied kurz erklärt haben, gehen wir einige Tipps zum Erstellen eines strukturierten Workflows durch.

Schritt 1: Definieren Sie Kernstile mit Optionsgruppenvoreinstellungen

Geben Sie zunächst die Grundsätze der Kerngestaltung Ihrer Website auf. Dies umfasst Typografie, Farben, Knopfstile, Abstand und mehr. Diese grundlegenden Elemente sind für die Aufrechterhaltung der Konsistenz auf Ihrer Website unerlässlich.

Für ständige wiederkehrende Einstellungen können Sie die Option Gruppe Voreinstellung als Standard festlegen. Ein gutes Beispiel dafür ist das Styling Ihres Absatztextes und die Verwendung von standardmäßig.

Optionsgruppenvoreinstellungen sind vielseitig und wiederverwendbar, sodass Sie diese Einstellungen über mehrere Elemente hinweg anwenden können. Sobald Sie beispielsweise ein Text-Shadow-Voreinstellung definiert haben, können Sie diese Voreinstellung auf Überschriften über alle Elementtypen auf Ihrer Website anwenden. Zu diesem Zeitpunkt legen Sie den Grundstein für den Rest Ihres Designs, und diese Voreinstellungen sollten als Bausteine ​​Ihrer Website dienen.

Schritt 2: Erstellen Sie Elementvoreinstellungen für bestimmte Module

Sobald Sie die Kernstile definiert haben, besteht der nächste Schritt darin, Elementvoreinstellungen für spezifischere Designelemente zu erstellen. Obwohl das Befolgen dieser Reihenfolge theoretisch am logischsten ist, werden Sie häufig gleichzeitig beide erstellen. Elementvoreinstellungen sind vollständige Designpakete für einzelne Elemente (Abschnitte, Zeilen, Spalten, Module) und ermöglichen es Ihnen, schnell konsistente Stile auf der Website anzuwenden.

Entwerfen Sie eine vorgeschaltete CTA-Taste mit Ihren vordefinierten Optionsgruppen-Voreinstellungen und konzentrieren Sie sich auf die Typografie, die Hintergrundfarbe und die Schwebeffekte der Schaltfläche.

Speichern Sie dies als ein Element -Presestation für die zukünftige Verwendung. Erstellen Sie andere wiederkehrende Elemente wie Testimonialmodule, Feature -Abschnitte oder Preistabellen und stylen Sie sie entsprechend. Jedes dieser vorgeschalteten Module kann als ein Element gespeichert werden, das Sie bei Bedarf bewerben können.

Denken Sie beim Entwerfen darüber nach, Layouts zu sparen, die diese Voreinstellungen in Ihrer Divi -Bibliothek enthalten. Auf diese Weise können Sie einen Überblick über alle Ihre Designs beibehalten und dabei helfen, jeden voreingestellten Stil zu verfolgen, den Sie erstellt haben. Sie müssen sich keine Sorgen machen, dass alles von Anfang an alles perfekt ist. Wenn Sie Ihre Website erstellen, werden Sie diese Elemente wahrscheinlich so optimieren, während Sie mitfahren.

Schritt 3: Implementieren und passen Sie nach Bedarf an

Sobald Sie Ihre Optionsgruppe und Ihr Element Preset erstellt haben, können Sie sie auf Ihrer Website anwenden. Wenn Sie eine Website von Grund auf neu erstellen, ohne im Voraus Designsoftware zu verwenden, sind die Wahrscheinlichkeit hoch, dass Sie Ihre Voreinstellungen während der ersten Seite erstellt haben.

Möglicherweise müssen Sie bei der Arbeit Anpassungen auf Elementebene vornehmen. Wenn Sie beispielsweise eine Voreinstellung auf ein Testimonialmodul anwenden, aber den Abstand auf einer bestimmten Seite ändern müssen, können Sie dies tun, ohne den Rest der Website zu beeinflussen. Diese Flexibilität ermöglicht es Ihnen, sich während des Gehens anzupassen und sicherzustellen, dass Ihr Design skalierbar und anpassungsfähig bleibt.

Der Schlüssel hier ist, Voreinstellungen als Werkzeug für das Erstellen eines flexiblen, kohäsiven Designsystems und nicht als starres Framework zu betrachten, das Sie genau befolgen müssen. Sie müssen wahrscheinlich Ihre Stile optimieren, während Sie weiter bauen. Sie können also immer gerne Voreinstellungen ändern und auf Elementebene außer Kraft gesetzt. Verfeinern Sie Ihr Design und nutzen Sie die Echtzeitbearbeitung von Divi voll aus, um diese Anpassungen im laufenden Flug vorzunehmen.

Schritt 4: Halten Sie Ihre Stile in der Divi -Bibliothek organisiert

Um alle Ihre Element -Voreinstellungen und -Layouts zu verfolgen, speichern Sie sie in einem Layout, das Sie in Ihrer Divi -Bibliothek aufbewahren können.

Wenn Ihre Website wächst, können Sie Ihre gespeicherten Voreinstellungen anpassen, um Ihr Design zu verbessern. Sie können Ihre Voreinstellungen immer in dem Element ändern, an dem Sie arbeiten. Sobald Sie eine Voreinstellung aktualisieren, wird es auf Ihrer gesamten Website aktualisiert.

Schritt 5: Iterieren und verbessern

Eines der großartigen Dinge am voreingestellten System von Divi ist die Fähigkeit, Ihr Design kontinuierlich zu verbessern und zu verfeinern. Wenn Sie weitere Seiten und Layouts erstellen, sollten Sie Ihre Optionsgruppe und Ihre Elementvoreinstellungen erneut besuchen, um globale Anpassungen vorzunehmen.

Wenn Sie sich entscheiden, Ihre primäre Schaltfläche zu ändern oder die Schriftgröße aller Überschriften zu aktualisieren, können Sie dies einmal tun und sie über alle Fälle reflektiert, in denen dieses Voreingang angewendet wird.

Während Sie weiter arbeiten, erhalten Sie ein tieferes Verständnis dafür, welche Elemente gut zusammenarbeiten und welche weiteren Anpassungen benötigen. Haben Sie keine Angst davor, Voreinstellungen während des Weges zu modifizieren, und nutzen Sie die Flexibilität von Divi, um kleine Änderungen vorzunehmen, die zu Ihrem sich entwickelnden Design -Vision passen.

Wenn Sie Ihre Voreinstellungen kontinuierlich wiederholen und verbessern, erstellen Sie eine Website, die nicht nur zusammenhängend, sondern auch an zukünftige Änderungen oder Designtrends anpassbar ist. Denken Sie daran, dass das voreingestellte System ein Tool ist, mit dem Sie Ihren Prozess rationalisieren können - keine Regeln, die Sie vom ersten Tag an ausschließlich befolgen müssen.

Die Vorteile eines voreingestellten Workflows

Nachdem wir die Grundlagen der Erstellung eines strukturierten Workflows mit Divi -Voreinstellungen durchlaufen haben, lassen Sie uns einige der Vorteile durchgehen, die mit diesem Ansatz verbunden sind.

Geschwindigkeit: Reduzieren Sie die Konstruktionszeit mit vorgenutzten Voreinstellungen

Mit dem voreingestellten System von Divi können Sie die Zeit, die für die Gestaltung einer Website benötigt wird, drastisch verkürzt. Anstatt jedes Mal von vorne zu beginnen, wenn Sie ein Element entwerfen müssen, erstellen und verwenden Sie einfach Elemente und Option Gruppenvoreinstellungen. Unabhängig davon, ob es sich um eine CTA -Taste, einen Überschriftenstil oder ein Testimonialmodul handelt, können Sie mit diesen Voreinstellungen ein komplettes Designpaket mit einem einzigen Klick anwenden.

Sobald Sie beispielsweise einen Grenzstil mit Ihren Optionsgruppenvoreinstellungen entworfen haben, können Sie ihn auf alle Seiten konsistent anwenden, ohne die Arbeit wieder zu wiederholen.

Element-Voreinstellungen sparen noch mehr Zeit, indem Sie alle vorgeschriebenen Module wiederverwenden können. Sie können ein vollständig gestaltetes Modul mit nur einem Klick bereitstellen, um sicherzustellen, dass Ihr Layout sofort mit Ihrer Vision übereinstimmt.

Mit diesem Design-Ansatz für Design können Sie schneller aufbauen und sich auf die kreativen Aspekte Ihres Projekts konzentrieren, anstatt sich auf die sich wiederholenden Aufgaben des Stylings einzelner Elemente.

Konsistenz: Bewahren Sie ein einheitliches Styling über die Seiten auf

Ein wesentlicher Vorteil eines voreingestellten Workflows ist die Konsistenz. Durch die Verwendung von Element- und Optionsgruppenvoreinstellungen stellen Sie sicher, dass jede Seite auf Ihrer Website die gleichen Designregeln hält, von Typografie über Abstand bis hin zu Farben.

Das Einstellen einer einzelnen Optionsgruppe Voreinstellung, da die Schaltfläche Standardeinstellung ist, stellt sicher, dass die Schriftgrößen und -stile Ihrer Website einheitlich bleiben, unabhängig davon, wo sie angezeigt werden. Diese Konsistenz stärkt die visuelle Identität Ihrer Website und verleiht ihm einen polierten, zusammenhängenden Look.

Anstatt sich mit inkonsistenten Stilen auf verschiedenen Seiten zu befassen, können Sie ein einheitliches Designsystem beibehalten, das die Benutzererfahrung verbessert und Ihre Website professioneller erscheinen lässt.

Skalierbarkeit: Einfach erweitert und aktualisiert Site -Design

Voreinstellungen machen es unglaublich einfach, Ihre Website zu skalieren, wenn sie wächst. Unabhängig davon, ob Sie neue Seiten hinzufügen oder das Design vorhandener ändern, können Sie Ihr Design schnell und effizient aktualisieren. Wenn Sie eine neue Seite hinzufügen müssen, wenden Sie einfach das vorhandene Element- und Optionsgruppenvoreinstellungen an, um sicherzustellen, dass die neue Seite nahtlos zum Rest des Designs Ihrer Website passt.

Müssen Sie globale Updates vornehmen? Mit dem voreingestellten System von Divi können Sie einmal ein Voreinstellung ändern und automatisch in allen Fällen reflektieren, in denen diese Voreinstellung angewendet wird. Wenn Sie beispielsweise die Farbe aller Schaltflächen auf Ihrer Website ändern möchten, aktualisieren Sie einfach die Schaltfläche Voreinstellung, und jede mit dieser Voreinstellung verknüpfte Taste wird sofort aktualisiert.

Diese Skalierbarkeit bedeutet, dass Sie Ihr Design weiter ausbauen können, ohne jedes Element einzeln überarbeiten zu müssen. Egal, ob Sie einen Blog, neue Produkte oder völlig neue Abschnitte hinzufügen, Ihr Design bleibt kohärent und konsequent.

Flexibilität: Überschreiben Sie einzelne Elemente, ohne das System zu brechen

Während Voreinstellungen Ihnen einen strukturierten Ansatz für das Webdesign bieten, ermöglichen sie dennoch Flexibilität. Wenn Sie Anpassungen an einem bestimmten Element vornehmen müssen, können Sie das voreingestellte für dieses Element überschreiben, ohne den Rest des Designs zu beeinflussen.

Wenn Sie beispielsweise ein voreingestelltes Element auf ein Blurbmodul anwenden, jedoch die Symbolgröße oder den Abstand für eine bestimmte Instanz einstellen müssen, können Sie diese Änderungen direkt am Modul vornehmen, ohne andere Instanzen des Voreingangs an anderer Stelle auf der Website zu beeinflussen. Mit Option Group -Voreinstellungen können Sie die einzelnen Einstellungen wie Schriftgröße oder Schaltflächenfarbe für bestimmte Elemente optimieren und gleichzeitig die Kernstile auf der gesamten Website beibehalten.

Diese Flexibilität ist der Schlüssel zu einem benutzerdefinierten Look für einzigartige Abschnitte Ihrer Website. Es ermöglicht eine detaillierte Anpassung, ohne die Konsistenz und Struktur zu brechen, die die Voreinstellungen bieten. Wenn sich Ihr Design entwickelt, können Sie nach Bedarf feinabstimmende Elemente fortsetzen und ein Gleichgewicht zwischen Kontrolle und Leichtigkeit bieten, das den Prozess reibungsloser und anpassungsfähiger macht.

Entwerfen Sie intelligent mit Voreinstellungen in Divi 5 intelligenter

Wenn Sie einen voreingestellten Workflow umarmen, definieren Sie die Erstellung von Websites mit Divi neu. Durch die Nutzung von Elementvoreinstellungen und Voreinstellungen der Option Gruppen können Sie visuell atemberaubende, hoch anpassbare und einfach zu verwaltende Websites erstellen. Option Gruppenvoreinstellungen sind ausschließlich in Divi 5 erhältlich. Jetzt ist jetzt die beste Zeit, um mit der Divi 5 -Schnittstelle vertraut zu werden!