So bauen Sie Ihre Seiten mit Divi 5 effizient auf

Divi 5 ist von Grund auf wieder aufgebaut und bietet eine blitzschnelle Leistung und führt neue Funktionen wie Designvariablen für das standortweite Styling, verschachtelte Zeilen für die unendliche Layout-Tiefe und ein voreingestelltes Design zur Steigerung Ihres Workflows ein. Mit einem modernen, überarbeiteten visuellen Bauunternehmer können Sie Divi 5 professionelle Websites mit wenig Aufwand erstellen, indem Sie entweder von vorne anfangen oder Tausende von vorgefertigten Layouts nutzen.

In diesem Beitrag werden wir die einzigartigen Funktionen und UI -Verbesserungen von Divi 5 hervorheben und wie sie Ihnen helfen, Ihre Seiten effizienter zu erstellen. Von der Einrichtung reaktionsschneller Layouts bis hin zur Nutzung innovativer Funktionen wie Modulgruppen und Divi -KI werden Sie sehen, wie Divi 5 das Webdesign in ein schnelleres, intelligenteres und kreativeres Erlebnis verwandelt.

Ein Hinweis Bevor wir eintauchen: Divi 5 ist bereit, auf neuen Websites verwendet zu werden, aber wir empfehlen noch nicht, vorhandene Websites in Divi 5 konvertieren.

Nachdem dies gesagt ist, lassen Sie uns eintauchen.

Verständnis der modernen Benutzeroberfläche von Divi 5

Die Schnittstelle von Divi 5 ist eine vollständige Überarbeitung seines Vorgängers, das für Geschwindigkeit, Flexibilität und intuitives No-Code-Design ausgelegt ist. Der Visual Builder bietet Echtzeit-Front-End-Bearbeitung mit einem saubereren Einstellungsfeld, reaktionsschnellem Design und einer verschachtelten Schichtschnittstelle für die nahtlose Navigation von Abschnitten, Zeilen, Spalten und Modulgruppen an.

Divi 5 wird durch eine schnellere Grundlage verbessert und führt einzigartige Funktionen wie verschachtelte Zeilen für die unendliche Layouttiefe, Modulgruppen für optimiertes Modulmanagement und Designvariablen für ein konsistentes Styling ein. Diese Fortschritte machen Divi 5 für Anfänger und mächtig für Fachkräfte zugänglich und verändern, wie Websites auf WordPress aufgebaut sind.

Visual Builder Evolution

Der Visual Builder von Divi 5 bietet eine neu gestaltete Oberfläche mit einer optimierten Erfahrung, die leistungsstark und benutzerfreundlich ist. Im Vergleich zu Divi 4 führt Divi 5 ein saubereres, intuitiveres Einstellungsfeld ein, das die Unordnung reduziert und logisch organisiert, wodurch Anpassungen schneller werden.

Mit neuen Ansprechentwürfen können Sie zwischen mehreren Desktop-, Tablet- und Mobilfunkansichten wechseln, um sicherzustellen, dass Designs auf allen Geräten makellos aussehen. Diese UI -Verbesserungen machen Divi 5 für Anfänger zugänglich und bieten gleichzeitig die Nachfrage der Präzisionsfachkräfte.

Intuitive Navigation

Das Navigieren komplexer Layouts ist mühelos mit der Layers -Schnittstelle von Divi 5. Diese Schnittstelle organisiert Abschnitte, Zeilen, Spalten, Module und neue Modulgruppen zu einer klaren, hierarchischen Struktur. Sie können Sie leicht in die Elemente Ihres Designs einbohren, egal ob Sie ein einzelnes Modul anpassen oder einen gesamten Abschnitt umstrukturieren.

Die Drag-and-Drop-Schnittstelle vereinfacht Dinge, während der Drahtmodus eine Vögel-Auge-Ansicht der Struktur Ihrer Seite bietet. Durch die Kombination dieser Werkzeuge stellt Divi 5 den Bau und die Bearbeitung komplexer Layouts intuitiv, spart Zeit und verringert die Frustration.

Responsive Design Controls

Divi 5 führt anpassbare Haltepunkte ein, um eine genaue Kontrolle darüber zu erhalten, wie sich Ihre Designs an Geräte anpassen. Sie können aus sieben vordefinierten Haltepunkten auswählen oder benutzerdefinierte Werte festlegen, um bestimmte Geräteauflösungen zu entsprechen. Dies gewährleistet Pixel-perfekte Layouts ohne manuelle CSS-Optimierungen.

Diese detaillierte Kontrolle in Kombination mit fortgeschrittenen Einheiten wie Clamp () zur Flüssigkeitskalierung stellt sicher, dass Ihre Entwürfe in allen Bildschirmgrößen konsistent und visuell ansprechend bleiben.

Erstellen Sie Ihre Seite mit den einzigartigen Funktionen von Divi 5

Divi 5 führt innovative Tools ein, mit denen Sie die Verwendung von Divi neu definieren. Verschachtelte Zeilen ermöglichen die Nistung für komplexe Layouts infinite Reihen, während Modulgruppen das Styling und das Verwalten mehrerer Module als einzelne Einheit vereinfachen. Entwurfsvariablen ermöglichen die ortsweite Konsistenz für Farben, Schriftarten und mehr, sowie fortgeschrittene Einheiten unterstützen dynamische CSS-Funktionen wie Clamp () und Calc () für reaktionsschnelle Designs. Voreingestellter Design mit Option Group Voreinstellungen rationalisiert das Styling über Elemente hinweg und beschleunigt die Erstellung von Inhalten. Zusammen ermächtigen diese Funktionen Benutzer, professionelle, reaktionsschnelle Websites effizient zu erstellen.

Im Folgenden detailliert, wie Sie diese Tools verwenden, um eine Webseite zu erstellen.

1. Entwurfsvariablen für ein effizientes Styling

Designvariablen sind globale Einstellungen, die für Farben, Schriftarten, Zahlen, Bilder, Text und Links verwendet werden können, die ortsweit angewendet werden können. Sie können Variablen definieren, indem Sie im visuellen Builder auf das Symbol Global Variablen klicken.

Der Vorteil der Verwendung von Designvariablen besteht darin, dass Sie sie einmal aktualisieren können, um alle Instanzen dieser Variablen zu aktualisieren, die Konsistenz und Zeitsparen zu gewährleisten. Wenn Sie beispielsweise Zahlenwerte festlegen, um CLAMP () Berechnungen an Überschriften zuzuweisen, stellen Sie eine globale Hierarchie für Text auf Ihrer Website ein. Wenn Sie eine schnelle Änderung vornehmen müssen, aktualisieren alle Überschriften- oder Textmodul mit diesen angewendeten Variablen auf Ihrer Website, sodass Sie schnelle Designänderungen vornehmen können, die während jeder Instanz füllen.

So verwenden Sie Designvariablen

Um das Potenzial von Entwurfsvariablen zu maximieren, integrieren Sie sie frühzeitig in Ihren Entwurfsprozess. Durch das Erstellen von Variablen am Start werden ein konsistentes Rahmen erzeugt, in dem Sie sich auf Kreativität befassen, anstatt sich wiederholte Aufgaben zu repetitiv. Klicken Sie mit dem Symbol Variable Manager im Visual Builder.

Wenn das Dialogfeld angezeigt wird, können Sie Variablen hinzufügen, um die Grundlage Ihres Designs zu erstellen. Beispielsweise können Sie Zahlenvariablen verwenden, um eine reaktionsschnelle Typografie festzulegen.

Zahlenvariablen können auch für den Abstand verwendet werden. Sie können beispielsweise einen Standardabstand für alle Spalten und Zeilen auf Ihrer Website festlegen. Die Verwendung einer Calc () -Formel wie Calc (80% - 60px) legt die Breite eines Entwurfselements als 80% des Containers fest, wobei 30px auf beide Seiten eingesetzt werden. Wählen Sie im Dropdown -Menü CALC , um die Formel anzuwenden.

Geben Sie die Calc () -Formel in das Wert des Wertes ein. Klicken Sie auf die Schaltfläche Variablen speichern, um sie dem Variablen -Manager hinzuzufügen.

Sobald Ihre Variablen gespeichert sind, erleichtert Divi es einfach, sie während Ihres gesamten Designs anzuwenden. Um den Abstand zu verwenden, klicken Sie auf eine Zeile, eine Spalte oder ein Modul, navigieren Sie zur Registerkarte Entwurf und suchen Sie nach dem Feld Breite.

Klicken Sie schließlich auf das Symbol Dynamic Inhalt einfügen, um die globale Abstandsvariable auszuwählen.

Wie bereits erwähnt, gewährleistet die Anwendung einer Entwurfsvariablen die Konsistenz auf Ihrer Website. Die Aktualisierung seiner Eigenschaften im Variablenmanager synchronisiert sofort alle Instanzen und speichern Sie Stunden manueller Anpassungen.

Tipps zur Verwendung von Designvariablen

• Organisieren Sie Ihre Variablen nachdenklich: Name Variablen beschreibend, um sie in komplexen Projekten leicht zu identifizieren.
• Nutzen Sie Voreinstellungen: Kombinieren Sie Designvariablen mit den globalen Voreinstellungen von Divi, um wiederverwendbare Stilvorlagen für Module zu erstellen und die Einstellungszeit für neue Seiten zu verkürzen.
• Reaktionsfähigkeit der Test: Vorschau variable Designs über Geräte im visuellen Builder hinweg, um sicherzustellen, dass alle Variablen wie erwartet ausgeführt werden.

2. Voreingestellter Design mit Optionsgruppenvoreinstellungen

Das voreingestellte Designsystem von Divi 5 revolutioniert das Styling mit zwei leistungsstarken Tools: Element-Voreinstellungen und Option Gruppenvoreinstellungen. Diese Funktionen ermöglichen es Ihnen, Konfigurationen zu speichern und wiederzuverwenden, die Konsistenz sicherzustellen und Ihren Projekt -Workflow zu optimieren.

Divi 5 Element Presets

Mit Element -Voreinstellungen können Sie die Konfiguration eines Moduls - einschließlich Text, Farben, Typografie, Abstand und Schwebeffekten - für die Wiederverwendung auf Ihrer Website speichern. Sie können beispielsweise ein vollständig gestaltetes Schaltflächenmodul mit einer bestimmten Schriftart, einem Gradientenhintergrund und einer Schwebeanimation erstellen. Sobald Sie als Element Preset gespeichert sind, können Sie diese auf eine beliebige Schaltfläche auf Ihrer Website mit einem einzigen Klick anwenden und ein identisches Styling beibehalten. Wenn Sie die Voreinstellung aktualisieren, z. B. das Ändern des Hintergrunds in eine feste Farbe, wird jede Instanz dieser Taste automatisch aktualisiert, sich wiederholende Änderungen beseitigen und ein einheitliches Aussehen sicherstellen.

Divi 5 Option Gruppenvoreinstellungen

Im Gegensatz dazu konzentrieren sich die Voreinstellungen der Option Gruppe auf wiederverwendbare Stilgruppen wie Typografie, Grenzen oder Schatten, die auf verschiedene Elemente für zusammenhängende Designs angewendet werden können. Zum Beispiel können Sie eine Option Group Preset für einen 1px schwarzen Rand mit einem 5px -Radius erstellen und sie für Schaltflächen, Bilder und Zeilen verwenden.

Wenn Sie die Voreinstellung später an einen 2PX -Grenze einstellen, aktualisieren alle verknüpften Elemente sofort, sparen Sie Zeit und erhalten die Konsistenz. Mit diesem modularen Ansatz können Sie Gruppen für Stilgruppen über Elemente hinweg mischen und Flexibilität bieten, ohne die Kontrolle zu beeinträchtigen.

Wie man Voreinstellungen effektiv einsetzt

Elementvoreinstellungen sind bereits vorhanden, wenn Sie mit einem Starter -Site oder einem vorgefertigten Layout beginnen. Wenn Sie jedoch eine Website von Grund auf neu erstellen, müssen Sie sie zuerst erstellen. Durch das Erstellen dieser Voreinstellungen können Sie den Designprozess beschleunigen, indem Sie ähnliche Module auf Ihrer Website sofort gestylen.

Erstellen eines Element -Presets

Um ein voreingestelltes Element zu erstellen, stylen Sie ein Modul mit Ihren gewünschten Einstellungen. Klicken Sie dann in der oberen rechten Ecke der Einstellungen des Moduls auf das voreingestellte Menü .

Klicken Sie von aktuellen Stilen aus neuer Voreinstellung, um ein neues Voreinstellung zu erstellen.

Geben Sie dem Voreingang einen Namen, wählen Sie, ob es als Standardeinstellung zugewiesen werden soll, und speichern Sie ihn. Wenn Sie es als Standardvoreinstellung auswählen, wird jedes Akkordeon, das Sie Ihrer Website hinzufügen, identisch gestaltet, sodass Sie Ihre Webseiten schneller und effizienter erstellen können.

Erstellen Sie eine Optionsgruppenvoreinstellung

Der Prozess des Erstellens einer Optionsgruppe Preset ist etwas unterschiedlich. Anstatt ein Voreinstellung auf ein Modul anzuwenden, können Sie Aspekten eines Moduls Voreinstellungen zuweisen, die auf andere Arten von Modulen, Spalten, Zeilen oder sogar Abschnitten übertragen werden können. Option Gruppenvoreinstellungen eignen sich hervorragend zum Styling -Grenzen, zum Hinzufügen von Transformationskontrollen, Filtern, Boxschatten und mehr, sodass Sie überall kleinere Elemente konsistent halten können.

Sie möchten beispielsweise einen Randstil für Bilder und Spalten erstellen. Wählen Sie ein Bildmodul aus, navigieren Sie zur Registerkarte Entwurf und schweben Sie über die Randeinstellungen, bis das Symbol für das Voreingang der Gruppe ausgewählt wird.

Klicken Sie anschließend auf Neues Voreinstellung hinzufügen .

Stylen Sie die Grenze, nennen Sie es und retten Sie die Voreinstellung.

Tipps für die Verwendung von Divi 5's Design-basierten Voreinstellungen

Durch die Kombination von Elementvoreinstellungen und Voreinstellungen der Option Gruppen können Sie ein skalierbares Designsystem erstellen. Hier sind einige Tipps, um sie effektiv zu verwenden, um eine Webseite mit Divi 5 zu erstellen:

• Verwenden Sie sie für die Effizienz: Erstellen Sie Elementvoreinstellungen oder Option Gruppenvoreinstellungen, um das Seitenaufbau zu beschleunigen, insbesondere für große Websites. Diese Methode speichert Sie vor dem wiederholten Stylen eines Moduls, einer Reihe oder eines Abschnitts. Sie erstellen im Voraus Stile und tragen sie an, wo immer es benötigt wird.
• Festlegung von Konsistenz: Voreinstellungen sorgen für ein einheitliches Styling über Elemente hinweg und verstärken Ihre Markenidentität und professionelle Politur.
• Bearbeiten Sie Voreinstellungen, wenn Ihre Website Designänderungen erfordert: Voreinstellungen ermöglichen es Ihnen, globale Stile zu aktualisieren, ohne einzelne Elemente manuell zu bearbeiten, sodass sie ideal für Design -Iterationen oder Kundenrevisionen sind.
• Verwenden Sie sie zur Skalierbarkeit: Sie können Voreinstellungen mit Designvariablen kombinieren, um ein robustes Framework für Websites zu erstellen, die häufig Aktualisierungen erfordern. Müssen Sie eine Seite die Straße hinzufügen? Mit Voreinstellungen können Sie dies schneller und effizienter tun.

3.. Verschachtelte Zeilen für flexible Layouts

Verschachtelte Zeilen in Divi 5 ersetzt die Spezialschnitte von Divi 4 durch ein flexibleres, unendlich nestableres System. Im Gegensatz zu herkömmlichen Zeilen können verschachtelte Zeilen innerhalb von Spalten platziert werden, sodass Sie in praktisch jeder Konfiguration Zeilen, Module oder zusätzliche verschachtelte Zeilen stapeln können.

Um eine verschachtelte Zeile zu erstellen, fügen Sie einfach eine zu einer Spalte - oder unter einem Modul innerhalb einer Spalte - über den visuellen Bauunternehmer hinzu und füllen Sie sie mit Modulen oder weiteren verschachtelten Zeilen ein.

Mit dieser Funktion können Sie komplexe, vielschichtige Layouts erstellen. In einem Abschnitt über Abschnitt können Sie beispielsweise eine 3-Spal-verschachtelte Zeile unter ein Textmodul platzieren, um die Benutzer auf verschiedene Seiten zu führen.

Die bevorstehenden Flexbox-Steuerelemente in Divi 5 verbessern die Positionierungsoptionen und bieten eine präzise Ausrichtung und den Abstand für komplizierte Designs wie Preistabellen, Portfolios oder mehrstufige Inhaltsabschnitte.

So verwenden Sie verschachtelte Zeilen

Um die Kraft verschachtelter Reihen zu nutzen, befolgen Sie diese Schritte im visuellen Bauunternehmer:

Führen Sie zunächst eine Standardzeile in Ihr Seitenlayout ein. Dies wird als Fundament dienen. Klicken Sie anschließend auf die Registerkarte Neue Zeile , um die Spaltenoptionen für Ihre neue verschachtelte Zeile anzuzeigen.

Wählen Sie als nächstes das Modul für die erste Spalte aus. In diesem Beispiel ein Bild.

Fügen Sie in der zweiten Spalte ein anderes Bild hinzu. Von dort aus können Sie Optionsgruppenvoreinstellungen für Grenzen, Boxschatten und Transformationseffekte erstellen.

Sie können verschachtelte Zeilen zur anderen Säule oder unter dem ersten hinzufügen. Die Möglichkeiten sind endlos.

Sie können erweiterte Layouts erstellen, die mehrere Ebenen tief sind. Sie können beispielsweise eine Preistabelle mit einer verschachtelten Zeile erstellen, um zwei Schaltflächen nebeneinander zu bieten, eine Funktion, die in früheren Versionen von Divi fehlt. Es gibt verschiedene Möglichkeiten, verschachtelte Zeilen zu verwenden , sodass sie beim Erstellen einer Webseite mit DIVI zu einer vielseitigen Funktion werden. Sie sind perfekt zum Aufbau von Heldenabschnitten, Teamseiten, Header, Fußzeilen und vielem mehr.

Tipps zur Verwendung verschachtelter Zeilen

• Planen Sie zuerst Ihr Layout: Bevor Sie verschachtelte Zeilen hinzufügen, skizzieren Sie Ihre Seitenstrukturübergreifung, um festzustellen, wo das Hinzufügen von Wert bietet, z.
• Verwenden Sie für modulare Designs: Erstellen Sie verschachtelte Zeilen für wiederverwendbare Komponenten, wie eine Zeile mit einem Bild und Text für Testimonials, doppelt oder speichern Sie sie für ein konsistentes Styling auf Ihrer gesamten Website.
• Kombinieren Sie mit Modulgruppen: Kombinieren Sie verschachtelte Zeilen mit Modulgruppen, um komplexe Layouts zu organisieren.
• Verwenden Sie Divi's Responsive Breakpoints: Testen Sie verschachtelte Zeilen über die sieben Haltepunkte von Divi 5 mit reaktionsschnellen Umschaltungen, um sicherzustellen, dass verschachtelte Elemente auf allen Geräten ordnungsgemäß ausgerichtet sind.

4. Modulgruppen für organisierte Inhalte

Modulgruppen wirken als Container in Divi 5, mit denen Sie mehrere Module in einer Spalte gruppieren können. Sie können sie als einzelne Einheit stylen, bewegen oder duplizieren. Sie können Ihren Workflow, insbesondere für komplexe Designs, vereinfachen und die Voraussetzungen für die bevorstehende Flexbox -Unterstützung einstellen und noch genauere Positionierungsoptionen freischalten.

Von dort aus können Sie Entwurfsmodule und verschachtelte Zeilen hinzufügen oder Optionsgruppenvoreinstellungen an die Gruppe anwenden, um gestaltete Layouts zu erstellen, die Sie problemlos duplizieren oder in der Divi -Bibliothek oder der Divi -Cloud speichern können.

So verwenden Sie Modulgruppen

Fügen Sie eine neue Zeile hinzu und wählen Sie eine Spaltenstruktur aus. Wählen Sie das Gruppenmodul aus den verfügbaren Optionen von Divi 5 aus.

In der Modulgruppe können Sie Module wie Text, Bilder, Schaltflächen oder sogar verschachtelte Zeilen hinzufügen. Zum Beispiel können Sie eine Gruppe erstellen, die eine Überschrift, einen Text, ein Bild und eine Schaltfläche für einen Abschnitt "Aufruf zum Aktion" enthält.

Sobald Sie gestylt sind, können Sie die Modulgruppe speichern oder duplizieren, indem Sie auf das Ellipsis -Menü in der oberen rechten Ecke der Gruppe klicken.

Modulgruppen können Teammitgliedsabschnitte, Anrufabschnitte, Innenseiten-Header und mehr erstellen. Noch wichtiger ist jedoch, dass Modulgruppen extrem hilfreich werden, sobald Funktionen wie Flexbox und The Loop Builder veröffentlicht werden.

Tipps zur Verwendung von Modulgruppen

• Planungsmodulgruppen strategisch: Verwenden Sie Modulgruppen für wiederverwendbare Komponenten wie CTAs, Testimonials, Teammitglieder oder Produktkarten. Sie helfen dabei, den Bauprozess zu rationalisieren und die Organisation zu pflegen.
• Kombinieren Sie Modulgruppen mit Voreinstellungen: Anwenden Sie Optionsgruppen -Voreinstellungen auf Modulgruppen für ein konsistentes Styling, wie z. B. einheitliche Schatten oder Grenzen, über mehrere Gruppen hinweg.
• Verwenden Sie Divi Cloud: Sparen Sie häufig verwendete Modulgruppen in Divi Cloud, um schnellen Zugriff auf Projekte hinweg zu erhalten, insbesondere für Clients mit ähnlichen Designanforderungen.

Mit Modulgruppen können Sie modulare, organisierte Designs erstellen, die einfach zu verwalten und zu skalieren sind, wodurch sie ideal für den Aufbau einfacher oder komplexerer Webseiten erstellen können.

5. Fortgeschrittene Einheiten für dynamisches Design

Die erweiterte Einheiten von Divi 5 unterstützt einen breiteren Bereich von CSS -Einheiten (PX, VW, REM, %usw.) und Funktionen wie Calc (), Clamp (), min () und max () innerhalb eines einzelnen Eingabefeldes, wobei dynamische und reaktionsschnelle Designs ermöglicht werden. Sie können beispielsweise die Breite eines Abschnitts auf Calc (100% - 40px) oder Klemme (20px, 3VW, 40px) für die Flüssigkeitsartografie festlegen, die auf der Größe der Ansichtsfenster skaliert wird.

Erweiterte Einheiten können auch als Konstruktionsvariablen verwendet werden, um globale Regeln festzulegen und die Designs auf Ihrer Website konsistent zu halten.

So verwenden Sie fortgeschrittene Einheiten

Es gibt einige Möglichkeiten, fortgeschrittene Einheiten zu verwenden, aber am effektivsten besteht darin, sie mit Designvariablen für die Konsistenz zu kombinieren. Es kann jedoch Fälle geben, in denen Sie sie auf Modulebene zuweisen möchten.

Ein gutes Beispiel ist mit Text. Sicher, Sie können Clamp () -Formeln im Variablenmanager festlegen, um die Größe über Ihre gesamte Website zu steuern. Was ist jedoch, wenn Sie eine Überschrift beeinträchtigen möchten, indem Sie Platz hinzufügen, um es besser abzuheben? Hier kommen fortgeschrittene Einheiten ins Spiel.

Klicken Sie, um Ihrer Webseite ein Überschriftenmodul hinzuzufügen, um zu demonstrieren. Navigieren Sie auf der Registerkarte "Design" zum Größenfeld.

Klicken Sie neben dem Feld Breite auf das Symbol , um die erweiterten Einheitenoptionen anzuzeigen.

Wählen Sie im Dropdown -Menü VW (Ansichtsfenster) und geben Sie 50 ein. Dies wird der Überschrift sagen, dass er 50% der Breite des Ansichtsfensters besetzt. Das Ansichtsfenster ist der sichtbare Bereich des Webbrowserfensters. Unabhängig davon, wie weit das Browserfenster ist, ist es immer die halbe Breite des Browserfensters.

Wenn Sie vorschauen, wie die Überschrift in anderen Bildschirmgrößen aussieht, werden Sie feststellen, dass die Überschrift unabhängig davon die gleiche Breite bleibt.

Tipps für die Verwendung fortschrittlicher Einheiten

• Beginnen Sie einfach: Beginnen Sie mit grundlegenden Einheiten wie PX oder % für unkomplizierte Designs und experimentieren Sie dann mit Clamp (), Calc (), VH oder VW, um ansprechende Effekte zu erhalten.
• Verwenden Sie Clamp für Typografie: Wenden Sie Clamp () auf Schriftgrößen oder Abstand an, um flüssige, zugängliche Designs zu erstellen, die sich ohne manuelle Haltepunkte an eine beliebige Bildschirmgröße anpassen.
• Kombinieren Sie mit Designvariablen: Speichern Sie häufig verwendete Einheiten für Überschriften und Körpertext als Konstruktionsvariablen, um Konsistenz aufrechtzuerhalten und Aktualisierungen zu vereinfachen.

Fortgeschrittene Einheiten bieten Ihnen die Präzision von benutzerdefinierten CSS in der No-Code-Schnittstelle von Divi und erleichtern Sie einfach, dynamische, professionelle Webseiten zu erstellen, die sich nahtlos an ein Gerät anpassen.

6. Divi AI -Integration

Divi AI verbessert den Entwurfsprozess, indem sie Text, Bilder, Code oder ganze Abschnitte und Layouts basierend auf natürlichen Sprachaufforderungen generieren. Es funktioniert innerhalb des Visual Builder in Divi 5 und macht bei Bedarf ein kleines Design oder ein Texterschreiber einfach.

Sie können beispielsweise eine Eingabeaufforderung wie „Erstellen Sie einen modernen Heldenabschnitt mit einer Überschrift, einer Schaltfläche und einem Hintergrundbild“ verwenden. Divi AI erzeugt ein voll gestaltetes Layout, das Sie manuell verfeinern können, um Ihrer Sicht zu entsprechen.

Mit Divi AI können Sie den Designprozess beschleunigen, den Block des Schriftstellers überwinden oder bei Bedarf einen kleinen kreativen Druck erhalten.

Wie man divi ai verwendet

Um das Beste aus Divi AI beim Erstellen einer Webseite in Divi 5 zu nutzen, können Sie sie verwenden, um vorhandenen Modulen auf die Brand-Kopie zu schreiben, Bilder hinzuzufügen, einige CSS zu Fügen Sie einige CSS hinzu oder generieren Sie sogar Abschnitte. Divi AI kann Ihnen helfen, wunderschöne Webseiten zu erstellen, die bei Ihren Besuchern Anklang finden.

Um Divi AI für ein vorhandenes Textmodul zu verwenden, schweben Sie über den Textbereich und klicken Sie auf das Divi AI -Symbol auf der Registerkarte Inhalt.

Ein Dialogfeld mit mehreren Optionen wird angezeigt. Sie können den vorhandenen Inhalt schreiben und ersetzen, ihn verlängern, verkürzen oder vereinfachen, Rechtschreibung und Grammatik beheben, übersetzen oder sogar den Ton ändern.

Sobald Sie eine Option auswählen, ändert Divi AI die Kopie basierend auf dem vorhandenen Inhalt. Sobald Sie fertig sind, können Sie den Text verwenden, wiederholen, ihn mit KI verbessern oder das Ergebnis mit ein paar Leitwörtern verfeinern.

Tipps zur Verwendung von Divi AI

• Seien Sie spezifisch mit Ihren Eingabeaufforderungen: Geben Sie Details wie Ton, Farben oder Layouteinstellungen bei, wenn Sie Divi AI zum Erstellen von Bildern oder Abschnitten verwenden. Gleiches gilt für Text und Code. Je spezifischer, desto besser die Ausgabe.
• Nach Bedarf iterieren: Wenn die anfängliche Ausgabe nicht ideal ist, verfeinern Sie Ihre Eingabeaufforderung oder generieren Sie mehrere Variationen, um die beste Anpassung zu finden.
• Verwenden Sie es als Inspiration: Eine der besten Möglichkeiten, Divi AI zu verwenden, besteht darin, Ideen zu erstellen, z. B. Layoutkonzepte oder Slogans, auch wenn Sie vorhaben, Ihre Webseite stark anzupassen.

Best Practices zum Erstellen von Webseiten mit Divi 5

Die Annahme eines strategischen Ansatzes für die Merkmale von Divi 5 ist für die Maximierung seines Potenzials unerlässlich. Planen Sie zunächst Ihr Designsystem im Voraus. Definieren Sie Kerndesignvariablen wie primäre und sekundäre Farben, relevante Links, Typografieeinstellungen und Schriftarten.

Stellen Sie beim Erstellen Ihrer Seite Optionsgruppenvoreinstellungen für wiederverwendbare Stile wie Schaltflächen -Schwebeffekte, Schatten oder Typografie fest, die Ihren Workflow beschleunigen und eine zusammenhängende Ästhetik auf Ihrer Website beibehalten.

Das frühzeitige Testen ist auch für positive Ergebnisse von entscheidender Bedeutung. Verwenden Sie die Responsive Breakpoints von Divi 5, um fortgeschrittene Einheiten voranzutreiben, um sicherzustellen, dass sie auf allen Geräten gut aussehen. Die reaktionsschnellen Umschaltungen von Divi 5 bieten Ihnen sieben Haltepunkte zum Erkunden und geben Ihnen eine bessere Vorstellung davon, wie Ihr Design auf Bildschirmen verschiedener Größe angezeigt wird.

Kombinieren Sie Elementvoreinstellungen mit Voreinstellungen der Option Gruppen, um die Flexibilität und Konsistenz auszugleichen. Verwenden Sie Elementvoreinstellungen für bestimmte Module wie ein gestaltetes CTA -Modul. Im Gegensatz dazu anwenden Sie die Option Gruppenvoreinstellungen für gemeinsame Eigenschaften wie Grenzstile oder Schatten, um Einheitlichkeit zu erhalten. Wenn Updates erforderlich sind, können Sie diese voreingestellten Gruppen für globale Änderungen anpassen, anstatt einzelne Elemente manuell zu bearbeiten.

Halten Sie Ihre Designs schließlich einfach, um Leistung und Benutzerfreundlichkeit aufrechtzuerhalten. Vermeiden Sie Übernistungsreihen oder stützen sich auf komplexe Calc () -Formeln, es sei denn, diese können die Bearbeitung komplizieren. Erstellen Sie in ähnlicher Weise Modulgruppen für wichtige Designs, die Sie auf Ihrer Website wiederverwenden möchten.

Bauen Sie intelligenteren Webseiten mit Divi 5 auf

Divi 5 definiert WordPress Webdesign neu, sodass Sie leicht atemberaubende, reaktionsschnelle Webseiten erstellen können. Sein moderner visueller Bauunternehmer, intuitive Kontrollen, innovative Merkmale und Divi AI optimieren den Prozess und gewährleisten professionelle Ergebnisse mit minimaler Aufwand. Unabhängig von Ihrer Fähigkeitsniveau machen diese Tools effektive, dynamische Websites schneller, intelligenter und kreativer.

Bereit, das Potenzial von Divi 5 zu erkunden? Laden Sie die Divi 5 Alpha -Veröffentlichung noch heute herunter und experimentieren Sie mit seinen neuesten Funktionen, um Ihre Vision zum Leben zu erwecken. Divi 5 passt zu neuen Websites, wird aber noch nicht empfohlen, vorhandene umzuwandeln.

Wir würden gerne Ihre Gedanken hören! Teilen Sie Ihr Feedback, indem Sie unten kommentieren. Besser noch, posten Sie über Ihre Divi 5 -Erfahrung in den sozialen Medien, um das Wort zu verbreiten.