5 E-Mail-Opt-in-Designs, die Sie mit dem E-Mail-Opt-in-Modul von Divi erstellen können

Wir alle lieben neue Abonnenten unserer E-Mail-Liste. Und eine der wichtigsten Möglichkeiten, neue Abonnenten zu gewinnen, besteht darin, Ihren Besuchern ein gut gestaltetes E-Mail-Anmeldeformular zur Verfügung zu stellen. Aus diesem Grund zeige ich Ihnen in diesem Tutorial, wie Sie mit dem Divi-E-Mail-Opt-In-Modul fünf verschiedene Designs erzielen, um Ihre Vorstellungskraft zu wecken, was mit diesem leistungsstarken und flexiblen Modul möglich ist.

Vorgeschmack

Hier ist eine Vorschau auf die fünf Divi Email Opt-in Module Designs, die wir heute in Angriff nehmen werden.

#1 Shadow Stacks Opt-in

Beginnen Sie mit der Gestaltung Nr. 1

#2 Großes und minimales Opt-in

Beginnen Sie mit der Gestaltung #2

#3 Skinny Opt-in

Beginnen Sie mit der Gestaltung #3

#4 Anmeldung zum Buchangebot

Beginnen Sie mit der Gestaltung #4

#5 Opt-in für ausgeschnittenen Rahmen

Beginnen Sie mit der Gestaltung #5

Was Sie brauchen, um loszulegen

Abonnieren Sie unseren Youtube-Kanal

Für dieses Tutorial benötigen Sie nur Divi. Wir werden jedes von Grund auf neu erstellen, sodass kein vorgefertigtes Layout erforderlich ist. Ich werde jedoch einige Bilder aus einigen unserer Layoutpakete verwenden, aber Sie können Ihre eigenen verwenden, wenn Sie möchten.

Außerdem ist es wichtig zu wissen, dass Sie die Felder des Opt-In-Formulars auf der Live-Site erst sehen können, wenn Sie Ihrem E-Mail-Opt-In-Modul einen E-Mail-Anbieter/eine E-Mail-Liste zuweisen. Sie können dies in Ihren E-Mail-Optin-Einstellungen unter E-Mail-Konto tun.

Kommen wir nun zu diesen Designs!

#1 Shadow Stacks Opt-in

Dieses Design fügt dem Divi-E-Mail-Opt-In-Modul zwei Boxschatten hinzu, um einen einzigartigen Stapeleffekt zu erzielen, der das Formular zum Knallen bringt. Der erste Boxschatten wird dem E-Mail-Opt-In-Modul hinzugefügt und der zweite Boxschatten wird der Zeile hinzugefügt, die eine benutzerdefinierte Größe und einen benutzerdefinierten Rahmen hat, damit es funktioniert.

Hier ist, wie es gemacht wird.

Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile das E-Mail-Opt-in-Modul hinzu.

Öffnen Sie die E-Mail-Opt-In-Einstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe: #1a0a38
Layout: Körper oben, Form unten
Felder mit abgerundeten Ecken: 0px
Textausrichtung: Mitte
Gewicht der Titelschrift: Leicht
Titeltextgröße: 36px
Schaltflächentextfarbe: #ffffff
Schaltflächenhintergrundfarbe: #00ac69
Breite des Tastenrahmens: 0px
Schaltflächenrandradius: 0px
Benutzerdefinierte Polsterung: 3vw oben, 3vw unten, 5vw links, 5vw rechts

Fügen wir nun unsere erste Box-Schattenebene hinter unserem E-Mail-Opt-In-Modul hinzu.

Box Shadow: siehe Screenshot
Horizontale Position des Kastenschattens: 25px
Vertikale Position des Kastenschattens: -25px
Schattenfarbe: rgba(26,10,56,0,82)

Lassen Sie uns nun einen kleinen Ausschnitt aus benutzerdefiniertem CSS hinzufügen, um den linken Padding zu entfernen, der standardmäßig zum Formular hinzugefügt wird. Gehen Sie zum Tab "Erweitert" und fügen Sie das folgende CSS unter Opt-in-Formular hinzu.

padding-left: 0px !important;

Das kümmert sich um die Einstellungen des E-Mail-Opt-In-Moduls. Jetzt bearbeiten wir unsere Zeile. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Breite: 600px
Benutzerdefiniertes Padding: 25px oben, 0px unten, 25px rechts
Breite des unteren Rands: 25px
Farbe des unteren Rands: rgba(0,0,0,0)
Linker Randbreite: 25px
Farbe des linken Rands: rgba(0,0,0,0)

Jetzt können wir der Zeile den Boxschatten hinzufügen.

Box Shadow: siehe Screenshot
Horizontale Position des Kastenschattens: 50px
Vertikale Position des Boxschattens: -50px
Stärke der Box-Schattenausbreitung: -25px
Schattenfarbe: rgba(26,10,56,0,55)

Schauen wir uns nun das endgültige Design an.

#2 Großes und minimales Opt-in

Dieses E-Mail-Opt-In-Design ist minimal, sauber und groß. Die Formularfelder werden mit der Größe des Browsers skaliert, sodass es auf allen Geräten gut aussieht. Und es ist nicht zu groß, dass es den Benutzer zum Scrollen zwingt.

So geht's.

Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile das E-Mail-Opt-in-Modul hinzu.

Öffnen Sie die E-Mail-Opt-In-Einstellungen und aktualisieren Sie den Inhalt, um Ihren Titel- und Fußzeilentext aufzunehmen.

Aktualisieren Sie dann den Hintergrund mit einer dunklen Farbe oder einem dunklen Bild:

Hintergrundfarbe: #121212
Hintergrundbild: Dies ist optional. Ich verwende einen aus dem Podcast-Layout-Paket

Bevor wir zum Design-Tab für weitere Anpassungen übergehen, müssen wir Platz für die großen Formularelemente schaffen, die wir hinzufügen werden. Gehen Sie dazu zu den Zeileneinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Breite: 100%

Tipp: Die Verwendung einer benutzerdefinierten Breite von 100 % ist eine großartige Möglichkeit, um sicherzustellen, dass Ihr Design auf Mobilgeräten keinen rechten oder linken Rand erhält. Wenn Sie die Option "Vollbreite erstellen" verwenden, beträgt Ihre maximale Breite 89%, sodass Sie auf Mobilgeräten immer noch Margen haben.

Springen Sie nun zurück in die Einstellungen des E-Mail-Opt-in-Moduls und aktualisieren Sie das folgende Design:

Layout: Körper oben, Form unten

Hintergrundfarbe des Formularfelds: rgba(0,0,0,0)
Felder mit abgerundeten Ecken: 0px
Breite des unteren Rands der Felder: 2px
Farbe des unteren Rands der Felder: #ffffff

Textausrichtung: Mitte

Titelschriftart: Lato
Gewicht der Titelschrift: Leicht
Titelschriftart: TT
Titeltextgröße: 4vw
Höhe der Titelzeile: 1em

Feldtextfarbe: #ffffff
Feldschriftart: Lato
Feldschriftstärke: Leicht
Feldtextgröße: 3.5vw
Feldbuchstabenabstand: 0.1em
Feldlinienhöhe: 1,3em

Körperbuchstabenabstand: 0.5em

Schaltflächentextgröße: 4vw
Schaltflächenrandradius: 0px
Tasten-Buchstaben-Abstand: 0.1em
Schaltflächenschrift: Lato
Schriftstärke: Leicht
Benutzerdefinierte Polsterung: 10vw oben, 10vw unten, 10vw links, 10vw rechts

Beachten Sie die Verwendung der Längeneinheit vw für die Schriftgröße in Kombination mit der Längeneinheit em für Zeilenhöhe und Buchstabenabstand. Dadurch können Text und Design bei der Anpassung Ihres Browsers nahtlos skaliert werden.

Der letzte Schritt besteht darin, ein paar Schnipsel von benutzerdefiniertem CSS zu verwenden, um das Design zu verfeinern. Gehen Sie zum Tab "Erweitert" und fügen Sie das folgende benutzerdefinierte CSS unter Opt-in-Formularfelder hinzu:

font-size: 3.5vw;

Dadurch kann die Textgröße bei der Eingabe mit dem Platzhaltertext in Ihren Formularfeldern übereinstimmen.

Dann fügen wir einen benutzerdefinierten Rand über der Schaltfläche hinzu, um ihm etwas Luft zum Atmen zu geben. Fügen Sie unter Abonnieren-Schaltfläche Folgendes hinzu:

margin-top: 3.5vw;

Schauen wir uns nun das endgültige Design an.

#3 Skinny Opt-in

Dieses nächste Design wird sicherlich eine beliebte Lösung für Unternehmen und Blogs sein, die vertikalen Platz auf ihren Posts oder Landingpages sparen möchten. Obwohl das E-Mail-Opt-in-Modul von Divi am besten für traditionellere vertikale Formulare geeignet ist, können Sie das Formular mit nur einem kleinen CSS-Schnipsel tatsächlich in ein dünnes horizontales Formular umwandeln.

So geht's.

Erstellen Sie einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie das E-Mail-Opt-in-Modul zur Zeile hinzu.

Öffnen Sie die E-Mail-Opt-In-Einstellungen und aktualisieren Sie den Inhalt so, dass er einen Titel enthält, aber sonst nichts.

Aktualisieren Sie dann das Design mit einem Hintergrund und einer Schaltflächenfarbe wie folgt:

Hintergrundfarbe: #54677d
Layout: Körper oben, Form unten
Textausrichtung: Mitte
Hintergrundfarbe der Schaltfläche: #b0c94f
Breite des Tastenrahmens: 0px

Jetzt ist es Zeit für das benutzerdefinierte CSS. Da wir das schlanke Formulardesign nur auf dem Desktop (und nicht auf Mobilgeräten) haben möchten, fügen wir das CSS der Seite (unter Seiteneinstellungen) mit einer benutzerdefinierten CSS-ID hinzu, um den Formularstil auszurichten.

Gehen Sie dazu auf die Registerkarte Erweitert und geben Sie dem Opt-in-Modul eine benutzerdefinierte CSS-ID.

CSS-ID: dünn

Dies wird verwendet, um dieses Formular mit dem externen CSS auszurichten, das wir der Seite hinzufügen.

Öffnen Sie nun die Divi Builder-Seiteneinstellungen und fügen Sie das folgende CSS unter der Registerkarte Erweitert hinzu.

@media (min-width: 980px){
#skinny.et_pb_newsletter .et_pb_newsletter_fields {
  flex-wrap: nowrap !important;
}
#skinny.et_pb_newsletter .et_pb_newsletter_fields>* {
  flex-basis: 23%;
}
}

#skinny .et_pb_newsletter_form {
  padding-left: 0px;
} 

Da Divi bereits Flex verwendet, um das Formular im Backend zu stylen, entfernt dieses CSS die flex-wrap-Eigenschaft, die bewirkt, dass die Formularfelder vertikal ausgerichtet werden. Das Ergebnis ist ein horizontales Layout der Formularfelder. Die Anpassung der Eigenschaft flex-basis auf 23% legt grundsätzlich die Breite jedes der Formularfelder fest. Und da wir das CSS innerhalb einer Medienabfrage hinzugefügt haben, erfolgt das Design nur auf dem Desktop mit dem Standardlayout des Formulars, das auf Mobilgeräten angezeigt wird.

Hier ist das endgültige Design.

#4 Anmeldung zum Buchangebot

Dieses Design enthält einige Bilder im E-Mail-Opt-In-Modul, um ein kostenloses Buchangebot für die Anmeldung zu bewerben. Dazu müssen Sie lediglich ein Bild mit dem integrierten Wysiwyg-Editor hinzufügen, um Beschreibungs- und Fußzeileninhalte hinzuzufügen. Es ist wahr, dass Sie das gleiche Design erreichen können, indem Sie das E-Mail-Opt-In-Modul mit anderen Modulen in einer zweispaltigen Zeile kombinieren, aber ich dachte, es wäre hilfreich, zu zeigen, wie das alles im selben Modul geht.

So geht's.

Erstellen Sie einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie das E-Mail-Opt-in-Modul zur Zeile hinzu.

Öffnen Sie die E-Mail-Opt-In-Einstellungen und bleiben Sie im Inhalts-Tab.

Kürzen Sie unter Beschreibung den Standardtext auf wenige Sätze. Fügen Sie dann ein Bild aus Ihrer Medienbibliothek hinzu, indem Sie auf die Schaltfläche Medien hinzufügen klicken.

Sie möchten sicherstellen, dass das Bild nicht mehr als 200 Pixel breit ist. Für dieses Beispiel verwende ich die mittlere Größe des Bildes.

Fügen Sie unter Fußzeile einige Sätze für den Textinhalt der Fußzeile hinzu und klicken Sie dann auf die Schaltfläche Medien hinzufügen, um ein Logobild unter dem Text hinzuzufügen (dies ist natürlich optional).

Um sicherzustellen, dass das Bild zentriert ist, stellen Sie die Ausrichtungsoption auf zentriert ein, wenn Sie das Bild aus der Medienbibliothek hinzufügen.

Jetzt können Sie den Rest des Designs aktualisieren. Geben Sie dem Modul zunächst ein Hintergrundbild und einen Hintergrundverlauf über dem Bild, um den Text lesbarer zu machen.

Hintergrundbild: [Bild hinzufügen]
Hintergrundfarbe links: rgba(0,0,0,0.5)
Hintergrundfarbe rechts: rgba(0,0,0,0.5)
Farbverlauf über dem Hintergrundbild platzieren: JA

Aktualisieren Sie dann den Rest des Designs wie folgt:

Schaltflächentextfarbe: #333333
Hintergrundfarbe der Schaltfläche: #ffcb7a
Breite des Tastenrahmens: 0px
Tastenabstand der Buchstaben: 5px
Schriftstärke: Ultra Bold
Schriftstil: TT
Breite: 700px
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 3vw oben, 3vw unten, 3vw links, 3vw rechts

Hier ist das endgültige Design.

#5 Opt-in für ausgeschnittenen Rahmen

Diese einfache Designtechnik ist eine großartige Möglichkeit, Ihrem E-Mail-Opt-In ein einzigartiges Aussehen zu verleihen. Der Trick besteht darin, Abschnittstrenner zu verwenden, die dieselbe Farbe wie der Abschnittshintergrund haben. Wenn Sie dann die Höhe der Trennwände anpassen, können Sie das E-Mail-Anmeldeformular überlappen, um die Kanten auf einzigartige Weise für einen schönen Rahmeneffekt auszuschneiden.

Hier ist, wie es geht.

Erstellen Sie einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie das E-Mail-Opt-in-Modul zur Zeile hinzu.

Öffnen Sie die E-Mail-Opt-In-Einstellungen und geben Sie Ihrem Modul einen Hintergrundverlauf.

Hintergrundfarbe links: #8300e9
Hintergrundfarbe rechts: #06c8ff
Verlaufstyp: Radial
Radiale Richtung: Oben links

Aktualisieren Sie dann den Rest des Designs wie folgt:

Schriftstärke des Titels: Fett
Titeltextgröße: 36px
Breite: 70 % (Desktop), 100 % (Tablet und Smartphone)
Modulausrichtung: Mitte
Benutzerdefinierte Polsterung: 6vw oben, 6vw unten, 6vw links, 6vw rechts
Abgerundete Ecken: 50px oben links, 0px oben rechts, 50px unten rechts, 0px unten links

Speichern Sie Ihre Einstellungen.

Aktualisieren Sie dann Ihre Zeileneinstellungen mit einer benutzerdefinierten Breite.

Benutzerdefinierte Breite: 100%

Jetzt können wir die Abschnittseinstellung anpassen, um unseren ausgeschnittenen Rahmeneffekt mit diesen Abschnittsteilern hinzuzufügen.

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe: #222222

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #222222 (stellen Sie sicher, dass dies mit der Hintergrundfarbe des Abschnitts übereinstimmt)
Höhe des oberen Teilers: 12vw (Desktop), 150px (Tablet und Smartphone)
Anordnung der oberen Trennwände: Über dem Abschnittsinhalt

Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: #222222 (stellen Sie sicher, dass dies mit der Hintergrundfarbe des Abschnitts übereinstimmt)
Höhe des unteren Teilers: 12vw (Desktop), 150px (Tablet und Smartphone)
Horizontale Wiederholung des unteren Teilers: 0,8x
Bottom Divider Flip: vertikal und horizontal
Anordnung der unteren Trennwände: Oben auf dem Abschnittsinhalt

Schauen wir uns nun das endgültige Design an.

Sehen Sie sich den Beitrag zum Erstellen einzigartiger Rahmendesigns an, um mehr über diese Designtechnik zu erfahren.

Abschließende Gedanken

Diese E-Mail-Opt-In-Designs sind wirklich nur die Spitze des Eisbergs, wenn Sie an all die Stiloptionen denken, die in Divi verfügbar sind. Ich habe die Designs absichtlich einfach genug gehalten, um Ihnen die Grundzüge dessen zu geben, was Sie tun können. Fühlen Sie sich frei, selbst ausgefeiltere Designs zu erkunden, indem Sie neue Schriftarten, Farben und Hover-Effekte hinzufügen. Und vergessen Sie nicht, dabei Spaß zu haben.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!