So erstellen Sie Vollbild-, Transparent- oder Vollbreiten-Bloom-Opt-in-Formulare

Im heutigen Tutorial zeigen wir Ihnen, wie Sie mit Bloom – einem Plugin, mit dem Sie Opt-in-Formulare zu Ihrer Website hinzufügen können – Anmeldeformulare im Vollbildmodus, transparent und in voller Breite erstellen. Wir führen Sie Schritt für Schritt durch den Prozess des Entwerfens und Einrichtens von zwei Beispiel-Opt-In-Formularen. Wenn Sie diesem Beitrag sorgfältig folgen, können Sie die transparenten Opt-in-Formulare selbst erstellen und auf jeder Website verwenden, auf der das Bloom-Plugin installiert ist – egal ob es sich um Ihre eigene Website oder die eines Kunden handelt.

Mit einem oder mehreren Anmeldeformularen auf Ihrer Website können Sie nicht nur mit Ihren Besuchern in Kontakt bleiben, sondern auch mit ihnen interagieren. Aufgrund der ergebnisorientierten Daten, die sie liefert, ist es heutzutage schwer, auf eine Website zu stoßen, die kein Opt-in-Formular hat. Indem Sie die E-Mail-Adresse Ihrer Besucher zum richtigen Zeitpunkt und am richtigen Ort sammeln, kommen Sie Ihrem Kennenlernen einen Schritt näher und machen sie zu treuen Kunden und/oder Besuchern.

Wenn Sie jedoch lieber von den standardmäßigen Anmeldeformularen abweichen möchten, können Sie sich stattdessen für ein Vollbild-, Transparent- oder Vollbreiten-Anmeldeformular entscheiden. Die beiden Beispiele zeigen wir Ihnen vorab.

Beispiel 1

Beispiel 2

Erstellen eines Vollbild- und transparenten Opt-In-Formulars mit Bloom: Tipps

Das Bloom-Plugin bietet verschiedene Möglichkeiten, Ihre Opt-in-Formulare zu gestalten und Ihr Publikum so anzusprechen, wie es für Sie und Ihre Besucher am besten funktioniert. Zusätzlich zu den bestehenden Opt-in-Vorlagen, die Bloom anbietet, gibt es auch integrierte Optionen, die es einfach machen, benutzerdefinierte Designs zu erstellen. Sie können auch benutzerdefinierten CSS-Code hinzufügen, um erweiterte Ergebnisse zu erhalten.

Wenn Sie jedoch versuchen, mithilfe von CSS-Code einige Anpassungen am Design vorzunehmen, sollten Sie einige Dinge beachten, damit Sie keine Zeit damit verlieren, die Dinge zum Laufen zu bringen.

Aktivieren Sie zuerst das Opt-in-Formular

Wenn Sie Ihr Opt-in-Formular entwerfen, haben Sie oben auf der Registerkarte "Design" eine Vorschauschaltfläche. Auf diese Weise können Sie die Ergebnisse, die Sie während des Entwurfs erzielen, in der Vorschau anzeigen. Auch wenn sich die eingebauten Designänderungen automatisch in der Vorschau ändern, zählt das nicht für den CSS-Code. Wenn Sie bestimmte Änderungen über Ihr benutzerdefiniertes CSS-Feld auf Ihrem Design-Tab vornehmen, gelten einige dieser Änderungen möglicherweise nicht für das Vorschauformular, sondern für das Opt-in-Formular auf Ihrer Website.

Aus diesem Grund müssen Sie zuerst das Opt-in-Formular aktivieren und auf eine Ihrer Seiten anwenden. Um sicherzustellen, dass Ihre Besucher nicht mit dem Anmeldeformular konfrontiert werden, während Sie noch daran arbeiten, können Sie eine Vorschau auf einer neuen Seite anzeigen, die Sie noch nicht mit Ihren Besuchern geteilt haben.

(Oder natürlich auf einer Staging-/Test-Site.)

Beginnen Sie damit, eine neue Seite zu erstellen und ihr einen Namen zu geben. Sie müssen nichts in diese Seite eingeben; es muss einfach existieren. Wechseln Sie beim Entwerfen Ihres Opt-in-Formulars zur Registerkarte Anzeigeeinstellungen. Stellen Sie die Verzögerungszeit auf 1 Sekunde ein, damit Sie nicht jedes Mal auf das Anmeldeformular warten müssen, wenn Sie das Ergebnis überprüfen möchten.

Scrollen Sie auf dieser Registerkarte nach unten und wenn Sie auf die Option "Anzeige ein" stoßen, wählen Sie "Seite". Nachdem Sie "Seite" ausgewählt haben, wird eine Liste der Seiten angezeigt, die auf Ihrer Website aktiv sind. Wählen Sie die Seite aus, die Sie kürzlich erstellt haben. Stellen Sie sicher, dass Sie das Opt-in-Formular nur auf dieser Seite anzeigen.

Nehmen Sie die Änderungen gemäß Ihrem aktivierten Formular vor

Die Änderungen, die Sie mit dem CSS-Code vornehmen, gelten nicht für alle Opt-in-Formulare; sie gelten nur für das Opt-in-Formular, an dem Sie gerade arbeiten. Deshalb werden einige der Klassen, die wir brauchen, einzigartig sein.

Später in diesem Beitrag zeigen wir Ihnen anhand der Beispiele, die wir neu erstellen, wie das geht.

Beginnen Sie mit der Erstellung des ersten Beispiels

Das erste Beispiel, das wir Ihnen zeigen, wie Sie es neu erstellen, ist das im obigen Druckbildschirm. Sie können sehen, dass das Opt-in-Formular als Vollbild angezeigt wird. Obwohl es so aussehen mag, haben wir nur ein transparentes Opt-in-Formular erstellt und die Hintergrundfarben geändert.

Das Opt-In-Formular hinzufügen

Beginnen wir damit, Ihrer Website ein neues Opt-in-Formular hinzuzufügen, indem Sie zu Ihrem WordPress-Dashboard gehen> Bloom> Klicken Sie in der rechten Ecke auf 'Neue Option'> Wählen Sie 'Pop-up'.

Geben Sie einen Namen für Ihr Formular ein und wählen Sie Ihren E-Mail-Anbieter auf der Registerkarte Einrichtung aus. Wenn das erledigt ist, können Sie auf die Registerkarte Design gehen. Dies ist die Hauptregisterkarte, auf die wir uns in diesem Beitrag konzentrieren werden. Wählen Sie eine der bereitgestellten Vorlagen aus und fahren Sie fort. Für die Beispiele, die wir erstellen, wählen wir das erste in der Reihe aus.

Designeinstellungen

Wenn Sie das Formular auf der Registerkarte Design in der Vorschau anzeigen, ohne Änderungen vorzunehmen, wird das folgende Anmeldeformular angezeigt:

Es sieht ganz anders aus, als das Ergebnis aussehen wird, aber Sie können auch feststellen, dass die Grundlage des Opt-in-Formulars dieselbe ist.

Opt-In-Titel und Nachricht

Damit unser Opt-in-Formular wie das oben gezeigte Beispiel aussieht, nehmen Sie zunächst die folgenden Änderungen an den Standard-Designeinstellungen des Optin-Titels und der Optin-Nachricht auf der Registerkarte Design vor:

• Textfarbe: #FFFFFF
• Textstil: Fett
• Textausrichtung: Mitte

Bildeinstellungen & Optin-Styling

Scrollen Sie auf derselben Registerkarte nach unten und nehmen Sie die folgenden Anpassungen an den Bildeinstellungen, dem Optin-Styling und dem Rahmenstil vor:

• Bildausrichtung: Kein Bild
• Hintergrundfarbe: Klar
• Header-Schriftart: Lato
• Körperschriftart: Lato
• Textfarbe: Dunkler Text
• Eckstil: Quadratische Ecken
• Randausrichtung: Oberer + unterer Rand
• Rahmenfarbe: #FFFFFF
• Rahmenstil: Gestrichelter Rahmen

Rahmenstil, Formulareinrichtung und Formulargestaltung

Scrollen Sie weiter nach unten und nehmen Sie die folgenden Änderungen am Formular-Setup und Formular-Styling vor:

• Formularausrichtung: Formular unten
• Namensfeld(er): Kein Namensfeld
• E-Mail-Text: E-Mail
• Button-Text: ABONNIEREN!
• Ausrichtung der Formularfelder: Gestapelte Formularfelder
• Formfeld-Eckenstil: Abgerundete Ecken
• Formulartextfarbe: Heller Text
• Formularhintergrundfarbe: Klar
• Knopffarbe: #6a18a0
• Schaltflächentextfarbe: Hell

Formkantenstil

Die letzte manuelle Änderung, die Sie am Opt-in-Formular vornehmen müssen, ist die Auswahl des Formularrandstils, der in diesem Fall eine gerade Linie ist.

Benutzerdefinierte CSS

Schließlich müssen wir einige CSS-Änderungen am Formular vornehmen, um alles einzurichten. Kopieren Sie die folgenden Codezeilen und fügen Sie sie in das Feld Benutzerdefiniertes CSS ein:

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Ändern Sie den Code gemäß Ihrem eigenen Bloom-Opt-in-Formular

In dem Code, den wir Ihnen zur Verfügung gestellt haben, müssen Sie drei Anpassungen vornehmen. Einige CSS-Klassen gelten nur für ein Opt-in-Formular, deshalb müssen wir wissen, an welchem ​​Opt-in-Formular wir arbeiten. Das einzige, was Sie tun müssen, ist dreimal eine Zahl zu ändern:

Die Zahl am Ende des markierten Teils im obigen Druckbildschirm ist 6, da es der 6. in der Reihe ist:

Je nachdem, welche Position es in Ihrer Liste der Formulare hat, müssen Sie die Nummer anpassen.

Endergebnis

Wenn Sie sich jetzt Ihr Opt-in-Formular in der Vorschau ansehen, werden Sie feststellen, dass alle Änderungen vorgenommen wurden und Ihr Opt-in-Formular wie folgt aussieht:

Bildschirmeinstellungen

Sie können nun zu den Anzeigeeinstellungen gehen und die erforderlichen Änderungen vornehmen, um Ihr Bloom-Anmeldeformular einzurichten. Wir werden nicht auf tiefere Details eingehen, da dieser Beitrag nur den Designteil dieser Opt-in-Formulare behandelt.

Beginnen Sie mit der Erstellung des zweiten Beispiels

Das nächste Beispiel, das wir Ihnen zeigen werden, ist nicht Vollbild, sondern Vollbild. Um zu demonstrieren, wie wir das Ergebnis erzielen können, verwenden wir dasselbe Anmeldeformular wie im vorherigen Beispiel, nehmen jedoch einige kleine Änderungen daran vor und fügen anderen CSS-Code hinzu.

Designeinstellungen

Es gibt nur drei Dinge, die wir innerhalb der integrierten Designeinstellungen anders machen müssen. Erinnern; wir verwenden das Opt-in-Formular, das wir im vorherigen Beispiel erstellt haben. Abgesehen von den drei Dingen, die wir erwähnen werden, gelten die gleichen integrierten Einstellungen wie im ersten Beispiel. Als erstes müssen Sie die Border Orientation auf 'No Border' setzen.

Scrollen Sie nach unten und wählen Sie 'Dunkler Text' für die Formulartextfarbe und verwenden Sie '#724501' als Schaltflächenfarbe.

Benutzerdefinierte CSS

Zuletzt müssen wir noch einige CSS-Codezeilen zum Feld für benutzerdefiniertes CSS hinzufügen:

@media only screen and (min-width: 981px){ 
.et_bloom .et_bloom_popup:after{ 
margin-top: 12% !important; 
height: 50% !important; 
background: url(""); 
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; 
box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
right: -250px !important;
top: -20% !important;
}}

@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }

.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Hintergrundbilder ersetzen

Als letztes müssen Sie die Hintergrundbilder ersetzen, die von einer der URLs in Ihrem wp-content-Ordner oder anderswo verwendet werden. Die erste URL, die unten im Druckbildschirm markiert ist, gilt für Desktop und die zweite für Tablet und Telefon.

Endergebnis

Und du bist fertig! Ihr zweites Opt-In-Formular sollte nun so aussehen:

Abschließende Gedanken

Die Möglichkeiten, die Sie mit Bloom haben, um schöne Opt-in-Formulare zu erstellen, mit denen sich Ihre Benutzer beschäftigen werden, sind endlos. Die, die wir Ihnen in diesem Beitrag gezeigt haben, sind nur ein Beispiel dafür, wie kreativ Sie werden können. Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen!

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!