So entfernen Sie die Namensfelder des Divi Email Optin-Moduls

Im heutigen Tutorial zeigen wir Ihnen, wie Sie die Namensfelder des Divi Email Optin-Moduls entfernen. Beim Löschen der Namensfelder geht es nicht nur darum, sicherzustellen, dass die Namens- und Nachnamensfelder, die im E-Mail-Optin-Modul standardmäßig vorhanden sind, nicht visuell erscheinen. Es geht auch um die Funktionalität. Standardmäßig sind für ein Abonnement der Vorname und die E-Mail-Adresse erforderlich. Aus diesem Grund hilft es nicht, die Namensfelder unsichtbar zu machen.

Um Ihnen dabei zu helfen, zeigen wir Ihnen jedoch, wie Sie die Namensfelder visuell loswerden und auch funktional zum Laufen bringen

Ergebnis

Wenn Sie diesem Beitrag Schritt für Schritt folgen, erhalten Sie folgendes Ergebnis:

Warum Sie die Namensfelder des E-Mail-Optin-Moduls entfernen möchten

Es gibt wahrscheinlich einige Gründe, warum Sie die Namensfelder entfernen möchten. Wenn Sie keine Ahnung haben, warum; Sehen Sie sich zwei Gründe an, die unten aufgeführt sind.

Um die Zeit Ihres Besuchers zu sparen

Der erste Grund behält die Benutzererfahrung im Auge. Indem Sie nur nach einem E-Mail-Feld fragen, haben Ihre Besucher die Möglichkeit, schnell mit Ihnen zu interagieren. Das einzige, was sie tun müssen, ist, ihre E-Mail-Adresse einzugeben, und Sie werden ihnen den Inhalt zur Verfügung stellen, an dem sie interessiert sind.

Um die Barriere zu verkleinern/auf schnelles Verhalten zu vertrauen

Wenn die Leute alle Optin-Module ausfüllen würden, auf die sie im Web stoßen, würde ihnen wahrscheinlich die Zeit davonlaufen. Optin-Formulare sind heutzutage ein Bestandteil aller Arten von Websites. Die Zeiten, in denen Menschen von ihnen fasziniert waren, sind vorbei. Wenn sie sehen, dass sie zu viel Mühe aufwenden müssen (sprich: sie müssen zu viele Pflichtfelder ausfüllen), um abonniert zu werden, werden sie es wahrscheinlich einfach ignorieren. Wenn Sie jedoch nur nach der E-Mail-Adresse fragen, ist es wahrscheinlicher, dass sie damit einverstanden sind. Es dauert maximal 5 Sekunden, um einfach eine E-Mail-Adresse einzugeben (was weniger ist als die durchschnittliche Aufmerksamkeitsspanne von 7 Sekunden, die Menschen haben).

So entfernen Sie die Namensfelder des Divi Email Optin-Moduls

Abonnieren Sie unseren Youtube-Kanal

Lassen Sie uns dies ohne weitere Verzögerung zum Laufen bringen.

Neue Seite hinzufügen

Das erste, was Sie tun müssen, ist, eine neue Seite hinzuzufügen oder die Seite zu öffnen, auf der Sie das E-Mail-Optin-Modul nur mit dem E-Mail-Feld platzieren möchten.

E-Mail-Optionsmodul hinzufügen

Sobald Sie sich auf dieser Seite befinden, fügen Sie das E-Mail-Optionsmodul an der gewünschten Stelle hinzu. Sobald Sie die Seite mit dem E-Mail-Optin-Modul in der Vorschau anzeigen, sehen Sie, dass sie wie folgt aussieht:

Wenn Sie fortfahren und auf die Schaltfläche "Abonnieren" klicken, ohne ein Feld auszufüllen, werden Sie feststellen, dass es nicht funktioniert. Standardmäßig erfordert das E-Mail-Optin-Modul einen Vornamen und einen E-Mail-Wert, damit es funktioniert. Deshalb wird es nicht funktionieren, die Felder einfach verschwinden zu lassen (aber immer noch zu existieren). Sie zu entfernen wird auch nicht funktionieren.

Sie können jedoch dem Vornamensfeld einen Standardwert hinzufügen. Sie könnten etwas wie '*' verwenden, um sicherzustellen, dass das Feld einen Wert hat. Eine andere Sache, die wir tun müssen, ist, die Labels zu löschen, die mit den Eingabefeldern verknüpft sind. Um all dies zu erreichen, verwenden wir etwas jQuery-Code und CSS-Code.

CSS-Code hinzufügen

Wir beginnen mit dem Hinzufügen des CSS-Codes. Der CSS-Code stellt lediglich sicher, dass die beiden Felder nicht auf der Seite angezeigt werden. Für den funktionalen Teil müssen wir einige jQuery-Codezeilen verwenden.

Sie können den CSS-Code für eine bestimmte Seite oder für die gesamte Website anwenden. Die von Ihnen verwendete Methode hängt höchstwahrscheinlich davon ab, wie oft Sie das Codemodul nur mit dem E-Mail-Feld verwenden möchten. Wenn Sie das E-Mail-Optin-Modul mehrmals und auf verschiedenen Seiten verwenden möchten, verwenden Sie die zweite Methode. Wenn Sie nur für eine Seite zählen möchten, verwenden Sie die erste Methode.

CSS-Code insbesondere zu einer Seite hinzufügen

Um den CSS-Code insbesondere zu einer Seite hinzuzufügen, klicken Sie auf das folgende Symbol innerhalb der Seite, an der Sie gerade arbeiten:

Kopieren Sie im angezeigten Bildschirm die folgenden CSS-Codezeilen und fügen Sie sie ein:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

CSS-Code zu Theme-Optionen hinzufügen

Um den CSS-Code zur gesamten Website hinzuzufügen, gehen Sie zu Ihrem WordPress-Dashboard > Divi > Theme-Optionen > Scrollen Sie auf der Registerkarte Allgemein nach unten und fügen Sie die folgenden Zeilen CSS-Code zum Feld Benutzerdefiniertes CSS hinzu:

.et_pb_newsletter_form p:nth-child(2){
display: none !important;
}
.et_pb_newsletter_form p:nth-child(3) {
display: none !important;
}

jQuery-Code hinzufügen

Als nächstes fügen wir den benötigten jQuery-Code hinzu. Um den jQuery-Code hinzuzufügen, haben Sie ebenfalls zwei Möglichkeiten: Fügen Sie den Code hinzu, damit er für eine bestimmte Seite gilt, oder fügen Sie den Code für die gesamte Website hinzu.

jQuery-Code insbesondere zu einer Seite hinzufügen (Code-Modul)

Um den jQuery-Code insbesondere zu einer Seite hinzuzufügen, fügen Sie ein Code-Modul direkt unter dem E-Mail-Optin-Modul hinzu. Öffnen Sie das Code-Modul und fügen Sie die folgenden Zeilen des jQuery-Codes ein:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Da wir das Label entfernt haben, stellen wir sicher, dass der Wert des E-Mail-Adressfelds nichts enthält. Um die Beschriftung auszugleichen und sicherzustellen, dass die Leute wissen, was sie eingeben müssen, verwenden wir stattdessen einen Platzhalter. In diesem Fall ist der Platzhalter 'E-Mail-Adresse', aber Sie können dies gerne in etwas anderes umwandeln.

jQuery-Code zu den Theme-Optionen hinzufügen

Damit der jQuery-Code für die gesamte Website gilt, können Sie ihn in den Theme-Optionen platzieren. Gehen Sie dazu zu Ihrem WordPress-Dashboard > Divi > Theme-Optionen > Integration und platzieren Sie die folgenden Zeilen des jQuery-Codes im Kopf Ihrer Website:

<script type="text/javascript">
jQuery(function($){
$(".et_pb_contact_form_label").remove();
$("#et_pb_signup_firstname").val("*");
$("#et_pb_signup_email").val("");
$("#et_pb_signup_email").attr("placeholder", "Email address");
});
</script>

Ergebnis

Wenn Sie jeden Schritt in diesem Beitrag befolgen und den CSS- und jQuery-Code auf eine bestimmte Seite oder auf alle Seiten Ihrer Website anwenden, sollten Sie folgendes Ergebnis erzielen:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein E-Mail-Optin-Modul erstellen, das nur über ein E-Mail-Adressfeld verfügt. Der Grund, warum Sie ein solches Ergebnis erzielen möchten, ist die Wirksamkeit. Wenn Sie nur nach der E-Mail-Adresse fragen, muss Ihr Publikum weniger Aufwand betreiben, um sich anzumelden, und Sie können Ihre E-Mail-Liste schneller erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!

Ausgewähltes Bild von adichrisworo / shutterstock.com