Divi, WordPress 5.0 und der neue Backend Builder

von | Tipps

Vielleicht ein paar Veränderungen zu viel in zu kurzer Zeit?

Kurz vor dem Erscheinen von WordPress 5.0, das den neuen Block Editor namens Gutenberg beinhaltet, wurde auch ein Update des Divi Themes auf Version 3.18 veröffentlicht, das einen neuen Divi Backend Builder beinhaltet.

Divi Builder Probleme

Bei einigen Nutzern erscheint der neue Backend Builder nicht und teilweise lässt sich wohl auch nicht mit dem Visual Builder arbeiten. Das Erscheinen von WordPress 5.0 mit dem neuen Editor macht die Lage und die möglichen Optionen dazu noch eher unübersichtlich.

Aber erst einmal ganz von vorne …

Vor WordPress 5.0 & Divi 3.18

Die WordPress Versionen vor 5.0 besitzen den alten oder auch klassischen Editor …

WordPress klassischer Editor

… und die Divi Theme Versionen vor der 3.18 stellen (nur) zwei Divi Builder Funktionen bereit:

1. Der Visual Builder

Divi Visual Builder

Mit Hilfe des Visual Builder lassen sich Beiträge und Seiten im Frontend direkt bearbeiten, während die Gestaltung gleich so dargestellt wird wie diese auch später für die Besucher der Seite erscheinen soll.

2. Der (klassische) Backend Builder

Klassischer Divi Backend Builder

Den alten Backend Builder gab es bereits vor dem Visual Builder. Hier werden in der WordPress Editoransicht die verschiedenen Elemente als farbige Rechtecke dargestellt, deren Optionen bearbeitet werden können.

Viele Divi Nutzer bevorzugen den Backend Builder. Zum einen weil sie bereits viel Erfahrung mit diesem gesammelt haben und zum anderen weil dieser oftmals schneller reagiert und weniger fehleranfällig ist im Vergleich zum Visual Builder.

Allerdings gab es immer einige Funktionen, die nur im Visual Builder zur Verfügung standen und nicht im Backend Builder zu erreichen waren.

Divi Theme Version 3.18: ein neuer Backend Builder

Mit der Veröffentlichung von Divi Version 3.18 gibt es einen neuen Backend Builder. Das besondere an dem diesem ist, dass er auf der gleichen Code-Basis beruht wie der Visual Builder. So stehen fast alle Funktionen des Visual Builders endlich auch im Backend Builder zur Verfügung. Darüber hinaus soll der Code so optimiert worden sein, dass sowohl der neue Backend Builder als auch der Visual Builder stets sehr schnell reagieren. Elegant Themes haben eine detaillierten Artikel zu allen interessanten Funktionen in ihrem Blog veröffentlicht: A Hands-On Rundown of All the New Features Now Available in Divi’s Backend Editor.

Die Darstellung ist ähnlich der des alten Backend Builders, sieht aber etwas anders aus und bei dem Aufrufen der Einstellungen erscheinen die gleichen Options-Fenster wie im Visual Builder:

Neuer Divi Backend Builder

Nun wollte das Entwicklerteam wohl nichts über’s Knie brechen. Deshalb wird zunächst auch bei der neuen Divi Version immer der alte Backend Builder angezeigt. Jeder muss den neuen Backend Builder aktivieren bevor dieser erscheint.

Dies ist zum einen in jeder Editoransicht unterhalb der Darstellung der Sektionen, Zeilen und Modulen möglich. Dort findet sich ein Link namens „Switch To The New Divi Builder“. Ein Klick auf den Link sorgt dafür, dass zukünftig nur der neue Backend Builder dargestellt wird.

Zum neün Divi Backend Builder wechseln

Sobald Du den neuen Backend Builder nutzt, erscheint übrigens an der gleichen Stelle ein entsprechender Link namens „Switch Back To Classic Divi Builder“ über den Du wieder auf den alten Backend Builder Zurückwechseln kannst.

Zum alten Divi Backend Builder wechseln

Builder Einstellungen in den Divi Theme-Optionen

Über die Divi Einstellungen im Administrationsbereich kann ebenfalls zwischen den beiden Backend Buildern gewechselt werden. Dort findet sich unter „Divi“ > „Theme-Optionen“ im Bereich „Builder“ und dort wiederum im Reiter „Fortgeschritten“ die Option „Enable The Latest Divi Builder Experience“.

Einstellungen Neuen Divi Builder aktivieren

Ist diese Einstellung aktiviert, wird der neue Backend Builder verwendet. Willst Du wieder den alten Backend Builder verwenden, dann deaktivierst Du diese Option einfach.

Das kann sehr hilfreich sein, falls es Probleme mit der Darstellung des neuen Backend Builders gibt. Bei uns wurde dieser zunächst nicht angezeigt und damit auch nicht der Link zum zurück Wechseln zum alten Backend Builder.

WordPress 5.0, Gutenberg Editor und das Divi Theme

Das Erscheinen von WordPress 5.0 macht die Situation zunächst etwas unübersichtlicher, denn WordPress 5.0 enthält einen neuen Editor namens Gutenberg. Die neueste Version des Divi Themes ist zwar kompatibel mit dem Gutenberg Editor, aber es gibt erst einmal keine Ansicht für den Backend Editor.

Wenn Du WordPress 5.0 verwendest und einen Beitrag oder eine Seite mit dem Divi Builder gestaltest, wird zunächst stets der Visual Builder verwendet. Falls Du eine Seite bearbeiten willst, die mit dem Divi Builder erstellt wurde, erscheint folgende Ansicht im Gutenberg oder auch Block Editor:

Divi Builder mit WordPress 5.0 Gutenberg Editor

Ein Klick auf die Schaltfläche „Launch the Divi Builder“ (zu Deutsch etwa „Starte den Divi Builder“) aktiviert dann immer den Visual Builder.

Die früher oben in der rechten Sidebar aufzufindenden Divi Seiteneinstellungen finden sich unverändert im Gutenberg Editor nur unten in der rechten Sidebar. Falls die Sidebar nicht eingeblendet ist, musst Du einfach oben rechts auf das Zahnrad klicken.

WordPress 5.0 & der Backend Builder

Falls Du auf WordPress 5.0 upgradest und trotzdem den Backend Builder nutzen willst (gleichgültig, ob es der neue oder der alte sein sollte), dann musst Du dafür sorgen, dass WordPress den klassischen Editor anzeigt statt des neuen Gutenberg oder Block Editors.

Um den klassischen Editor zu aktiveren gibt es mehrere Wege.

Klassischen Editor in den Divi Einstellungen aktivieren:

Ab der Divi Version 3.18 kannst Du den klassischen Editor ganz einfach in den Divi Einstellungen aktivieren. Die Option findet sich im Administrationsbereich unter „Divi“ > „Theme-Optionen“ im Bereich „Builder“ im Reiter „Fortgeschritten“ und nennt sich „Enable Classic Editor“ (1).

Divi Einstellungen Klassischer Editor

Wichtig: Zur Zeit ist diese Bezeichnung noch nicht übersetzt, aber wenn dies irgendwann geschieht sollte hier etwas wie „Klassischen Editor aktivieren“ stehen:

Achtung: Diese Option wird nur angezeigt, wenn mindestens WordPress Version 5.0 installiert ist. Mit der darüberliegenden Option (2) „Enable The Latest Divi Builder Experience“ (zu Deutsch etwa „Den aktuellsten Divi Builder aktivieren“) kannst Du einstellen, ob Du mit dem neuen oder dem alten Backend Builder arbeiten möchtest.

Der Vorteil dieser Variante liegt darin, dass diese sehr leicht zu erreichen ist und kein weiteres Plugin installiert werden muss.

Klassischen Editor über Classic Editor Plugin aktivieren:

Du kannst aber auch das Plugin Classic Editor installieren, das ebenfalls dafür sorgt, dass WordPress statt des Gutenberg Editors den Classic Editor anzeigt.

Der Vorteil das Classic Editor Plugin zu nutzen liegt darin, dass Du dort mehr Einstellmöglichkeiten vorfindest. So kannst Du bei aktiviertem Plugin im Administrationsbereich unter „Einstellungen“ > „Schreiben“ auch einstellen, dass Nutzer auch wählen können, ob sie den klassischen oder den Gutenberg bzw. den Block Editor verwenden möchten:

WordPress Classic Editor Auswahl

Sobald beim Bearbeiten von Seiten oder Beiträgen der klassische Editor angezeigt wird, kannst Du dort den alten oder neuen Backend Builder nutzen.

Probleme mit dem neuen Backend Builder

Leider sind wohl doch einige Nutzer von Problemen im Zusammenhang mit dem neuen Backend Builder und dem Wechsel auf WordPress 5.0 betroffen.

Bei manchen wird der neue Backend Builder nicht angezeigt. So ist es auch uns zumindest teilweise ergangen:

Fehlender Divi Backend Editor

Unterhalb der zwei Buttons sollte eigentlich der neue Backend Builder zu sehen sein, aber dieser erschien einfach nicht.

Bei uns haben auch die üblichen Lösungsversuche bisher keinen Erfolg gezeigt. Dazu gehörte …

  1. Das Löschen aller Caches (Browsercache, WordPress Caching Plugin, ggf. vorhandener Cache des Webhosting Anbieters).
  2. Das Verwenden eines anderen Browsers wie Chrome, Safari, Firefox, Opera etc.
  3. Das Deaktivieren sämtlicher Plugins.

Elegant Themes hat zwar in schneller Folge die Updates 3.18.1 bis 3.18.5 veröffentlicht, aber noch ist bei vielen (so auch bei uns) das Problem nicht behoben. Nun ist in unserem Fall das Bearbeiten weiterhin mit dem Visual Builder möglich, so dass es wenig stört. Aber es gibt einige Meldungen von Nutzern, die auch Probleme mit dem Visual Builder haben.

Nachtrag: Mit dem Update auf Version 3.18.6 hat sich bei uns das Problem mittlerweile gelöst.

Sicherheitshalber Warten oder Backup bereit halten

Wer auf Nummer Sicher gehen will, sollte mit dem Divi Update auf die Version 3.18.x lieber noch etwas warten, bis diese Probleme seitens Elegant Themes vollständig behoben wurden. Das bedeutet aber auch mit dem Update auf WordPress 5.0 zu warten, denn Elegant Themes empfehlen vor dem WordPress Update auf die Divi Version 3.18 zu updaten.

Zumindest ist es ratsam ein frisches Backup parat zu halten, um bei Problemen das System zügig wieder zurücksetzen zu können. Auch wenn in einigen Fällen die Rollbackfunktion von Divi ggf. ausreicht. Zu finden im Administrationsbereich > „Divi“ > „Theme-Optionen“ > Reiter „Updates“ > Schaltfläche „Rollback to the previous version“.

Backend Builder im Block Editor?

Es bleibt zu hoffen, dass Elegant Themes eine Möglichkeit findet, den Backend Builder auch im Gutenberg oder Block Editor anzeigen zu lassen, damit man nicht auf die Aktivierung des Classic Editor angewiesen ist. Zumindest wurde angekündigt, dass Divi immer besser in den Block Editor integriert werden soll.

Vorher sollten aber noch die letzten Probleme ausgeräumt werden.

Elegant Themes haben selbst in ihrem Blog einen umfangreichen englischsprachigen Artikel zu dem Thema veröffentlicht: Gutenberg and the New Divi Builder Experience

Weiterführende Links

14 Kommentare

  1. Sam Walther

    Hallo Nils und Divi Team,

    herzlichen Dank für Eure angagierten Beiträge.

    Auch Euch die besten Wünsche für Weihnachten und einen guten Rutsch ins neue Jahr.

    Sam

    Antworten
    • Nils

      Danke Sam, es freut uns zu hören, dass unsere Arbeit hilfreich ist.

      Wir wünschen Dir ebenfalls ein frohes Fest und einen guten Einstand in das neue Jahr 👋 !

      Antworten
  2. Thomas Scherz

    Super Artikel. Das sind genau die Infos die ich gesucht habe.
    Besten Dank.

    Antworten
  3. Mona

    Danke – du hast mich gerade vor dem Verzweiflungstod bewahrt!
    Unter Div-Thema Optionen habe ich die Lösung für mein Problem gefunden, danke danke danke.

    Antworten
    • Nils

      Hi Mona,

      das freut uns natürlich, wenn Du mit unserer Hilfe Dein Problem lösen konntest 🙂 !

      Antworten
  4. Anja

    Herzlichen Dank für diesen Beitrag! Ich habe länger nichts an meiner Website geändert und stand gerade wie der Ochs vorm Berg weil Divi „einfach verschwunden“ war. Durch eure Hilfe konnte ich es zurückholen 😉

    Antworten
  5. Connie

    Ein Vorteil des „alten“ Backend-Builders ist ja wohl, daß man Anwendern Layouts vorgeben kann, an denen sie nicht viel ändern können oder verzweifeln müssen.

    Wenn ich für größere Webseiten mit mehreren Anwendern, die für den Inhalt zuständig sind, diese „tollen neuen Visual Builder“ und den neuen Backend-Builder aktiviere, verzweifeln sie, finden sich nicht zurecht und das Layout stimmt hinterher überhaupt nicht mehr.

    Hier hat DIVI einen Denkfehler: Was ein Designer benötigt, ist für einen Mitarbeiter, der für Inhalte zuständig ist, zu viel oder unnötig.

    Antworten
    • Nils

      Ich kann Deine Kritik zwar nachvollziehen, aber so grundlegend finde ich die Veränderungen vom alten zum neuen Backend Builder eigentlich nicht.

      Wenn Mitarbeiter nur Inhalte editieren können sollen, helfen die Einstellungen im Admin unter „Divi“ > „Divi Rolle Editor“ um solche Probleme zumindest etwas einzugrenzen.

      Antworten
  6. Ute

    Phantastisch! Durch die Installation des Plugin Classic Editor sind meine Probleme gelöst! Und das mir als absoluten Anfänger! Vielen, vielen Dank, dass Ihr so verständlich und detailiert schreibt. Danke!

    Antworten
  7. Ingo

    Es ist schön, dass man keinen Classic Editor mehr installieren muss. Nur ist das Layout nun leider nicht mehr Klassisch. Es braucht mehr Platz und meine Abstände stimmen nicht mehr auf der Seite. Da meine Buttons im visuellen Builder sowieso nicht richtig angezeigt werden und man nicht nach Mobil- und Desktopansicht wählen kann, benutze ich diesen nicht und so kann ich im „Klassischen“ jetzt viel mehr suchen. Ich wäre eher froh, wenn man Buttons einfügen könnte mit eigenem Icon und individuell plazierbar, daneben mit eigenem Text oder einen Slider mit mehr Möglichkeiten.

    Antworten
    • Nils

      Hallo Ingo,

      ich muss gestehen, dass ich Dir nicht ganz folgen kann. Das liegt vielleicht an den Bezeichnungen. Classic Editor sollte eigentlich der frühere alte Editor von WordPress vor Gutenberg sein, während Elegant Themes vom New und Classic (Backend) Divi Builder spricht.

      Für die Verwendung des Divi Backend Builders (gleichgültig ob klassisch oder neu) ist ja derzeit die Installation oder das Einschalten des WordPress Classic Editors zwingend notwendig. Deshalb gehe ich davon aus, dass Du eigentlich meinst, dass kein Classic Divi Backend Builder mehr genutzt werden muss.

      Dass sich durch die Wahl des neuen Builders die Abstände auf Deiner Seite verändert haben sollte eigentlich nicht sein. Das ist bei unseren Projekten bisher nicht vorgekommen, außer es trat das CSS-Minifizierungsproblem auf.

      Im Visual Builder sollte auch alles richtig angezeigt werden, da würde ich mich ansonsten bei bleibenden Problemen auch vertrauensvoll an den Divi Support wenden.

      Im Visual Builder erscheinen nach einem Klick auf den immer unten eingeblendeten lila Kreis mit den drei Punkten, weitere Optionen. Darunter auch links die Möglichkeit zwischen Desktop- und mobiler Ansicht zu wählen.

      Wenn Du ein Button-Modul einfügst, kannst du das doch individuell platzieren und wenn Du willst ein Text-Modul daneben? Und unter „Design“ > „Taste“ die Darstellung eines Icons aktivieren. Oder meinst Du andere Icons als die von Elegant Themes?

      Ich glaube da verstehe ich Dich nicht so richtig!?

      Antworten
  8. Uwe

    Hallo,
    ich habe gerade unten rechts auf den Hinweis „Wechseln zum neuen DIVI-Builder“ geklickt. Seit dem versucht WordPress den Builder darzustellen, bleibt aber hängen. Der Link „Wechseln zurück zum klassischen Editor“ und der Button über dem Builder „Zurück zum Standard-Editor“ funktionieren auch nicht. Ich arbeite mit Firefox, habe mich an- und abgemeldet, auch MS Edge als alternativen Browser versucht, hat aber nix geholfen. Mein Admin ist leider gerade im Urlaub.

    Antworten
      • Uwe

        Vielen Dank. Damit funktioniert es bei mir wieder.

        Antworten

Einen Kommentar abschicken

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