Divi: So passen Sie das Modul "Kontaktformular" an

Möchten Sie eine erstellen Kontaktformular zu Ihrer Website dank des Moduls Kontaktformular von Divi? Hier sind 3 Personalisierungsideen…

Die angebotene Formen Kontaktdaten sind ein wesentlicher Bestandteil vieler Websites. Ihr Hauptziel ist es, intuitiv zu sein und Besuchern eine einfache Kontaktaufnahme zu ermöglichen.

Aber das bedeutet noch lange nicht alles Formen Kontakte müssen ein präzises und vordefiniertes Aussehen haben. Sie können ganz einfach ein intuitives Erlebnis mit einem schönen Design kombinieren. Genau das werden wir in diesem Tutorial tun.

Wir werden 3 einzigartige Designs des Moduls teilen Kontaktformular de Divi die Sie nur mit den integrierten Optionen von Divi erstellen können.

Lassen Sie uns gehen!

Überblick über die Designs des Divi Kontaktformular-Moduls

Desktop-Versionen

Werfen wir zunächst einen Blick auf die Desktop-Version der verschiedenen Designs des Moduls Kontaktformular die wir in diesem Tutorial entwerfen werden.

Fügen Sie Ihrer Website mit dem Kontaktformularmodul von Divi ein Kontaktformular hinzu

Mobile Versionen

Und so sehen sie auf kleineren Bildschirmgrößen aus:

Laden Sie DIVI jetzt herunter!!!

So passen Sie das Divi-Kontaktformularmodul an: 3 Beispiele

Lesen Sie auch: Divi: So erstellen Sie einen Bereich für Teammitglieder als Karussell

Erstellung des Kontaktformulars #1

Einen neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Beginnen wir mit dem ersten Beispiel! Fügen Sie einen neuen Abschnitt hinzu, gehen Sie zu den Hintergrundeinstellungen und fügen Sie einen Hintergrund mit Farbverlauf hinzu.

Gradientenstopps
- 34%: #4c00ff
- 34 %: #ffd400
Typ: Rund
Verlaufsrichtung: Unten links

Abstand

Gehen Sie als Nächstes zur Option Abstand auf der Registerkarte Design und ändern Sie die Einstellungen wie folgt.

Polsterung (oben und unten): 200px

Fügen Sie eine neue Zeile hinzu

Struktur der Spalte

Fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Spalte 1: Hintergrundfarbe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, dann die Einstellungen für Spalte 1 und fügen Sie die Hintergrundfarbe unten hinzu

Hintergrund: rgba(255,255,255,0.55)

Spalte 1: Hintergrundbild

Fügen Sie der ersten Spalte außerdem ein Hintergrundbild hinzu.

Hintergrundbild-Wiederholung: Keine Wiederholung
Hintergrundbildmischung: Bildschirm

Spalte 2: Hintergrundbild

Und eine weiße Hintergrundfarbe für die zweite Spalte.

Hintergrund: #ffffff

Sizing

Ändern Sie dann die Größenparameter.

Spaltenhöhen ausgleichen: JA

Abstand

Entfernen Sie auch alle benutzerdefinierten Standardauffüllungen.

Polsterung (oben und unten): 0px

Spaltenrandradius

Fügen Sie auf der Registerkarte „Erweitert“ einen Randradius zu beiden Spalten hinzu.

border-radius: 10px;

Fügen Sie Spalte 1 einen Textbaustein hinzu

Inhalt hinzufügen

Es ist an der Zeit, die verschiedenen Module hinzuzufügen! Fügen Sie der ersten Spalte einen Textbaustein mit Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Gehen Sie als Nächstes zur Registerkarte Design des Textmoduls und nehmen Sie einige Änderungen vor.

Text:
- Schriftart: Befriedigen
- Textfarbe: #333333
- Größe: 100px
- Zeilenhöhe: 1 cm
- Ausrichtung: Mitte

Abstand

Fügen Sie auch benutzerdefinierte Füllwerte hinzu.

Polsterung (oben): 600px
Polsterung (unten): 100px

Schattenkiste

Um dem Design Tiefe zu verleihen, verwenden Sie einen subtilen Kastenschatten.

Box-Schattenunschärfe-Stärke: 80px
Feldschatten-Ausbreitungsstärke: -16px
Schattenfarbe: rgba(0,0,0,0.3)

Fügen Sie Spalte 2 ein Bildmodul hinzu

Laden Sie ein Bild hoch

Fahren Sie fort, indem Sie der zweiten Spalte ein Bildmodul hinzufügen. Laden Sie ein Bild Ihrer Wahl hoch.

Sizing

Ändern Sie die Größeneinstellungen für dieses Modul.

Breite: 25 % (Desktop), 50 % (Tablet), 60 % (Telefon)
Modulausrichtung: Mitte

Abstand

Erstellen Sie eine Überlappung mit einem negativen oberen Rand.

Marge (oben): -60 %

Grenze

Ändern Sie die Ränder des Bildes wie folgt:

Abgerundete Ecken: 100px (alle Ecken)

Fügen Sie Text #1 Modul zu Spalte 2 hinzu

Inhalt hinzufügen

Fügen Sie direkt unter dem Bildmodul ein Textmodul mit Inhalt hinzu.

Texteinstellungen

Bearbeiten Sie die Texteinstellungen für dieses Modul.

Text:
- Schriftart: Befriedigen
- Textfarbe: #333333
- Textgröße: 44px
- Ausrichtung: Mitte

Fügen Sie Text #2 Modul zu Spalte 2 hinzu

Inhalt hinzufügen

Fügen Sie dann ein weiteres Textmodul hinzu.

Texteinstellungen

Ändern Sie auch die Texteinstellungen für dieses Modul.

Text:
- Schriftart: Arial
- Textfarbe: #ffd400
- Textfarbe: 18px
- Buchstabenabstand: 2px
- Ausrichtung: Mitte

Abstand

Fügen Sie dann einen unteren Rand hinzu.

Rand (unten): 100px

Fügen Sie das Kontaktformular-Modul zu Spalte 2 hinzu

Aktivieren Sie die Option "In voller Breite erstellen" im Feld "Name und E-Mail".

Das letzte benötigte Modul ist das Kontaktformular-Modul. Bevor Sie etwas anderes tun, öffnen Sie die Namens- und E-Mail-Felder und ändern Sie das Layout.

Volle Breite machen: ja

Fügen Sie ein Betrefffeld hinzu

Um dieses Design zu erstellen, haben wir ein weiteres Feld für das Thema hinzugefügt.

SPAM-Schutz

Deaktivieren Sie dann die Captcha-Option.

Basis-Captcha verwenden: NEIN

Texteinstellungen für Formularfelder

Nehmen Sie einige Änderungen an den Formularfeld-Texteinstellungen dieses Kontaktformularmoduls vor

Felder:
- Hintergrundfarbe: rgba(255,255,255,0)
- Schriftart: Arial
- Schriftstärke: Leicht
- Textgröße: 16px
- Buchstabenabstand: 2px

Tasteneinstellungen

Wir ändern auch das Aussehen der Schaltflächen.

Benutzerdefinierte Größe für Schaltfläche verwenden: JA
Taste :
- Textfarbe: #ffd400
- Randbreite: 0 Pixel
- Buchstabenabstand: 2px
- Schriftart: Arial
- Schriftstil: U
- Farbe unterstreichen: #4c00ff

Abstand

Fügen Sie dann einige benutzerdefinierte Auffüllwerte hinzu.

Polsterung (unten): 100px
Polsterung (links und rechts): 50px

Grenze

Und fügen Sie jedem der Felder einen dezenten unteren Rand hinzu.

Breite des unteren Rands: 2px
Farbe des unteren Rahmens für Eingaben: #efefef

Abstand der einzelnen Felder

Fügen Sie schließlich jedem der einzelnen Felder mit Ausnahme des Nachrichtenfelds einen unteren Rand hinzu.

Rand (unten): 20px