So gestalten Sie mit Divi . einen attraktiven Abonnementbereich für jede Art von Website

Einer der Hauptgründe, warum Menschen Websites erstellen, besteht darin, einen neuen Weg zu finden, um ihre Zielgruppe anzusprechen. Sobald Sie diesen ersten Schritt getan haben und mit der Erstellung einer Website beginnen, fragen Sie sich, wie Sie mit Ihren potenziellen Kunden in Kontakt treten können. Eines der Dinge, die nachweislich vielen Website-Besitzern geholfen haben, ist das Erstellen von Listen. Es geht darum, E-Mail-Adressen von Besuchern zu sammeln und sie mit E-Mail-Marketing in Leads (und schließlich Kunden) zu verwandeln.

Und mit dem Erstellen von Listen können Sie attraktive Abonnementbereiche auf Ihrer Website erstellen. Sie möchten, dass Ihr Abonnementbereich auffällig ist und, was noch wichtiger ist, dass Ihr Abonnementbereich konvertiert wird. Für dieses Tutorial haben wir einen beeindruckenden Abonnementbereich erstellt, der die Aufmerksamkeit Ihrer Besucher auf sich ziehen wird. Wir kombinieren ein schickes Design mit Argumenten, warum man sich für eine E-Mail-Liste anmelden sollte. Darüber hinaus werden wir auch drei Farbpaletten teilen, aus denen Sie beim Erstellen des Designs auswählen können.

Lasst uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Vorschau

Bevor wir in das Tutorial eintauchen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Farbpalette #1

• Farbe # 1: rgba (79,35,255,0,88)
• Farbe #2: #e09900
• Farbe #3: #4f23ff

Farbpalette #2

• Farbe # 1: rgba(255,35,97,0.75)
• Farbe #2: #e09900
• Farbe #3: #d80e00

Farbpalette #3

• Farbe # 1: rgba(41,17,147,0.75)
• Farbe #2: #00ffd8
• Farbe #3: #291193

Sich nähern

Wählen Sie eine der obigen Farbpaletten (oder erstellen Sie Ihre eigene) und verwenden Sie diese Farben im gesamten Tutorial. Wir beziehen uns auf Farbe #1, #2 oder #3, wenn wir eine Farbe in unseren Einstellungen verwenden. Außerdem lassen wir das Abonnieren-Modul zwei Spalten überlappen und betonen die Vorteile der Anmeldung für eine E-Mail-Liste.

Abonnieren-Bereich neu erstellen

Einen neuen Abschnitt hinzufügen

Oberteiler

Öffnen Sie die Seite, zu der Sie Ihren Abonnementabschnitt hinzufügen möchten, und fügen Sie einen neuen Standardabschnitt hinzu. Öffnen Sie gleich die Einstellungen Ihres Abschnitts und fügen Sie den folgenden oberen Teiler hinzu:

• Teilerstil: In Liste suchen
• Teilerfarbe: #FFFFFF
• Teilerhöhe: 200px
• Teiler Flip: Vertikal

Unterteiler

Fügen Sie unten in Ihrem Abschnitt die gleiche Art von Trennlinie hinzu:

• Teilerstil: In Liste suchen
• Teilerfarbe: #FFFFFF
• Teilerhöhe: 200px
• Teiler Flip: Vertikal

Abstand

Öffnen Sie als nächstes die Abstandseinstellungen und entfernen Sie alle Standardabstände Ihres Abschnitts, indem Sie '0px' zum oberen und unteren Abstand hinzufügen.

Eine neue Zeile hinzufügen

Spaltenstruktur

Nachdem wir mit allen Abschnittseinstellungen fertig sind, können wir eine neue Zeile hinzufügen. Wählen Sie dafür die folgende Spaltenstruktur

Hintergrund mit Farbverlauf

Öffnen Sie Ihre Zeileneinstellungen und fahren Sie fort, indem Sie den folgenden Farbverlaufshintergrund hinzufügen:

• Erste Farbverlaufsfarbe: Farbe # 1
• Zweite Verlaufsfarbe: Farbe #2
• Verlaufsrichtung: 123deg
• Farbverlauf über dem Hintergrundbild platzieren: Ja

Hintergrundbild

Fahren Sie fort, indem Sie ein Hintergrundbild Ihrer Wahl hinzufügen. Dieses Hintergrundbild wird nur ein wenig durchscheinen. Wählen Sie auch 'Cover' als Hintergrundbildgröße.

Spalte 2 Hintergrundfarbe

Als nächstes fügen Sie 'rgba(255,255,255,0.87)' als Hintergrundfarbe von Spalte 2 hinzu.

Größe

Wir werden auch den Abstand zwischen beiden Spalten reduzieren und die Zeile die gesamte Breite des Bildschirms einnehmen lassen, indem wir die folgenden Größeneinstellungen anwenden:

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Das letzte, was Sie in den Zeileneinstellungen tun müssen, ist einige benutzerdefinierte Auffüllungen hinzuzufügen:

• Polsterung oben und unten: 0px
• Spalte 1 oberer Abstand: 200px
• Spalte 1 untere Polsterung: 100px
• Spalte 2 obere Polsterung: 300px (Desktop) 50px (Tablet & Telefon)
• Spalte 2 untere Polsterung: 100px (Tablet & Telefon)
• Spalte 2 linke und rechte Polsterung: 50px

Fügen Sie Blurb-Modul Nr. 1 zu Spalte 1 hinzu

Blurb-Titel hinzufügen

Jetzt fangen wir an, unsere Module hinzuzufügen! Wir beginnen mit der ersten Spalte, indem wir ein Blurb-Modul hinzufügen. Sobald wir dieses Blurb-Modul geändert haben, verwenden wir seine Einstellungen auch für die anderen beiden. Nachdem Sie ein Blurb-Modul hinzugefügt haben, geben Sie ihm einen Titel.

Blurb-Symbol hinzufügen

Fügen Sie als Nächstes Ihrem Blurb-Modul ein Symbol hinzu. Wir haben das folgende Symbol für das erste Modul verwendet:

Symboleinstellungen

Ändern Sie das Aussehen des Symbols, indem Sie die folgenden Einstellungen hinzufügen:

• Symbolfarbe: #FFFFFF
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 43px

Einstellungen für Titeltext

Wir verwenden nur einen Klappentitel. Deshalb müssen wir nur die Texteinstellungen des H4 ändern:

• Titelschriftart: Yeseva One
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #FFFFFF
• Abstand der Titelbuchstaben: -1px

Größe

Wir werden auch die Breite unseres Blurb-Moduls an die verschiedenen Bildschirmgrößen anpassen:

• Inhaltsbreite: 150px
• Breite: 33 % (Desktop), 40 % (Tablet), 60 % (Telefon)
• Modulausrichtung: Mitte

Abstand

Schließlich fügen Sie Ihrem Blurb-Modul auch die folgenden benutzerdefinierten Paddings hinzu:

• Polsterung oben und unten: 50px

Blurb-Modul zweimal klonen und ausgewähltes Blurb-Modul ändern

Symbol und Inhalt ändern

Sie können das Blurb-Modul jetzt zweimal klonen. Behalten Sie alle in der ersten Spalte. Ändern Sie für jedes der neuen Blurb-Module das Symbol und den Titel so, dass sie mit der Nachricht übereinstimmen, die Sie versenden möchten.

Hintergrundfarbe hinzufügen

Wir werden das mittlere Blurb-Modul hervorheben. Dazu fügen wir zunächst eine weiße Hintergrundfarbe hinzu.

Symbol- und Titeltextfarbe ändern

Wir ändern auch die Farbe des Symbols und des H4-Titels in "#000000".

Abgerundete Ecken hinzufügen

Als nächstes fügen wir '5px' zu jeder der Ecken in den Randeinstellungen hinzu.

Box Schatten

Zu guter Letzt fügen wir ein wenig Tiefe hinzu, indem wir die erste Boxschattenoption verwenden.

Textmodul Nr. 1 zu Spalte 2 hinzufügen

Texteinstellungen

Kommen wir zur zweiten Spalte! Das erste Modul, das wir dort brauchen, ist ein Textmodul. Nachdem Sie Ihren Inhalt hinzugefügt haben, wenden Sie die folgenden Texteinstellungen darauf an:

• Textschriftart: Yeseva One
• Textfarbe: #000000
• Textgröße: 54px
• Textzeilenhöhe: 1em

Textmodul #2 zu Spalte 2 hinzufügen

Abstand

Direkt unter diesem Textmodul fügen wir ein weiteres Textmodul für die Beschreibung hinzu. Nachdem Sie Ihren Inhalt hinzugefügt haben, fügen Sie am oberen Rand "20px" hinzu.

E-Mail-Optionsmodul zu Spalte 2 hinzufügen

Hintergrundfarbe

Das nächste Modul, das wir hinzufügen müssen, ist ein E-Mail-Optin-Modul. Sobald Sie es hinzugefügt haben, ändern Sie die Hintergrundfarbe in "rgba(255,255,255,0)".

Email-Konto

Fügen Sie als nächstes Ihr E-Mail-Konto hinzu und wählen Sie den Dienstanbieter Ihrer Wahl.

Felder

Fahren Sie fort, indem Sie die Feldeinstellungen öffnen und die Felder Vorname und Nachname deaktivieren.

Feldeinstellungen

Wir werden auch die Feldeinstellungen ändern. Entfernen Sie die abgerundeten Ecken, indem Sie '0px' zu jeder der Ecken hinzufügen. Fügen Sie auch die erste Boxschattenoption hinzu.

Tasteneinstellungen

Ändern Sie als Nächstes das Aussehen Ihrer Schaltfläche:

• Schaltflächentextfarbe: #FFFFFF
• Button-Hintergrundfarbe: Farbe #3
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 0px
• Button-Schriftart: Yeseva One
• Schaltflächensymbol anzeigen: Ja
• Farbe des Schaltflächensymbols: #FFFFFF
• Platzierung der Schaltflächensymbole: Links
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein
• Boxschatten: Wählen Sie die erste Option

Abstand

Stellen Sie schließlich sicher, dass das Subscribe Module beide Spalten überlappt, indem Sie die folgenden Abstandseinstellungen verwenden:

• Oberer Rand: 20 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
• Linker Rand: -60 % (Desktop und Tablet), 0 Pixel (Telefon)
• Rechter Rand: 60% (Desktop), 50% (Tablet), 0px (Telefon)

Fügen Sie das Social Media Follow-Modul zu Colum 2 hinzu

Fügen Sie so viele soziale Netzwerke wie gewünscht hinzu

Zu guter Letzt fügen wir ein Social Media Follow-Modul hinzu. Fahren Sie fort und fügen Sie die sozialen Netzwerke hinzu, die angezeigt werden sollen.

Abgerundete Ecken

Nachdem Sie alle sozialen Netzwerke hinzugefügt haben, fügen Sie in den Randeinstellungen '50px' zu jeder Ecke hinzu.

Abstand

Wir schieben das Modul auch nach unten, indem wir '50px' am oberen Rand hinzufügen.

Ändern Sie die Hintergrundfarbe jedes sozialen Netzwerks einzeln

Zu guter Letzt ändern Sie die Hintergrundfarbe jedes der sozialen Netzwerke einzeln auf '#000000'.

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

Abonnierte Abschnitte sind ein wichtiger Teil Ihrer Website. Sie helfen Ihnen, E-Mail-Listen zu erstellen, E-Mail-Marketing zu ermöglichen und Leads in kürzester Zeit in Besucher zu verwandeln. In diesem Beitrag haben wir Ihnen gezeigt, wie Sie einen beeindruckenden Abonnementbereich erstellen, der zu jeder Art von Website passt. Wir haben ein wunderschönes Design mit den Anmeldevorteilen kombiniert. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!