So erstellen Sie einen täglichen und wöchentlichen E-Mail-Newsletter in WordPress

Wir werden häufig von unseren Benutzern gefragt, wie Sie einen täglichen und wöchentlichen E-Mail-Newsletter in WordPress erstellen können. Wir verwenden diese Option in unserem E-Mail-Anmeldeformular, sodass Benutzer täglich oder wöchentlich Newsletter auswählen können. In diesem Artikel zeigen wir Ihnen, wie Sie einen täglichen und wöchentlichen E-Mail-Newsletter in WordPress erstellen.

Warum täglich oder wöchentlich E-Mail-Newsletter hinzufügen??

Alle Marketingexperten sind sich einig, dass E-Mail-Marketing für jeden Blog oder jede Website von entscheidender Bedeutung ist. Es ist kostengünstig und sehr ansprechend. In unserem Leitfaden erfahren Sie, warum Sie sofort mit dem Erstellen Ihrer E-Mail-Liste beginnen sollten.

Nicht alle Benutzer möchten jedoch täglich E-Mail-Updates erhalten. Einige von ihnen möchten vielleicht einmal pro Woche eine E-Mail erhalten.

Anstatt Abonnenten zu verlieren, wenn sie unerwartete E-Mails erhalten, ist es besser, ihnen eine wöchentliche Digest-Option anzubieten. Auf diese Weise können Ihre Benutzer steuern, wie oft sie von Ihnen hören möchten, und es wird wahrscheinlicher, dass sie abonnieren.

Das ist was wir bauen werden:

Hinweis: Für dieses Tutorial müssen Sie sich bei einem E-Mail-Marketing-Service anmelden. Wir verwenden MailChimp für dieses Tutorial, das Grundkonzept ist jedoch für alle E-Mail-Dienste gleich.

Melden Sie sich bei Ihrem Konto an und klicken Sie auf den Navigationspunkt Listen. Sie sehen eine Liste Ihrer Listen. Klicken Sie auf die Option Gruppen »Gruppen anzeigen.

Da Sie noch keine Gruppen haben, wird ein solcher Bildschirm angezeigt. Sie können klicken, um das Video anzusehen, um mehr darüber zu erfahren. Um diesem Lernprogramm zu folgen, müssen Sie auf die Schaltfläche Gruppen erstellen klicken.

Wenn Sie auf diese Schaltfläche klicken, wird ein solcher Bildschirm angezeigt.

Sie haben die Möglichkeit, Gruppenoptionen im Anmeldeformular anzuzeigen. Sie können die Optionen als Kontrollkästchen auswählen, z. B. unsere Website, Optionsfelder, Dropdown-Listen oder überhaupt nicht anzeigen. In unserem Fall sind Checkboxen die ideale Wahl. Wählen Sie den Gruppentitel aus und fügen Sie die gewünschten Optionen hinzu. Da wir nur tägliche und wöchentliche Newsletter erstellen, werden wir nur diese beiden hinzufügen. Fühlen Sie sich frei, es so zu gestalten, wie wir es auf unserer Website WPB Daily gemacht haben. Speichern Sie Gruppen und Sie sind mit diesem Teil fertig.

Kommen wir nun zu den Formularen in unserer Liste. Gehen Sie zurück zur Listenseite. Klicken Sie auf den Link Formulare.

Sie sehen eine Seite, die zeigt, wie Ihr Anmeldeformular aussieht. Es gibt einen Builder, mit dem Sie die Header-Bilder und dergleichen anpassen können. Wir haben unser Formular angepasst, so dass es so aussieht.

Der einzige Grund, warum wir dies überprüfen, ist zu sehen, dass die Kontrollkästchen vorhanden sind. Sobald dies erledigt ist, scrollen Sie zum oberen Rand der Seite und klicken Sie auf "Für Ihre Website". Dort erhalten Sie den Code zum Einbetten des Anmeldeformulars.

Sie sehen die Option zum Erstellen von Code zum Einbetten von Formularen. Es gibt mehrere Optionen, aber wir wählen die Option Naked Form. Auf diese Weise können wir die Dinge ganz einfach an Ihre Wünsche anpassen.

Die Chancen stehen gut, dass Sie die Überschriften und erforderlichen Feldangaben in Ihrem Formular nicht möchten. Klicken Sie also auf das Optionsfeld und passen Sie die Einstellungen wie in der Abbildung oben an. Klicken Sie dann auf Create Embed Code. Der Einbettungscode wird auf derselben Seite direkt unter der Schaltfläche angezeigt.

Kopieren Sie den Code und fügen Sie ihn in Ihr Design ein. Die Position kann sich überall befinden, wo Sie das Anmeldeformular anzeigen möchten. In unserem Fall ist es in der Seitenleiste, also fügen wir den Code in die Datei sidebar.php ein. Nachdem Sie den Code eingefügt haben, ist es unser Ziel, alle Styling-Divs zu entfernen. Wir behalten nur die grundlegenden Formularfelder bei. Ihr Ergebnis sollte ungefähr so ​​aussehen:

     List25 Daily List25 Wöchentlich  

Beachten Sie, dass wir die Senden-Schaltfläche direkt nach dem E-Mail-Feld verschoben haben. Wir haben auch das Label für das E-Mail-Feld entfernt, sodass es nur als leeres Feld ohne Standardwerttext angezeigt wird. Wir haben auch die Fehlerfelder beseitigt, vor allem, weil eine neue Erklärung zum Erfolg des Tabs viel besser funktioniert. Da unsere Benutzer keine Ahnung haben, was Sie in unser leeres Eingabefeld, das für E-Mails vorgesehen ist, eingeben, müssen wir sie darüber informieren. Dies erreichen Sie am besten mit den Werten onblur und onfocus.

Lassen Sie uns fortfahren und ersetzen Sie das E-Mail-Eingabefeld wie folgt:

Der Code bewirkt, dass der Text "E-Mail eingeben ..." in das E-Mail-Eingabefeld eingefügt wird. Wenn der Benutzer jedoch auf das Feld klickt, um seine E-Mail-Adresse einzugeben, wird diese automatisch gelöscht.

Nachdem wir uns darum gekümmert haben, können wir unserem Formular einige zusätzliche Klassen hinzufügen:

        List25 Daily List25 Wöchentlich    

Beachten Sie, dass wir zusätzliche Divs hinzugefügt haben. Wir haben auch eine zusätzliche Klasse zum zweiten Ankreuzfeld und die Schaltfläche zum Senden hinzugefügt. Nachdem wir nun unsere html-Elemente definiert haben, können wir den Stil in die css-Datei (style.css) einfügen..

 .abonnieren width: 296px; Höhe: 38px; border: fest #bbbbbb 1px; margin: 0 0 60px 0; .subscribecheckboxes margin: 20px 0 0 0; Schriftfamilie: 'ProximaNovaRegular', serifenlos; Schriftgröße: 14px; color: # 626262; .secondcheckbox margin: 0 0 0 28px; .emailupdatesinput width: 162px; Höhe: 38px; Grenze: keine; Schriftfamilie: Georgia, Serif; Schriftgröße: 14px; Schriftstil: kursiv; Farbe: # 949494; Auffüllen: 0 10px 0 10px; float: left; .subscribesubmitbutton background: # ff370f; Höhe: 40px; Grenze: keine; Breite: 115px; Marge: -1px -60px 0 0; Schwimmer: links; Schriftfamilie: 'ProximaNovaRegular', serifenlos; Schriftgröße: 12px; Farbe: #ffffff; Text-Transformation: Großbuchstaben; Auffüllen: 0 1px 0 0; Cursor: Zeiger; 

Der einzige Grund, warum wir ProximaNovaRegular haben, ist der, dass wir diese Schrift mit font-face verwenden. Sie müssen diese durch die Schriftart ersetzen, die Sie in Ihrem Design verwenden.

Nachdem Sie das CSS hochgeladen haben, würde Ihr Endergebnis folgendermaßen aussehen:

Jetzt, da Sie mit dem Styling-Teil fertig sind, müssen Sie Kampagnen in Ihrem MailChimp- oder Aweber-Dashboard für jede spezifische Gruppe erstellen. Wir verwenden RSS-zu-E-Mail-Kampagnen (RSS-gesteuerte Kampagnen). Klicken Sie auf den Menüpunkt "Kampagnen" und bewegen Sie den Mauszeiger auf die Kampagnenschaltfläche. Sie sehen die Option RSS-gestützte Kampagne.

Die Schritte danach sind ziemlich intuitiv. Sie geben Ihre RSS-Feed-URL ein und wählen die Uhrzeit aus. Wählen Sie dann das Segment Ihrer Liste aus und fertig.

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, nicht nur das Erstellen täglicher und wöchentlicher E-Mail-Newsletter zu verstehen, sondern auch, wie Sie Ihre E-Mail-Listen segmentieren und gruppieren.