So gestalten Sie ein Willkommenstor für Ihre Seite in Divi

Veröffentlicht: 2020-01-15

Ein Welcome Gate ist eine effektive Möglichkeit, die Conversions von Call-to-Action auf Ihrer Website zu steigern. Tatsächlich sind Welcome Gates eine beliebte Funktion bei Plugins wie OptinMonster zum Erstellen von E-Mail-Optins mit hoher Konversion. Die Grundidee hinter einem Welcome Gate besteht darin, den Inhalt der Webseite mit einem Call-to-Action im Vollbildmodus auszublenden. Dies zwingt den Benutzer, mit dem CTA zu interagieren, bevor er die beabsichtigte Seite anzeigt.

In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrer Webseite schnell und einfach ein benutzerdefiniertes Willkommens-Gate hinzufügen können, ohne ein Plugin zu verwenden. Dies kann nützlich sein, um die Conversions Ihrer CTAs auf Zielseiten zu steigern.

Hör zu!

Vorgeschmack

Hier ist ein kurzer Blick auf das Willkommenstor, das wir in diesem Tutorial bauen werden.

divi Willkommenstor

Laden Sie das Layout KOSTENLOS herunter

Um die Designs aus diesem Tutorial in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht erneut abonniert und erhalten keine zusätzlichen E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Layout auf Ihre Seite zu importieren, entpacken Sie einfach die ZIP-Datei und ziehen Sie die JSON-Datei in den Divi Builder.

Lasst uns zum Tutorial kommen, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).
Wählen Sie die Option „Wählen Sie ein vorgefertigtes Layout“.
Wählen Sie das Bistro-Layout-Paket aus und wählen Sie im Popup Aus Bibliothek laden das Bistro-Landing-Page-Layout und klicken Sie auf die Schaltfläche „Dieses Layout verwenden“, um das Layout in die Seite zu importieren.

Danach haben Sie eine Landing Page, die Sie beim Erstellen des benutzerdefinierten Willkommenstors verwenden können.

Erstellen des Welcome Gates

Neuen Abschnitt hinzufügen

Erstellen Sie zunächst einen neuen regulären Abschnitt und ziehen Sie ihn an den Anfang der Seite. Fügen Sie dann dem Abschnitt eine einspaltige Zeile hinzu.

divi Willkommenstor

Entwerfen Sie den Abschnitt

Bevor wir anfangen, dem Abschnitt Module/Inhalte hinzuzufügen, fügen wir ein benutzerdefiniertes Design hinzu, damit wir eine schöne Arbeitsfläche für die Zukunft haben.

Hintergrund

Fügen Sie zunächst einen Hintergrundverlauf und ein Bild wie folgt hinzu:

Hintergrundfarbe links: rgba(0,17,38,0.7)
Hintergrund mit Farbverlauf rechts: #001126
Startposition: 68%
Farbverlauf über dem Hintergrundbild platzieren: JA
Hintergrundbild: [Bild einfügen]

divi Willkommenstor

Polsterung und Animation

Wechseln Sie als Nächstes zur Registerkarte Design und aktualisieren Sie die folgenden Padding- und Animationseinstellungen:

Polsterung (Desktop): 28vh oben, 28vh unten
Polsterung (Tablet): 18vh oben, 18vh unten
Polsterung (Telefon): 10Vh oben, 10Vh unten
Animationsstil: Folie
Animationsrichtung: Unten
Anfangsdeckkraft der Animation: 100 %;

divi Willkommenstor

Positionieren Sie den Welcome Gate-Bereich

Jetzt sind wir bereit, unserem Abschnitt eine feste Position mit einem höheren z-Index zu geben, damit das Willkommenstor den Browserbildschirm ausfüllt, bis der Benutzer auf die Schaltfläche „Nein danke“ klickt.

Bevor wir unser Positionierungs-CSS hinzufügen, fügen wir wie folgt eine benutzerdefinierte CSS-ID hinzu:

CSS-ID: Willkommens-Gate

Dies wird verwendet, um den Abschnitt mit jQuery auszurichten, um ihn nach oben aus dem Blickfeld zu verschieben, wenn der Benutzer auf die Schaltfläche "Nein danke" klickt.

Fügen Sie dem Hauptelement das folgende benutzerdefinierte CSS hinzu:

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

Aktualisieren Sie dann den Z-Index wie folgt:

Z-Index: 11

HINWEIS: Wenn Sie möchten, dass das Willkommenstor auch die Kopfzeile ausblendet, können Sie einen höheren Z-Index wie „99999“ hinzufügen.

divi Willkommenstor

Erstellen des Welcome Gate-Inhalts

Nun, da unser Abschnitt fertig ist, beginnen wir mit dem Hinzufügen des Willkommens-Gate-Inhalts. Sie können diesem Willkommenstor beliebige Inhalte hinzufügen. Lassen Sie uns zunächst einen einfachen CTA mit zwei Schaltflächen erstellen. Die Schaltfläche auf der linken Seite ist die Schaltfläche, auf die die Benutzer klicken sollen. Die Schaltfläche auf der rechten Seite ist die Schaltfläche "Nein danke", die das Welcome Gate schließt.

Textmodul

Fügen Sie innerhalb der einspaltigen Zeile einen neuen Textbaustein mit folgendem Inhalt hinzu:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

divi Willkommenstor

Textdesign

Aktualisieren Sie dann das Textdesign wie folgt:

Textschriftart: Kabine
Text Textfarbe: #ffffff
Text Textgröße: 24px (Desktop), 18px (Telefon)
Textausrichtung: Mitte
Überschrift 2 Schriftart: Kabine
Überschrift 2 Schriftstärke: Fett
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Textgröße: 66px (Desktop), 26px (Tablet)

divi Willkommenstor

Zweispaltige Zeile hinzufügen

Für unsere Schaltflächen erstellen wir eine zweispaltige Zeile unter dem Text.

divi Willkommenstor

Linke Taste hinzufügen

Fügen Sie in der linken Spalte ein Tastenmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:

Schaltflächentext: „Yum! Lass es uns buchen“

divi Willkommenstor

Tastenausrichtung: Mitte
Schaltflächentextfarbe: #ffffff
Schaltflächenhintergrundfarbe: #bd8f52
Breite des Tastenrahmens: 0px
Schriftstärke der Schaltfläche: Fett

divi Willkommenstor

Fügen Sie dann das folgende benutzerdefinierte CSS hinzu, damit die Schaltfläche die volle Breite der Spalte umfasst:

display: block !important;

divi Willkommenstor

Rechten „Nein Danke“-Button hinzufügen

Um die Schaltfläche „Nein danke“ zu erstellen, kopieren Sie zuerst die linke Schaltfläche und fügen Sie sie in die rechte Spalte ein.

Aktualisieren Sie dann den Inhalt wie folgt:

Schaltflächentext: nein danke
Schaltflächen-Link-URL: # (dies ist wichtig, damit die Schaltfläche die Seite nicht aktualisiert)

divi Willkommenstor

Aktualisieren Sie dann das Schaltflächendesign wie folgt:

Schaltflächentextfarbe: #333333
Schaltflächenhintergrundfarbe: rgba(255,255,255,0.4)

divi Willkommenstor

Fügen Sie dann die folgende CSS-Klasse zur Nein-Danke-Schaltfläche hinzu:

CSS-Klasse: notanks

divi Willkommenstor

Dies wird unser Selektor in der jQuery sein, der das Willkommenstor beim Klicken schließt.

Benutzerdefinierten Code hinzufügen

Fügen wir nun den benutzerdefinierten Codeausschnitt hinzu, der benötigt wird, um die Funktionalität hinzuzufügen, die das Willkommenstor schließt, wenn ein Benutzer auf die Schaltfläche "Nein danke" klickt. Fügen Sie dazu ein Codemodul unterhalb des No-Danke-Schaltflächenmoduls hinzu.

divi Willkommenstor

Fügen Sie dann den folgenden Code in das Codefeld des Codemoduls ein:

divi Willkommenstor

Für eine letzte Berührung bringen wir die Schaltflächen näher zusammen, indem wir der Reihe mit unseren Schaltflächen eine maximale Breite zuweisen. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Maximale Breite: 600px

divi Willkommenstor

Endergebnis

So sieht das endgültige Design aus.

divi Willkommenstor

Und so sieht das Willkommenstor beim Aktualisieren der Seite aus.

divi Willkommenstor

Und so sieht das Welcome Gate auf dem Handy aus.

divi Willkommenstor

Abschließende Gedanken

Hoffentlich ist diese Willkommensmatte eine hilfreiche Ergänzung zu Ihrer Seite oder Vorlage. Divi macht es einfach, die Willkommensmatte mit dem Visual Builder zu entwerfen und zu positionieren, und es ist nur ein kleiner Ausschnitt von jQuery erforderlich, um die Funktionalität zu vervollständigen. Wenn Sie also nach einer schnellen Willkommensmatte für Ihre Seite suchen, ohne ein Plugin zu verwenden, sollte dies nützlich sein.

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

Danke schön!