Divi 5 exklusive Funktionen (bisher)

Wir werden in schnellem Tempo neue DIVI 5 -Funktionen ausgelöst, und jeder wurde entwickelt, um die Leistung zu verbessern, Ihren Workflow zu rationalisieren und Ihre Fingerspitzen leistungsfähige Designfunktionen zu verleihen. Benötigen Sie einen Überblick? Dieser Beitrag wird die exklusiven Divi 5 -Funktionen in Angriff nehmen, die es wert sind, es zu überprüfen. Und das ist nur der Anfang. Wir haben aufregende neue Funktionen wie Flexbox und The Loop Builder, die bald herauskommen. Unsere Updates befassen sich mit allgemeinen Schmerzpunkten, die wir von Designern und Entwicklern gehört haben, die Divi täglich verwenden.

Divi 5 ist bereit, auf neuen Websites verwendet zu werden.

8 Features exklusiv für Divi 5 (und wie sie funktionieren)

Divi 5 führt innovative Upgrades in das Design der Website ein und verwendet eine Reihe von Tools, die Designaufgaben neu erfinden und beschleunigen, was sie intuitiver macht. Die folgenden acht Merkmale zeigen das Potenzial unseres neu wieder aufgenommenen Divi:

1. Anpassbare Haltepunkte

Feature veröffentlicht am 6. Februar 2025

Divi 5 führt mit seinem anpassbaren Haltepunktsystem eine verbesserte Flexibilität im reaktionsschnellen Design ein. Die meisten Seitenbauer beschränken die Benutzer auf nur drei Standardansichten, aber Divi 5 ermöglicht bis zu sieben eindeutige Haltepunkte, die alle auf benutzerdefinierte Pixelwerte eingestellt werden können.

Dies gibt den Benutzern mehr Kontrolle als andere beliebte Bauherren, die sich normalerweise an feste Gerätegrößen halten und begrenzte Einstellungsoptionen bieten. Während viele Plattformen Sie zwingen, innerhalb starrer Grenzen zu gestalten, können Sie DIVI 5 auf genaue Bildschirmbreiten ansprechen, bei denen Ihr Design besondere Aufmerksamkeit benötigt.

Jenseits des Standard -Trios

Die meisten Website -Bauherren halten sich am Desktop, Tablet und mobiles Trio, da es unkompliziert ist. Divi 5 erkannte, dass dies nicht mit dem, wie Menschen heute tatsächlich im Internet stöbern, auf Dutzenden verschiedener Bildschirmgrößen.

Mit Divi 5 können Sie Haltepunkte festlegen für:

• Telefon (<767px)
• Telefon breit (<860px) - perfekt für die mobile Landschaftsansicht
• Tablet (<980px)
• Tablet breit (<1024px) - fängt größere Tablets und ähnliche Geräte auf
• Desktop (> 981px)
• Breitbild (> 1280px)
• Ultra breit (> 1440px)

Andere WordPress -Seitenbauer bieten eine Breakpoint -Steuerung an, aber keine übereinstimmen die Präzision und die Benutzerfreundlichkeit von Divi 5. Das System bleibt intuitiv, wobei die gleichen vertrauten Divi -Steuerelemente für alle Haltepunkte angewendet werden.

Visual Breakpoint -Handhabung

Divi 5 führt die Skalierung von Leinwand ein, eine Funktion, die es von den meisten anderen Bauherren unterscheidet. Anstatt sich auf die Umstellung zwischen Voransichten fester Geräte zu beschränken, können Sie die Kante der Leinwand ziehen, um Ihr Layout in jeder gewünschten Breite anzuzeigen.

Dieser Ansatz gibt Ihnen ein sofortiges, realistisches Feedback, fast wie direkt in einem Webbrowser. Wenn Sie für breitere Haltepunkte als Ihr aktuelles Fenster entwerfen, passt die Leinwand proportional an, sodass Sie auch auf kleineren Bildschirmen genau einen genauen Blick auf Ihr Design erhalten.

Die Erfahrung bleibt konsistent, wenn Sie sich zwischen den Haltepunkten bewegen. Die Kontrollen verhalten sich genauso und Ihr Layout verschiebt sich nicht unerwartet. Diese Zuverlässigkeit verringert die Vermutung und die Fehlerbehebung durch reaktionsschnelles Design, was in anderen Seitenbauern Kopfschmerzen haben kann.

Erfahren Sie mehr

2. Option Gruppenvoreinstellungen

Feature veröffentlicht am 11. März 2025

Option Group Presets ist eines der aufregendsten neuen Funktionen in Divi 5 und erweitert Ihre Fähigkeiten, ein Designsystem zu erstellen, das für Sie funktioniert. Option Gruppenvoreinstellungen sind die Bausteine ​​Ihres Designs. Während Element Sie voreinstimmen, dass Sie ein bestimmtes Element stylen, funktionieren die Option Group von Divi 5 über einen beliebigen Elementtyp hinweg.

Sie können wiederverwendbare Stile für bestimmte Designeigenschaften wie Typografie, Grenzen, Schatten oder Hintergründe erstellen und diese Stile über verschiedene Elemente hinweg mischen. Sie können beispielsweise eine Voreinstellung für Ihren Kopfstil, ein weiteres für das Button -Styling und ein drittes für Box -Schatten erstellen.

Sobald Sie eingerichtet sind, können Sie diese Stile mit einem Klick auf ein beliebiges Element anwenden, unabhängig davon, ob es sich um ein Textmodul, einen Klappentext, einen Aufruf zum Handeln oder sogar Container wie Abschnitte und Zeilen handelt.

Warum ist dies für Ihren Workflow wichtig

Dies ist eine Zeitspanne, wenn Sie Ihr Design aktualisieren müssen. Angenommen, Sie entscheiden sich, den Grenzradius für Elemente auf Ihrer Website zu ändern. Anstatt jeden Schaltfläche, das Bild und jeden Abschnitt zu jagen, bearbeiten Sie einfach einmal das Grenzvoreingang und jedes Element mit diesen voreingestellten Aktualisierungen automatisch.

Die Fähigkeit, über verschiedene Elementtypen hinweg zu arbeiten, macht Divi 5's Option Group -Voreinstellungen sehr hilfreich. Der gleiche Randstil kann für ein Modul, eine Spalte, eine Reihe oder ein Abschnitt gelten. Diese Kompatibilität für Kreuzelemente spart Stunden wiederholter Stylingarbeit.

Diese Flexibilität geht noch einen Schritt weiter. Die Optionsgruppe von Divi erstreckt sich über grundlegende Styling -Optionen. Sie decken auch skriptbasierte Funktionen wie bedingte Anzeigen, HTML-Hintergrundvideos und Scroll-Effekte ab. Auf diese Weise können Sie eine konsequente Kontrolle über das statische Styling und das interaktive Verhalten auf Ihrer Website haben.

Erfahren Sie mehr

3.. Fortgeschrittene Einheiten

Feature veröffentlicht am 19. März 2025

Divi 5 hat den Umgang mit CSS -Einheiten verbessert und das reaktionsschnelle Design viel einfacher erleichtert.

Jetzt können Sie auf die gesamte Bandbreite der CSS -Einheiten zugreifen, die für das heutige Webdesign direkt im Bauherrn benötigt werden. Das heißt, Sie können Pixel (PX), Prozentsätze (%), EMS (EM), Wurzel -EMS (REM), Ansichtsfenster -Einheiten (VW, VH, VMIN, VMAX) und noch fortgeschrittenere Auswahlmöglichkeiten wie Charakterbreite (CH) oder Bruchgeräte (FR) für Gitter verwenden.

Dies mag zunächst wie ein kleines Update aussehen, aber es gibt Ihnen tatsächlich viel mehr Flexibilität für den Aufbau reaktionsschneller Layouts.

Warum verschiedene Einheiten wichtig sind

Wenn Sie Websites erstellen, die Sie auf Telefonen, Tablets und Desktops gut aussehen möchten, können nur Pixel Kopfschmerzen erstellen. Ein 300px breites Element sieht auf dem Desktop gut aus, kann aber Ihr Layout auf dem Handy brechen.

Mit fortgeschrittenen Einheiten wie Ansichtsfenster können Sie dasselbe Element auf 80 VW (80% der Ansichtsfenster) festlegen und auf alle Geräte perfekt skalieren. Oder verwenden Sie REM -Einheiten, um den Text proportional zu Ihrer Basis -Schriftgröße zu halten und die Zugänglichkeitsanpassungen erheblich zu erleichtern.

Kombinieren Sie nun Einheiten mit CSS -Funktionen wie calc (), min (), max () und clamp () und sehen Sie die wahre Magie. Divi 5 unterstützt all dies und lässt Sie wirklich flüssige Layouts erstellen, die sich an eine beliebige Bildschirmgröße anpassen.

Sie können beispielsweise eine Abschnittshöhe auf CALC (80 VH - 60px) festlegen, damit sie den größten Teil des Bildschirms aufnehmen, während Sie Platz für einen Kopfball lassen. Oder verwenden Sie Clamp (16px, 4VW, 22px) für Text, der mit dem Bildschirm wächst, aber innerhalb lesbarer Grenzen bleibt.

Die Flexibilität von Clamp ()

Die CLAMP () -Funktion verdient besondere Aufmerksamkeit, da sie viele reaktionsschnelle Designprobleme löst. Sie können minimale, bevorzugte und maximale Größen auf einmal einstellen, wodurch die Funktion der Clamp () -Funktion vieler Webdesigner zu einer bevorzugten Funktion.

Möglicherweise möchten Sie Überschriften, die mit Bildschirmgröße wachsen, aber lesbar bleiben. In einem Überschriftenmodul können Sie die Textgröße auf Klemmen (36px, 5VW, 72px) einstellen. Die Überschrift ist nicht kleiner als 36px oder größer als 72px, aber zwischen diesen Größen wird sie mit 5% der Ansichtsfensterbreite skaliert.

Dies erzeugt reibungslose Übergänge zwischen Bildschirmgrößen ohne Haltepunkte. Text, der auf Tablets zu groß ist oder bei großen Monitoren zu klein ist, wird kein Problem sein. Ihre Typografie atmet mit dem Layout.

Wir verstehen auch, dass verschiedene Designelemente unterschiedliche Einheiten benötigen, weshalb die fortgeschrittenen Einheiten von Divi 5 gepällichend und nicht nur mit Typografie, sondern auch mit den Margen, Polsterung und anderen Abstandswerten funktioniert:

• Für Text behalten REM -Einheiten alles proportional. Wenn Sie Ihren Körpertext auf 1REM und die Überschriften auf 2.5REM einstellen, aktualisiert die Änderung der Basis -Schriftgröße alles proportional.
• Für Layouts können Sie versuchen, feste und flüssige Einheiten zu mischen. Eine Seitenleiste funktioniert möglicherweise am besten bei 300px, während der Hauptinhalt Calc (100% - 350px) verwenden kann, um den verbleibenden Platz zu füllen.
• Für den Abstand erstellen EM -Einheiten Polster, die mit Textgröße skaliert werden. Dies hält Ihre Designproportionen auch dann konsistent, wenn sich die Textgrößen ändern.

Spielt auch gut mit anderen besprochenen Funktionen

Besonders schön ist, dass Sie keine benutzerdefinierten CSS schreiben müssen, um diese Einheiten zu verwenden. Sie sind direkt in die visuelle Schnittstelle aufgebaut. Sie können mit unterschiedlichen Werten experimentieren und die Ergebnisse sofort sehen, wodurch die Lernkurve viel sanfter wird, als diese Lösungen von Hand zu kodieren.

Diese Einheiten sind in andere Funktionen in Divi 5 integriert. Sie können Ihren Wert mit jeder Einheit, die Sie bevorzugen, als Konstruktionsvariablen speichern und sie dann über Optionsprodukte über die Option Gruppenvoreinstellungen anwenden. Dies schafft eine Kettenreaktion eines guten Designs, das durch Ihre gesamte Website fließt. Zum Beispiel:

• Erstellen Sie eine Zahlenvariable wie Überschriftengröße: Clamp (26px, 5VW, 82px); Für Ihre H1 -Überschriften. Wenden Sie diese Variable auf Ihr Übergangstext vorein. Ihre Überschriften werden nun reibungslos zwischen 26px auf Mobilgeräte und 82px auf dem Desktop skalieren, wobei zwischen diesen Größen eine Fluid 5VW -Berechnung ist.
• Setzen Sie eine Zahlenvariable in Klemme (20px, 5 VW, 80px) und verwenden Sie sie dann als Ränder, und Sie haben einen engen Abstand auf dem mobilen und großzügigen Atemraum auf dem Desktop mit einem reibungslosen Übergang zwischen.
• Legen Sie einen Basisabstand mit einer zahlenvariablen Space-Einheit: 20px ein und verwenden Sie ihn mit Calc () in Ihren Layout-Voreinstellungen. Anwenden Sie beispielsweise CALC (var (–Space-Unit) * 2) für größere Lücken und Calc (var (–Space-unit) / 2) für strengere Räume. Wenn Sie den Basiswert aktualisieren, passt der gesamte abgeleitete Abstand proportional an.

Das kratzt nur die Oberfläche. Durch das Mischen dieser Konfigurationen können Sie Websites erstellen, die die Einfachheit und die neu entdeckten Funktionen von Divi nutzen.

Erfahren Sie mehr

4. Entwurfsvariablen

Feature veröffentlicht am 3. April 2025

Die meisten Website -Bauherren haben Möglichkeiten, globale Farben und Schriftarten festzulegen. Divi 5 nimmt diese Idee und läuft damit. Sie können Variablen nicht nur für Farben und Schriftarten, sondern auch für Zahlen, Bilder, einfache Text und sogar Web -Links erstellen.

Denken Sie darüber nach: Die meisten Bauherren können Sie eine primäre Farbe festlegen, die überall aktualisiert wird. Aber was ist, wenn Sie Ihre Telefonnummer auf mehreren Seiten ändern möchten? Oder tauschen Sie ein wiederkehrendes Bild aus, das auf Ihrer Website verwendet wird? Divi 5 behandelt diese Situationen mit Leichtigkeit.

Alle Ihre Variablen leben in einem einfachen Panel in der Seitenleiste des visuellen Bauers. Es ist sauber, leicht zu finden und bringt alles an einen Ort.

Eine perfekte Übereinstimmung mit Voreinstellungen

Entwurfsvariablen und -voreinstellungen (sowohl Voreinstellungen für Option Gruppen als auch Elemente) arbeiten zusammen, um ein wartbares und skalierbares Design vorzunehmen. Sie können Voreinstellungen erstellen, die auf Ihre Variablen verweisen und ein flexibles Designsystem erstellen.

Zum Beispiel können Sie eine Designvariable für Ihre Hauptschrift mit der Hauptschrift erstellen und diese Variable in Ihrer Überschrift Typografie Preset verwenden. Wenn Sie sich später entscheiden, Ihre Schriftart später zu ändern, müssen Sie die Variable nur einmal aktualisieren, nicht die Voreinstellung selbst. Dies schafft eine weitere Steuerungsschicht, die die meisten Bauherren einfach nicht anbieten.

Dieser zweischichtige Ansatz gibt Ihnen mehr Kontrolle als andere Bauherren. Sie trennen, wie etwas aussieht (Variablen), von wo aus es aussieht (Voreinstellungen).

Sie können Zahlenvariablen mit CSS -Funktionen wie Calc () und Clamp () verwenden, um reaktionsschnelle Designs zu erstellen, die sich perfekt an verschiedene Bildschirmgrößen anpassen. Legen Sie eine Variable für den Abstandsrhythmus Ihrer Website fest und wenden Sie sie während Ihres gesamten Layouts für konsistente Proportionen an, die wunderbar skalieren.

Wenn Sie eine Variable ändern, aktualisiert alles, was sie mit der Verwendung von ITs sofort aktualisiert. Dies verwandelt, was Stunden Arbeit in wenigen Sekunden des Klickens sein könnte.

Wie dies bei der Erstellung eines wartbaren Designs hilft

Schauen wir uns einige praktische Beispiele für Entwurfsvariablen in Aktion an:

• Halten Sie Ihre Marke überall gleich aus: Richten Sie Variablen für Ihre Farben, Schriftarten und Abstand ein. Verwenden Sie sie in Voreinstellungen auf Ihrer Website, um ein konsistentes Aussehen zu erhalten.
• Führen Sie einen Feiertagsverkauf aus: Erstellen Sie Bildvariablen für Kampagnengrafiken und Textvariablen für die Werbekopie. Wenn die Saison endet, aktualisieren Sie sie einmal, um Ihre gesamte Website zu aktualisieren.
• Grenzstile: Erstellen Sie eine Zahlenvariable für den Randradius wie 10px und wenden Sie sie auf alle Schaltflächenvoreinstellungen, Bildmodule und Karten an. Wenn sich Ihre Entwurfsrichtung ändert, wirkt sich ein Update auf alle abgerundeten Ecken auf Ihrer Website aus.
• Machen Sie Kundenaktualisierungen einfach: Wenn Sie Websites für Kunden erstellen, die Updates erstellen müssen, werden Designvariablen zum Leuchten. Richten Sie Variablen für Inhalte ein, die sie häufig ändern, z. B. Kontaktinformationen oder Geschäftszeiten. Sie können diese aktualisieren, ohne die Designeinstellungen zu berühren.

Designvariablen arbeiten auch mit Divis Theme Builder. Dies bedeutet, dass Ihre Header, Fußzeilen und Vorlagen denselben variablen Pool wie Ihre Seiten verwenden. Im Gegensatz zu anderen Systemen, die Sie in starre Muster einsperrten, halten die Variablen von Divi 5 die Dinge flexibel und helfen Ihnen dabei, organisiert zu bleiben.

Erfahren Sie mehr

5. verschachtelte Reihen

Feature veröffentlicht am 17. April 2025

Divi 5 führt verschachtelte Reihen ein, die Ihnen mehr Kontrolle über Layouts erhalten. Mit diesem Zusatz können Sie Zeilen in Spalten platzieren und komplexe Layouts erstellen, die in früheren Versionen ohne benutzerdefinierten Code nicht möglich waren.

Mit verschachtelten Zeilen können Sie fortschrittliche Rasterlayouts, Inhaltsblöcke im Magazinstil und kartenbasierte Designs mit viel weniger Aufwand erstellen. Benötigen Sie einen Abschnitt mit Spalten, die ihre eigenen mehrspaltigen Layouts enthalten? Jetzt können Sie es direkt im Baumeister machen.

Gebäude mit Tiefe

Das Hinzufügen einer verschachtelten Zeile funktioniert wie das Hinzufügen eines Moduls. Wählen Sie einen Abschnitt aus, klicken Sie auf die Plus -Schaltfläche und wählen Sie "Zeile" aus Ihren Optionen. Von dort aus können Sie eine Zeile hinzufügen, um eine verschachtelte Zeile zu erstellen und sie mit Inhalten zu füllen.

Diese scheinbar einfache Veränderung eröffnet viele Designmöglichkeiten. Sie können Sidebar -Widgets mit ihren eigenen Spaltenstrukturen, den Bauproduktshows mit verschachtelten Galerien oder Vergleichstabellen für Design -Feature mit komplexen Layouts erstellen.

Das Beste daran ist, wie natürlich es in Ihren Workflow passt. Es gibt nichts Neues zu lernen. Sie verwenden nur Zeilen an mehr Stellen. Wenn Sie wissen, wie man mit Divi baut, wissen Sie bereits, wie Sie verschachtelte Zeilen verwenden.

Verschachtelte Zeilen lösen echte Probleme für Baustellenbauer. Möchten Sie einen Diensteabschnitt erstellen, in dem jeder Dienst sein eigenes zweispaliges Layout hat? Zuvor benötigen Sie benutzerdefinierte CSS oder komplexe Problemumgehungen. Jetzt ist es direkt hineingebaut.

Für inhaltsfestige Websites können Sie Layouts im Magazinstil mit gemischten Säulenbreiten und verschachtelten Inhaltsbereichen erstellen. Jeder Artikel oder jede Funktion kann eine eigene Spaltenstruktur haben, während das Seitenlayout beibehalten wird.

Nur der erste Schritt

Verschachtelte Reihen sind erst der Beginn der Layoutentwicklung von Divi 5. Das Team arbeitet auf ein komplettes Layout-System auf Flexbox-basiertem Layout hinzu, um Divi noch flexibler zu machen.

Zukünftige Updates führen zusätzliche Layout -Steuerelemente ein und bieten Ihnen noch mehr Optionen, um komplexe Designs ohne benutzerdefinierten Code zu erstellen. Dieser methodische Ansatz stellt sicher, dass jede neue Funktion perfekt funktioniert, bevor sie zum nächsten wechselt.

Das Divi-Entwicklungsteam stützt sich nicht mit halbgebackenen Funktionen, sondern baut eine felsige Grundlage für die Zukunft des Layoutdesigns auf. Jeder Schritt baut auf dem letzten auf und erstellt ein System, das sowohl zukunftssicher als auch einfach zu bedienen ist.

Erfahren Sie mehr

6. Modulgruppen

Feature veröffentlicht am 1. Mai 2025

Das Erstellen von Websites bedeutet häufig, wiederholt die gleichen Inhaltsmuster zu erstellen. Sie entwerfen eine perfekte Teammitgliedkarte und verbringen zwanzig Minuten damit, sie für die nächste Person nachzubilden. Modulgruppen lösen dies, indem Sie zu wiederverwendbaren Einheiten zusammenhängen.

Folgendes ändert sich: Anstatt jedes Stück separat zu behandeln, arbeiten Sie mit vollständigen Blöcken. Eine Produktkarte wird zu einer Sache, die Sie sich bewegen, nicht sechs verschiedene Module, die Sie einzeln auswählen müssen. Wenn Sie den Abstand auf fünfzig Produktkarten anpassen müssen, aktualisieren Sie die Gruppenvorlage einmal, anstatt jede Karte manuell zu bearbeiten.

Der wahre Nutzen zeigt sich auf größeren Websites. Kundenprojekte mit Dutzenden von Teammitgliedern, Produktkatalogen oder Service -Listings werden überschaubar. Sie leisten keine wiederholte Baugruppenarbeit-Sie konzentrieren sich auf Inhalte und Feinabstimmungen.

Erstellen von benutzerdefinierten Modulkombinationen

Modulgruppen eröffnen Möglichkeiten, die einzelne Module normalerweise nicht verarbeiten können. Erstellen Sie eine Servicekarte, auf der Sie ein Hintergrundbild, ein überlagertes Symbol, eine Überschrift, eine Beschreibung und zwei Aktionsschaltflächen benötigen: „More“ und „Zitat erhalten“.

Bei Modulgruppen schichten Sie diese Elemente genau so, wie Sie sie möchten. Dies wird hilfreich für Inhalte, die keine Standardvorlagen entsprechen.

Für Preistabellen können Sie drei verschachtelte Zeilen innerhalb einer Modulgruppe verwenden: eine Überschrift in der ersten Reihe, Preisdetails in der zweiten und eine Funktionsliste in der dritten. Dies gibt Ihnen die individuelle Kontrolle über Schriftarten, Farben und Abstand, die das eingebaute Preistischmodul nicht bietet.

Der gleiche Ansatz eignet sich für Testimonials unter Verwendung der in der Gruppenstruktur angeordneten Symbol-, Bild-, Überschrift- und Textmodule. Sie erhalten mehr Layout -Flexibilität als das Standard -Testimonialmodul, während Sie alles als einzelne Einheit überschaubar halten.

Der Hauptvorteil besteht darin, die Layout -Steuerung des Gebäudes von Grund auf neu zu kombinieren, um mehrere Elemente als ein Stück zu behandeln.

Bauen wiederverwendbarer Komponentenbibliotheken

Sobald Sie effektive Modulgruppen erstellt haben, speichern Sie sie als globale Elemente. Dadurch wird eine Komponentenbibliothek erstellt, die mit jedem Projekt wächst. Wenn Sie das Styling verfeinern, wird Ihr Testimonial -Layout auf zwanzig Seiten aktualisiert, und Ihr Produkt -Showcase bleibt konsistent, während Sie das Design iterieren.

Anstatt jedes Mal von vorne zu beginnen, wenn Sie eine Seite erstellen, beginnen Sie mit konsistenten Layouts und passen sie an neue Seiten und Layoutanforderungen an.

Nehmen Sie die Leichtigkeit der Divi -Cloud -Integration an. Mit diesem Tool können Komponenten mühelos von Projekt zu Projekt übergehen. Nehmen wir an, Sie entwickeln eine robuste Reihe von Modulgruppen für eine bestimmte Client -Site. Sie können sie jetzt als Grundlage für bevorstehende Aufgaben nutzen. Auf diese Weise erhalten jedes Projekt den Vorteil früherer Lösungen, behält jedoch seine eigene Ästhetik bei.

Funktioniert nahtlos mit dem Designsystem von Divi 5

Modulgruppen werden wirklich interessant, wenn Sie sie mit Designvariablen und Optionsprodukte verwenden. Angenommen, Sie erstellen eine Zeugnisgruppe: Zitat, Autorenname, Firma und Foto.

Anstatt feste Farben festzulegen, verweisen Sie auf Ihre Markenfarbvariablen. Für das Zitatstyling erstellen Sie eine Optionsgruppe Preset für Typografie, die Ihre benutzerdefinierte Schriftart, Größe und Linienhöhe enthält. Für den Namen des Autors wenden Sie eine andere Gruppengruppe voreingestellt.

Speichern Sie nun diese Modulgruppe als globales Element. Diese Optionsgruppen -Voreinstellungen verbinden jedes Testimonial auf Ihrer Website mit Ihrem Designsystem. Wenn der Kunde ein dunkleres Grau möchte, ändern Sie die Variable einmal und alle Testimonialgruppenmodule aktualisieren. Wenn Sie das Zitatstyling anpassen müssen, bearbeiten Sie die Typografie -Optionsgruppengruppe einmal vorein. Jedes Zitat ändert sich sofort.

Dies übertrifft die Verwaltung einzelner Module, die überall verstreut sind. Ihre Modulgruppen verwenden Optionsgruppen -Voreinstellungen für Grenzen, Hintergründe und Textstyling. Daher Aktualisierung aller voreingestellten Flüsse über alle Ihre gruppierten Elemente automatisch.

Erfahren Sie mehr

7. Attributmanager

Feature veröffentlicht am 16. Mai 2025

Sie haben eine Schaltfläche in einem Aufruf zum Action -Modul gestylt. Die Farben funktionieren und die Schwebeffekte sehen gut aus. Jetzt möchten Sie die gleichen Schaltflächenstile in einem Kontaktformular, aber nicht die Überschrift oder den Hintergrund des CTA.

Regelmäßige Kopierpaste funktioniert hier nicht: Sie würden alles oder nichts bekommen. Mit DIVI 5 können Sie dank seiner Attributverwaltungsfunktion nur die Teile der Schaltfläche kopieren. Klicken Sie mit der rechten Maustaste auf die CTA, wählen Sie, was kopieren soll.

Fügen Sie dann nur diese Tastenstile in das Kontaktformular ein.

Wählen Sie auswählen, was Reisen bewegt

Divi 5 spaltet jedes Element in verschiedene Arten von Attributen auf. Sie wählen, welche zu kopieren sind:

• Alle Attribute - alles wird kopiert
• Designattribute - Farben, Abstand, Voreinstellungen, aber keine Text oder Bilder
• Stilattribute - nur Ihre benutzerdefinierten Änderungen
• Inhaltsattribute - nur Text und Bilder
• Voreinstellungen - nur voreingestellte Zuordnungen

Sagen Sie, Sie möchten ein Button -Styling, aber nicht sein Text. Designattribute kopieren. Möchten Sie das Hintergrund eines Abschnitts voreingestellt, aber nicht die Polsterung? Nur Voreinstellungen kopieren.

Funktioniert zwischen verschiedenen Modulen

Sie können Attribute von einem Modulart kopieren und auf einen anderen Typ einfügen. Sie können beispielsweise von einem Aufruf zum Action -Modul kopieren und in ein Kontaktformular einfügen. Divi 5 findet heraus, welche Einstellungen sowohl auf Modulen funktionieren und ignoriert den Rest.

Dies hilft beim Erstellen von Websites, die das gleiche Styling über verschiedene Modultypen hinweg benötigen. Sie müssen Ihre Knopffarben nicht für jede Form, Testimonial oder ein anderes Modul, das Schaltflächen verwendet, nachbilden.

Verknüpfungen auf Gruppenebene

Das Attributsystem geht mit selektivem Gruppenmanagement tiefer. Überspringen Sie die Einstellungspaneele vollständig. Klicken Sie mit der rechten Maustaste und wenden Sie spezifische Attributgruppen direkt im Kontextmenü an.

Haben Sie ein Modul mit der perfekten Taste voreingestellt? Sie können genau diese Taste voreinstellen, die über das selektive Menü an andere Elemente voreingestellt werden. Es gibt keine Registerkartenjagd und kein Tauchen.

Gleiche Präzision eignet sich zum Zurücksetzen. Wischen Sie alle Designattribute ab und halten Sie den Inhalt intakt. Oder resets resets nur voreingestellt und gleichzeitig benutzerdefinierte Styling -Überschreibungen beibehalten.

Geschwindigkeit durch Abkürzungen

Jede Aktion erhält Tastaturverknüpfungen, die direkt in den Kontextmenüs angezeigt werden. Erfahren Sie ein paar wichtige Kombinationen und Beschleunigen von Styling. Die Verknüpfungen bleiben über alle Attributtypen hinweg konsistent, sodass Ihre Finger die Muster schnell lernen.

Dies geht über das Speichern von Klicks hinaus. Beim Bauen von Standorten mit Hunderten von Elementen werden diese Mikro-Effizienz in Stunden gesparter Zeit. Wiederholte manuelle Arbeiten werden zu schnellen, gezielten Aktionen.

Spielt gut mit Ihrem Designsystem

Der Attributmanager verbindet sich direkt mit dem voreingestellten Ökosystem von Divi 5. Diese Systemverbindungen reisen weiter, wenn Sie ein Modul mit Voreinstellungen und Entwurfsvariablen der Option Gruppenkopie kopieren.

Fügen Sie Attribute ein, die Voreinstellungen enthalten, und diese neuen Elemente schließen sofort an Ihr globales Styling -System an. Aktualisieren Sie ein Voreinsatz später und jedes kopierte Element spiegelt die Änderung automatisch wider. Ihr Designsystem bleibt angeschlossen, wenn Sie schnell Elemente erstellen und duplizieren.

Erfahren Sie mehr

8. Einstellungssuche und Filterung

Feature veröffentlicht am 29. Mai 2025

Aufbau von Websites bedeutet, Einstellungen zu optimieren. Divi -Module packen Dutzende von Optionen in ihre Panels, und die Jagd durch die Registerkarten nach diesem einen Farbfeld kann Ihren Tag auffressen. Divi 5 bringt die Suchfunktion von Divi 4 zurück, bringt aber besser funktioniert.

Sie erhalten eine Suchleiste direkt oben in jedem Einstellungsfeld. Geben Sie ein, was Sie brauchen, und Divi zeigt nur Matching -Optionen. Auf der Suche nach „Grenze“? Jede randbezogene Umgebung erscheint, während alles andere verblasst. Müssen Sie "Polsterung" einstellen? Alle Abstandskontrollen werden sofort angezeigt.

Dadurch wird das Klicken und Scrollen beseitigt, das Ihre Arbeit verlangsamt. Anstatt Registerkarten zu öffnen und Gruppen zu jagen, finden Sie in Sekundenschnelle, was Sie brauchen.

Filter durch das, was Sie sich geändert haben

Der Echtzeitsprüfer ist der „modifizierte“ Filter. Klicken Sie darauf und sehen Sie nur die Einstellungen an, die Sie bereits angepasst haben. Dies hilft, wenn Sie sich ein Layout -Pack oder eine Starter -Site schnappen und sehen möchten, was angepasst wurde.

Angenommen, Sie importieren ein Geschäftslayout, möchten aber die Farben ändern. Drücken Sie den modifizierten Filter und erkennen Sie jede benutzerdefinierte Farbauswahl, ohne jedes Modul zu durchsuchen. Sie können sehen, welche Schriftarten geändert wurden, welcher Abstand optimiert wurde und welche Effekte hinzugefügt wurden.

Dies eignet sich auch hervorragend für Kundenprojekte. Wenn jemand fragt, was Sie auf seiner Website angepasst haben, zeigt der geänderte Filter Ihre Arbeit deutlich.

Smart Filtering -Optionen

Über den geänderten Filter hinaus erhalten Sie die Sortierung, indem Sie Typen einstellen. Bei der Aktualisierung Ihrer Palette zeigt der Filter „Farben“ jedes Farbfeld gleichzeitig. Wenn Änderungen der Typografie benötigt werden, zeigen die Filter „Schriftfamilien“ und „Schriftgewichte“ Texteinstellungen in allen Ihren Modulen.

Das System weiß, welche Einstellungen am wichtigsten sind. Farben und Schriftarten erhalten ihre Filter, weil sie die häufigsten Veränderungen sind, die Menschen vornehmen. Die Größen werden gruppiert, da die Abstandsanpassungen häufig erfolgen.

Diese Filter speichern Klicks, wenn Sie ortsweite Änderungen vornehmen. Anstatt jedes Modul einzeln zu öffnen, arbeiten Sie gefilterte Listen der Einstellungen, die Sie ändern müssen.

Erfahren Sie mehr

Wie Divi 5 gegen beliebte Optionen stapelt

Der Website Builder Market ist mit Optionen überfüllt, aber Divi 5 ist dank einiger wirklich neuer Funktionen auffällt. Hier ist ein Blick auf das, was Divi 5 unterschiedlich macht:

Was bedeutet dies für Ihre Projekte

Die Kombination von Funktionen von Divi 5 erzeugt ein Designsystem, das andere Bauherren nicht ganz übereinstimmen können. Die Option Group -Voreinstellung und Modulgruppen allein haben Divi 5 vor Wettbewerbern vorgestellt.

Wenn Designvariablen mit Voreinstellungen und Modulgruppen funktionieren, erhalten Sie etwas Vielseitiges. Referenzvariablen in Voreinstellungen, wenden Sie sie auf gruppierte Elemente an und ändern Sie die Werte jedes Element automatisch auf Ihrer Website. Fügen Sie die bevorstehenden Flexbox- und Loop Builder -Funktionen zum Mix hinzu, und Sie erstellen eine Website, ohne dass eine benutzerdefinierte Codierung erforderlich ist.

Was kommt als nächstes?

Die Divi 5 Roadmap zeigt kontinuierliche Updates, die bald landen werden. Unsere Entwickler, die in sieben Teams unterteilt sind, arbeiten hauptberuflich an verschiedenen Funktionen und versenden Updates mindestens alle zwei Wochen. Hier ist ein kleiner Blick auf das, was Sie in den kommenden Wochen erwarten können:

Flexbox -Layouts

Die größte Änderung ist das komplette Flexbox -Layout -System, das einige Wochen vor Abschluss entfernt ist. Dies wird vollständig ersetzen, wie Sie Layouts erstellen. Sie erhalten neue Zeilenvorlagen, automatische vertikale Zentrierung, Inhaltsverpackung und Abstandsverteilung über visuelle Steuerelemente anstelle von benutzerdefinierten CSS.

Modulgruppen wurden gerade als Container ausgeliefert, die verwandte Module miteinander bündeln. In Kombination mit Flexbox können Sie Zeitschriftenlayouts, Produktausstellungen mit übereinstimmenden Höhen und komplexe Ausrichtungen erstellen, die zuvor Problemumgehungen erforderten. Spezialabschnitte verschwinden, sobald die Flexbox eintrifft.

Loop Builder und WooCommerce -Updates

Auf dem Aufbau des Flexbox -Layout -Systems und der Modulgruppen können Sie mit dem Loop Builder alles wiederholen: Einzelmodule, Gruppen oder ganze Abschnitte. Im Gegensatz zu anderen Bauherren, die Sie in Vorlagen einschließen, definieren Sie, was wiederholt und mit dynamischen Inhalten verbunden ist. Auch verschachtelte Schleifen funktionieren. Zum Beispiel Blog -Kategorien, die Beiträge durchläuft, wobei jeder Beitrag Looped Reviews zeigt.

WooCommerce -Module werden mit der Architektur von Divi 5 von Grund auf neu aufgebaut. Aktuelle Module arbeiten nach hinten, interagieren jedoch nicht mit Voreinstellungen oder Variablen. Neue Produktmodule werden innerhalb weniger Wochen fertiggestellt, wodurch WooCommerce -Unterstützung für Beta auf den richtigen Weg ist.

Fortgeschrittene Farben

Relative Farben mit Farbton, Sättigung und Leichtigkeit (HSL) können Sie mathematische Farbbeziehungen aufbauen. Stellen Sie Ihre Primärfarbe einmal ein und generieren Sie dann automatisch Variationen: „Primärblau, aber 20% leichter“ oder komplementäre Farbtöne, die beim Ändern der Basis aktualisieren.

Beta- und Migrationsplanung

Die Beta beginnt, wenn die drei Ziele abgeschlossen sind: Verbesserte Rückwärtskompatibilität für vorhandene Websites, vollständige Unterstützung des Woocommerce -Moduls und fortgesetzte Fehlerbehebungen basierend auf Alpha -Feedback.

Wenn wir den aktuellen Fortschritt durchlaufen, schlägt dies in ein paar Monaten ein Beta vor. Das Team arbeitet auch am Backend, sodass Divi 4 -Websites ohne Änderungen migrieren können. Module von Drittanbietern aus dem Divi-Marktplatz erfordern die volle Kompatibilität.

Für neue Projekte bietet Divi 5 Alpha für die meisten Builds genügend Fähigkeiten. Allein die Leistungsverbesserungen rechtfertigen den Schalter. Bestehende Websites profitieren vom Warten auf Beta, es sei denn, bestimmte neue Funktionen sind erforderlich.

Wenn die Beta eintrifft, erhalten Sie den vollständigen Feature -Set sowie das Vertrauen durch gründliche Tests. Kurz darauf folgt die offizielle Veröffentlichung und bietet Ihnen eine solide Grundlage für zukünftige Projekte.

Bereit, Divi 5 zu versuchen? So beginnen Sie, wie man anfängt

Diese exklusiven Divi 5 -Funktionen arbeiten zusammen, um etwas anderes zu schaffen. Anstatt gegen Ihren Bauunternehmer gegen konsistente Designs zu kämpfen, richten Sie Systeme ein, die sich selbst halten. Anstatt die gleichen Stile wiederholt wieder aufzubauen, kreieren Sie einmal und verwenden Sie überall wieder - und dies ist nur der Anfang!

Nehmen Sie sich also noch heute der Kurve voraus, indem Sie eine neue Website mit Divi 5 erstellen. Sie steht allen Divi -Mitgliedern kostenlos zur Verfügung. Gehen Sie einfach zu Ihrem Kontobereich und holen Sie sich eine Kopie.

Sobald WordPress installiert ist, laden Sie Divi 5 hoch, da Sie ein normales Thema hochladen würden: Aussehen> Themen> Neues Upload -Thema hinzufügen. Aktivieren Sie das Thema, melden Sie sich mit Ihren Anmeldeinformationen an und bauen Sie weg! Ihr erster Build zeigt Ihnen, warum wir alles von Grund auf neu aufgebaut haben.

Denken Sie daran: Verwenden Sie derzeit Divi 5 nur für neue Websites. Wir empfehlen nicht, vorhandene Standorte während der Alpha -Phase zu migrieren.