Divi Theme Probleme lösen: Darstellung & Formatierung

von | Tipps

Wir erhalten regelmäßig Anfragen von Lesern, die mit bei der Verwendung des Divi Themes mit erstaunlichen Darstellungsproblemen zu kämpfen haben:

Wenn ich im Divi Builder einen Text formatiert habe, dann ändert Divi die Formatierung immer wieder, sobald ich über „Seite bearbeiten“ eine weitere mögliche Gestaltung nutze. Desgleichen, wenn ich vom Visuellen Editor auf den Divi Builder wechsle. Sofort wird die gesamte Textformatierung wieder auf linksbündig gestellt.

Oder:

Ich habe die gleichen Probleme. Beim Wechsel zwischen visuellen Builder und Divi Builder verschwinden immer mal wieder alle meine Formatierungen. Öffne ich den Divi Builder sind sie da, schließe ich ihn sind sie weg. Öffne ich ihn, sind sie wieder da usw. Bisher konnte ich die Formatierung wieder herstellen durch zurückspringen in den Revisionen.

Oder:

Wenn ich in WP eingeloggt bin und auf die Seite gehe, wird sie genau so dargestellt, wie sie soll. Aber als nicht eingeloggter Besucher (also auch für alle die auf meine Seite gehen), fehlt der Bildslider mit Textboxen und die Überschrift ist verschoben (siehe Bilder). Hat jemand eine Idee woran das liegen kann? URL: www.buteo-loek.de

Divi Darstellung Problem Beispiel Screenshot

Allen Problemen gemeinsam ist, dass eingestellte Formatierungen oder auch Hintergrundbilder nicht angezeigt werden oder plötzlich wieder anders angezeigt werden. Oft entstehen diese Probleme im Zusammenhang mit der Aktivierung des Visual Builders, des Backend Builders oder einfach durch das Bearbeiten der Seite.

Divi Builder Darstellungsprobleme lösen

Wir selbst sind bisher von diesen Problemen verschont geblieben und konnten diese auch nicht nachstellen. Aber mit der Zeit hat sich eine oft wirkungsvolle Problemlösung gezeigt.

Offenbar hängen diese Probleme meist mit den Minifizierungsoptionen in den Divi Theme Einstellungen zusammen. Wenn diese Optionen aktiv sind, werden sowohl CSS- als auch Javascript-Dateien möglichst stark verkleinert, indem alles Überflüssige wie Kommentare oder Zeilenumbrüche aus dem Code entfernt und ggf. mehrere Dateien miteinander kombiniert werden.

So werden die Dateien einerseits kleiner und andererseits müssen weniger viele Dateien geladen werden. Dies sorgt normalerweise für eine Geschwindigkeitsverbesserung bei den Ladezeiten und damit dem Seitenaufbau. Diese Optionen sind standardmäßig in Divi aktiviert!

Offenbar können diese Funktionen von Divi gelegentlich erstaunliche Probleme verursachen. Meist liegt dies wohl auch daran, dass die Betroffenen zusätzlich Caching Plugins verwenden, die ebenfalls versuchen auf ähnlichen Wegen CSS- und Javascriptdateien zu verschlanken.

Divi Minifizierungsfunktionen deaktivieren

Die genannten Funktionen sind an drei Stellen zu finden und dort zu deaktivieren:

Im Adminbereich unter „Divi“ > „Theme-Optionen“ im Reiter „Generell“ finden sich die zwei Optionen:

  • „Minify And Combine Javascript Files“
  • „Minify And Combine CSS Files“

Divi CSS & Javascript Einstellungen

Im Reiter „Divi Builder“ existiert noch eine Option

  • „Erzeugung der statischen CSS-Datei“

… die ebenfalls deaktiviert werden sollte.

Wichtig: Caches löschen

Anschließend löschst Du sicherheitshalber alle vorhandenen Caches. Dazu gehören …

Caching Plugins & Server Cache

Viele Anwender nutzen Caching Plugins, um bessere Ladezeiten für Ihre Website zu erreichen. Dazu gehören z.B. W3 Total Cache, WP Super Cache oder auch das von uns gern verwendete WP Rocket. Auch hier können noch alte Daten gespeichert sein, die insbesondere beim ausgeloggten Zugriff auf Deine Website ausgeliefert werden. Daher solltest Du auch hier alle Caches löschen.

Einige Serversetups oder Hostinganbieter stellen eigene Cachingfunktionen zur Verfügung. Auch hier gilt: unbedingt Caches löschen, um die Auslieferung alter Daten zu verhindern.

Dein Browser Cache

Als letztes solltest Du auch den Cache Deines Browsers löschen, denn auch dort können veraltete Daten zwischengespeichert sein, die Probleme verursachen. Das Löschen des Browser Caches ist übrigens stets eine der ersten Handlungen, die man bei den unterschiedlichsten Problematiken vornehmen sollte. Oft lösen sich dann viele Probleme im Handumdrehen.

Konflikte mit Caching- und verschiedenen Optimierungs-Plugins

Meist genügen diese Handlungen, aber gelegentlich gibt es auch generelle Probleme mit Caching- und Optimierungsplugins, die eigene Funktionen für die Optimierung von CSS- und Javascriptdateien besitzen. So bietet z.B. die Plugins AutoptimizeFast Velocity Minify und Merge + Minify + Refresh kein Caching, aber stellen ebenfalls Optimierungsfunktionen für CSS und Javascript zur Verfügung.

Wenn also die bisherigen Schritte keine Lösung gebracht haben, solltest Du versuchen herauszufinden, ob eines dieser Plugins die Ursache ist. Dafür schaltest Du die Plugins kurzfristig aus, löscht wieder alle Caches und schaust, ob das Problem weiter besteht. Im Ernstfall schaltest Du einfach alle Plugins aus, löscht alle Caches und falls das Problem dann nicht auftaucht, schaltest Du ein Plugin nach dem anderen wieder ein, bis das Problem wieder auftritt.

Wenn du auf diesem Weg herausgefunden hast welches Plugin die Ursache ist, kannst Du dort in den Einstellungen nach entsprechenden Optionen für die Komprimierung und Zusammenfassung von CSS- und Javascriptdatein schauen und dann prüfen, ob es genügt nur diese auszuschalten.

In einigen seltenen Fällen hat es übrigens schon genügt, die Plugins einmal aus- und wieder einzuschalten.

Problem gelöst?

In den meisten Fällen war damit das Problem gelöst.

Falls nicht, solltest Du Dich direkt an den Elegant Themes Support wenden. Diesen findest Du nach dem Login in den Mitgliedsbereich unter in der linken Sidebar unter „Help“. Dort kannst Du Dich direkt an einen Mitarbeiter wenden oder im Community Forum nach Lösungen suchen.

17 Kommentare

  1. Heidi Nitsche

    vielen Dank, das hat geholfen!

    Antworten
  2. Jan Lübberding

    Vielen Dank, sehr hilfreich

    Antworten
  3. Martina Rohrbach

    Ich habe ewig gesucht und das ist die Lösung! DANKE!!!!!

    Antworten
  4. Rudi Stauber

    Danke für den hilfreichen tipp!!!!

    Antworten
  5. Manuel

    Hi,
    bei mir lag es daran, dass ich ein einfaches „}“ im Code vergessen habe, wodurch es mir die komplette Seite zerschossen hat.

    Das vielleicht vorher auch mal prüfen! 🙂

    Antworten
  6. Tom

    Ich habe meine WordPress Seite mit Divi erstellt. Alles war gut. Heute bin ich mit „All in One WP Migration“ zu zu 1&1 umgezogen, inkl neuer Domain. Divi ist aber komplett zerschossen. es werden keine Bilder angezeigt obwohl sie im Medienordner liegen. Auch animierte globale Elemente nicht. Keine Galerien, keine Soundfiles Man sieht nur noch den Footer und Header aber nicht den Content. Deaktivere ich den visuellen Bilder zur Vorschau dann sieht man den Content (Body) aber komplett ohne Bilder. Ich suche schon den ganzen Tag nach dem Fehler, weiß aber nicht mehr weiter…

    Antworten
    • Nils

      Hi Tom,

      auch wenn man bei solchen Vorhaben auch stets alles an Caching deaktivieren sollte, vermute ich bei deiner Schilderung nicht, dass dein Problem damit zu tun hat.

      Nun habe ich allerdings auch noch nie mit dem All in One WP Migration Plugin gearbeitet. Umzüge habe ich früher manuell, heute meist mit der kostenpflichtigen UpdraftPlus Version problemlos vollzogen. Bevor du dich mühsam an eine Fehlerbehebung machst, würde ich vorschlagen es nochmal mit dem Duplicator Plugin zu testen. Das kann einen Domainumzug bereits in der kostenfreien Version und bisher habe ich überwiegend Gutes von dem Plugin gehört.

      Ansonsten würde ich als erstes prüfen, ob ggf. noch die falschen URLs im Quelltext hinterlegt sind und bei Bedarf mit dem Search & Replace Plugin in der Datenbank eine Ersetzung der alten URL mit der neuen durchzuführen. Ansonsten wäre auch eine Test mit dem Deaktivieren aller Plugins sicher keine schlechte Idee.

      Antworten
      • Tom

        Hallo Nils, habe ich beides schon gemacht. Heute bin ich nochmal mit dem duplicator umgezogen. von one.com zu IONOS. Auch search &Replace habe ich angewendet. gab 8 links zum umschreiben, hat aber nichts bewirkt.
        Habe gestern 2 stunden mit Divi gechattet heute 2 Stunden mit IONOS telefoniert sie sind alle ratlos. Ionos sagt es wäre ein phänomen, sie können sich das nicht erklären, es wäre alles richtig. die von Divi haben gesagt, im Quelltext gibt es Pfade vom alten Provider (one.com) https://usercontent.one/wp…usw IONOS hat gesagt ich soll mich an one.com wenden. Habe ich nun auch versucht. Da kommt aber auch nichts. Weiß nicht mehr weiter.

        Antworten
        • Nils

          Wenn weder der Support vom Webhoster noch von Divi zu einer Lösung geführt hat, werde ich dir vermutlich keine bessere Hilfe über die Kommentarspalte bieten können.

          Aber was mich wundert ist: Wenn sich noch alte Verweise im Quellcode finden lassen, wurden ja definitiv nicht alle URLs umgeschrieben!?

          Und stutzig macht mich auch die von dir angegebene URL „usercontent.one/…“. War das vorher deine Domain? Klingt irgendwie nicht danach, sondern eher nach einer alternativen Zugriffs-URL wie sie manche Hoster bieten, damit man auf Inhalte zugreifen kann, falls die Domain noch nicht registriert ist oder schon weggezogen wurde. Dann müssten auch diese URLs zu deiner neuen URL umgeschrieben werden.

          Abhängig von der Dringlichkeit und dem vorhandenem Budget würde ich an deiner Stelle auch überlegen, ob die Beauftragung eines professionellen Dienstleisters nicht vielleicht die einfachere Lösung wäre.

          Antworten
          • Tom

            Das wundert mich und IONOS auch, das die Pfade immernoch vorhanden sind. Search und replace findet sie auch nicht.

            Nein, usercontent.one war nicht meine Domain, das ist ein Pfad vom Provider one.com.

            Habe auch schon gedacht das es was mit dem Lizenzschlüssel von Divi zu tun hat, weil sich die Domain ja geändert hat. War es aber wohl auch nicht. mir fällt jetzt auch nichts mehr ein.

  7. Sergio

    Hallo Nils,

    ich suche nach eine Lösung um mein Haupt-Menu beim Ansicht der Webseite mit einem Tablet oder Handy auszutauschen.

    Das Mobile -Menu sollte beispielsweise wenigen Menu-Positionen haben.

    Kann man das per CSS erledigen?
    Oder sogar direkt in DIVI?

    Vielen Dank!

    Antworten
    • Nils

      Hallo Sergio,

      da lässt sich auch etwas über CSS machen, indem du bestimmte Elemente je nach Breakpoint versteckst. Das kannst du aber auch relativ bequem mit dem Divi Builder oder Theme Builder machen, denn du findest bei fast allen Elementen im Einstellungsmenü im Reiter „Erweitert“ im Bereich „Sichtbarkeit“ die Möglichkeit das jeweilige Element bei der Anzeige auf Smartphone, Tablet oder Desktop zu verstecken. Allerdings müsstest du auf diesem Weg wohl mehrere Menümodule mit verschiedenen Menüeinträgen verwenden, denn es lässt sich über den Builder nicht für einzelne Menüinhalte bestimmen, ob diese je nach Darstellungsmodus angezeigt werden.

      Wobei ich noch anmerken will, dass ich stets für ein grundsätzlich sparsames und einheitliches Hauptmenü stimmen würde. Mir kommt gerade kein Anwendungsfall in den Sinn in dem ich unterschiedliche Menüs für Desktop, Tablet und Smartphone passend finde. Aber das will ja nichts heißen.

      Antworten
      • Sergio

        Danke sehr.

        Aber ich kann nicht 2 Menu (1 für Desktop + 1 für Mobil) in dem Header neben des Logos, anbinden und dann jeweils ein- und ausblenden.

        Ich habe bis jetzt kein Weg dass es mir das ermöglicht … bin zu neu mit Divi 😉
        Oder geht es doch?

        Antworten
        • Nils

          Warum sollte das nicht gehen? Du arbeitest mit zwei Menümodulen (in einem Menümodul kannst du ja nur ein Menü einstellen, deshalb müssen es zwei Module sein) und musst nur über die oben genannten Einstellungen in der Sichtbarkeit dafür sorgen, dass nie beide gleichzeitig sichtbar sind.

          Antworten
      • Sergio

        aber vielleicht verstecke ich einigen Menu-button wenn die Seite auf MObil umschaltet.

        Hast du vielleicht verraten wie ein CSS dafür aussieht?
        Ich wäre dir sehr dankbar.

        Antworten
  8. Sergio

    Danke sehr!

    Antworten

Einen Kommentar abschicken

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