So erstellen Sie einen responsiven Vollbild-Kontaktformularabschnitt mit einer Zoom-In-Scroll-Animation

Für viele Websites ist der Kontaktbereich der Seite das ideale Ziel für Besucher. Um das Offensichtliche zu sagen, die meisten Menschen/Unternehmen möchten, dass ihre Besucher sie kontaktieren, um mehr Geschäfte zu machen. Aus diesem Grund ist es wichtig, diesen Abschnitt für eine bessere Konvertierung zu optimieren. Eine Möglichkeit, dies zu erreichen, besteht darin, ein Kontaktformular-Layout im Vollbildmodus zu erstellen, das dem Benutzer eine ablenkungsfreie Ansicht der Kontaktinformationen bietet.

In diesem Tutorial werden wir ein Layout für den Bereich des Kontaktformulars im Vollbildmodus erstellen, das Sie auf jeder Seite Ihrer Divi-Site verwenden können. Wir werden das Layout auch mit hilfreichen responsiven Designeinstellungen anpassen, damit das Vollbild-Layout auch auf kleinen Telefonen gut aussieht.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kurzer Blick auf den responsiven Vollbild-Kontaktformularbereich, den wir erstellen werden.

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“ 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!

https://youtu.be/5Qt9J95uME8

Abonnieren Sie unseren Youtube-Kanal

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein. Denken Sie daran, dass dies ein Abschnittslayout ist. Sie müssen dieses Layout also einer Seite, einem Beitrag oder einer Vorlage hinzufügen, wenn Sie einen neuen Abschnitt im Builder erstellen.

Am Ende des Beitrags erfahren Sie, wie Sie das Abschnittslayout zu einer Seite hinzufügen.

Kommen wir zum Tutorial, ja?

Was Sie brauchen, um loszulegen

Um zu beginnen, müssen Sie Folgendes tun:

1. Falls noch nicht geschehen, installieren und aktivieren Sie das Divi-Theme.
2. Erstellen Sie eine neue Seite in WordPress und verwenden Sie den Divi Builder, um die Seite im Frontend zu bearbeiten (visueller Builder).

Erstellen des Layouts des Kontaktbereichs

Zum Auftakt fügen wir einer neuen Seite mit dem Divi Builder ein vorgefertigtes Layout hinzu. Dies beschleunigt das Design, sodass wir uns darauf konzentrieren können, was erforderlich ist, um einen Abschnitt (mit einem Kontaktformular) im Vollbildmodus und responsive zu gestalten. Dann fügen wir den Scroll-Effekt hinzu, um am Ende alles zusammenzufassen.

Vorgefertigtes Layout hinzufügen

Sobald Sie mit dem Divi-Builder auf die Seite klicken, um sie zu bearbeiten, wählen Sie die Option „Choose a Premade Layout“.

Suchen Sie dann das Layout der Business Coach-Kontaktseite und klicken Sie auf die Schaltfläche „Dieses Layout verwenden“.

Abschnittseinstellungen

Nachdem das Layout auf die Seite geladen wurde, öffnen Sie die Einstellungen des Abschnitts ganz oben im Layout und aktualisieren Sie Folgendes:

Hintergrund

• Hintergrundfarbe: #3550a0

Abschnittshöhe und Polsterung

• Mindesthöhe: 600px
• Höhe: 104vh
• Padding: oben 0px, unten 0px

Einer der Schlüssel zu diesem Design besteht darin, die Höhe auf mindestens 100 Vh (100% der Ansichtsfensterhöhe) einzustellen. Dadurch wird sichergestellt, dass der Abschnitt die volle Höhe des Browserfensters umfasst. Wir fügen eine Höhe von 104 Vh hinzu, damit wir etwas mehr Platz haben, wenn der Benutzer zum Abschnitt scrollt.

Die Einstellung der min-height auf 600px ist eine Fallback-Höhe, damit keines der Elemente innerhalb des Abschnitts ausgeblendet wird, wenn die Browserhöhe zu klein ist. Dies muss entsprechend der Menge an Inhalten in diesem Abschnitt angepasst werden.

Benutzerdefinierte CSS

Um die Zeilen innerhalb des Abschnitts vertikal zu zentrieren (ideal für Vollbildabschnitte), fügen Sie das folgende benutzerdefinierte CSS zum Hauptelement hinzu.

display:flex;flex-direction: column;

Kontaktformular hinzufügen

Um das Kontaktformular zum Abschnitt hinzuzufügen, ziehen Sie es unter das vorhandene Textmodul aus dem vorgefertigten Abschnitt darunter.

Löschen Sie zusätzliche Abschnitte aus dem vorgefertigten Layout

Dann löschen Sie den unteren Abschnitt, so dass nur der eine Abschnitt übrig bleibt, den wir bauen.

Anpassen der Abschnittselemente für responsives Design im Vollbildmodus

Nachdem das Abschnittslayout fertiggestellt wurde, können wir mit der Anpassung des Inhalts (oder der untergeordneten Elemente) des Abschnitts mit einem ansprechenden Design beginnen, das sich gut für einen Vollbildabschnitt auf allen Geräten skalieren lässt.

Wir werden die Längeneinheit vh für den größten Teil der Textgröße und den Abstand für jedes der Elemente verwenden. Dies hilft, die Elemente auch auf kurzen Telefondisplays im Vollbild-Layout im Blick zu behalten.

Zeileneinstellungen

Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

• Dachrinnenbreite: 1
• Breite: 100%
• Padding: 0px oben, 0px unten, 7vh links, 7vh rechts

Einstellungen für das Textmodul

Öffnen Sie die Textmoduleinstellungen und aktualisieren Sie Folgendes:

Überschriftstextgröße

• Überschrift Textgröße: 7 Vh (Desktop), 5 Vh (Tablet und Telefon)

• Überschrift 3 Textgröße: 2vh (Desktop), 3vh (Tablet), 12px (Telefon)

Rand

• Rand: 3vh unten

Kontaktformular-Einstellungen

Nun werden wir unsere Responsive-Design-Anpassung im Kontaktformular mit der Längeneinheit vh fortsetzen. Öffnen Sie die Kontaktformulareinstellungen und aktualisieren Sie Folgendes:

Feldeinstellungen

• Halbbild-Rand: 3vh
• Fleids Polsterung: 2vh oben, 2vh unten
• Feldtextgröße: 2.5vh

Schaltflächentextgröße

• Schaltflächentextgröße: 2vh

Breite

• Maximale Breite: keine

Hinzufügen der Scroll-Effekte

Der letzte Schritt zum Design ist der Scroll-Effekt, der den Kontaktformular-Abschnitt beim Scrollen auf der Seite in eine Vollbildansicht überführt. Öffnen Sie dazu die Abschnittseinstellungen noch einmal und aktualisieren Sie Folgendes:

Unter der Registerkarte Skalierung nach oben und unten…

• Skalierung nach oben und unten aktivieren: JA
• Startskala: 60% (bei 0%)
• Mittlere Skala: 60% (bei 70%)
• Endskala: 100 % (bei 100 %)

Damit ist die Gestaltung des Vollbild-Kontaktformularbereichs abgeschlossen. Aber bevor wir das Endergebnis sehen können, fügen wir es zuerst zu einer der Seiten der Website hinzu.

Verwenden des Vollbild-Kontaktformularbereichs auf Ihrer Website

Abschnittslayout in der Divi-Bibliothek speichern

Bevor wir diesen Abschnitt zu einer anderen Seite unserer Website hinzufügen können, müssen wir zuerst das Abschnittslayout in der Divi-Bibliothek speichern.

Klicken Sie dazu im Abschnittsmenü auf das Symbol „Zur Bibliothek hinzufügen“. Geben Sie dann dem Layout einen Namen und klicken Sie auf die Schaltfläche „In Bibliothek speichern“.

Jetzt steht das Abschnittslayout in der Divi-Bibliothek für die zukünftige Verwendung zur Verfügung.

Abschnittslayout zur Seite aus der Divi-Bibliothek hinzufügen

Um das Vollbild-Kontaktformular-Abschnittslayout zu einer Seite (oder einem Beitrag) in Divi hinzuzufügen, öffnen Sie die Seite, um sie mit dem Divi Builder zu bearbeiten.

Klicken Sie dann auf , um irgendwo auf der Seite einen neuen Abschnitt hinzuzufügen.

Klicken Sie im Popup-Fenster Abschnitt einfügen auf die Registerkarte Aus Bibliothek hinzufügen und wählen Sie das gespeicherte Abschnittslayout aus der Liste aus (meine heißt „Vollbild-Kontaktformular“).

Endergebnis

Schauen wir uns nun das Endergebnis an.

Hier ist es auf dem Desktop.

Hier ist es auf dem Tablet (eigentlich iPad Pro).

Hier ist es am Telefon (iPhone 5 eigentlich). Beachten Sie, dass der Inhalt, obwohl der Bildschirm sehr kurz ist, immer noch in die Vollbildansicht passt.

Abschließende Gedanken

Ich hoffe, dass Ihnen der Vollbild-Kontaktformularbereich dabei hilft, ein hochkonvertierendes Kontaktformular/Bereich für Ihre eigene Website zu erstellen. Wichtig ist, dass Sie immer darauf achten und den Inhalt so prägnant halten, dass er auch auf kleinen Telefonen gut angezeigt wird. Einige der wichtigsten Responsive-Design-Techniken, die in diesem Layout verwendet werden, sind auch nützlich, wenn Sie das Design Ihrer Website anpassen.

Weitere Informationen zu diesem Thema finden Sie in unserem Beitrag zur Verwendung von vw- und vh-Längeneinheiten zum Entwerfen eines responsiven Kontaktformulars in Divi.

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

Danke schön!