Mailchimp ist eines der besten E-Mail-Marketing-Automatisierungstools für deine Webseite. Mit seinen Diensten kannst du deine Abonnenten effizient organisieren und ihnen Inhalte schicken, die sie interessieren. Allerdings kann es sein, dass die Kontaktformulare von Mailchimp nicht mit dem Branding deiner Webseite übereinstimmen.

Um dieses Problem zu lösen, kannst du Elementor und Mailchimp integrieren. Mit Elementor kannst du ganz einfach ein benutzerdefiniertes Anmeldeformular entwerfen und es in deine Webseite einbetten. Dann kannst du die Anmeldeinformationen direkt von Mailchimp aus verwalten.

In diesem Beitrag erklären wir dir, warum du Elementor und Mailchimp integrieren solltest. Dann zeigen wir dir, wie du das in nur fünf Schritten machen kannst. Außerdem haben wir eine Liste mit Add-ons zusammengestellt, mit denen du zusätzliche Features und Funktionen nutzen kannst. Los geht’s!

Die Vorteile der Integration von Elementor und Mailchimp

Egal, ob du ein Online-Shop oder einen Blog betreibst, du wirst wahrscheinlich eine Möglichkeit brauchen, um deine Zielgruppe regelmäßig zu kontaktieren. Mit Mailchimp kannst du genau das tun.

Mailchimp ist ein E-Mail-Marketingdienst, mit dem du Abonnentenlisten erstellen und E-Mails entwerfen kannst:

Mailchimp E-Mail Marketing
Mailchimp.

Mit Mailchimp kannst du E-Mail-Listen mit den Kontaktinformationen deiner Abonnenten erstellen. Mit vorgefertigten E-Mail-Vorlagen und dem Content Optimizer kannst du ansprechende und informative Nachrichten an deine Abonnenten senden.

Wenn du neu bei Mailchimp bist, kannst du ein kostenloses Konto erstellen. Solange du weniger als 2.000 Abonnenten hast, kannst du die benutzerfreundlichen Funktionen ohne Bezahlung nutzen.

Wenn du versuchst, deine E-Mail-Liste zu vergrößern, ist es eine gute Idee, einige Anmeldeformulare auf deiner Webseite einzubauen. Sie können dir helfen, Leads aus deinem organischen Traffic zu generieren. Mailchimp bietet diese Funktion zwar an, aber die eingebetteten Formulare sind oft generisch und passen wahrscheinlich nicht zu deinem Branding.

An dieser Stelle kommt Elementor ins Spiel. Elementor ist ein benutzerfreundlicher WordPress Page Builder, mit dem du deine Webseite ohne Programmierkenntnisse gestalten kannst. Mit seinem Drag-and-Drop-Editor kannst du ganz einfach die Funktionen erstellen, die deine Webseite braucht:

Elementor
Elementor Seitenersteller

Außerdem lässt sich Elementor leicht mit Mailchimp integrieren. Im Vergleich zu anderen Page Buildern ist Elementor eine der besten Optionen für die Erstellung und Verwaltung von Opt-in-Formularen.

Mit Elementor kannst du überall auf deiner Seite ein Kontaktformular einfügen und Mailchimp in den Einstellungen verlinken. Wenn sich deine Online-Besucher/innen anmelden, werden sie automatisch zu deiner Mailchimp-Liste hinzugefügt. Wenn du beide Tools verwendest, kannst du gut gestaltete Formulare erstellen, ohne auf die Analyse der Abonnenten verzichten zu müssen.

Wie du Elementor und Mailchimp integrierst (in 5 Schritten)

Jetzt, wo du weißt, wie Elementor und Mailchimp deiner Webseite nützen können, lass uns besprechen, wie du den Integrationsprozess startest!

Schritt 1: Melde dich für ein Mailchimp-Konto an

Zuerst musst du dich auf der Mailchimp-Webseite für ein Konto anmelden. Das kannst du kostenlos tun, indem du einfach deine E-Mail-Adresse, deinen Benutzernamen und dein Passwort eingibst:

Melde dich für ein Mailchimp-Konto an.
Melde dich für ein Mailchimp-Konto an.

Dann schickt dir Mailchimp eine E-Mail mit einem Aktivierungslink. Wenn du auf diesen klickst, siehst du eine Seite mit verschiedenen Tarifoptionen:

Mailchimp Tarifoptionen.
Mailchimp Tarifoptionen.

Wenn du dir nicht sicher bist, welcher Plan der richtige für dich ist, wähle Planfunktionen vergleichen. Hier kannst du dir alles ansehen, was in jeder Stufe enthalten ist:

Mailchimp-Pläne vergleichen.
Mailchimp-Pläne vergleichen.

In diesem Tutorial entscheiden wir uns für den Free Plan, der 2.000 Kontakte und 10.000 E-Mail-Versendungen unterstützt. Das reicht für einen einfachen E-Mail-Marketingplan aus. Allerdings hast du keinen Zugriff auf Retargeting-Anzeigen, benutzerdefinierte E-Mail-Vorlagen oder individuelles Branding.

Um dich anzumelden, gibst du deinen Namen und deine Unternehmensdaten an. Obwohl es optional ist, kannst du auch die URL deiner Webseite eingeben und deine Inhalte importieren:

Füge deinen Namen und deine Unternehmensdaten hinzu.
Füge deinen Namen und deine Unternehmensdaten hinzu.

Als nächstes füllst du deine Adressdaten aus. Dieser Schritt stellt sicher, dass deine E-Mails nicht zu Spam werden:

Füge deine Adresse in das Feld ein.
Füge deine Adresse in das Feld ein.

Mailchimp wird dich dann fragen, ob du bereits Abonnenten hast. Wenn ja, wähle Ja und gib an, wie viele du hast:

Gib an, wie viele Abonnenten du hast.
Gib an, wie viele Abonnenten du hast.

Um Mailchimp zu helfen, dein Geschäft zu verstehen, gib an, ob du Produkte oder Dienstleistungen verkaufst. Um diese Frage zu umgehen, kannst du auf Überspringen klicken:

Option Produkte oder Dienstleistungen.
Option Produkte oder Dienstleistungen.

Nachdem du den Anmeldeprozess abgeschlossen hast, kannst du auf dein Mailchimp-Konto zugreifen!

Schritt 2: Erstelle eine Zielgruppe und einen API-Schlüssel

Um mit der Organisation deiner Abonnenten in Mailchimp zu beginnen, musst du eine Zielgruppe erstellen. Denke daran, dass ein kostenloses Konto nur eine Zielgruppe unterstützt, aber jeder erweiterte Plan kann drei oder mehr enthalten.

Obwohl du vielleicht versucht bist, mehrere Zielgruppen zu erstellen, empfiehlt Mailchimp, mit einer zu beginnen. Diese Einrichtung kann dir helfen, deine Abonnenten als Ganzes zu verstehen. Außerdem kannst du so deinen E-Mail-Versand vereinfachen und deine Kontakte pflegen, wenn dein Unternehmen wächst.

Auch mit nur einer Zielgruppe kannst du Tags und Segmente erstellen, um Kontakte in verschiedene Untergruppen einzuteilen. Mehrere Zielgruppen zu erstellen, kann jedoch einige Vorteile haben.

Wenn du zum Beispiel E-Mails sowohl an Verkäufer/innen als auch an Einkäufer/innen schickst, musst du diesen Gruppen möglicherweise getrennte Nachrichten schicken.

Gehe in deinem Mailchimp-Dashboard zu Audience > Audience Dashboard. Klicke dann auf Deine Kontakte hinzufügen:

Kontakte in Mailchimp hinzufügen.
Kontakte in Mailchimp hinzufügen.

Du gelangst nun zu einer Seite, auf der du die Kontaktdaten deiner Abonnenten importieren kannst. Kopiere einfach ihre Namen und E-Mail-Adressen und füge sie in ein Textfeld ein. Alternativ kannst du auch Daten von einem Drittanbieterdienst importieren oder eine CSV- oder TXT-Datei hochladen:

Es stehen verschiedene Upload-Optionen zur Verfügung.
Es stehen verschiedene Upload-Optionen zur Verfügung.

Wenn du das getan hast, gehst du zu deinem Audience Dashboard und findest dort Audience verwalten > Einstellungen. Hier kannst du den Namen und die Standardeinstellungen ändern:

Ändere den Namen und die Standardeinstellungen.
Ändere den Namen und die Standardeinstellungen.

Achte darauf, dass du einen Absendernamen und eine Absender-E-Mail-Adresse festlegst. Du kannst auch ein Double-Opt-In aktivieren, um den Abonnenten nach der Anmeldung eine Bestätigungs-E-Mail zu schicken:

Füge weitere Kampagnenoptionen hinzu.
Füge weitere Kampagnenoptionen hinzu.

Wenn du mit der Erstellung und Einrichtung deines Kontos fertig bist, gehe zu deinem Profil. Klicke dann auf Extras > API-Schlüssel:

Klicke auf den Reiter
Klicke auf den Reiter „Extras“, um die Option API zu finden.

Wenn du noch keinen API-Schlüssel hast, musst du auf „Schlüssel erstellen“ klicken. Mailchimp wird automatisch einen für dich hinzufügen:

Einen API-Schlüssel erstellen.
Einen API-Schlüssel erstellen.

Sobald dein API-Schlüssel aktiv ist, kopiere ihn. Da diese Information Zugang zu deinem Mailchimp-Konto gewährt, solltest du diesen Code niemals öffentlich teilen.

Schritt 3: Gestalte ein Mailchimp-Anmeldeformular mit Elementor

Als Nächstes musst du Elementor Pro herunterladen und installieren. Es enthält einen WordPress Form Builder, mit dem du eigene Formulare entwerfen und Feedback von deinen Besuchern sammeln kannst.

Nachdem du Elementor Pro aktiviert hast, gehst du zu Elementor > Einstellungen > Integrationen. Scrolle nach unten zum Abschnitt Mailchimp und füge den API-Schlüssel ein:

Füge deinen Mailchimp-API-Schlüssel ein.
Füge deinen Mailchimp-API-Schlüssel ein.

Klicke auf API-Schlüssel validieren. Wenn die Integration erfolgreich ist, siehst du ein grünes Häkchen neben dieser Schaltfläche. Danach speicherst du deine Änderungen.

Jetzt kannst du mit der Gestaltung deines Anmeldeformulars beginnen. Füge zunächst einen neuen Beitrag oder eine neue Seite hinzu und wähle Mit Elementor bearbeiten:

Wähle
Wähle „Mit Elementor bearbeiten“.

Scrolle im Elementor-Editor nach unten zu den Pro-Widgets. Hier siehst du eine Option für Formulare. Ziehe dieses Widget per Drag and Drop auf die Seite:

Ziehe das Widget
Ziehe das Widget „Formular“ auf die Seite.

Elementor erstellt automatisch ein einfaches Formular mit den Feldern Name, E-Mail-Adresse und Nachricht. Du kannst das Formular jedoch weiter anpassen, bis es deinen Bedürfnissen entspricht:

Passe das Formular an, wie du willst.
Passe das Formular an, wie du willst.

Wenn du zum Beispiel ein Anmeldeformular hinzufügen möchtest, braucht es normalerweise keine Nachrichtenfelder. Du kannst einfach auf das X neben diesem Punkt klicken.

Um Leads zu generieren, musst du die Besucher auffordern, sowohl ihren Namen als auch ihre E-Mail-Adresse anzugeben. Dazu klickst du auf jedes Feld und wählst Ja neben Erforderlich:

Klicke auf die entsprechenden Elemente.
Klicke auf die entsprechenden Elemente.

Dann gehst du zum Abschnitt Schaltflächen, um die Aktionsschaltfläche zu bearbeiten. Obwohl der Standardtext „Senden“ lautet, solltest du ihn in „Abonnieren“ oder „Anmelden“ ändern

Bearbeite die Buttonaktion in Elementor.
Bearbeite die Buttonaktion in Elementor.

Du kannst die Größe und die Spaltenbreite des Buttons nach Bedarf ändern. Wenn du möchtest, kannst du auch ein Symbol hinzufügen.

Schritt 4: Mailchimp verbinden

Nachdem du dein Formular nach deinen Wünschen angepasst hast, ist es an der Zeit, dein Mailchimp-Konto zu verbinden. Dazu findest du den Abschnitt Aktionen nach dem Absenden:

Rufe die Option
Rufe die Option „Actions After Submit“ auf.

Dann klickst du auf das + Symbol und wählst Mailchimp aus dem Dropdown-Menü:

Wähle Mailchimp aus dem Dropdown-Menü.
Wähle Mailchimp aus dem Dropdown-Menü.

Dadurch wird unten ein neuer Bereich mit dem Titel Mailchimp erstellt. Wenn du darauf klickst, siehst du Optionen, um einen API-Schlüssel und eine Zielgruppe festzulegen:

Lege bei Bedarf API- und Zielgruppenoptionen fest.
Lege bei Bedarf API- und Zielgruppenoptionen fest.

Wenn du deinen API-Schlüssel in den Integrationseinstellungen eingegeben hast, kannst du den Abschnitt API-Schlüssel als Standard belassen. Wähle dann die Zielgruppe aus, die du mit diesem Anmeldeformular verknüpfen möchtest:

Wähle die entsprechende Zielgruppe von Mailchimp.
Wähle die entsprechende Zielgruppe von Mailchimp.

Du kannst auch alle Gruppen oder Tags auswählen, die du in Mailchimp erstellt hast. Passe schließlich die Einstellungen für die Feldzuordnung basierend auf den Feldern an, die du im Formular angegeben hast. So erfährt Mailchimp, welche Informationen es in seinem System katalogisieren soll.

In diesem Beispiel enthält unser Anmeldeformular nur ein Namens- und ein E-Mail-Feld. Das bedeutet, dass wir nur diese Informationen in den Abschnitt „Field Mapping“ aufnehmen werden:

Field Mapping Optionen.
Field Mapping Optionen.

Navigiere schließlich zu Zusätzliche Optionen und suche nach Benutzerdefinierte Nachrichten. Aktiviere diese Option, um eine Erfolgsmeldung anzuzeigen, wenn jemand das Formular ausgefüllt hat:

Füge eine Erfolgsmeldung für deine Nutzer hinzu.
Füge eine Erfolgsmeldung für deine Nutzer hinzu.

Die Standardnachricht lautet: „Dieses Formular wurde erfolgreich abgeschickt.“ Du könntest dies in etwas wie „Danke, dass du dich angemeldet hast“ ändern Du kannst auch benutzerdefinierte Meldungen für Fehler und Pflichtfelder hinzufügen.

Schritt 5: Füge das Formular zu deiner Webseite hinzu

Wenn du mit der Anpassung des Formulars fertig bist, wähle Veröffentlichen. Überlege dir, ob du das Anmeldeformular selbst benutzen willst, um zu prüfen, ob es richtig funktioniert. Dann kannst du sehen, ob die neue E-Mail-Adresse in deinem Mailchimp-Konto gespeichert ist.

Vielleicht möchtest du dieses neue Formular auch in mehrere Bereiche deiner Webseite einfügen. Du kannst es als globales Widget speichern, um diesen Prozess zu vereinfachen.

Suche zunächst das Symbol Formular bearbeiten auf der rechten Seite des Formulars. Klicke mit der rechten Maustaste darauf und wähle Als globales Widget speichern:

Als Global speichern.
Als Global speichern.

Dadurch wird das Anmeldeformular zu deinen Globalen Einstellungen hinzugefügt. Wenn du eine neue Seite oder einen neuen Beitrag hinzufügst, kannst du einfach zu GLOBAL gehen, das vorgefertigte Formular suchen und es an die gewünschte Stelle ziehen:

Ziehe das globale Formular an die gewünschte Stelle.
Ziehe das globale Formular an die gewünschte Stelle.

Wenn du überlegst, wo du deine Anmeldeformulare auf deiner Webseite platzieren willst, solltest du auch an die Sichtbarkeit denken. Auf einer gut gestalteten Landing Page, die Besucher/innen sehen können, wenn sie deine Website betreten, kannst du potenziell mehr Leads sammeln. Es kann jedoch sein, dass die Nutzer/innen nicht daran interessiert sind, sich so früh anzumelden.

Manchmal ist es besser, Kontaktformulare in den Inhalt oder in die Seitenleiste einzubauen. Auch wenn dies etwas weniger sichtbar ist als eine Landing Page, können sich die Besucher/innen auf diese Weise anmelden, während sie mit deiner Webseite interagieren.

Das Formular in der Fußzeile zu platzieren, kann ebenfalls eine praktische Option sein. Nutzer/innen, die bis zum Ende deiner Webseite scrollen, sind oft neugierig auf deine Inhalte und daher eher geneigt, sich anzumelden. Allerdings ist diese Platzierung nicht so sichtbar wie andere Optionen.

Die besten Add-Ons für deine Elementor/Mailchimp-Integration

Mit den besten WordPress-Plugins kannst du eine maßgeschneiderte Webseite für dein Publikum erstellen. Elementor Pro bietet dir zahlreiche Optionen für die Gestaltung von Formularen und die Integration von Drittanbieterdiensten wie Mailchimp.

Vielleicht brauchst du aber noch mehr fortgeschrittene Funktionen. Mit einigen Add-ons hast du mehr Kontrolle über das Aussehen und die Funktionalität deiner Formulare.

1. Essential Addons

Die Essential Addons sind eine großartige Möglichkeit, die Kernfunktionen von Elementor zu erweitern. Mit diesem Tool kannst du auf mehr kreative Elemente zugreifen. Dazu gehören interaktive Funktionen wie ein Woo Product Grid, ein Countdown und eine filterbare Galerie:

Essential Addons für Elementor
Essential Addons.

Merkmale:

  • Erweiterte Inhaltswidgets zum Hinzufügen von Veranstaltungskalendern, Infoboxen, Erfahrungsberichten und mehr
  • WooCommerce-Elemente wie Produktgalerien, Raster und Karussells
  • Integration mit Drittanbieter-Plattformen wie Mailchimp und Ninja Forms

Wenn du Essential Addons auf deiner WordPress-Webseite installierst, kannst du Mailchimp mit den Form Styler Elements integrieren. Hier kannst du einfach deinen Mailchimp-API-Schlüssel eingeben, wodurch ein EA Mailchimp-Widget zum Elementor-Editor hinzugefügt wird. Dann kannst du das Widget per Drag & Drop auf eine Seite ziehen und nach Bedarf weiter anpassen.

Preis: Die Abonnements für Essential Addons beginnen bei 39,97 $ für eine Webseite. Es enthält über 70 Widgets und sieben Erweiterungen.

2. Happy Addons

Mit Happy Addons kannst du aus über 400 vorgefertigten Blöcken und Widgets wählen, die du in den Elementor-Editor importieren kannst. Um den Erstellungsprozess zu beschleunigen, kannst du Design-Voreinstellungen festlegen.

Mit Happy Addons ist es auch möglich, Elemente von einer Webseite zu kopieren und in eine Webseite mit einer anderen Domain einzufügen:

Happy Addons für Elementor
Happy Addons.

Funktionen:

  • Verschachtelung von Abschnitten
  • Domainübergreifendes Kopieren und Einfügen
  • über 400 vorgefertigte Design-Sets

Nachdem du deinen Mailchimp-API-Schlüssel unter Credentials in den Happy Addons-Einstellungen eingegeben hast, kannst du mit Elementor ein Mailchimp-Formular-Widget per Drag & Drop auf eine Seite ziehen.

Dann kannst du die erweiterten Einstellungen des Tools bearbeiten, um die Ränder, Farben und die Typografie des Formulars anzupassen. Außerdem kannst du die Felder und Schaltflächen so gestalten, dass sie einen eigenen Hintergrund, Schatten, Schriftgröße und -abstand haben.

Preis: Happy Addons bietet Jahresabonnements ab 39 $ für eine Webseite an.

3. ElementsKit

Wie die anderen Optionen auf dieser Liste ist ElementsKit ein All-in-One-Plugin-Paket mit zusätzlichen Widgets und Erweiterungen für Elementor. Es bietet mehr Anpassungsmöglichkeiten bei der Bearbeitung von Funktionsmerkmalen wie Kopf- und Fußzeilen oder Menüs.

Außerdem enthält ElementsKit einen Custom Widget Builder, falls du keine passende Option für dich findest:

ElementsKit Add On
ElementsKit.

Merkmale:

  • Benutzerdefinierte Steuerelemente wie Multi Widgets, AjaxSELECT2 und Image-Picker
  • 85+ Widgets und Erweiterungen
  • 500+ vorgefertigte Webblöcke

Mit ElementsKit kannst du Elementor und Mailchimp komplett über den Elementor-Editor integrieren. Du musst nur das Mailchimp-Widget per Drag & Drop auf eine Seite ziehen und den API-Schlüssel festlegen. Dann kannst du deinem Formular benutzerdefinierte Felder und Icons hinzufügen.

Preis: Jahresabonnements für ElementsKit gibt es ab 39 $ für eine Webseite.

4. The Plus Addons

The Plus Addons wirbt damit, ein Elementor-Tool für alle zu sein. Mit vorgefertigten Vorlagen und ausführlichen YouTube-Tutorials können auch Anfänger schnell lernen, wie man eine funktionale Webseite gestaltet.

Außerdem ist The Plus Addons vollgepackt mit umfangreichen Widgets, die anpassbare Funktionen für Designer bieten:

The Plus Addons für Elementor
The Plus Addons.

Funktionen:

  • 96+ erweiterte Elementor Widgets
  • Listing-Optionen zur Anzeige von Produkten, Blogbeiträgen und Bildergalerien
  • Einfach zu bedienender Builder für benutzerdefinierte Beitragstypen

Das Plus Addons Tool bietet eine der einfachsten Möglichkeiten, Elementor und Mailchimp zu integrieren. Kopiere in deinem Mailchimp-Konto den API-Schlüssel und die Listen-ID deines Publikums. Gehe dann zu den API-Verbindungseinstellungen und füge diese Informationen ein. Danach kannst du ein Mailchimp-Abonnement-Widget per Drag & Drop einfügen und sein Layout und seine Struktur bearbeiten.

Preis: Die Plus Addons haben eine kostenlose Version. Die Auswahl an Paketen enthält jedoch mehr Widgets und Erweiterungen. Diese Pakete beginnen bei 31 $ pro Jahr.

Zusammenfassung

Obwohl die Kombination von Mailchimp und Elementor entmutigend erscheinen mag, kann jeder diese beiden Tools integrieren. Auf diese Weise kannst du benutzerdefinierte Anmeldeformulare erstellen, die deinen Vorstellungen von Aussehen und Funktionalität entsprechen.

Hier sind die fünf einfachen Schritte zur Integration von Elementor und Mailchimp auf deiner Webseite:

  1. Melde dich für ein Mailchimp-Konto an.
  2. Erstelle eine Zielgruppe und einen API-Schlüssel.
  3. Gestalte ein Mailchimp-Anmeldeformular mit Elementor.
  4. Verbinde Mailchimp.
  5. Füge dein Formular zu deiner Webseite hinzu.

E-Mail-Marketing und Design sind entscheidend für den Erfolg deiner Website. Außerdem solltest du mit einem Hosting-Anbieter zusammenarbeiten.

Mit unseren Hosting-Plänen (Anwendungs-Hosting, Datenbank-Hosting und Managed WordPress-Hosting) kann Kinsta die Leistung deiner Seite auf die nächste Stufe heben. Kontaktiere uns und erfahre mehr!

Hast du irgendwelche Fragen zur Integration von Elementor und Mailchimp? Frag uns im Kommentarbereich unten!

Matteo Duò Kinsta

Chefredakteur bei Kinsta und Content Marketing Berater für WordPress Plugin-Entwickler. Verbinde dich mit Matteo auf Twitter.