So fügen Sie ein Slide-In-Spalten-Kontaktformular nahtlos in Ihren Divi Hero-Bereich ein

Wenn Sie darüber nachdenken, CTAs in Ihr Seitendesign aufzunehmen, sollten Sie ein Kontaktformular in Ihren Heldenbereich aufnehmen. Dieser Ansatz ermöglicht es den Leuten, sofort mit Ihnen in Kontakt zu treten, ohne weiter auf Ihrer Website navigieren zu müssen. Wenn Sie nach einer nahtlosen Möglichkeit suchen, dies in Divi zum Laufen zu bringen, werden Sie diesen Beitrag lieben. In diesem Tutorial zeigen wir Ihnen, wie Sie Ihrem Heldenbereich nur mithilfe der integrierten Optionen von Divi ein Kontaktformular mit Slide-In-Spalte hinzufügen. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Spalten-Kontaktformular-Hero-Abschnitt-Layout KOSTENLOS herunter

Um das kostenlose Spalten-Kontaktformular-Held-Bereich-Layout 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“ oder erhalten zusätzliche 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.

HERUNTERLADEN

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!

Beginnen wir mit der Neuerstellung

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen Sie damit, der Seite, an der Sie gerade arbeiten, einen neuen Abschnitt hinzuzufügen. Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #ff8949

Hintergrundbild

Als nächstes laden wir ein Hintergrundmuster hoch, das Teil des Financial Advisor Layout Packs ist. Dieses Hintergrundbild finden Sie in dem Ordner, den Sie am Anfang dieses Beitrags herunterladen konnten.

• Hintergrundbildgröße: Fit
• Position des Hintergrundbilds: Mitte

Abstand

Wechseln Sie zur Registerkarte Design des Abschnitts und entfernen Sie alle standardmäßigen oberen und unteren Abstände.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Überläufe

Vervollständigen Sie die Abschnittseinstellungen, indem Sie die Überläufe auf der Registerkarte "Erweitert" ausblenden. Dadurch wird sichergestellt, dass die Animationen, die wir später hinzufügen, nicht über den Abschnittscontainer hinausgehen.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Spaltenhöhen ausgleichen: Ja
• Breite: 80 % (Desktop), 100 % (Tablet & Telefon)
• Maximale Breite: 1380px
• Zeilenausrichtung: Rechts

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Spalte 1 Einstellungen

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und ändern Sie die Abstandseinstellungen für verschiedene Bildschirmgrößen.

• Obere Polsterung: 22%
• Untere Polsterung: 22%
• Linke Polsterung: 10 % (nur Tablet und Telefon)
• Rechte Polsterung: 10 % (nur Tablet und Telefon)

Spalte 2 Einstellungen

Hintergrundfarbe

Als nächstes öffnen wir die Einstellungen von Spalte 2 und verwenden eine weiße Hintergrundfarbe.

• Hintergrundfarbe: #ffffff

Animation

Wir vervollständigen die Einstellungen von Spalte 2, indem wir die folgenden Animationseinstellungen anwenden:

• Animationsrichtung: Links (Desktop), Oben (Tablet & Telefon)
• Animationsdauer: 1500 ms
• Animationsintensität: 70%
• Anfangsdeckkraft der Animation: 100 %

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H1-Inhalt hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul in Spalte 1. Fügen Sie H1-Inhalte Ihrer Wahl hinzu.

H1-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H1-Texteinstellungen wie folgt:

• Überschrift Schriftart: Oswald
• Überschrift-Schriftart: Großbuchstaben
• Textfarbe der Überschrift: #ffffff
• Überschriftstextgröße: 120px (Desktop), 70px (Tablet), 60px (Telefon)

Größe

Wir ändern auch die Größeneinstellungen des Moduls.

• Breite: 75% (Desktop), 100% (Tablet & Telefon)
• Modulausrichtung: Links

Textmodul #2 zu Spalte 1 hinzufügen

Beschreibungsinhalt hinzufügen

Weiter zum nächsten Modul, das ein weiteres Textmodul ist. Fügen Sie einen Beschreibungsinhalt Ihrer Wahl hinzu.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textfarbe: #ffffff
• Textzeilenhöhe: 1.9em

Größe

Ändern Sie auch die Größeneinstellungen.

• Breite: 75% (Desktop), 100% (Tablet & Telefon)
• Modulausrichtung: Links

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das letzte Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tasteneinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die Schaltflächeneinstellungen wie folgt:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffffff
• Schaltflächenrandradius: 1px

• Button-Schriftart: Oswald
• Schaltflächenschriftart: Großbuchstaben

Blurb-Modul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Weiter zur zweiten Spalte. Dort brauchen wir als erstes Modul ein Blurb-Modul. Fügen Sie einen Titel Ihrer Wahl hinzu.

Symbol auswählen

Wählen Sie als Nächstes ein Symbol aus.

Symboleinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Symboleinstellungen wie folgt:

• Symbolfarbe: #ffd8c6
• Symbolplatzierung: Oben
• Symbolausrichtung: Mitte
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 250px (Desktop), 150px (Tablet & Telefon)

Einstellungen für Titeltext

Ändern Sie als nächstes die Einstellungen für den Titeltext.

• Titelüberschriftsebene: H2
• Titelschriftart: Oswald
• Titelschriftart: Großbuchstaben
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #ff8949
• Titeltextgröße: 38px

Abstand

Fügen Sie auch etwas linke und rechte Polsterung hinzu.

• Linke Polsterung: 11%
• Rechte Polsterung: 11%

Animation

Und vervollständigen Sie das Modul, indem Sie die folgenden Animationseinstellungen hinzufügen:

• Animationsrichtung: Unten
• Animationsdauer: 1100 ms
• Animationsverzögerung: 400ms
• Anfangsdeckkraft der Animation: 100 %

Kontaktformular-Modul zu Spalte 2 hinzufügen

Felder in voller Breite wenden

Weiter zum letzten Modul, einem Kontaktformular-Modul. Öffnen Sie die Namens- und E-Mail-Felder einzeln und stellen Sie sie in den Layouteinstellungen auf die volle Breite ein.

• Volle Breite machen: Ja

Hintergrundfarbe

Kehren Sie dann zu den allgemeinen Einstellungen des Kontaktformulars zurück und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #f7f7f7

Feldeinstellungen

Wechseln Sie zur Registerkarte Design und nehmen Sie als Nächstes einige Änderungen an den Feldeinstellungen vor.

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #ff8949
• Oberer Rand der Felder: 15px
• Unterer Rand der Felder: 15px
• Felder oben auffüllen: 20px
• Felder untere Polsterung: 20px

• Felder Schriftart: Oswald
• Schriftstil für Felder: Großbuchstaben
• Felder Textausrichtung: Mitte
• Feldtextgröße: 21px

Tasteneinstellungen

Stylen Sie dann die Schaltfläche entsprechend:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ff8949
• Schaltflächenrandradius: 1px

• Button-Schriftart: Oswald
• Schaltflächenschriftart: Großbuchstaben

Größe

Wir stellen auch sicher, dass die Breite in den Größeneinstellungen "100%" ist.

• Breite: 100%

Abstand

Fahren Sie als nächstes mit den Abstandseinstellungen fort und wenden Sie einige benutzerdefinierte Abstandswerte an.

• Obere Polsterung: 14%
• Untere Polsterung: 14%
• Linke Polsterung: 12%
• Rechte Polsterung: 12%

Animation

Verwenden Sie dann die folgenden Animationseinstellungen:

• Animationsstil: Folie
• Animationsrichtung: Nach oben
• Animationsdauer: 1100 ms
• Animationsverzögerung: 400ms
• Anfangsdeckkraft der Animation: 100 %

Position

Und vervollständigen Sie die Moduleinstellungen (und das Tutorial), indem Sie das Modul nur auf dem Desktop neu positionieren:

• Position: Absolut (Desktop), Standard (Tablet & Telefon)
• Ort: Unten Mitte

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie ein Kontaktformular nahtlos in Ihren Heldenbereich einbinden können. Genauer gesagt haben wir ein einschiebbares Spalten-Kontaktformular erstellt, das auf allen Bildschirmgrößen großartig aussieht. Sie konnten die JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.