Erstellen mehrerer zielgerichteter Kontaktformulare auf Hover in einem Design mit Divi

Die Art und Weise, wie Sie Kontaktformulare auf Ihrer Website anzeigen, kann definitiv dazu beitragen, die Konversionsraten zu erhöhen. Neben der Erstellung schöner und benutzerfreundlicher Kontaktformulare können Sie diese auch gezielter angehen. In diesem Beitrag zeigen wir Ihnen, wie Sie ein Design mit mehreren Kontaktformularen erstellen, die je nach Interesse Ihrer Besucher angezeigt werden. Sie können die JSON-Datei auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout für gezielte Kontaktformulare KOSTENLOS herunter

Um das kostenlose Layout für zielgerichtete Kontaktformulare in die Hände zu bekommen, müssen Sie es zunächst ü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!

Nachdem Sie das Layout auf Ihre Seite hochgeladen haben, müssen Sie der Seite, an der Sie gerade arbeiten, noch den CSS-Code hinzufügen. Den CSS-Code finden Sie am Ende dieses Tutorials.

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit der Neuerstellung!

Abschnitt 1 hinzufügen

Öffnen Sie eine neue oder vorhandene Seite und fügen Sie einen neuen regulären Abschnitt hinzu.

Neue Zeile hinzufügen

Spaltenstruktur

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

Textmodul hinzufügen

H2-Inhalt hinzufügen

Fügen Sie der Spalte ein Textmodul mit H2-Inhalten Ihrer Wahl hinzu.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die H2-Texteinstellungen entsprechend:

• Überschrift 2 Schriftstärke: Ultra Bold
• Überschrift 2 Schriftstil: Großbuchstaben
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 6vw
• Überschrift 2 Buchstabenabstand: -0.4vw
• Überschrift 2 Zeilenhöhe: 0.8em

Abstand

Fügen Sie auch einen benutzerdefinierten oberen und unteren Rand hinzu.

• Oberer Rand: 2vw
• Unterer Rand: 2vw

Abschnitt 2 hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie einen weiteren Abschnitt direkt unter dem vorherigen hinzu und wenden Sie den folgenden Farbverlaufshintergrund (oder einen beliebigen Farbverlaufshintergrund Ihrer Wahl) an:

• Farbe 1: #30fff1
• Farbe 2: #4635ff
• Steigungsrichtung: 110deg
• Endposition: 85%

Oberteiler

Gehen Sie zur Registerkarte Design und fügen Sie einen oberen Teiler hinzu.

• Teilerstil: In Liste suchen
• Teileranordnung: Unterhalb des Abschnittsinhalts

Unterteiler

Fügen Sie auch einen unteren Teiler hinzu.

• Teilerstil: In Liste suchen
• Teileranordnung: Unterhalb des Abschnittsinhalts

Größe

Ändern Sie als nächstes die Höhe in den Größeneinstellungen.

• Höhe: 200px

Abstand

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

• Unterer Rand: 30vw (Desktop), 45vw (Tablet), 200vw (Telefon)
• Obere Polsterung: 0vw
• Untere Polsterung: 0vw

CSS-Klasse

Später in diesem Beitrag werden wir CSS-Code hinzufügen, damit der Effekt funktioniert. In Vorbereitung darauf fügen wir dem Abschnitt eine CSS-Klasse hinzu.

• CSS-Klasse: Kontaktbereich

Neue Zeile hinzufügen

Spaltenstruktur

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

Überlauf

Öffnen Sie die Zeileneinstellungen und blenden Sie die Überläufe aus.

• Horizontaler Überlauf: Versteckt
• Vertikaler Überlauf: Versteckt

Übergänge

Entfernen Sie auch die Übergangsdauer.

• Übergangsdauer: 0ms

Blurb-Modul hinzufügen

Titel zum Inhaltsfeld hinzufügen

Zeit, Module hinzuzufügen! Fügen Sie ein Blurb-Modul hinzu und geben Sie einen Titel Ihrer Wahl ein, der einen Ihrer Dienste repräsentiert.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Standardhintergrundfarbe

Fahren Sie fort, indem Sie eine Standardhintergrundfarbe hinzufügen.

• Hintergrundfarbe: #ffffff

Hintergrundfarbe schweben

Ändern Sie die Hintergrundfarbe beim Schweben.

• Hintergrundfarbe: #000000

Standardsymboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen entsprechend:

• Symbolfarbe: #000000
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 2.5vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Hover-Symboleinstellungen

Ändern Sie die Symbolfarbe beim Bewegen des Mauszeigers.

• Symbolfarbe: #ffffff

Standardeinstellungen für den Titeltext

Öffnen Sie als nächstes die Titeltexteinstellungen und übernehmen Sie die folgenden Änderungen:

• Schriftstärke des Titels: Ultra Bold
• Titelschriftart: Großbuchstaben
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #000000
• Titeltextgröße: 0,9 vw (Desktop), 1,8 vw (Tablet), 3 vw (Telefon)

Hover-Titeltexteinstellungen

Ändern Sie die Farbe des Titeltexts beim Bewegen des Mauszeigers.

• Titeltextfarbe: #ffffff

Größe

Ändern Sie als nächstes die Breite über verschiedene Bildschirmgrößen.

• Breite: 10vw (Desktop), 17vw (Tablet), 30vw (Telefon)
• Modulausrichtung: Mitte

Abstand

Fügen Sie den Abstandseinstellungen einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Oberer Rand: 4vw
• Unterer Rand: 4vw
• Obere Polsterung: 2vw (Desktop), 3vw (Tablet), 6vw (Telefon)
• Untere Polsterung: 2vw (Desktop), 3vw (Tablet), 6vw (Telefon)

Grenze

Wir verwandeln das Modul auch in einen Kreis, indem wir '50vw' zu jeder der Ecken in den Rahmeneinstellungen hinzufügen.

Box Schatten

Fügen Sie auch einen Boxschatten hinzu.

Standard-Transformationsskala

Fahren Sie mit den Transformationseinstellungen fort und stellen Sie sicher, dass die Standardwerte für die Transformationsskalierung "100%" bleiben.

Hover-Transformationsskala

Ändern Sie diese Werte bei der Mausbewegung.

• Unten: 120 %
• Rechts: 120 %

Kontaktformular hinzufügen

Machen Sie Namens- und E-Mail-Felder mit voller Breite

Das zweite Modul, das wir in dieser Zeile benötigen, ist ein Kontaktformular-Modul. Nachdem Sie das Kontaktformular hinzugefügt haben, öffnen Sie die Namens- und E-Mail-Felder und machen Sie sie in voller Breite.

• Volle Breite machen: Ja

Nachrichtenfeld entfernen & drei Eingabefelder für servicespezifische Fragen einfügen

Fügen Sie als Nächstes drei Fragen hinzu, die für diesen bestimmten Dienst gelten.

Captcha deaktivieren

Deaktivieren Sie auch die Captcha-Option.

• Captcha anzeigen: Nein

Feldeinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Feldeinstellungen entsprechend:

• Fields Top Padding: 0.6vw (Desktop), 0.9vw (Tablet), 1.5vw (Telefon)
• Felder untere Polsterung: 0.6vw (Desktop), 0.9vw (Tablet), 1.5vw (Telefon)
• Feldtextgröße: 0,8 vw (Desktop), 1,6 vw (Tablet), 2,3 vw (Telefon)

Tasteneinstellungen

Ändern Sie als nächstes das Aussehen der Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #000000
• Breite des Tastenrahmens: 0px
• Tastenschriftstärke: Ultra Bold
• Schaltflächenschriftart: Großbuchstaben

Abstand

Fügen Sie auch einige Füllwerte hinzu.

• Obere Polsterung: 2vw
• Untere Polsterung: 2vw
• Linke Polsterung: 2vw
• Rechte Polsterung: 2vw

Rahmeneinstellungen

Gehen Sie zu guter Letzt zu den Randeinstellungen und fügen Sie '10px' zu jeder der Ecken hinzu.

Zeile dreimal klonen

Sobald Sie die erste Reihe abgeschlossen haben, können Sie sie dreimal klonen.

Ändern Sie Blurb-Inhalt und -Symbol für jede doppelte Zeile

Stellen Sie sicher, dass Sie den Klappentitel und das Symbol für jedes Duplikat ändern.

Servicespezifische Fragen für jede doppelte Zeile ändern

Ändern Sie auch die spezifischen Fragen des Kontaktformulars.

Zusätzliche Zeileneinstellungen

Standardhöhe

Öffnen Sie erneut die Einstellungen der ersten Zeile, gehen Sie zu den Größeneinstellungen und ändern Sie die Höhe über verschiedene Bildschirmgrößen hinweg.

• Höhe: 18vw (Desktop), 27vw (Tablet), 38vw (Telefon)

Schwebehöhe

Bringen Sie die Höhe beim Schweben auf Auto zurück.

• Höhe: automatisch

Erweitern Sie die Zeilengrößeneinstellungen auf alle Zeilen im Abschnitt

Nachdem Sie die Größeneinstellungen für die erste Zeile geändert haben, können Sie die Einstellungen auf alle Zeilen im gesamten Abschnitt ausweiten.

Platzieren Sie Zeilen nebeneinander auf Desktop und Tablet

Seiteneinstellungen öffnen

Zu guter Letzt werden wir alle vier Reihen auf Tablet und Desktop nebeneinander platzieren. Öffnen Sie dazu die Seiteneinstellungen.

Benutzerdefiniertes CSS einfügen

Wechseln Sie zum benutzerdefinierten CSS-Feld und fügen Sie die folgenden CSS-Codezeilen hinzu:

@media (min-width: 767px) {
.contact-section {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
}

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mehrere zielgerichtete Kontaktformulare in einem Design erstellen. Dies ist eine großartige Möglichkeit, mehr über Ihre Besucher und den speziellen Service zu erfahren, an dem sie interessiert sind. Wenn Sie Fragen oder Vorschläge haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.