Bewertungen in Divi einbinden

Voraussetzungen

• Ein Space in Mocha mit mindestens einer freigegebenen Bewertung. Ohne freigegebene Bewertung bleibt das Widget unsichtbar.
• Der Einbettungscode aus dem Mocha-Dashboard (siehe Schritt 1).
• WordPress mit Divi 4 oder Divi 5 und ein Konto mit Administratorrechten.
• Das Widget gibt es in beiden Mocha-Tarifen. Free zeigt bis zu 50 freigegebene Bewertungen und den Hinweis „Powered by Mocha“, Pro zeigt alle Bewertungen ohne diesen Hinweis.

Wir nennen die Divi-Bezeichnungen so, wie sie in der englischen Oberfläche heißen. In der deutschen Oberfläche sind sie je nach Version übersetzt, zum Beispiel „Inhalt“ statt „Content“.

Schritt für Schritt

1. Code in Mocha kopieren

   Öffnen Sie in Mocha Ihren Space und klicken Sie in der Space-Navigation unter „Einbinden“ auf „Widget“. Wählen Sie unter „Widget wählen“ ein Widget aus, zum Beispiel die Bewertungswand. Passen Sie „Erscheinungsbild“ und „Layout“ an und klicken Sie auf „Code kopieren“.

   Der kopierte Code ist ein einzelner Script-Tag. Ihr Code enthält statt „ihr-space“ die Kennung Ihres Spaces:

   HTMLCode kopieren

   <script
     src="https://mocha.de/api/embed/ihr-space/widget.js"
     data-mode="wall"
     async></script>

2. Visual Builder öffnen

   Öffnen Sie in WordPress unter „Seiten“ die gewünschte Seite und klicken Sie auf „Use Divi Builder“ (in Divi 4 „Use The Divi Builder“). Die Seite lädt im Visual Builder. Bei einer neuen Seite wählen Sie zuerst „Build From Scratch“.

3. Zeile und Code-Modul einfügen

   Klicken Sie an der gewünschten Stelle auf das grüne Plus-Symbol, um eine Zeile (Row) einzufügen, zum Beispiel mit einer Spalte. Klicken Sie dann auf das graue Plus-Symbol in der Zeile, suchen Sie nach „Code“ und wählen Sie das Modul „Code“.

4. Code einfügen

   Die Einstellungen des Moduls öffnen sich automatisch. Fügen Sie den kopierten Code im Tab „Content“ in das Feld im Bereich „Text“ ein. Das Code-Modul ergänzt keine Script-Tags, der Mocha-Code enthält sie aber schon. Sie müssen nichts hinzufügen.

5. Speichern und Visual Builder verlassen

   Klicken Sie auf „Save“ oder drücken Sie Strg+S (Mac: Cmd+S). Laut Divi-Dokumentation wird JavaScript im Code-Modul erst sichtbar, nachdem Sie gespeichert und den Visual Builder verlassen haben. Ein leerer Bereich im Builder ist also normal. Verlassen Sie den Builder mit „Exit“ (Divi 5) bzw. „Exit Visual Builder“ in der WordPress-Werkzeugleiste (Divi 4). In Divi 5 können Sie die Seite vorher auch über „Preview“ in einem neuen Tab ansehen.

6. Cache leeren

   Nutzen Sie ein Caching-Plugin, leeren Sie jetzt dessen Cache. Öffnen Sie die Seite danach in einem privaten Browserfenster, dann sehen Sie sie so wie Ihre Besucher.

Auf allen Seiten: Global Footer

Soll das Widget auf allen Seiten erscheinen, etwa ein Badge im Footer, öffnen Sie „Divi“ > „Theme Builder“. Bearbeiten Sie im „Default Website Template“ den „Global Footer“ (oder legen Sie ihn mit „Add Global Footer“ an) und fügen Sie dort wie oben ein Code-Modul mit dem Mocha-Code ein. Speichern Sie anschließend.

Die Felder im Tab „Integration“ der Theme Options eignen sich dafür nicht. Sie setzen Code in den Kopf- oder Body-Bereich, dort bestimmen Sie nicht, wo auf der Seite das Widget erscheint.

Caching und Optimierung

Die Leistungsoptionen von Divi finden Sie unter „Divi“ > „Theme Options“ > „General“ > „Performance“. Sie betreffen vor allem Divis eigene Dateien, etwa dynamisches CSS, Critical CSS und jQuery. Fehlt das Widget, nachdem Sie „Defer Additional Third Party Scripts“ eingeschaltet haben, schalten Sie diese Option testweise wieder aus.

Wenn das Widget nicht erscheint

• Nur im Visual Builder leer: Speichern Sie und verlassen Sie den Builder. Erst auf der Seite selbst zählt das Ergebnis.
• Keine freigegebene Bewertung: Das Widget bleibt leer, bis mindestens eine Bewertung freigegeben ist.
• Falsches Modul: Im Modul „Text“ zeigt Divi den Code unter Umständen als Text an, statt ihn auszuführen. Verwenden Sie das Modul „Code“.
• Alte Seite im Cache: Leeren Sie den Cache Ihres Caching-Plugins und prüfen Sie die Seite in einem privaten Fenster.
• Optimierung greift: Schalten Sie die JavaScript-Optionen Ihres Optimierungs-Plugins testweise aus. Erscheint das Widget dann, fehlt eine Ausnahme.