In diesem Divi 5 Tutorial zeige ich dir die neuesten Funktionen, dies es im neuen Divi Builder geben wird.
Divi 5 ist zwar noch nicht offiziell erhältlich (Stand: Mai 2024), doch seit dem 02.05.2024 gibt es eine Demo, die bereits jetzt jeder testen kann. Divi 5 befindet sich aktuell in der Pre-Alpha Phase, was bedeutet, dass die Alpha- und Beta-Phasen erst noch folgen werden, bevor die offizielle Veröffentlichung stattfinden kann.
Derzeit ist noch kein offizielles Release-Datum bekannt. Und deswegen schauen wir uns in diesem Artikel die neuen Funktionen aus der Demo genau an.
Schau gerne auch in das YouTube Video, welches ich hierzu zwei Tage nach Veröffentlichung der Demo aufgenommen habe:
Hinweis: Mit Aktivierung des Videos wird YouTube im Erweiterten Datenschutzmodus aktiviert. Mit Aktivierung stimmst du den Datenschutzbestimmungen von YouTube zu.
Divi 5 Tutorial – Die Divi Demo im Praxistest
Die Divi 5 Demo kann von jedem kostenfrei getestet werden und ist unter demo.elegenthemes.com zu finden.
Neue Funktionen von Divi 5 im Überblick:
Hier findest du die Liste der bisher bereits integrierten und somit neuen bzw. ab jetzt an anderer Stelle zu findenden Funktionen in Divi 5:
- Neues Design
- Neues Interface
- Layers und Wireframe-View
- Geschwindigkeitsoptimierungen
- Optimierung für responsive Designs
- Dark Mode
- X-Ray Mode
- Import und Export Funktion
- CSS Grids (folgen zu einem späteren Zeitpunkt
Also, wie wir sehen eine richtig lange Liste mit tollen Funktionen und Änderungen, die wir uns jetzt natürlich im Detail anschauen
Divi 5 – Design
Der wohl mit Abstand größte Unterschied zwischen Divi 4 und Divi 5 ist das Aussehen des Divi Builders!
Alles, was vorher lila war, ist jetzt blau. Das mag erstmal ungewohnt wirken, aber nach einiger Zeit wird man sich daran gewöhnen.
Meiner Meinung nach übrigens ein absoluter Fortschritt. Das neue Design wirkt modern und somit zeitgemäßer als der alte Builder.
Glücklicherweise bleiben uns die gewohnten Farben im Divi Builder erhalten:
- Blau für Sections bzw. Abschnitte
- Grün für Rows bzw. Reihen
- Schwarz/grau für Modules bzw. Module
Mit diesem Unterschied komme ich persönlich klar, denn das meiste ist eigentlich gleich geblieben. Doch werfen wir dazu einen genaueren Blick ins Interface von Divi 5
Divi 5 – Das neue Interface des Divi Builders
Eine der größten Veränderungen des neuen Divi 5 Builders ist das Menü, welches nun auf der linken Seite zu finden ist.
Zur Erinnerung: In Divi 4 war es so, dass man über einen lila Button, der sich in der unteren Mitte des Bildschirmrands befand, ein Menü öffnen konnte, um zum Beispiel zu speichern, die verschiedenen Ebenen der Webseite über Layers bzw. Wireframe-View zu öffnen und um in die mobilen Versionen zu wechseln.
Dieses Menü gibt es jetzt nicht mehr. Ich vermute, dass dieses Menü entfernt wurde, um den Builder zu verschnellern. Aber zu diesen Optimierungen kommen wir später.
Die Funktionen, die früher über den lila Button mit den drei weißen Punkten zu finden waren, sind jetzt neu verteilt. Dabei handelt es sich hauptsächlich um die folgenden Funktionen:
- Speichern
- Wechsel der Ansicht für verschiedene Geräte (Mobiles bzw. responsives Design)
- Layers
- Wireframe-View
- Layouts hinzufügen (über Cloud, Bibliothek usw.)
- Import & Export von Layouts
Die exakte neue Position dieser Funktionen entnimmst du diesem Screenshot:
Divi 5 Builder – Handhabung und Arbeitsweise
Die Handhabung bzw. Arbeit mit dem Divi Builder in der neuen Version ist glücklicherweise nahezu gleich geblieben.
Es wird beispielsweise nach wie vor möglich sein, aktuelle Bearbeitungsfenster am Rand des Builders anzudocken. Zudem ist es ebenfalls nach wie vor möglich, sein Bearbeitungsfenster frei zu verschieben und auch dessen Größe individuell an seine Bedürfnisse anzupassen.
Öffnet man in Divi 5 die Moduleinstellungen so erkennt man, dass die gewohnte Unterteilung in Inhalt, Design und Erweitert erhalten geblieben ist.
Auch die Anordnung der Einstellungen auf jeder dieser Einstellungsebenen ist gleich geblieben, was es langjährigen Divi Nutzern ermöglichen wird, sich schnell und intuitiv an das neue Interface zu gewöhnen.
Die einzige, aber wirklich sehr wichtige Neuheit, finden wir oben rechts. Über den Button oben rechts ist es möglich, die Einstellungen global für die jeweilige Bildschirmansicht anzupassen. Aber dazu in einem späteren Abschnitt mehr!
Layers und Wireframe-View in Divi 5
Der altbekannte Wireframe-View sowie die Funktion der Layers – ähnlich wie die Ebenen, die man aus Photoshop kennt, haben ihren Weg auch wieder in Divi 5 gefunden.
Die Funktionalität ist grundlegend gleich geblieben, sieht jedoch ein bisschen moderner und übersichtlich aus. Was auch auffällt, ist die extrem schnelle Antwortzeit, sobald man diese Funktionen aktiviert.
In Divi 4 konnte es schon einen Moment dauern bis der Wireframe-View geladen wurde. In Divi 5 lädt diese Funktion sofort und man kann direkt loslegen!
Divi 5 – Geschwindigkeitsoptimierung
Ein häufiges Problem in Divi 5 war es, dass der Divi Builder nicht mehr oder nur sehr langsam geladen hat.
Das Problem mit den langsamen Ladezeiten sollte nun Geschichte sein.
Die neue Divi Builder Erfahrung wird zu einem echten Erlebnis. Hier die 3 größten Veränderungen, die ich bisher bemerkt habe:
- Keine nervigen Animationen mehr
- Wechsel zwischen verschiedenen Bildschirmgrößen sehr schnell
- Änderungen über den Editor sehr schnell zu sehen.
Auch für deine Besucher wird der neue Divi Builder positive Auswirkungen haben. Denn, wenn man den Aussagen von Elegant Themes selbst vertraut, wirken sich die Änderungen an dem Grundgerüst von Divi auch auf die gesamte Geschwindigkeit der Webseite aus.
Diese Änderungen sieht mittlerweile meiner Meinung nach auch zwingend notwendig, da andere Page Builder in Bezug auf die Geschwindigkeit bessere Ergebnisse liefern.
Wie sich die Schnelligkeit von Divi 5 in der Realität auswirken wird, bleibt abzuwarten. Falls du das nicht verpassen möchtest, trag dich gerne in meinen Newsletter ein:
Wirf gerne auch einen Blick in mein YouTube Video, welches ich zu Divi 5 aufgenommen habe. Dort habe ich die Geschwindigkeit von Divi 5 ebenfalls getestet, sodass du dich selbst davon überzeugen kannst.
Divi 5 – Mobile Einstellungen (responsives Design)
Was auch neu ist und was auch richtig cool ist, sind die mobilen Einstellungen in Divi 5.
Früher war die mobile Anpassung einer Divi Webseite zwar möglich, allerdings war es teilweise mühselig immer wieder erst den extra Button für die mobile Ansicht zu aktivieren.
Wenn man mehrere Einstellungen machen wollte, musste man JEDES MAL diesen Button klicken. Mit der Zeit hatte man sich daran gewöhnt, aber wirklich gut war diese Funktionsweise nicht, da es wirklich einiges an Zeit gekostet hat.
Die gute Nachricht lautet aber, dass mit Divi 5 auch die mobile Optimierung von Seiten, Designs und sämtlichen Einstellungen viel leichter wird.
Wie in einem vorherigen Abschnitt bereits angedeutet, gibt es nun ein globales Menü, mit welchem man die Einstellungen pro Gerät vornehmen kann:
Für neue Divi Nutzer mag diese Funktion vielleicht trivial klingen, langjährige Divi Nutzer wissen aber, dass diese Funktion eine massive Errungenschaft in puncto Zeitersparnis sein wird.
Zudem ist es möglich einfach über das Hauptmenü in eine andere Ansicht zu wechseln und dort Änderungen zu machen, die sich auch nur auf diese Ansicht auswirken:
Also zum Beispiel einfach auf das Handy-Symbol klicken, Änderungen für das Handy vornehmen (ohne danach noch weitere Buttons klicken zu müssen), speichern, fertig!
Eine absolut sinnvolle Änderung, die uns massiv viel Zeit ersparen wird!
Divi 5 – Dark Mode
Ansonsten, was auch neu ist, ist ein in Divi bereits integrierter Dark Mode! Du findest diese Funktion oben rechts im neuen Hauptmenü von Divi und kannst sie durch Klick auf das Sonnen- bzw. Mondsymbol aktivieren.
Wenn du diese Funktion aktivierst, kannst du alles, was nicht Webseite ist, verdunkeln.
Der Modus lohnt sich daher nur, wenn du gerade die Tablet- oder Mobilversion deiner Webseite bearbeitest. Also definitiv eine Funktion, die ich beim responsiven Design von Webseiten nutzen werde, um meine ohnehin schon strapazierten Augen zu schonen.
Fremde Layouts laden und eigene Layouts importieren bzw. exportieren
Was auch noch ein bisschen einfacher geworden ist, ist das Importieren und Exportieren von eigenen Designs.
Dazu kann man einfach im oberen Hauptmenü auf der rechten Seite auf das Import- bzw. Exportsymbol klicken und sich dann seine Dateien runterladen, um sie später auf anderen Webseiten hochzuladen.
Natürlich gibt es auch wieder eine Divi Cloud Integration, womit man seine Designs besonders bequem von einer Webseite zur anderen verschieben kann.
Ebenfalls möglich ist der Import aus der Divi Layout Bibliothek bzw. der eigenen Bibliothek. Diese Funktion, die früher über den lila Button am unteren Bildschirmrand zu finden war, ist nun im Hauptmenü auf der linken Seite platziert.
Wenn du ein Layout in Divi 5 einfügen willst, klicke auf das Plussymbol im Hauptmenü auf der linken Seite. Danach öffnen sich die für dich gewohnten Optionen aus Divi 4.
X-Ray Ansicht (um Abstände zu sehen)
Die nächste coole Funktion, die gerade als Anfänger sehr hilfreich sein kann, wenn man nicht genau weiß, was man gemacht hat, ist die sogenannte X-Ray Funktion.
X-Ray zeigt dir an, wo die Abstände und Begrenzungen deines Design sind. Du findest die Funktion im Menü auf der linken Seite.
Das war in Divi 5 tatsächlich auch nicht so gut gelöst. Da die Änderungen der Abstände gerade bei Anfängern häufig dazu geführt haben, dass man sich dann die Seite zerschossen hat.
Ich habe das früher bei meinen Kunden, die die WordPress Hilfe genutzt haben, häufiger mitbekommen, dass es diesbezüglich Probleme gab.
Diese Funktion sollte also gerade bei der Fehlersuche, dem mobilen Design und für Anfänger allgemein hilfreich sein, um die Architektur ihrer Webseite nachzuvollzehen.
CSS Grids in Divi 5
Abschließend noch ein Hinweis auf eine ziemlich coole Funktion, die es in Divi 5 später auch geben wird: die sogenannten CSS Grids.
Für alle, die jetzt nicht wissen, was das ist, hier ein beispielhafter Screenshot:
Quelle: Webflow.com
Mit CSS Grids kann man sehr komplexe Layouts auf einfache Weise gestalten und diese natürlich auch mobil optimieren.
Ich persönlich hoffe sehr, dass diese Funktion ziemlich früh verfügbar sein wird, da mit CSS Grids einfach unglaublich moderne und wunderschöne Designs möglich sein werden.
Fazit
Ich bin echt froh, dass es bei Divi vorangeht, denn so langsam sind die anderen Pagebuilder meiner Meinung nach an Divi vorbeigezogen, gerade was die Schnelligkeit betrifft.
Und das wurde jetzt auf jeden Fall behoben, was ziemlich cool ist. Auch das Update bezüglich der mobilen Optimierungen ist sehr sinnvoll und wird uns einiges an Zeit ersparen.
Ansonsten, was ich dir jetzt auch noch empfehlen kann, wäre es dir jetzt noch die Lifetime-Lizenz von Divi* zu sichern, insofern du diese noch nicht besitzt.
Es kann nämlich sein, dass sich die Preise bei so einem großen Update ändern werden. Also, ich weiß es persönlich nicht, aber ich könnte es mir gut vorstellen.
Ansonsten, schreib mir gerne deine Meinung zu Divi 5 in die Kommentare, und falls du es auch ausprobiert hast und noch irgendwas Cooles rausgefunden hast, dann schreib mir das auch gerne in die Kommentare.
Achja, übrigens, auf meinem Blog und YouTube-Kanal wirst du in der Zukunft natürlich auch ganz viele Videos zu Divi 5 finden, also falls dich das interessiert und du das nicht verpassen möchtest, dann trag dich doch gerne für 0€ in meinen Newsletter ein:
Häufig gestellte Fragen zu Divi 5
Wann erscheint Divi 5?
Divi 5 befindet sich derzeit in der Pre-Alpha Phase (Stand: 10.05.2024). Das bedeutet, dass die Alpha- sowie Beta-Phasen vor dem offiziellen Release erst noch folgen werden. Bisher ist kein offizielles Veröffentlichungsdatum bekannt.
Wird Divi 5 kostenlos sein?
Für alle Nutzer, die bereits eine aktive Lizenz für Divi haben, wird Divi 5 kostenlos als Update über Elegant Themes erhältlich sein. Solltest du noch keine Divi Lizenz besitzen, dann empfiehlt es sich noch vor dem Update eine Divi Lifetime Lizenz* zu erwerben, da die Preise womöglich steigen werden.
Muss ich zu Divi 5 wechseln?
Ein Update von Divi 4 zu Divi 5 ist zwar nicht zwingend erforderlich, aber sehr empfehlenswert, da die alte Version keine Updates mehr erhalten wird. Außerdem enthält die neue Version von Divi 5 viele wichtige Verbesserungen bezüglich der Geschwindigkeit und der vorhandenen Designoptionen.
Bevor du den Wechsel durchführst, solltest du unbedingt ein vollständiges Backup von deiner Webseite machen. Alternativ kannst du mir auch eine Nachricht schreiben und ich unterstütze dich aktiv beim Wechsel.
Gibt es neue Ki-Funktionen in Divi 5?
In Divi 5 gibt es bereits integrierte Ki-Funktionen, die man in gewissen Maße kostenfrei nutzen kann – darunter Divi AI zur Generierung von Bildern und Texten sowie Divi Layouts, um ganze Seiten mit Hilfe von Künstlicher Intelligenz zu erstellen.
0 Kommentare