Mein Opt-In Formular sieht komisch aus! Warum?

Hast du im Frontend deiner Webseite über den visuellen Builder von Divi Anpassungen an einer Seite vorgenommen und auf einmal sieht dein Opt-In Formular nach verlassen den Visuellen Builders ganz komisch aus? 

Zum Beispiel so: 

Das ganze Design ist weg, es fehlt sogar das Feld für die E-Mail Adresse und irgendwie wird auch ein Text angezeigt “Du hast dich erfolgreich angemeldet”, der da eigentlich gar nicht hingehört…

Dabei sollte das Design des Opt-In Formulars doch so aussehen:

Keine Angst, es ist nichts schlimmes passiert oder kaputt gegangen – wir können das gemeinsam beheben 🙂

Zuerst einmal möchten wir dir erklären, wann und warum das überhaupt passiert.

Du kannst die folgenden Abschnitte überspringen und auch direkt zur Problembehebung gehen und erfahren, wie du es in Zukunft vermeiden kannst – klicke hier ↓

Warum die fehlerhafte Darstellung passiert:

Wie wird das Opt-In Formular überhaupt auf die Seite hinzugefügt?

Das Opt-In Formular wird über einen Shortcode auf der Seite angezeigt, welcher in ein Text-Modul eingefügt ist:

Visueller Builder ist aktiviert

Aktivierst du im Frontend den Visuellen Builder von Divi, dauert es immer einen kurzen Moment, bis das Opt-In Formular angezeigt wird. Zudem kann es auch vorkommen, dass sich das Design automatisch verändert und auf einmal ein Standard-Design ausgegeben wird:

Diese Darstellung ist nicht schlimm, das machst der Visuelle Builder von Divi manchmal, weil er das benutzerdefinierte Design des Opt-Ins nicht immer anzeigen kann. Es ist also noch alles ok 🙂 

Es wird versucht, das Opt-In Formular über den Visuellen Builder anzupassen

Der visuelle Builder von Divi ist aktiviert und man klickt mit der Maus in die Anzeige vom Opt-In Formular und passt bspw. die Headline “ABONNIERE MEINEN NEWSLETTER” an. 

Vielleicht hat man ja auch aus Versehen auf das Opt-In Formular geklickt, aber gar nichts verändert. Bis zu diesem Punkt scheint ja alles auch noch gut zu sein. Man speichert die Anpassungen und verlässt den Visuellen Builder wieder.

Visuelle Builder ist wieder deaktiviert – Opt-In Formular sieht komisch aus

Kaum ist der Visuelle Builder wieder deaktiviert, sieht das Opt-In Formular auf einmal so aus:

Hier eine bessere Ansicht, wenn wir die Hintergrundfarbe der Sektion aufhellen:

Warum ist das so?

Fassen wir nochmal kurz zusammen:

  • Das Opt-In Formular wird über einen Shortcode in ein Text-Modul eingefügt.
  • Zudem kommt hinzu, dass Text- & Design-Anpassungen eines Opt-Ins im Backend über “Opt-In Formulare” umgesetzt werden.

Sobald wir im Frontend den Visuellen Builder von Divi aktivieren und auf das Opt-In Formular klicken, kann der Shortcode nicht mehr richtig ausgegeben werden und wandelt sich stattdessen in ein komplexes HTML-Gerüst um.

Öffnest du die Einstellungen des Text-Moduls kannst du im Editor bereits erkennen, dass an Stelle des Shortcodes nun ein Text angezeigt wird (Bild oben). Wechselst du beim Editor in die Text-Ansicht, siehst du das komplexe HTML-Gerüst (Bild unten).

Und genau das ist der Grund, warum das Opt-In Formular nach Verlassen des Visuellen Builders auf einmal nicht mehr richtig angezeigt wird.

Schlussfolgerung: Bitte versuche nicht, im Visuellen Builder Anpassungen am Opt-In Formular vorzunehmen!

In den folgenden Schritten werden wir gemeinsam das Problem beheben und auch eine Einstellung für das Text-Modul vornehmen, damit diese fehlerhafte Darstellung nicht mehr passiert.

Problembehebung – so geht’s

#1 – Login Spreadmind Webseite

Bitte logge dich zuerst auf deiner Spreadmind Webseite ein. Der nachfolgende Absatz “Anleitung Login in Spreadmind Webseite” lässt sich durch einen Klick aufklappen und hilft dir bei diesem ersten Schritt.

Anleitung Login in Spreadmind Webseite

Rufe zuerst den Login-Bereich zu deiner Spreadmind Webseite auf, indem du ein /wp-admin hinter deinen Domainnamen setzt.

Logge dich dann mit deinen Spreadmind Benutzerdaten auf deiner Webseite ein. Nach dem Login wirst du automatisch ins Backend zum Dashboard (= Startseite des Backends) weitergeleitet:

#2 – Shortcode für Opt-In Formular kopieren

Gehe bitte nun zu “Opt-In Formular” > “Opt-In Formular” und klicke bei deinem Opt-In rechts auf die zwei eckigen Klammern “[]” und markiere & kopiere den angezeigten Shortcode:

#3 – Visueller Builder aktivieren

Bitte rufe deine Webseite im Frontend auf und aktiviere den Visuellen Builder auf der Seite, auf der dieses Darstellungsproblem auftritt. Der nachfolgende Abschnitt “Anleitung Login & Visullen Builder aktivieren” hilft dir bei diesem Schritt. Den Login-Abschnitt kannst du überspringen, du bist ja schon in deine Spreadmind eingeloggt 🙂

Anleitung Login & Visueller Builder aktivieren

Rufe zuerst den Login-Bereich zu deiner Spreadmind Webseite auf, indem du ein /wp-admin hinter deinen Domainnamen setzt.

Logge dich dann mit deinen Spreadmind Benutzerdaten auf deiner Webseite ein. Nach dem Login wirst du automatisch ins Backend zum Dashboard (= Startseite des Backends) weitergeleitet:

Wechsle nun über die Admin-Bar ins Frontend deiner Webseite, um dort den visuellen Builder zu aktivieren:

Bitte warte einen kurzen Moment, bis der visuelle Builder vollständig geladen ist. Sobald du mit deiner Maus über die Seite fährst, werden die verschiedenen Elemente, mit denen eine Seite aufgebaut wird, hervorgehoben. Diese Elemente sind: Sektionen (blau), Zeilen (grün) und Module (grau):

Ist der visuelle Builder startklar, kannst du direkt im Frontend Anpassungen an deiner Seite vornehmen.

Im Handbuch geben wir dir hier einen Einstieg in den Divi Builder.  

#4 – Text-Modul Einstellung öffnen und Inhalt löschen

Öffne bitte die Einstellungen des Text-Moduls (grau) durch Klick auf das Zahnrad-Symbol:

Markiere bitte den kompletten Inhalt im Editor und lösche diesen. Zur Kontrolle kannst du beim Editor in die Text Ansicht wechseln. Ist dort nichts zu sehen, ist alles gut:

Klicke beim Editor bitte wieder auf Visuell und füge nun den Shortcode als einfachen Text ein. Klicke danach beim Modul auf den grünen Bereich, um die Anpassung zu speichern und die Modul-Einstellungen zu schließen:

#5 – Modul sperren

Damit diese Darstellung in Zukunft nicht mehr passiert, sobald du im Visuellen Builder arbeitest, werden wir jetzt noch das Text-Modul sperren.

Sobald du mit der Maus über das Modul bzw. Opt-In Formular fährst (nicht klickst!), erscheinen ja die Modul-Optionen in dem grauen Feld. Fahre mit der Maus in diese graue Fläche. Über einen Rechtsklick auf deiner Maus kannst du weitere Modul-Optionen einblenden. Klicke dort bitte auf Lock (=Sperren):

Hast du das gemacht, erscheint nun ein rotes Schloss, sobald du mit der Maus über das Modul bzw. Opt-In Formular fährst. Du merkst, dass du auch nicht mehr den Text “ABONNIERE MEIN ABONNEMENT” anklicken kannst:

Modul entsperren

Klicke einfach auf das rote Schloss, wenn du das Modul wieder entsperren möchtest. 

Jetzt musst du nur noch die Seite speichern und kannst den visuellen Builder wieder verlassen.

Seite speichern & Visueller Builder verlassen

Ganz wichtig: Bevor du den visuellen Builder im Frontend wieder verlässt, also deaktivierst, musst du die Änderungen an der Seite speichern. Der nachfolgende Absatz "Anleitung Seite Speichern & Visuellen Builder verlassen" lässt sich durch einen Klick aufklappen und hilft dir bei diesem letzten Schritt.

Anleitung Seite speichern & Visuellen Builder verlassen

Zum Schluss klickst du beim Browser-Fenster unten rechts auf Speichern. Solltest du diese Option nicht sehen können, klicke auf den lilanen Button mit den drei Punkten, um die Optionen des visuellen Builders aufzuklappen:

Klicke in der Admin-Bar oben auf Visuellen Builder verlassen, nachdem du alle Änderungen gespeichert hast:

Tausche dich mit der Spreadmind-Community aus!

2 Kommentare

  1. elixir

    Danke, es hat funktioniert!.. Eure detaillierte Anleitung sei dank! Wirklich – Danke für die Details und für das “Schritt für Schritt”, ohne zu meinen, wir hätten es schon nach dem ein Mal Seite einrichten “drauf” haben sollen. Puh… eine Erleichterung!

  2. ukittner

    Na, das geht ja einfach mit dieser tollen Anleitung! Danke! 🙂

Einen Kommentar abschicken