Erstellen Sie Ihr Designrahmen mit Divi 5

Wenn Sie jemals mit CSS -Frameworks wie Bootstrap gearbeitet haben, erhalten Sie, warum es so beliebt ist. Ein Design -Framework bietet Ihnen eine wiederverwendbare Grundlage, um schnelle und konsistente Layouts zu entwerfen, sodass Sie nicht jedes Mal, wenn Sie eine Seite stylen, von Grund auf neu erstellen.

Obwohl die meisten Frameworks auf vorgeschriebenen Klassen angewiesen sind, erwarten sie immer noch, dass Sie benutzerdefinierte CSS für eine tiefere Anpassung schreiben, was sie für Nicht-Koder schwierig macht. Dort unterscheidet sich Divi 5.

Es erfordert einen visuellen Ansatz und ersetzt CSS durch Tools wie Designvariablen, Voreinstellungen für Optionengruppen und Elementvoreinstellungen. Sie erhalten die gesamte Kraft eines Frameworks, ohne eine einzige CSS -Zeile zu schreiben. In diesem Beitrag zeigen wir Ihnen, wie Sie ein No-Code-Design-Framework mit Divi 5 visuell erstellen.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden , aber wir empfehlen noch nicht, vorhandene Migrieren zu machen.

Mit DIVI 5 können Sie ein No-Code-Design-Framework erstellen

Divi 5 wird von Grund auf neu umgebaut, um ein erweitertes Webdesign für alle zugänglich zu machen. Unabhängig von Ihrer Codierungsstufe können Sie moderne, benutzerdefinierte Layouts visuell erstellen. Das Aufbau eines Design -Frameworks ist nicht anders.

Abonnieren Sie unseren YouTube -Kanal

Mit Designvariablen können Sie globale Designwerte definieren

Mit Designvariablen können Sie wiederholbare Werte wie die Farben, Schriftarten, den Abstand Ihrer Marke und mehr an einem zentralen Ort definieren. Sobald Sie gespeichert sind, können Sie diese Werte auf Ihrer Website wiederverwenden, um ihr ein konsistentes, gebrandmarktes visuelles Erscheinungsbild zu verleihen.

Suchen Sie im visuellen Builder den Variablenmanager , um verschiedene Variablentypen (Zahlen, Text, Bilder, Links, Farben und Schriftarten) auf organisierte Weise zu definieren und zu speichern.

Entwurfsvariablen sind wie eine No-Code-Version von CSS-benutzerdefinierten Eigenschaften, sind jedoch weitaus mehr Flexibilität. Beispielsweise deklarieren Sie im Allgemeinen CSS-Variablen wie : root {-Primary-Color: #1A73E8; } , aber mit Divis Designvariablen speichern Sie die Farbe nur als Primärfarbe .

Sie werden ihre wahre Kraft sehen, während Sie Updates erstellen. Es ist nicht nötig, Ihr Stylesheet zu durchlaufen. Ändern Sie einfach den gespeicherten Variablenwert im Variablen -Manager , um jede Instanz auf der gesamten Website zu aktualisieren. Sie lassen Sie Ihre Ideen schnell visualisieren, ohne mehrere Stilregeln zu durchsuchen.

Außerdem können Sie häufig wiederholte Inhaltselemente wie Adresse, E -Mail, Links, Hintergrundmotive usw. als Inhaltsvariablen definieren. Sie müssen sie nicht mehrmals manuell einfügen. Ein Klick und diese Elemente werden auf Ihrer Seite angezeigt. Speichern und verwenden Sie beispielsweise Ihre Unternehmensadresse als Textvariable.

Um eine Entwurfsvariable anzuwenden, schweben Sie die Option und suchen Sie nach dem dynamischen Inhaltssymbol.

Erfahren Sie alles über Designvariablen

Sparen Sie gemeinsame Stilkombinationen mit Optionsprozessvoreinstellungen

Mit der Option Gruppenvoreinstellungen können Sie häufig verwendete Designeinstellungen wie Abstand, Grenzen, Schatten, Textstile und Hintergründe speichern und wiederverwenden, ohne sie jedes Mal wieder aufbauen zu müssen. Sie konzentrieren sich auf eine bestimmte Gruppe von Optionen in einem Modul, sodass Sie diesen Teil stylen und überall mit einem Klick anwenden können.

Nehmen wir beispielsweise an, Sie verwenden immer die gleiche 40px -Polsterung und 10px -Marge für alle Ihre Testimonialabschnitte. Speichern Sie diese Einstellungen als Abstandsvoreinstellung . Wenn Sie ein neues Testimonialmodul hinzufügen, wählen Sie die Voreinstellung aus und es ist fertig.

Was Option Group Presets leistungsstark macht, ist, dass Sie sie mit Designvariablen mischen können . Wenn Ihre Primärfarbe als Variable gespeichert wird, können Sie sie in einem voreingestellten Hintergrund verwenden. Wenn sich die Markenfarbe jemals ändert, werden die gesamten voreingestellten Aktualisierungen damit. Die Hintergründe über alle Ihre Seiten ändern sich mit einem einzigen Klick.

Optionsgruppenvoreinstellungen überschreiben Ihr gesamtes Modul nicht, sie gelten nur für die von Ihnen ausgewählte Stilgruppe. Sie können jedoch immer Voreinstellungen mit modulspezifischen Einstellungen überschreiben, um bestimmte Module anzupassen. Auf diese Weise können Sie Ihr Layout und Inhalt einzigartig halten und gleichzeitig ein konsequentes visuelles Styling auf Ihrer Website sicherstellen.

Erfahren Sie alles über Optionengruppenvoreinstellungen

Speichern Sie vollständig gestaltete Elemente mit Elementvoreinstellungen

Wenn Sie ein Divi -Benutzer waren, sind Sie bereits mit Element -Voreinstellungen vertraut. Sie können alle benutzerdefinierten Stile eines Moduls speichern, einschließlich Text, Abstand, Farben, Symbole, Schwebeffekten, als Element -Presestation, sodass Sie es überall wiederverwenden können, ohne von Grund auf neu zu bauen. Im Grunde erstellen Sie im Grunde eine Ready-to-Go-Version Ihrer am meisten verwendeten Module.

Hier ist ein kurzer Anwendungsfall: Anpassen und speichern Sie ein Klappentext vorein, und wenden Sie ihn dann auf andere unstylerierte Unnamte an, um sie schnell zu stylen.

Wie diese Werkzeuge im Frontend HTML reflektieren

Divi 5 mag wie ein Tool ohne Code aussehen, aber es schreibt tatsächlich einen sauberen, strukturierten Code im Hintergrund. Wenn Sie Einstellungen visuell anpassen, z. B. die Auswahl eines voreingestellten Abstands oder die Anwendung Ihrer Markenfarben vom Variablen -Manager, stylen Sie nicht nur ein Modul. Sie schreiben auch den Code.

Jede Designentscheidung, die Sie treffen, wird in die richtige Frontend -Ausgabe übersetzt. Divi behandelt den Codierungsteil, während Sie sich auf das Design konzentrieren.

Um Ihnen zu zeigen, wie mächtig dies ist, werden wir den visuellen Workflow in Divi 5 mit einem manuellen Ansatz mit einem herkömmlichen CSS-Framework wie Bootstrap vergleichen.

Erster Bootstrap:

Erstellen eines Designsystems manuell mit Code in Bootstrap

Für unser Beispiel habe ich ein WordPress -Setup mit dem installierten Unterstrap -Thema verwendet.

In einem typischen codebasierten Workflow werden Sie zunächst Ihre globalen Designwerte als CSS-Variablen definieren. Hier sind unsere:

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

Angenommen, wir erstellen ein einfaches Layout der Kontaktseite mit einem Kontaktformular und einer Button im benutzerdefinierten Stil. Um alles konsequent und wiederverwendbar zu halten, werden wir eine Mischung aus den Dienstprogrammklassen von Bootstrap und unseren eigenen CSS -Variablen verwenden.

Zunächst fügen wir benutzerdefinierte Code für ein Kontaktformular mit den integrierten Formularklassen von Bootstrap hinzu, um das Layout und das Eingabestyling zu verarbeiten.

Dann fügen wir den Code für unsere gestylerische Schaltfläche hinzu. Hier haben wir Bootstrap -Dienstprogrammklassen mit unseren benutzerdefinierten CSS -Variablen für Hintergrund, Grenzradius und Schatten kombiniert. Dies gibt uns die volle Kontrolle über das Erscheinungsbild. Wenn wir Änderungen vornehmen wollen, können wir unsere Variablen aktualisieren.

Wie Sie sehen können, ist es großartig und effizient, aber alles wird manuell gebaut. Wir haben die Variablen definiert, die Klassen angewendet und den gesamten Code alleine geschrieben. Und dies ist ein einfaches Layout. Stellen Sie sich vor, Sie bauen komplexe Seiten mit diesem Ansatz!

Erstellen wir nun die gleiche Seite mit Divi 5 ohne Codierung.

Die gleiche Seite visuell mit Divi 5 neu erstellen

Wir beginnen damit, unsere globalen Designvariablen zu definieren, die Teil unseres ortsweiten Designsystems werden. Zunächst gehen Sie zu Variable Manager> Farben . Schreiben Sie dann den Hex -Code für die Primärfarbe (#E91E63) und speichern Sie.

In ähnlicher Weise können Sie auch Zahlenvariablen für den Grenzradius {6px} und den Abstand sparen. Als nächstes füge ich das Kontaktformularmodul hinzu und passe die Schaltfläche Senden an meinen bevorzugten Stil an:

Jetzt speichere ich diese Schaltflächeneinstellungen als Taste Preset für die spätere Verwendung.

Wenn ich eine weitere Schaltfläche hinzufüge und die Schaltfläche voreinstehe, sehen Sie, was passiert? Es wird automatisch gestylt.

Um eine Optionsgruppe Preset anzuwenden, schweben Sie über die Einstellung und suchen Sie nach dem Einstellungssymbol .

Haben Sie auch bemerkt, wie wir mehrere benutzerdefinierte Stile in einem Klick auf eine Schaltfläche angewendet haben, ohne eine einzelne Codezeile zu berühren? Dies ist es, was wir meinen, wenn wir sagen, dass Sie Ihre Designeinstellungen visuell speichern. Es ist die Art von Workflow Divi 5, für die es gebaut wurde. Es ist schnell, konsistent und voll visuell.

Was hinter den Kulissen passiert, ist magisch. Divi stapelt nicht nur blind Stile. Jede Entwurfsvariable, Voreinstellung und Einstellung, die Sie anwenden, ist in sauberem, effizientem Code organisiert, der am vorderen Ende gerendert wird.

Die Seitenquelle der obigen Divi-gestalteten Seite zeigt, dass die Primärfarbe im Wurzelabschnitt genau wie die CSS-Variablen gespeichert wird:

Und an der Frontend werden Ihre Optionsgruppenvoreinstellungen automatisch gespeichert und als sauberes CSS -Ausgang auf die entsprechenden Klassen (.et_pb_button, .et_pb_contact_submit) ausgegeben.

Beide Seiten sehen gleich aus, aber wie sie gebaut und aufrechterhalten wurden, ist völlig anders.

In Bootstrap profitierten wir von seinen Versorgungskursen, mussten aber immer noch Code schreiben. Mit Divi 5 haben wir jedoch das gleiche Ergebnis erzielt, ohne eine Codezeile zu berühren, nur indem wir seine leistungsstarken Funktionen wie Designvariablen und Optionsgruppenvoreinstellungen verwenden.

Jede Änderung wurde in wenigen Klicks angewendet, ohne dass die Inkonsistenzen das Risiko für Inkonsistenzen haben, und dennoch blieb der Frontend -Code sauber. Divi speichert Ihre Stile in einem strukturierten, wiederverwendbaren Format, ohne unnötiges Markup oder Inline -Styling hinzuzufügen.

So erstellen Sie Ihr Design -Framework mit Divi 5

Divi 5 bietet Ihnen alle Werkzeuge, um ein skalierbares Designsystem zu erstellen, aber genau wie in der traditionellen Entwicklung ist die Reihenfolge, in der Sie diese Tools verwenden, von Bedeutung. Gehen wir durch die Schritte und, was noch wichtiger ist, warum:

1. Definieren Sie Ihre globalen Designvariablen

Bevor Sie eine Seite entwerfen, definieren Sie zunächst Ihre globalen Designvariablen. Dies sind die Grundwerte, auf die Ihre gesamte Website beruht, wie z. B. Ihre Farben, Schriftarten, Größen, Abstandseinheiten usw. Sobald Sie die Bausteine ​​Ihrer Website definiert haben, können Sie sie überall wiederverwenden, um alles konsistent, sauber und einfach zu verwalten.

In Divi 5 haben Sie den variablen Manager, um sie zu erstellen und zu organisieren.

So spielen die hervorgehobenen variablen Typen eine Rolle:

• Farben: Speichern Sie die primären, sekundären und akzentuellen Farben Ihrer Marke, damit Sie keine Hex -Codes eingeben oder Farbtöne anpassen müssen. Speichern Sie Ihre Farbvariablen und wenden Sie sie mit einem Klick an.
• Schriftarten: Definieren Sie die genauen Schriftarten, die Sie für Überschriften, Körpertext oder Testimonials verwenden. Sparen Sie es als Schriftart Variable , anstatt jedes Mal, wenn Sie ein H2 erstellen, die Poppins-Fettdruck neu auszuwählen. Sie können denselben Stil leicht über Module hinweg wiederverwenden.
• Zahlen: Speichern Sie Ihre Anlaufpunkte, z. B. einen 8PX-Grenzradius für Karten oder 32px-Polsterung für Bildmodule, als Zahlenvariablen . Sie können auch erweiterte Einheiten in Zahlenvariablen verwenden, um dynamische Designs zu erstellen.

Sobald Ihre Kernvariablen festgelegt sind, beruht jede voreingestellte und Seite, die Sie erstellen, auf sie. Und wenn sich Ihre Entwurfsrichtung später ändert (z. B. möchten Sie Ihren Basisabstand anpassen) , müssen Sie die Variable nur an einem Ort aktualisieren.

Nachdem Sie Ihre Entwurfsvariablen korrekt definiert haben, müssen Sie nicht jede Instanz jagen und ändern. Ändern Sie einfach den Wert einmal im Variablenmanager selbst.

2. Speichern Sie global wiederkehrende Inhalte

Mithilfe von Variable Manager können Sie auch Inhaltswerte wie Links, Text und Bilder speichern, die häufig auf Ihrer Website wiederholen. Normalerweise würden Sie diese Werte jedes Mal kopieren und einfügen, aber Divi 5 können sie einmal definieren und überall wiederverwenden.

Dies ist besonders hilfreich, um soziale Medienlinks, die Kontaktdaten Ihres Unternehmens und andere wiederkehrende Inhalte zu sparen, die manuell hinzugefügt werden müssen.

Sie können Inhalte über die verbleibenden drei Variablen speichern:

• Text: Nehmen wir an, Ihre Firmenadresse erscheint im Fußzeilen, auf der Kontaktseite und im Abschnitt Helden Ihrer Homepage. Speichern Sie es als Textvariable und wählen Sie es aus, wo die Adresse angezeigt wird.
• Links: Speichern Sie URLs auf Seite, Produktsammlungen, soziale Profile oder Bedingungen als Linkvariablen.
• Bilder: Wenn Sie Ihr Markenlogo oder ein Hintergrundbild auf mehreren Seiten verwenden, speichern Sie es als Bildvariable . Stellen Sie sich vor, Sie ersetzen Platzhalterbilder über Vorlagen in Klicks!

Mit Divi 5 können Sie Text, Links und Bilder als wiederverwendbare Bausteine ​​behandeln. Diese Inhaltsvariablen fühlen sich möglicherweise klein an, beeinflussen jedoch erheblich Geschwindigkeit, Genauigkeit und langfristige Wartung. Sie sparen Zeit, reduzieren Fehler und halten Ihre Website konsequent aktualisiert.

3. Erstellen und speichern Sie Kernstile mit Optionsgruppenvoreinstellungen

Sobald Ihre Entwurfsvariablen vorhanden sind, besteht Ihr nächster Schritt darin, die Kernstyling -Muster Ihrer Website mithilfe der Option Group -Voreinstellungen zu definieren. Speichern Sie häufig verwendete Designeinstellungen als Voreinstellung und verwenden Sie sie in jedem Modul wieder.

Hier erfahren Sie, wie Sie die Option Gruppenvoreinstellungen optimal nutzen können:

1. Voreinstellungen für gemeinsame Stile sparen

Sparen Sie zunächst Voreinstellungen für die Einstellungen, die Sie am häufigsten verwenden, z. B. Randradius, Hintergrundfarben oder Abstand. Nehmen wir an, ich verwende immer 40px Top -Polsterung und 10px unterer Rand für Testimonials, daher habe ich diese Werte als Abstandsvoreinstellung gespeichert.

Ich kann diesen Abstand sofort auf meine Testimonials (und andere Module) anwenden. Tun Sie dies für jede Einstellungsgruppe, die Sie konsequent wiederverwenden: Grenzen, Boxschatten, Schaltflächen im Hintergrund usw., damit Sie sie beim Erstellen von Seiten wiederverwenden können.

2. Kombinieren Sie Designvariablen mit Voreinstellungen

Stärken Sie anschließend Ihr Framework, indem Sie Designvariablen mit Voreinstellungen für Optionsgruppen kombinieren. Nehmen wir an, Sie haben einen 6PX -Grenzradius als Zahlenvariable gespeichert und diese beim Erstellen Ihrer Optionsgruppenvoreinstellung verwendet. Wenn Sie die Variable später ändern, aktualisieren Ihre Voreinstellungen auch automatisch auf der Website.

In ähnlicher Weise können Sie Fluid -Typografie mit einem Clamp () -Wert für reaktionsschnellen Text erstellen. Speichern Sie das in einem H1 -Voreinsatz und wenden Sie es konsequent auf Überschriften während Ihres gesamten Layouts an. In dieser Kombination aus Voreinstellungen und Variablen wird Ihr visueller Framework wirklich zu modular, skalierbar und leicht zu warten.

Sie können auch Optionsgruppenvoreinstellungen als Standardeinstellungen speichern, was bedeutet, dass die Stile automatisch auch auf neue Module angewendet werden. Wenden Sie Standardeinstellungen in Ihren gemeinsamen Voreinstellungen an, damit Sie nicht einmal jedes Mal ein Voreinstellung auswählen müssen.

4. Erstellen Sie Elementvoreinstellungen

Element Presets vervollständigen Ihr Design -Framework. Nachdem Sie Ihre bevorzugten Stile als Voreinstellungen gespeichert haben, sollten Sie auch Modulstile als Elementvoreinstellungen speichern.

Dies ist besonders hilfreich bei Modulen, die Sie häufig verwenden, wie CTAs, Testimonials, Molle und Kontaktformulare. Wenn Sie beispielsweise eine CTA -Taste mit Ihrer Markenfarbe, einem weichen Schatten und einer spezifischen Polsterung gestylt haben, können Sie das gesamte Design als Voreinstellung namens Primary Light speichern. Wenden Sie es später sofort mit einem Klick auf eine neue Schaltfläche an.

Setzen Sie Elementvoreinstellungen als Standardeinstellungen

Sie können auch jedes voreingestellte Element als Standard einstellen, sodass jedes neue Modul dieses Typs automatisch den gespeicherten Designstilen folgt. Wenn Sie die oben standardmäßige Primärlicht -Taste speichern, wird die neue Schaltfläche "She Taste" sehen:

Die Standardeinstellungen beschleunigen Ihren Workflow und Sie können sie bei Bedarf weiterhin überschreiben. In den meisten Fällen reduziert gut definierte Voreinstellungen sich wiederholte Arbeiten und beseitigt das Entwurfsraten. Mit diesen drei kombinierten Funktionen folgen Sie einem voreingestellten Design-Framework, mit dem Website-Erstellen vollständig ohne Code erstellt wird.

Entwerfen neuer Seiten basierend auf Ihrem Design -Framework

Nachdem ich alle meine bevorzugten Designvariablen, Optionsprodukte und Elementvoreinstellungen gespeichert habe, lassen Sie uns unser Framework testen.

Der Aufbau neuer Seiten ist zu einer viel schnelleren und leichteren Erfahrung geworden. Ich muss nicht jedes Modul von vorne anfangen oder manuell neu sein. Alles, was ich brauche, ist bereits eingerichtet.

Wie Sie sehen können, habe ich in wenigen Klicks mehrere Designänderungen angewendet. Ja, ich habe ein vorgefertigtes Divi-Layout importiert, aber ich habe es in Sekundenschnelle mit meinem gespeicherten Gerüst angepasst.

Anstatt Schriftarten auszuwählen, den Abstand anzupassen oder die Farben manuell zu optimieren, habe ich einfach meine gespeicherten Voreinstellungen angewendet. Das Button -Design, die Textgrößen, die Hintergrundstile und die Bildgrenzen folgten den Framework -Einstellungen, die ich zuvor erstellt habe.

Die manuelle Anwendung dieser Stile auf ein Modul ist möglicherweise keine große Sache. Wenn Sie jedoch eine ganze Seite anpassen, ist der Unterschied klar. Sie können die Leichtigkeit und Geschwindigkeit bemerken, mit der ich all diese Änderungen vorgenommen habe. Dies ist der wahre Vorteil der Erstellung eines Design -Frameworks: Es beschleunigt Ihren Workflow, ohne Qualität oder Konsistenz zu beeinträchtigen.

Das Beste kommt, wenn Sie Updates erstellen. Wenn sich meine globalen Werte jemals ändern, muss ich meine gespeicherten Designvariablen nur über den Variablenmanager ändern. Ich kann auch meine Optionsgruppe und meine Elementvoreinstellungen ändern, indem ich auf das Symbol für kleine Einstellungen klicke.

Dies ist die Power Divi 5 bringt Ihnen. Sie können Ihr gesamtes Design -Framework erstellen, speichern und anpassen, ohne eine einzelne Codezeile zu berühren.

Bauen Sie Ihr No-Code-Design-Framework visuell auf

Das Erstellen eines Design -Frameworks ist nicht mehr nur für Entwickler. Mit den richtigen Tools kann jeder es tun, auch wenn Sie Code noch nie zuvor berührt haben. Wie Sie in diesem Beitrag gesehen haben, sind nur ein paar intelligente Schritte erforderlich, um Ihr eigenes Designsystem zu erstellen. Wie? Durch Verwendung von Divi 5.

Divi 5 gibt Ihnen die Werkzeuge, um dies zu erreichen

Divi 5 behandelt die Komplexität und gibt Ihnen die volle Kontrolle durch seine fortschrittlichen Funktionen. Sie können schneller aufbauen, konsequent bleiben und globale Updates vornehmen, ohne den visuellen Bauunternehmer jemals zu verlassen. Cool, richtig? Aber das ist nur die Spitze des Eisbergs, und wir fangen gerade erst an!

Wir haben viele weitere erstaunliche Funktionen zur Veröffentlichung und können es kaum erwarten, dass Sie sie ausprobieren. Laden Sie noch heute das öffentliche Alpha herunter und erstellen Sie Ihr eigenes Design -Framework ohne Codierungsbeschränkungen.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden , aber wir empfehlen noch nicht, vorhandene Migrieren zu machen.