Es müssen Inline-Felder und Modulfelder in voller Breite kombiniert werden Kontaktformular de Divi ?
Le Kontaktformular ist ein wichtiges Element, das Sie in Ihre Website aufnehmen müssen, wenn Sie E-Mails erfassen und Ihre Besucher in Kunden umwandeln möchten.
Das Modul Kontaktformular de Divi können leicht angepasst werden, um zu erstellen Formen Attraktive und fesselnde Kontaktkarten für alle Arten von Websites. Dieses Modul verfügt über zwei Anzeigeoptionen, die auf jedes Formularfeld angewendet werden können: en ligne ou volle Breite.
In diesem Tutorial stellen wir Ihnen vier einzigartige Layoutmöglichkeiten vor Kontaktformular Divi mit Inline- und Vollbreitenfeldern.
Lassen Sie uns beginnen!
Übersicht
Hier ist eine Vorschau auf das, was wir entwerfen werden.
Erste Anordnung
Zweite Anordnung
Dritte Anordnung
Vierte Anordnung
Was Sie brauchen, um loszulegen
Bevor wir anfangen, Installieren und aktivieren Sie das Divi-Thema und stellen Sie sicher, dass Sie die neueste Version von Divi auf Ihrer Website haben.
Jetzt sind Sie startklar!
4 Beispiellayouts für das Kontaktformularmodul von Divi mit Inline- und Vollbreitenfeldern
Wählen Sie das vordefinierte Layout aus
Jede der 4 Vorlagen wurde aus dem Layout der Schuhreparatur-Kontaktseite modifiziert Schuhreparatur-Layoutpaket, die Sie in der Divi-Bibliothek finden können.
Fügen Sie Ihrer Website eine neue Seite hinzu, geben Sie ihr einen Titel und wählen Sie dann die Option aus Verwenden Sie Divi Builder.
Wir verwenden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek, also wählen Sie es aus Layouts durchsuchen.
Suchen Sie das Layout der Schuhreparatur-Kontaktseite und wählen Sie es aus.
wählen Verwenden Sie dieses Layout um das Layout zu Ihrer Seite hinzuzufügen.
Wir sind jetzt bereit, unsere Beispiele zu entwerfen.
Erste Anordnung
Verschieben Sie zunächst die Zeile, die das Modul enthält Kontaktformular zum Abschnitt oben, direkt unter der Zeile mit Blurb-Modulen. Anschließend können Sie den verbleibenden leeren Abschnitt löschen.
Öffnen Sie die Zeileneinstellungen und fügen Sie die linke und rechte Polsterung hinzu.
- Polsterung (links und rechts): 15 %
Wählen Sie Responsive-Optionen aus und legen Sie die Polsterung für Mobilgeräte fest.
- Polsterung (links und rechts): 5 %
Geändertes Kontaktformular-Layout mit Inline- und Vollbreitenfeldern
Für dieses Layout erstellen wir zwei separate Felder für Vorname und Nachname.
Öffnen Sie die Einstellungen des Moduls „Kontaktformular“ und ändern Sie die Felder „ID“ und „Titel“ für das Feld „Nachname“ in „Vorname“.
Fügen Sie unterhalb des Felds Vorname ein neues Feld hinzu. Setzen Sie die Felder ID und Titel auf Name.
Öffnen Sie in den Namensfeldeinstellungen die Layouteinstellungen und setzen Sie Volle Breite erstellen auf Nein.
- Volle Breite machen: NEIN
Dann unter den Einstellungen des Kontaktformular, ändern Sie die Reihenfolge von Betreff und Telefonnummer, sodass die Telefonnummer vor dem Betreff aufgeführt wird.
Öffnen Sie die Einstellungen für das Layout des Betrefffelds und stellen Sie das Feld auf die volle Breite ein.
- Volle Breite machen: JA
Anpassung des Kontaktformulardesigns
Lassen Sie uns nun ein paar Einstellungen ändern, um das Design zu vervollständigen. Navigieren Sie zur Registerkarte Design der Einstellungen des Kontaktformular-Moduls.
Ändern Sie zunächst die Hintergrundfarbe der Schaltfläche.
- Schaltflächenhintergrund: #DBC2B3
Fügen Sie der Schaltfläche einen oberen Rand hinzu.
- Schaltflächenrand (oben): 10px
Gehen Sie schließlich zu den Randeinstellungen und fügen Sie den Feldern abgerundete Ecken hinzu.
- Eingabe abgerundete Ecken: 30px
Siehe auch: Divi: So fügen Sie dem Modul „Fullwidth Menu“ ein responsives Logo hinzu
Endergebnis von Beispiel 1
Hier ist das Endergebnis auf Desktop und Handy.
Zweites Beispiel
Für unser zweites Beispiel verschieben wir die Blurb-Module auf die linke Seite der Seite und platzieren das Kontaktformular auf der rechten Seite der Seite. Verschieben Sie Blurb-Module in eine Spalte.
Ändern Sie das Zeilenlayout.
Liniendesign-Einstellungen öffnen und ausschalten Benutzerdefinierte Bundstegbreite verwenden.
- Benutzerdefinierte Bundstegbreite verwenden: NEIN
Fügen Sie dem benutzerdefinierten CSS des Hauptelements Code hinzu, um die Module Blurb und Contact Form vertikal auszurichten.
align-items:center;
Jetzt müssen wir den dünnen Rand zwischen den Spalten entfernen. Zeileneinstellungen öffnen, dann Spalteneinstellungen öffnen 1. Gehen Sie auf der Registerkarte „Design“ zu den Rahmeneinstellungen und entfernen Sie den Rahmen.
- Rechte Randbreite: 0px
Öffnen Sie als Nächstes die Einstellungen für Spalte 2 und wiederholen Sie die Schritte, um den Rand zu entfernen.
- Rechte Randbreite: 0px
Stellen Sie den „Kontakt“-Text so ein, dass er zentriert ist.
Verschieben Sie das Kontaktformular in die rechte Spalte. Löschen Sie den verbleibenden leeren Abschnitt.
Geändertes Kontaktformular-Layout mit Inline- und Vollbreitenfeldern
Dieses Layout wird auch zwei getrennte Felder für Vorname und Nachname haben. Öffnen Sie die Einstellungen des Moduls „Kontaktformular“ und ändern Sie die Felder „ID“ und „Titel“ für das Feld „Nachname“ in „Vorname“.
Fügen Sie unterhalb des Felds Vorname ein neues Feld hinzu. Setzen Sie die Felder ID und Titel auf Name.
Öffnen Sie in den Namensfeldeinstellungen die Layouteinstellungen und setzen Sie Volle Breite erstellen auf Nein.
- Volle Breite machen: NEIN
Ändern Sie die Reihenfolge der Telefon- und Betrefffelder, sodass das Telefon vor dem Betreff steht.
Öffnen Sie die Feldeinstellungen für E-Mail, Telefon und Betreff und stellen Sie das Layout auf volle Breite.
- Volle Breite machen: JA
Anpassung des Kontaktformulardesigns
Zeileneinstellungen öffnen, dann Spalteneinstellungen öffnen 2. Legen Sie die Hintergrundfarbe fest.
- Hintergrund: #DBC2B3
Wechseln Sie in den Einstellungen der Spalte 2 zur Registerkarte Design und fügen Sie Padding hinzu.
- Padding (Oben, Unten, Links und Rechts: 50px
Wählen Sie das mobile Symbol aus, um die Responsive-Einstellungen zu ändern. Stellen Sie die Polsterung für das Handy ein.
- Polsterung (oben, unten, links und rechts): 30 Pixel
Fügen Sie dann der Spalte einen Kastenschatten hinzu.
Öffnen Sie schließlich die Einstellungen des Kontaktformularmoduls und ändern Sie die Feldtextfarbe.
- Felder Textfarbe: #000000
Endergebnis von Beispiel 2
Hier ist das Endergebnis des zweiten Layouts.
Drittes Beispiel
Für das dritte Layout haben wir das Kontaktformular auf der linken Seite und die Blurb-Module auf der rechten Seite. Beginnen wir damit, die Spaltenstruktur der Zeile mit den Blurb-Modulen zu ändern.
Verschieben Sie das Adressmodul in die rechte Spalte.
Verschieben Sie als Nächstes das Textmodul „Kontakt“ in die linke Spalte und löschen Sie dann die verbleibende leere Zeile.
Verschieben Sie das Kontaktformular-Modul in die linke Spalte unter dem Textmodul „Kontakt“. Löschen Sie den verbleibenden leeren Abschnitt.
Öffnen Sie die Linieneinstellungen auf der Registerkarte Design und deaktivieren Sie sie Benutzerdefinierte Bundstegbreite verwenden
- Benutzerdefinierte Bundstegbreite verwenden: NEIN
Fügen Sie dem benutzerdefinierten CSS des Hauptelements Code hinzu, um die Module Blurb und Contact Form vertikal auszurichten.
align-items:center;
Zeileneinstellungen öffnen, dann Spalteneinstellungen öffnen 1. Wechseln Sie auf der Registerkarte Design zu Rahmeneinstellungen und entfernen Sie den Rahmen. Wiederholen Sie die Schritte, um den Rahmen von Spalte 2 zu entfernen.
- Rechte Randbreite: 0px
Ändern des Layouts des Kontaktformulars
Wir lassen die Feldbreiten für das dritte Design unverändert, öffnen jedoch die Kontaktformulareinstellungen und ändern die Reihenfolge von Telefonnummer und Betrefffeld so, dass Telefon an erster Stelle steht.
Endergebnis von Beispiel 3
Hier ist das Endergebnis des dritten Layouts.
Lesen Sie auch: Divi: So zeigen Sie das Fullwidth Header-Modul im Vollbildmodus an
Viertes Beispiel
Beim vierten und letzten Layout befindet sich das Kontaktformular-Modul auf der linken Seite und die Blurb-Module auf der rechten Seite. Auch hier beginnen wir damit, die Spaltenstruktur der Zeile zu ändern, die die Blurb-Module enthält.
Verschieben Sie das Adressmodul in die rechte Spalte.
Verschieben Sie als Nächstes das Kontaktformular-Modul in die linke Spalte. Löschen Sie den verbleibenden leeren Abschnitt.
Öffnen Sie die Linieneinstellungen auf der Registerkarte Design und deaktivieren Sie sie Benutzerdefinierte Bundstegbreite verwenden.
- Benutzerdefinierte Bundstegbreite verwenden: NEIN
Fügen Sie dem benutzerdefinierten CSS des Hauptelements Code hinzu, um die Module Blurb und Contact Form vertikal auszurichten.
align-items:center;
Zeileneinstellungen öffnen, dann Spalteneinstellungen öffnen 1. Wechseln Sie auf der Registerkarte Design zu Rahmeneinstellungen und entfernen Sie den Rahmen.
- Rechte Randbreite: 0px
Öffnen Sie als Nächstes die Einstellungen für Spalte 2 und wiederholen Sie die Schritte, um den Rand zu entfernen.
- Rechte Randbreite: 0px
Öffnen Sie die Textbaustein-Einstellungen für den Text „Kontakt“ und zentrieren Sie den Text.
- Textausrichtung: Zentriert
Geändertes Kontaktformular-Layout mit Inline- und Vollbreitenfeldern
Für dieses Design sind alle unsere Felder in voller Breite. Öffnen Sie die Einstellungen des Kontaktformularmoduls und dann die Einstellungen für jedes Feld. Wählen Sie auf der Registerkarte Entwurf aus Layout und definieren Volle Breite machen von JA.
Nachdem Sie alle Felder in voller Breite erstellt haben, sollte das Formular wie folgt aussehen.
Ändern Sie nun das Feld „ID“ und „Titel“ für das Feld „Nachname“ in „Vorname“.
Fügen Sie unterhalb des Felds Vorname ein neues Feld hinzu. Setzen Sie die Felder ID und Titel auf Name.
Ändern Sie die Reihenfolge der Telefon- und Betrefffelder, sodass das Telefon vor dem Betreff steht.
Anpassen des Designs des Kontaktformularmoduls
Stellen Sie in den Moduleinstellungen im Reiter Design das Feld Textfarbe auf Schwarz.
- Felder Textfarbe: #000000
Öffnen Sie die Abschnittseinstellungen und fügen Sie eine Hintergrundfarbe hinzu.
- Hintergrund: #DBC2B3
Fügen Sie abschließend eine Hintergrundmaske hinzu.
- Hintergrundmaske: Arch
- Maskentransformation: horizontal
Damit die Hintergrundmaske auf Mobilgeräten besser funktioniert, verwenden wir die Responsive-Einstellungen.
- Maskentransformation (Telefon): horizontal und Rotation
Endergebnis
Hier ist das Endergebnis des vierten Layouts.
Endergebnisse
Schauen wir uns alle unsere Beispiele noch einmal an.
Erstes Beispiel
Zweites Beispiel
Drittes Beispiel
Viertes Beispiel
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Ein attraktives Kontaktformular kann Ihre Conversions steigern und es Ihren Besuchern ermöglichen, direkt mit Ihnen in Kontakt zu treten.
Wie wir in diesem Artikel gezeigt haben, können Sie die Inline- und Fullwidth-Feldoptionen verwenden, um unterschiedliche Looks und Layouts für Ihr Formular zu erstellen, und die integrierten Designoptionen von Divi ermöglichen es Ihnen, einzigartige und attraktive Designs zu erstellen, um das Formular hervorzuheben.
Hoffentlich wird diese Technik eine weitere nützliche Designfähigkeit für zukünftige Projekte hinzufügen.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere Ressourcen, wenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen.
Zögern Sie nicht, auch unseren Leitfaden zu konsultieren WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
