So verwenden Sie die Längeneinheiten vw und vh zum Entwerfen eines responsiven Kontaktformulars in Divi

Veröffentlicht: 2019-06-12

Webformulare sind äußerst entscheidend für den Erfolg Ihrer Website. Dies ist sinnvoll, wenn man bedenkt, dass die meisten Online-Unternehmen auf Formulare wie E-Mail-Optins und Kontaktformulare angewiesen sind, um Geld zu verdienen, indem sie E-Mail-Listen erstellen und mit potenziellen Käufern kommunizieren. Und heutzutage müssen wir sicherstellen, dass wir responsive Formulare entwerfen, die auf allen Browsern und Mobilgeräten gut aussehen.

In diesem Tutorial zeige ich Ihnen, wie Sie ein responsives Kontaktformular mit den Längeneinheiten vw und vh in Divi entwerfen. Wir zeigen Ihnen, wie Sie Eingabefelder und Schaltflächen, die sich an die Breite und Höhe Ihres Browsers anpassen, in Größe und Abstand anpassen. Auf diese Weise können Sie die Sichtbarkeit des Formulars auf allen Geräten maximieren, auch für die Querformatansicht auf Mobiltelefonen.

Dazu verwenden wir die integrierten Einstellungen von Divi, mit denen Sie Formulartext, Felder und Schaltflächen problemlos anpassen können.

Lass uns anfangen.

Vorgeschmack

Desktop

Tablette

Telefon (Hochformat)

Telefon (Querformat)

Laden Sie das responsive Kontaktformular-Layout KOSTENLOS herunter (enthält auch ein Responsive-E-Mail-Optin-Formular!)

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.

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.

Kommen wir zum Tutorial, sollen wir?

Was Sie brauchen, um loszulegen

Um zu beginnen, benötigen Sie die folgende Einrichtung:

Das Divi Theme installiert und aktiv
Eine neue Seite, die erstellt wurde, um das Frontend von Grund auf neu zu erstellen (visueller Builder)
Ihr Lieblingsgetränk (optional, es sei denn, Sie haben Ihren Kaffee noch nicht getrunken)

Danach haben Sie eine leere Leinwand, um mit dem Erstellen der responsiven Formulare in Divi zu beginnen.

Warum die Längeneinheiten vw und vh für Responsive Design verwenden?

Längeneinheiten sind die Werte, die für die Größe und den Abstand von Elementen auf Ihrer Webseite erforderlich sind. Die wohl am häufigsten verwendeten Längeneinheiten im Webdesign sind Pixel und Prozentsätze. Ein Pixel ist beispielsweise eine übliche Längeneinheit, die verwendet wird, um die Textgröße zu bestimmen, die em-Längeneinheit wird häufig für die Zeilenhöhe verwendet, und eine prozentuale Längeneinheit wird häufig für den Abstand und die Größenanpassung von Elementen für responsives Design verwendet. Tatsächlich werden die Standard-Längeneinheitenwerte für Divi-Elemente (Module, Zeilen, Abschnitte) mit diesen gemeinsamen Längeneinheiten erstellt.

Längeneinheiten sind entweder absolut (gleiche Größe bleiben unabhängig von der Größe anderer Elemente) oder relativ (Änderung/Skalierung abhängig von der Größe anderer Elemente). Ein Pixel ist beispielsweise eine absolute Längeneinheit. Wenn also ein Textkörper eine Schriftgröße von 16px hat, bleibt der Text unabhängig von der Größe seines Containers 16px. Aber Prozent und em sind beide relative Längeneinheiten. Eine Zeilenhöhe mit einem em-Wert wird also angepasst, wenn sich die Textgröße des Elements ändert. Und da der Prozentsatz auch eine relative Längeneinheit ist, wird eine Zeile mit einer Breite von 80 % 80 % ihres Containers (oder Abschnitts) ausmachen.

Die Längeneinheiten vw und vh sind ebenfalls relative Längeneinheiten, aber nicht relativ zum übergeordneten Container der Elemente, sondern relativ zum eigentlichen Browser-Viewport. Die Viewport-Breite (vw) ist relativ zur Breite des Browsers und die Viewport-Höhe (vh) ist relativ zur Höhe des Browsers. Die Verwendung dieser Längeneinheiten ist eine Möglichkeit, Ihr Design in allen Browsern konsistent zu halten, da es entsprechend dem Ansichtsfenster skaliert wird. Dadurch wird die Größe jedes Elements vorhersehbarer und einfacher zu verwalten, ohne dass Sie sich so viele Gedanken darüber machen müssen, jedem Element auf jedem Gerät eine andere Größe oder einen reaktionsfähigen Haltepunkt zuzuweisen. Die Längeneinheit vh ist besonders praktisch für Handy-Displays, da sie die Höhe des Sichtfensters des Telefons im Hoch- und Querformat berücksichtigt.

Diese Technik funktioniert am besten für Designs, die von großen Anzeigen in voller Breite auf dem Desktop abhängen, deren Skalierung die Größe reibungslos skaliert, wenn der Benutzer die Browserbreite anpasst.

Eine ausführlichere Erläuterung der Längeneinheiten finden Sie in dieser Anleitung zur Verwendung von Längeneinheiten in Divi.

Teil 1: Entwerfen eines responsiven Kontaktformulars in Divi

Abschnitt und Zeile erstellen

Erstellen Sie einen regulären Abschnitt mit einer einspaltigen Zeile. Aktualisieren Sie die Abschnittseinstellungen wie folgt, bevor Sie Module hinzufügen:

Hintergrundfarbe links: #fd7b5b
Hintergrundverlauf rechts Farbe: #a92200

Öffnen Sie dann die Zeileneinstellungen und geben Sie ihm einen Hintergrundverlauf.

Hintergrundfarbe links: #ffdb8b
Hintergrundverlauf rechts Farbe: #fdb15b

Als Nächstes skalieren wir die Zeile mit der Längeneinheit vw, damit sie mit dem Browser skaliert.

Breite: 66vw (Desktop), 66vw (Tablet), 100 % (Telefon)
Max. Breite: 66vw (Desktop), 66vw (Tablet), 100 % (Telefon)
Mindesthöhe: 100 Vh (Telefon)

Padding: 0px oben, 0px unten

Der Wert 66vw stellt sicher, dass die Zeile ungefähr zwei Drittel der Breite des Browser-Ansichtsfensters beträgt. Der 100vh-Wert auf dem Telefondisplay stellt sicher, dass die Zeilenhöhe der Höhe des Telefonanzeigefensters entspricht (optional, aber eine nette Geste für eine optimale Anzeige des Zeileninhaltsbereichs auf Telefonen).

Beachten Sie, dass die Breite der Zeile auf 100 % (nicht 100 vw) eingestellt ist. Dies liegt daran, dass 100vw die Breite der Bildlaufleiste beim Herunterscrollen der Seite nicht berücksichtigt. Daher ist es immer besser, den Prozentsatz für Anzeigen mit voller Breite zu verwenden.

Kontaktformular erstellen

Nachdem unsere Zeile an Ort und Stelle ist, können wir jetzt das Kontaktformular-Modul zur Zeile hinzufügen.

Sobald das Kontaktformular hinzugefügt wurde, aktualisieren Sie den Inhalt wie bei einem Titel und deaktivieren Sie Captcha.

Titel: Kontaktieren Sie uns
Captcha anzeigen: NEIN

Felder in voller Breite erstellen

Für dieses Design werde ich Felder mit voller Breite verwenden. Dadurch kann ich einen konsistenten Abstand zwischen den Feldern hinzufügen (da keine Floats verwendet werden) und jedem der Felder eine benutzerdefinierte Breite für ein späteres einzigartiges Design zuweisen. Öffnen Sie zunächst die Einstellungen für die Namens- und E-Mail-Felder und setzen Sie die Option „Vollbreite erstellen“ auf „JA“.

Optimierung der Felder für Responsive Design

Gehen Sie nun zurück zu den Kontaktformular-Einstellungen. Jetzt können wir die Formularfelder mit den Längeneinheiten vw und vh anpassen. Aktualisieren Sie Folgendes:

Feldtextfarbe: #333333
Feldrand (Desktop und Tablet): 2vw oben, 2vw unten
Feldrand (Telefon): 2vh oben, 2vh unten

Fields Padding (Desktop und Tablet): 1vw oben, 1vw unten, 2vw links, 2vw rechts
Felder Polsterung (Telefon): 2vh oben, 2vh unten, 2vh links, 2vh rechts

Feldtextgröße: 2.5vw (Desktop), 4vh (Telefon)

Hinweis: Wenn Sie 4vh für Telefon verwenden, können Sie die Textgröße mit der Höhe Ihres Mobiltelefondisplays skalieren, was für die Anzeige des Formulars im Querformat des Telefondisplays hilfreich ist (das Telefon seitwärts drehen). Wenn Sie jedoch eine konsistentere Textgröße wünschen, können Sie eine Pixellängeneinheit für die Feldtextgröße auf dem Telefondisplay verwenden.

Gestaltung des Titeltextes

Passen Sie für den Titeltext Folgendes an:

Titelüberschriftsebene: H2
Titelschriftart: Karla
Schriftstärke des Titels: Fett
Titeltextfarbe: #f56845
Titeltextgröße: 7vw (Desktop), 8vh (Telefon)
Titel Buchstabenabstand: 1vw
Höhe der Titelzeile: 0.6em

Optimieren des Buttons für Responsive Design

Für die Kontaktformular-Schaltfläche werden wir Abstände und Textgrößen ähnlich den zuvor entworfenen Feldern hinzufügen.

Klicken Sie hier, um benutzerdefinierte Schaltflächenstile zu verwenden und Folgendes zu aktualisieren:

Tastentextgröße: 2.5vw (Desktop), 4vh (Telefon)
Schaltflächentextfarbe: #ffffff
Schaltflächenhintergrundfarbe: #333333
Breite des Tastenrahmens: 0px
Schaltflächenrandradius: 0px
Button-Schriftart: Montserrat
Schaltflächenrand (Desktop): 1vw oben, 0px links, 0px rechts
Tastenspanne (Telefon): 1vh oben
Tastenpolsterung (Desktop): 3vw oben, 3vw unten
Tastenpolsterung (Telefon): 3Vh oben, 3Vh unten

Button Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 2em
Vertikale Position des Boxschattens: 0.4em
Schattenfarbe: rgba (245,104,69,0.29)

Abstand zum Kontaktformular hinzufügen

Als nächstes fügen Sie das Kontaktformular mit der vw-Längeneinheit und einem Kastenschatten wie folgt auf die Formularfelder auf:

Polsterung (Desktop): 3vw oben, 3vw unten, 5vw links, 5vw rechts
Polsterung (Telefon): 5Vh oben, 5Vh unten, 3Vh links, 3Vh rechts

Button Box Shadow: siehe Screenshot
Horizontale Position des Boxschattens: 2em
Vertikale Position des Boxschattens: 0.4em
Schattenfarbe: rgba (245,104,69,0.29)