5 einzigartige Möglichkeiten, das Kontaktformular von Divi zu gestalten

Kontaktformulare sind ein wichtiger Bestandteil vieler Websites. Ihr Hauptzweck ist es, intuitiv zu sein und den Besuchern zu helfen, leicht in Kontakt zu treten. Das bedeutet jedoch nicht, dass alle Kontaktformulare auf eine bestimmte und vordefinierte Weise aussehen sollten. Sie können ein intuitives Erlebnis ganz einfach mit einem schönen Design kombinieren. Genau das werden wir in diesem Beitrag tun. Wir werden 5 einzigartige Divi-Kontaktformular-Moduldesigns teilen, die Sie nur mit den integrierten Optionen von Divi erstellen können.

Lasst uns anfangen!

Vorschau der Divi-Kontaktformular-Moduldesigns

Desktop

Beginnen wir mit einem Blick auf die Designs des Divi-Kontaktformularmoduls auf dem Desktop.

Handy, Mobiltelefon

Und so sehen die Designs des Divi-Kontaktformularmoduls auf kleineren Bildschirmgrößen aus:

5 einzigartige Möglichkeiten, das Kontaktformular von Divi zu gestalten

Abonnieren Sie unseren Youtube-Kanal

Kontaktformular 1 erstellen

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 Verlaufshintergrund hinzu.

• Farbe 1: #4c00ff
• Farbe 2: #ffd400
• Verlaufstyp: Radial
• Radiale Richtung: Unten links
• Startposition: 34%
• Endposition: 34%

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 200px
• Untere Polsterung: 200px

Neue Zeile hinzufügen

Spaltenstruktur

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

Spalte 1 Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie einen Farbverlaufshintergrund für Spalte 1 hinzu.

• Spalte 1 Hintergrundfarbe: rgba(255,255,255,0.55)

Spalte 1 Hintergrundbild

Fügen Sie auch der ersten Spalte ein Hintergrundbild hinzu.

• Spalte 1 Hintergrundbild wiederholen: Keine Wiederholung
• Spalte 1 Hintergrundbild-Mischung: Bildschirm

Spalte 2 Hintergrundfarbe

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

• Spalte 2 Hintergrundfarbe: #ffffff

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Spaltenhöhen ausgleichen: Ja

Abstand

Entfernen Sie auch alle standardmäßigen benutzerdefinierten Auffüllungen.

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

Spaltenrandradius

Fügen Sie beiden Spalten auf der Registerkarte "Erweitert" einen Randradius hinzu.

border-radius: 10px;

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, die verschiedenen Module hinzuzufügen! Fügen Sie der ersten Spalte ein Textmodul mit einem beliebigen Inhalt hinzu.

Texteinstellungen

Gehen Sie dann zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Textschriftart: Befriedigen
• Textfarbe: #333333
• Textgröße: 100px
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Abstand

Fügen Sie auch einige benutzerdefinierte Füllwerte hinzu.

• Obere Polsterung: 600px
• Untere Polsterung: 100px

Box Schatten

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

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -16px
• Schattenfarbe: rgba(0,0,0,0.3)

Bildmodul zu Spalte 2 hinzufügen

PNG-Bild hochladen

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

Größe

Ändern Sie die Größeneinstellungen dieses Moduls.

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

Abstand

Erstellen Sie eine Überlappung, indem Sie einen negativen oberen Rand verwenden.

• Höchste Marge: -60%

Textmodul Nr. 1 zu Spalte 2 hinzufügen

Inhalt hinzufügen

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

Texteinstellungen

Ändern Sie die Texteinstellungen dieses Moduls.

• Textschriftart: Befriedigen
• Textfarbe: #333333
• Textgröße: 44px
• Textausrichtung: Mitte

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Fügen Sie als nächstes ein weiteres Textmodul hinzu.

Texteinstellungen

Ändern Sie auch die Texteinstellungen dieses Moduls.

• Textschriftart: Arial
• Textfarbe: #ffd400
• Textgröße: 18px
• Text Buchstabenabstand: 2px
• Textausrichtung: Mitte

Abstand

Fügen Sie als nächstes einen unteren Rand hinzu.

• Unterer Rand: 100px

Kontaktformular-Modul zu Spalte 2 hinzufügen

Aktivieren Sie die Option "Vollbreite erstellen" im Namens- und E-Mail-Feld

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

• Volle Breite machen: Ja

Betrefffeld hinzufügen

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

Elemente

Deaktivieren Sie als nächstes die Captcha-Option.

• Captcha anzeigen: Nein

Texteinstellungen für Formularfelder

Nehmen Sie einige Änderungen an den Texteinstellungen des Formularfelds dieses Kontaktformulars vor.

• Hintergrundfarbe des Formularfelds: rgba(255,255,255,0)
• Formularfeldschriftart: Arial
• Schriftstärke des Formularfelds: Leicht
• Textgröße des Formularfelds: 16px
• Formularfeld Buchstabenabstand: 2px

Tasteneinstellungen

Wir ändern auch das Aussehen der Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffd400
• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 2px
• Schaltflächenschriftart: Arial
• Schriftstil: Unterstreichen
• Unterstreichungsfarbe: #4c00ff

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Untere Polsterung: 100px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

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

• Breite des unteren Rands: 2px
• Farbe des unteren Rands: #efefef

Individueller Feldabstand

Zu guter Letzt fügen Sie jedem der einzelnen Felder außer dem Nachrichtenfeld einen unteren Rand hinzu.

• Unterer Rand: 20px

Kontaktformular erstellen #2

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Auf zum nächsten Beispiel! Fügen Sie einen neuen Abschnitt mit einem Hintergrund mit Farbverlauf hinzu.

• Farbe 1: #562fef
• Farbe 2: #ffffff
• Verlaufstyp: Linear
• Startposition: 50%
• Endposition: 50%

Abstand

Fügen Sie den Abstandseinstellungen dieses Abschnitts einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 200px
• Untere Polsterung: 200px

Neue Zeile hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie der Zeile eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Spalte 2 Hintergrund mit Farbverlauf

Fügen Sie der zweiten Spalte der nächsten Zeile einen Verlaufshintergrund hinzu.

• Farbe 1: #9932ff
• Farbe 2: #562fef
• Spalte 2 Gradiententyp: Linear
• Spalte 2 Gradientenrichtung: 160deg

Größe

Ändern Sie auch die Größeneinstellungen der Zeile.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Fügen Sie dann einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 1 obere Polsterung: 100px
• Spalte 1 untere Polsterung: 50px
• Spalte 1 linker Abstand: 50px
• Spalte 1 rechts auffüllen: 50px
• Spalte 2 obere Polsterung: 100px
• Spalte 2 untere Polsterung: 100px
• Spalte 2 linker Abstand: 50px
• Spalte 2 rechts auffüllen: 50px

Grenze

Fügen Sie '20px' zu jedem der Ränder der Zeile hinzu.

Box Schatten

Schließlich fügen Sie der Reihe einen subtilen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 45px
• Stärke der Box-Schattenausbreitung: -11px
• Schattenfarbe: rgba(0,0,0,0.3)

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Es ist Zeit, mit dem Hinzufügen der Module zu beginnen! Beginnen Sie mit einem Textbaustein in der ersten Spalte.

Texteinstellungen

Ändern Sie die Texteinstellungen dieses Moduls.

• Schriftstärke des Textes: Ultra Bold
• Textschriftart: Großbuchstaben
• Textfarbe: #562fef
• Text Suze: 100px (Desktop), 80px (Tablet), 60px (Telefon)
• Text Buchstabenabstand: -10px
• Textzeilenhöhe: 1em

Abstand

Fügen Sie auch einen unteren Rand hinzu.

• Unterer Rand: 50px

Kontaktformular Modul zu Spalte 1 hinzufügen

Elemente

Das zweite Modul, das wir in der ersten Spalte benötigen, ist ein Kontaktformular. Nachdem Sie das Modul hinzugefügt haben, deaktivieren Sie die Option "Captcha anzeigen".

• Captcha anzeigen: Nein

Texteinstellungen für Formularfelder

Ändern Sie als nächstes die Hintergrundfarbe des Formularfelds.

• Hintergrundfarbe des Formularfelds: #ffffff

Tasteneinstellungen

Spielen Sie auch mit den Schaltflächeneinstellungen herum, um eine Symbolschaltfläche anstelle einer mit Text zu erstellen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 73px
• Farbe des unteren Texts: rgba(0,0,0,0)
• Hintergrundfarbe der Hover-Schaltfläche: rgba(255,255,255,0)
• Breite des Tastenrahmens: 0px
• Farbe des Schaltflächensymbols: #9932ff
• Nur Symbol beim Hover für Schaltfläche anzeigen: Nein

Box Schatten

Fügen Sie schließlich jedem der Felder einen subtilen Kastenschatten hinzu.

• Stärke der Box-Schattenunschärfe: 36px
• Stärke der Box-Schattenunschärfe: -14px
• Schattenfarbe: rgba(0,0,0,0.3)

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

Das erste Modul, das wir in der zweiten Spalte benötigen, ist ein weiteres Textmodul.

Texteinstellungen

Nachdem Sie den Inhalt hinzugefügt haben, ändern Sie die Texteinstellungen dieses Moduls.

• Schriftstärke des Textes: Ultra Bold
• Textfarbe: #ffffff
• Textgröße: 23px
• Text Buchstabenabstand: -1px

Fügen Sie Blurb-Modul Nr. 1 zu Spalte 2 hinzu

Inhalt hinzufügen

Das zweite Modul, das wir benötigen, ist ein Blurb-Modul. Fahren Sie fort und geben Sie einige Kontaktinformationen ein.

Symbol auswählen

Wählen Sie dann ein passendes Symbol aus.

Symboleinstellungen

Ändern Sie die Einstellungen dieses Symbols.

• Symbolfarbe: #ffffff
• Symbolplatzierung: Links

Einstellungen für Titeltext

Fahren Sie fort, indem Sie als nächstes einige Änderungen an den Einstellungen für den Titeltext vornehmen.

• Titeltextgröße: 15px
• Abstand der Titelbuchstaben: -0.5px

Abstand

Und fügen Sie etwas oberen Rand hinzu.

• Oberer Rand: 120px

Blurb-Modul zweimal klonen

Nachdem Sie das erste Blurb-Modul geändert haben, können Sie das Modul zweimal klonen.

Inhalt und Symbol beider Duplikate ändern

Ändern Sie den Inhalt und die Symbole beider Duplikate, um verschiedene Arten von Kontaktinformationen mit Besuchern zu teilen.

Abstand beider Duplikate ändern

Der obere Rand beider Duplikate muss ebenfalls geändert werden.

• Oberer Rand: 30px

Kontaktformular erstellen #3

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Auf zum dritten Beispiel! Fügen Sie einen neuen Abschnitt mit der folgenden Hintergrundfarbe hinzu:

• Hintergrundfarbe: #3491CE

Abstand

Fahren Sie fort, indem Sie einige benutzerdefinierte Abstandswerte in den Abstandseinstellungen hinzufügen.

• Obere Polsterung: 200px
• Untere Polsterung: 200px

Zeile 1 hinzufügen

Spaltenstruktur

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

Textmodul hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Das erste Modul, das wir der ersten Spalte hinzufügen müssen, ist ein Textmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

Texteinstellungen

Ändern Sie dann die Texteinstellungen.

• Schriftstärke des Textes: Ultra Bold
• Textfarbe: rgba(255,255,255,0.24)
• Textgröße: 100px (Desktop), 86px (Tablet), 60px (Telefon)
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Abstand

Fügen Sie auch einen negativen unteren Rand hinzu.

• Unterer Rand: -100px

Zeile 2 hinzufügen

Spaltenstruktur

Die zweite Zeile, die wir für dieses Beispiel benötigen, enthält die folgende Spaltenstruktur:

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #11CE84
• Farbe 2: #10C77F
• Verlaufstyp: Linear
• Steigungsrichtung: 160deg
• Startposition: 50%
• Endposition: 50%

Größe

Ändern Sie auch die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 150px
• Untere Polsterung: 100px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Gehen Sie dann zu den Randeinstellungen und fügen Sie '20px' zu jeder der Ecken hinzu. Verwenden Sie auch einen unteren Rand.

• Breite des unteren Rands: 10px
• Farbe des unteren Rands: #1ba35a

Box Schatten

Vervollständigen Sie die Zeileneinstellungen, indem Sie einen subtilen Kastenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -24px
• Schattenfarbe: rgba(0,0,0,0.3)

Kontaktformular Modul zu Spalte 1 hinzufügen

Aktivieren Sie die Option "Vollbreite erstellen" im Namens- und E-Mail-Feld

Das erste Modul, das wir in der ersten Spalte der Zeile benötigen, ist ein Kontaktformular-Modul. Öffnen Sie das Namens- und E-Mail-Feld und ändern Sie die Layouteinstellungen.

• Volle Breite machen: Ja

Elemente

Deaktivieren Sie als nächstes das Captcha.

• Captcha anzeigen: Nein

Tasteneinstellungen

Und ändern Sie die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffffff
• Farbe 1: #3AA0E3
• Farbe 2: #3491CE
• Verlaufstyp: Linear
• Verlaufsrichtung: 155deg
• Startposition: 50%
• Endposition: 50%
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 10px
• Stärke der Box-Schattenausbreitung: -2px
• Schattenfarbe: #0a60af

Grenze

Außerdem fügen wir jedem der Felder '5px' abgerundete Ecken hinzu.

Textmodul zu Spalte 2 hinzufügen

Inhalt hinzufügen

In der zweiten Spalte ist das erste Modul, das wir benötigen, ein Textmodul. Fahren Sie fort und geben Sie einige Inhalte ein.

Hintergrundfarbe

Ändern Sie dann die Hintergrundfarbe.

• Hintergrundfarbe: rgba(255,255,255,0.13)

Texteinstellungen

Spielen Sie auch mit den Texteinstellungen herum.

• Schriftstärke des Textes: Leicht
• Textfarbe: #ffffff
• Textgröße: 15px
• Text Buchstabenabstand: -0.5px

Abstand

Und fügen Sie eine benutzerdefinierte Polsterung hinzu, um dem Modul Raum zum Atmen zu geben.

• Obere Polsterung: 12px
• Untere Polsterung: 12px
• Linke Polsterung: 10px
• Rechte Polsterung: 10px

Grenze

Außerdem fügen wir '20px' in die obere linke und untere linke Ecke ein. Darüber hinaus fügen wir einen linken Rand hinzu.

• Breite des linken Rands: 34px
• Farbe des linken Rands: #edf000

Sichtweite

Damit dieses Design an die verschiedenen Bildschirmgrößen angepasst wird, deaktivieren wir das Textmodul auf Telefon und Tablet.

Textmodul zweimal klonen

Sobald Sie mit dem Ändern des ersten Textmoduls fertig sind, klonen Sie das Modul zweimal.

Inhalt beider Duplikate ändern

Ändern Sie den Inhalt beider Duplikate in etwas anderes.

Abstand beider Duplikate ändern

Und fügen Sie einen oberen Rand hinzu, um Platz zwischen jedem der Module zu schaffen.

• Oberer Rand: 20px

Rahmen beider Duplikate ändern

Ändern Sie zu guter Letzt die Farbe des linken Rands jedes der Duplikate einzeln.

• Farbe 1: #00faff
• Farbe 2: #00f76f

Kontaktformular erstellen #4

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Auf zum vierten Beispiel! Fügen Sie einen neuen Abschnitt mit der folgenden Hintergrundfarbe hinzu:

• Hintergrundfarbe: #FFBABD

Abstand

Entfernen Sie die Standardfüllung dieses Abschnitts.

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

Neue Zeile hinzufügen

Spaltenstruktur

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

Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #ffffff
• Farbe 2: rgba(41,196,169,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 38%
• Endposition: 38%

Größe

Ändern Sie als nächstes die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Und fügen Sie einige benutzerdefinierte Polster hinzu.

• Obere Polsterung: 160px
• Untere Polsterung: 160px

Textmodul hinzufügen

Inhalt hinzufügen

Das erste Modul, das wir brauchen, ist ein Textmodul. Fahren Sie fort und geben Sie einige Inhalte ein.

Texteinstellungen

Ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Abril Fatface
• Textfarbe: #640076
• Textgröße: 45px (Desktop), 34px (Tablet), 20px (Telefon)
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Oberer Rand: 300px
• Obere Polsterung: 50px
• Untere Polsterung: 50px

Kontaktformular Modul hinzufügen

Aktivieren Sie die Option "Vollbreite erstellen" im Namens- und E-Mail-Feld

Das zweite und letzte Modul, das wir benötigen, ist ein Kontaktformular-Modul. Öffnen Sie sowohl das Namens- als auch das E-Mail-Feld und ändern Sie die Layouteinstellungen.

• Volle Breite machen: Ja

Elemente

Deaktivieren Sie dann die Captcha-Option in den Elementeinstellungen.

• Captcha anzeigen: Nein

Texteinstellungen für Formularfelder

Nehmen Sie auch einige Änderungen an den Texteinstellungen des Formularfelds vor.

• Hintergrundfarbe des Formularfelds: #fff6f6
• Textfarbe des Formularfelds: #ff7c7c

Tasteneinstellungen

Ändern Sie die Schaltfläche mit den folgenden Einstellungen in eine Symbolschaltfläche:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 88px
• Schaltflächentextfarbe: rgba(255,255,255,0)
• Hintergrundfarbe der Hover-Schaltfläche: rgba(255,255,255,0)
• Breite des Tastenrahmens: 0px
• Farbe des Tastensymbols: #e60085
• Nur Symbol beim Hover für Schaltfläche anzeigen: Ja

Größe

Und spielen Sie mit den Größenwerten herum, damit das Design allen Bildschirmgrößen entspricht.

• Breite: 42 % (Desktop), 50 % (Tablet), 77 % (Telefon)
• Modulausrichtung: Mitte

Abstand

Fahren Sie fort, indem Sie dem Modul einige benutzerdefinierte Abstandswerte hinzufügen.

• Unterer Rand: 200px
• Linke Polsterung: 50px
• Rechte Polsterung: 50px

Grenze

Und füge '10px' zu jeder der Ecken hinzu.

Schaltflächenrand

Drücken Sie zu guter Letzt die Symbolschaltfläche nach rechts, indem Sie die folgende CSS-Codezeile auf der Registerkarte "Erweitert" verwenden:

margin-right: -100px;

Kontaktformular erstellen #5

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Auf zum letzten Beispiel! Fügen Sie einen neuen Abschnitt mit dem folgenden Farbverlaufshintergrund hinzu:

• Farbe 1: #4bf2d0
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Links
• Startposition: 36%
• Endposition: 36%

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie benutzerdefinierte Polster hinzu.

• Obere Polsterung: 250px
• Untere Polsterung: 250px

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem Sie die Abschnittseinstellungen geändert haben, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Hintergrundfarbe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Spalte 1 Hintergrundfarbe

Fügen Sie der ersten Spalte eine weitere Hintergrundfarbe hinzu.

• Spalte 1 Hintergrundfarbe: #f9f9f9

Größe

Ändern Sie dann die Größeneinstellungen der Zeile.

• Benutzerdefinierte Breite verwenden: Ja
• Einheit: PX
• Benutzerdefinierte Breite: 1730 Pixel
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Fügen Sie einige benutzerdefinierte Abstandswerte hinzu, die allen Bildschirmgrößen entsprechen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 1 oberer Abstand: 200px (Desktop), 0px (Tablet und Telefon)
• Spalte 1 untere Polsterung: 150px (Desktop), 0px (Tablet & Telefon)
• Spalte 1 linker Abstand: 50px
• Spalte 1 rechts auffüllen: 50px
• Spalte 2 obere Polsterung: 200px (Desktop), 100px (Tablet & Telefon)
• Spalte 2 untere Polsterung: 150px, 100px (Tablet & Telefon)

Box Schatten

Das letzte, was Sie in den Zeileneinstellungen tun müssen, ist das Hinzufügen eines subtilen Boxschattens.

• Stärke der Box-Schattenunschärfe: 56px
• Stärke der Box-Schattenausbreitung: -17px
• Schattenfarbe: rgba(0,0,0,0.3)

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie der ersten Spalte ein Textmodul hinzu.

Texteinstellungen

Nachdem Sie den Inhalt hinzugefügt haben, gehen Sie zu den Texteinstellungen und nehmen Sie einige Änderungen vor.

• Textschriftart: Cambay
• Textfarbe: #000000
• Textgröße: 26px
• Text Buchstabenabstand: -0.5px
• Textausrichtung: Rechts

Abstand

Fügen Sie auch einen oberen Rand hinzu.

• Oberer Rand: 60px

Sichtweite

Und verstecken Sie das Modul sowohl auf dem Telefon als auch auf dem Tablet.

Textmodul zweimal klonen

Inhalt beider Duplikate ändern

Sobald Sie mit dem Ändern des ersten Textmoduls fertig sind, klonen Sie das Modul zweimal. Ändern Sie den Inhalt beider Duplikate.

Abstand beider Duplikate ändern

Ändern Sie auch den oberen Rand beider Duplikate.

• Oberer Rand: 80px

Kontaktformular-Modul zu Spalte 2 hinzufügen

Aktivieren Sie die Option "Vollbreite erstellen" im Namens- und E-Mail-Feld

Das einzige Modul, das wir in der zweiten Spalte benötigen, ist ein Kontaktformular-Modul. Öffnen Sie die Felder Name und E-Mail und ändern Sie die Layouteinstellungen.

• Volle Breite machen: Ja

Elemente

Deaktivieren Sie als nächstes die Captcha-Option.

• Captcha anzeigen: Ja

Texteinstellungen für Formularfelder

Gehen Sie dann zu den Texteinstellungen des Formularfelds und nehmen Sie einige Änderungen vor.

• Hintergrundfarbe des Formularfelds: rgba(255,255,255,0)
• Formularfeldschriftart: Cambay

Tasteneinstellungen

Und erstellen Sie eine eindeutige Schaltfläche mit den folgenden Schaltflächeneinstellungen:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 64px (Desktop), 50px (Tablet), 40px (Telefon)
• Schaltflächentextfarbe: #000000
• Farbe 1: #4bf2d0
• Farbe 2: rgba(41,196,169,0)
• Verlaufstyp: Radial
• Radiale Richtung: Mitte
• Startposition: 25%
• Endposition: 25%
• Breite des Tastenrahmens: 0px
• Nur Schaltfläche beim Hover für Schaltfläche anzeigen: Nein

Abstand

Fügen Sie diesem Modul auch einen oberen Rand hinzu.

• Oberer Rand: 50px

Grenze

Und verwenden Sie für jedes der Felder einen dezenten unteren Rand.

• Breite des unteren Rands: 0.5px
• Farbe des unteren Rands: #000000

Individueller Feldabstand

Zu guter Letzt fügen Sie jedem der Felder einzeln den folgenden unteren Rand hinzu und fertig!

• Unterer Rand: 50px

Vorschau

Desktop

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf die Designs des Divi-Kontaktformularmoduls auf dem Desktop.

Handy, Mobiltelefon

Und das können Sie von den Divi Kontaktformular-Modul-Designs auf kleineren Bildschirmgrößen erwarten:

Abschließende Gedanken

In diesem Beitrag haben wir 5 wunderschöne Divi-Kontaktformularmodul-Designs geteilt, die Sie einfach für jede von Ihnen erstellte Website verwenden und ändern können. Kontaktformulare sind ein wichtiger Bestandteil vieler Websites, daher ist es wichtig, dass Ihr Design Ihre Besucher davon überzeugt, sich mit Ihnen in Verbindung zu setzen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!