Newsletter einrichten mit Divi in 5 einfachen Schritten

Jan. 14, 2025

Kommt dir das bekannt vor:

Du möchtest einen Newsletter einrichten. Und die Technik bringt dich um den Verstand…

Ich kann dich beruhigen: Das Ganze ist einfacher, als du denkst.

Mein Problem bei der Einbindung des Anmeldeformulars war immer die Optik. Die meisten Formular sehen einfach grottig aus oder sind nur rudimentär an das Corporate Design anzupassen.

Warum mir das Design wichtig ist?

Bestimmt weißt du, dass nicht nur die Funktion, sondern dass auch eine gute Gestaltung des Newsletter-Formulars für Vertrauen sorgen kann. Und mehr Vertrauen heißt: mehr Kontakte.

Bei ActiveCampaign kann man Eingabefelder und Buttons zwar minimal gestalten – trotzdem kannst du das Formular kaum an deinen Look anpassen.

Ich hab‘s versucht: Es sah einfach schlimm aus.

Wie gut, dass uns Divi entgegenkommt.

Du brauchst nicht einmal ein Plugin. ActiveCampaign (und wahrscheinlich auch andere Anbieter) bringt zwar ein Plugin mit – doch das ist völlig unnötig. Denn Divi bietet ein Optin-Modul, mit dem du dein Formular wie gewohnt wunderbar gestalten kannst. Und das ist aus mehrfacher Hinsicht super: Denn je weniger Plugins du in deiner WordPress-Website hast, desto besser die Performance.

Mit dem Opt-in-Modul bist du flexibel, das Formular ist leicht anpassbar, rechtlich korrekt und schick obendrein.

Und so sieht mein Formular aus:

optin 12

Das bekommst du auch hin. Versprochen.

Doch legen wir los:

Schritt 1: Voraussetzungen für die Newsletter-Integration

Ich arbeite mit ActiveCampaign. Logisch, dass ich ActiveCampaign als Beispiel nutze. Falls du Brevo oder andere Newsletter-Anbieter nutzt: Die Vorgehensweise ist ähnlich bis genauso.

Hier nur der Vollständigkeit halber einige andere Dienste:
Brevo, MailChimp, ClipTip, Convert Pro, AWeber, CleverReach, GetResponse.

Es gibt noch einige mehr und sie sind auch im Divi-Optin-Modul gelistet.

Jedes der oben genannten Tools hat seine Stärken und Schwächen. Getestet habe ich Brevo (hieß damals Sendinblue), das ich auch für Kundinnen eingerichtet habe. Außerdem Convert Pro und ActiveCampaign.

Einfach ausprobieren.

Brevo und ActiveCampaign kann ich uneingeschränkt empfehlen.

Schritt 2: Kontakt-Liste und Formular anlegen.

Die folgenden Todos sind wichtig, weil du sie für die Einrichtung des Opt-in-Modul brauchst.

Also legen wir los:

  • Du wählst einen Newsletter-Dienst und legst dort einen Account an.
  • Dort erstellst du eine Liste für deine (späteren) Kontakte und
  • du baust dein Formularfeld.
  • Außerdem brauchst du die API-Daten (kannst du auch später kopieren).

Ich nenne meine 1. Liste „Hauptliste“.

Wie alles im Einzelnen konkret geht in ActiveCampaign – das schreibe ich in einem späteren Artikel.

Was brauchst du außerdem?

Zusätzlich überlegst du dir, was nach dem Absenden des Formulars passieren soll. Entsprechend solltest du nämlich noch weitere Arbeiten machen:

  • Erfolgsmeldung oder Weiterleitung zu einer separaten Seite.
  • Bei Bedarf: Danke-Seite nach Bestätigung der Mail.

Schritt 3: Erfolgsmeldung vs. Fortschritts-Seite

Was passiert, wenn der neue Kontakt auf den Senden-Button geklickt hat?

Richtig. Der Kontakt muss einen Hinweis erhalten, dass er noch eine Mail bestätigen muss (kennst du bestimmt, nur das ist DSGVO-konform).

Erst mit der Bestätigung der Mail wird der neue Kontakt als aktiver Lead in deiner Liste geführt (und erhält später deine Newsletter). Und, wichtig: Diese Bestätigung der Mail ist Teil des Double-Opt-in-Verfahrens, das von der DSGVO für eine Adressspeicherung gefordert wird.

Was macht nun das Opt-in-Modul, wenn der Kontakt auf den Absenden-Button geklickt hat?

Das Optin-Modul von Divi bietet 2 Möglichkeiten, wie der neue Kontakt informiert wird

  1. Möglichkeit: Divi gibt eine Erfolgsmeldung in Schriftform aus (die du inhaltlich anpassen kannst)
  2. Möglichkeit: Du kannst nach dem Absenden des Formulars auf eine externe Seite umleiten lassen.

Die Erfolgsmeldung (Möglichkeit 1)  finde ich ungünstig, da der neue Kontakt verwirrt werden kann. Außerdem: Auf einer zusätzlichen Seite hast du mehr Gestaltungsmöglichkeiten und mehr Platz für eine ausführliche Information.

Weiter unten gehe ich näher auf dieses Thema ein.

Schritt 4: ActiveCampaign über das Opt-In-Modul einrichten

Kommen wir zum eigentlichen Punkt:

Das Opt-in-Modul von Divi einrichten, gestalten und mit ActiveCampaign verbinden:

Du fügst an beliebiger Stelle deiner Seite das Opt-in-Modul ein. Es lässt sich genauso bearbeiten, wie alle anderen Module, die du bereits kennst und ist ähnlich aufgebaut wie das Kontaktformular. Mit dem Unterschied: Hier trägst du die Daten von ActiveCampaign ein. Denn nur so werden die vom neuen Kontakt eingetippten Daten an ActiveCampaign übertragen.

Und das geht so:

Du öffnest deine Seite, auf der das Formular stehen soll (entweder im Gridmodus oder mit dem Visual Builder).

Zeile einfügen (falls gewünscht)
Optin-Modul einfügen.

Nun hast du zwei Möglichkeiten zur weiteren Gestaltung:

Du kannst die zusätzlichen Texte zur Newsletteranmeldung mit einem zusätzlichen Text-Modul einfügen. Damit hast du größere Gestaltungsfreiheit. Also Sachen wie: „Hole dir hier mein tolles Freebie und werde Teil meiner Liste“ oder so, nur ein Beispiel.

Das brauchst du aber nicht, Denn das Opt-in-Modul bringt alles mit, was du für ein sinnvolles Anmeldeformular brauchst: Titel, Beschreibung, Fußzeile.

Ich zeige dir hier, wie ich das gemacht habe:

  • Optin-Modul zum Bearbeiten öffnen.
  • Im ersten Reiter unter „Inhalt“ wie gewohnt die Inhalte einsetzen.
  • Unter „Titel“ trägst du deine Überschrift ein. Bei mir steht als Titel der Name des Freebies.
  • Darunter kommt schon der Button. Hier gibst du einen aussagekräftigen Text ein. Also bitte nicht „Zum Newsletter anmelden“ oder schlimmer: „Senden“. Sondern du wiederholst kreativ das, was der neue Kontakt möchte.
    Bei mir steht: „Her mit dem Fahrplan“.
  • Unter dem Button hast du ein Textfeld. Wird „Body“ genannt. Hier habe ich eine Erklärung geschrieben, was das Freebie bietet.
  • Darunter befindet sich ein weiterer Texteditor. Die „Fußzeile“. Was du hier eingibst, erscheint im Formularfeld unter dem Button. Bei mir steht ein Hinweis, dass der Kontakt mit dem Fahrplan ein Newsletter erhält. Das ist ein wichtiger Zusatz.

Schau dir einfach das Bild ganz oben an.

Und so sieht das Opt-in-Modul von innen unter „Einstellungen“ aus:

optin 01

Newsletter-Dienst mit deiner Website verbinden

Nun kommt das Wichtigste: Die Verbindung zum Newsletter-Tool.

Im Optin-Modul findest du das innerhalb der Option E-Mail-Account. (Das ist der Button unter dem Text-Button).

Diesen Button öffnen.

Dort findest du zwei Eingabefelder:

Serviceanbieter und
Liste

optin 02

Meistens ist dort schon der Mailanbieter MailChimp vorausgewählt. Deshalb steht unter „Serviceanbieter“ MailChimp und über dem Listen-Feld darunter steht „MailChimp Liste“ und im Feld selber „Wählen Sie eine Liste“.

Im ersten Feld klickst du rein. Dir wird eine lange Liste mit Newsletter-Diensten angezeigt. Angefangen mit ActiveCampaign. Logisch, was du nun machst: Du wählst deinen Dienst aus. Wenn du mit Brevo arbeitest, wählst du „SendinBlue“ (weil das früher so hieß).

Ich habe natürlich „ActiveCampaign“ gewählt.

optin 04

optin 03

Danach werden im Feld darunter deine Listen angezeigt, die du in ActiveCampaign (resp. deinem Dienst) angelegt hast. Wenn du wie ich mehrere Listen hast, wählst du deine bevorzugte Liste aus.

Du klickst auf „Hinzufügen“.

Wenn du ActiveCampaign gewählt hast, werden dir nach der Auswahl von ActiveCampaign vier Eingabe-Felder angezeigt (bei anderen Anbietern können die Felder abweichen). Du siehst die Felder im Bild unten.

Hier sind es:

  • Account-Name
  • API Key
  • API URL
  • Form ID

optin 06

Was erstmal kompliziert klingt, ist kinderleicht:

Account-Name

Der Accountname ist der, mit dem du dich bei ActiveCampaign anmeldest. Bei mir: meinbenutzer.activehosted.com (meinbenutzer ist natürlich der jeweilige Nutzername).

API-Key und API URL

API Key (API-Schlüssel) und API URL findest du in ActiveCampaign unter:

Einstellungen > Entwickler

Dort kopierst du die Daten einfach raus und setzt sie in den Feldern des Opt-in-Moduls ein.

Form ID

Die Form ID ist die ID, die jedes Formular in ActiveCapaign nach der Erstellung automatisch erhält. Mein Formular hat die ID 9, weil ich schon einige Formulare versucht hatte ;-). Also muss ich dort im Feld unter Form ID einfach die 9 einsetzen. So easy.

Wichtig: Zum Schluß den Button „Senden“ klicken. Das war es schon, damit ist die Verbindung zu AC hergestellt.

Deine Kontakte können sich nun anmelden.

Aber das ist ja nicht alles.

Du erinnerst dich an das, was ich oben geschrieben hab? Irgendwie muss der neue Kontakt noch einen Hinweis lesen, dass er noch eine Mail erhält, die er erst bestätigen muss.

Dafür gibt es wie oben erwähnt im Optin-Modul zwei Möglichkeiten.

Mit dem Button „Sektion“ kannst du die beiden Möglichkeiten auswählen.

Captcha anzeigen und
Redirect-URL

optin 08

Möglichkeit 1: Erfolgsmeldung direkt auf der Formular-Seite

Wenn du die erste Möglichkeit wählst – Captcha anzeigen – dann siehst du darunter das Feld > Nachricht. Darin steht in grauer Schrift: „Erfolgsmeldung“. Hier kannst du dein Erfolgsmeldung eintippen.

Also zum Beispiel: „Danke für deine Anmeldung. Schau bitte in deinem Postfach. Du erhältst eine Mail, in der du auf den Link klicken musst zum Bestätigen.“

Oder so. Geschmacksache.

Dieser Hinweis erscheint direkt auf der Seite, auf der auch das Formular steht (stand, nach dem Absenden ist das Formular nicht mehr zu sehen.

Ich finde das nicht so geschickt. Weil der Hinweis dort schnell übersehen werden kann.

Mir ist eine separate Seite lieber, die sich nach dem Absenden des Formulars in einem neuen Browserfenster öffnet. So eine Seite ist klarer, die kann nicht so schnell verschwinden wie ein Hinweis direkt auf der Formularseite.

Wieso verschwinden? 

Wenn die Seite neu geladen wird, ist der Hinweistext weg. Dann steht dort wieder das Formular. Das kann mit einer separaten Seite nicht passieren. Und du hast mehr gestalterische und inhaltliche Möglichkeiten.

Ich bin also für Möglichkeit 2. Und die geht so:

Möglichkeit 2: Umleitung zu einer Fast-geschafft-Seite

Du bist noch in den Einstellungen des Optin-Moduls. Und beim Button „Sektion“.

optin 09

Nun wählst du statt „Captcha“ – logisch: Redirect-URL.

Dann erscheint unter dem Feld „Sektion“ ein Feld mit der Beschriftung „Redirect-URL“. Hier trägst du die URL deiner Seite ein, die du für diesen Zweck erstellt hast.

Meine Seite heißt hier im Beispiel: https://constanzestraub.de/fast-geschafft.

Das war‘s.

Schritt 5: Felder und Inhalte im Divi-Opt-in-Modul gestalten

Das ganze Formular kannst du natürlich noch gestalten.

Solltest du sogar. Denn nur mit einer professionellen Gestaltung weckst du Vertrauen. Was die Chance erhöht, dass du viel Anmeldungen erhältst.

Und das geht so:

Felder anpassen

Das Formular enthält standardmäßig das Feld E-Mail-Adresse, du kannst aber weitere Felder hinzufügen oder anpassen.

Unter dem Button „Felder“ findest du bereits die Felder Vorname und Nachname.

Felder gestalten:

Hierzu gehst du in den Bereich „Design“ oben in den Reitern. Dort unter „Felder“ kannst du beliebig anpassen (Hintergrundfarbe, Rand, Rundung, Schriftfarbe etc.)

Button gestalten

Der Button ist ein entscheidendes Element deines Formulars. Er sollte auffällig und motivierend gestaltet sein.

Gehe zu Design > Button:

Du kannst die globalen Button-Einstellungen übernehmen oder den Button individuell anpassen. So, wie du es aus den anderen Modulen kennst.

Text und Überschriften gestalten

Dasselbe kannst du mit den Texten machen: Schriftgröße ändern, Schriftart, Schriftfarbe usw.

Erfolgsmeldung und Weiterleitung

Wenn du lieber mit einer Erfolgsmeldung direkt auf der Formularseite arbeitest (statt mit einer Weiterleitung auf eine separate Seite), dann kannst du auch diesen Text gestalten. Dafür gibt es unter > Design ebenfalls einen Button mit Einstellungsmöglichkeiten.

Das war’s schon.

War doch garnicht schwer, oder?

Zum Schluß solltest du das Formular auf mobilen Geräten prüfen. Aber auch hier kann der Visual Builder toll helfen.

ConstanzeStraub
Constanze Straub ist Webdesignerin und Expertin für visuelle Kommunikation. Seit 22 Jahren hilft sie Einzelunternehmen und BeraterInnen dabei, mit klarem Grafikdesign und aussagekräftigen Websites sichtbar zu werden. Wenn Constanze Straub nicht am Mac sitzt oder an der Staffelei steht, heizt sie mit dem Fahrrad durch die Natur oder schmeißt Boulekugeln auf den Sandplätzen in und um Lüneburg (und am liebsten im Watt).

0 Kommentare

Einen Kommentar abschicken

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