Divi 5 Tutorial deutsch – Was ist neu? (Divi Demo 2024)

Divi Builder Tutorial für Divi 5
Lukas Fischer

Geschrieben von Lukas Fischer

c

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.

Divi 5 Tutorial - Demo im Praxistest
Divi 5 Tutorial – Demo im Praxistest

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.

Divi 5 - Sections. Reihen und Module im gewohnten Stil
Divi 5 – Sections. Reihen und Module im gewohnten Stil

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.

Divi 4 - Altes Interface
Divi 4 – Altes Interface

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 - Alte Funktionen an neuem Ort
Divi 5 – Alte Funktionen an neuem Ort

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.

Divi 5 - Moduleinstellungen im alten Stil
Divi 5 – Moduleinstellungen im alten Stil

Ö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.

Layers und Wireframe-View in Divi 5
Layers und Wireframe-View in Divi 5

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.

Divi 4 - alter Button für mobile Anpassungen
Divi 4 – alter Button für mobile Anpassungen

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:

Divi 5 - mobile Änderungen in den Einstellungen
Divi 5 – mobile Änderungen in den Einstellungen

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:

Responsives Webdesign mit Divi 5
Responsives Webdesign mit Divi 5

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.

Divi 5 - Darkmode aktivieren
Divi 5 – Darkmode 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.

Divi 5 - Import und Export von eigenen Designs
Divi 5 – Import und Export von eigenen Designs

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.

Layouts in Divi 5 einfügen
Layouts in Divi 5 einfügen

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.

Abstände anzeigen und anpassen in Divi 5 - mit X-Ray Funktion
Abstände anzeigen und anpassen in Divi 5 – mit X-Ray Funktion

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

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?

Wird Divi 5 kostenlos sein?

Muss ich zu Divi 5 wechseln?

Gibt es neue Ki-Funktionen in Divi 5?

Mit * gekennzeichnete Links sind Empfehlungslinks. Wenn du über diesen Link einen Kauf tätigst, erhalte ich ein bisschen Geld für meinen nächsten Kaffee ☕

Für dich verändert sich der Preis dadurch natürlich nicht und du unterstützt damit kostenlos meinen Blog/YouTube Kanal. Selbstverständlich empfehle ich nur Produkte, die ich selbst nutze und getestet habe.

Lukas Fischer

Hey, ich bin Lukas Fischer und auf meinem Blog schreibe ich über WordPress und das Divi Theme! Vielen Dank, dass du da bist!

10. Mai 2024

YouTube Kanal

Auf meinem YouTube Kanal findest du zu jedem meiner Artikel das entsprechende Video sowie zusätzliche Inhalte.

Borlabs Cookie Gutschein Code LUKASFISCHER

Spare 5% auf Borlabs Cookie – Das beste Cookie Consent Tool auf dem Markt

Top 11 Divi Plugins - E-Book von Lukas Fischer
Lukas Fischer Newsletter Anmeldung

Bleib in Kontakt und trage dich in meinen Newsletter ein:

Abonniere gerne meinen 0€ Newsletter und erhalte Tipps zu WordPress, Divi, Webdesign und der DSGVO.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert