So fügen Sie Ihrem globalen Header ein Dropdown-Kontaktformular hinzu

Wenn Sie mit dem Theme Builder von Divi einen benutzerdefinierten Header für Ihre Website erstellen, werden Sie nach der idealen Möglichkeit suchen, einen CTA hinzuzufügen. Eine Möglichkeit, dies zu tun, besteht darin, ein Dropdown-Kontaktformular hinzuzufügen. Dies wird Ihnen helfen, das allgemeine Erscheinungsbild Ihrer Kopfzeile sauber zu halten und gleichzeitig die Möglichkeit zu bieten, Kontakt aufzunehmen, ohne dass Sie scrollen müssen. In diesem Tutorial zeigen wir Ihnen, wie Sie mit Divi und etwas JQuery- und CSS-Code ein Dropdown-Kontaktformular erstellen. 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 die globale Header-Vorlage KOSTENLOS herunter

Um die kostenlose globale Header-Vorlage in die Hände zu bekommen, müssen Sie sie 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.

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!

1. Gehen Sie zu Divi Theme Builder und beginnen Sie mit dem Erstellen des globalen Headers

Gehe zum Divi Theme Builder

Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Website.

Globalen Header erstellen

Klicken Sie auf „Globalen Header hinzufügen“ und wählen Sie „Globalen Header erstellen“, um mit dem Erstellen eines benutzerdefinierten globalen Headers zu beginnen.

2. Header-Design erstellen

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich in der globalen Header-Vorlage befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und verwenden Sie eine weiße Hintergrundfarbe.

• Hintergrundfarbe: #FFFFFF

Abstand

Entfernen Sie als Nächstes die standardmäßige obere und untere Auffüllung des Abschnitts.

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

Box Schatten

Wenden Sie auch einen subtilen Kastenschatten an.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.15)

Neue Zeile hinzufügen

Spaltenstruktur

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

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 95%
• Maximale Breite: 100%

Abstand

Fügen Sie als nächstes eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 1vw
• Untere Polsterung: 1vw

Hauptelement

Und richten Sie den gesamten Spalteninhalt aus, indem Sie dem Hauptelement der Zeile eine einzelne Zeile CSS-Code hinzufügen.

align-items: center;

Spalte 2 Z-Index

Wir stellen außerdem sicher, dass die zweite Spalte aus Reaktionsgründen einen höheren Z-Indexwert hat.

• Z-Index: 12

Bildmodul zu Spalte 1 hinzufügen

Logo hochladen

Zeit, Module hinzuzufügen! Beginnen Sie mit einem Bildmodul in Spalte 1. Laden Sie ein Logo hoch.

Ausrichtung

Ändern Sie als nächstes die Ausrichtung des Moduls.

• Bildausrichtung: Mitte

Größe

Ändern Sie auch die Breite.

• Breite: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)

Menümodul zu Spalte 2 hinzufügen

Menü auswählen

In der zweiten Spalte fügen wir ein Menümodul hinzu.

Layout

Wechseln Sie zur Design-Registerkarte des Moduls und ändern Sie den Layout-Stil.

• Stil: Zentriert

Menütexteinstellungen

Ändern Sie als nächstes die Menütexteinstellungen des Moduls.

• Menüschrift: Open Sans
• Schriftstärke im Menü: Halbfett
• Menütextfarbe: #000000
• Menütextgröße: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Menübuchstabenabstand: 1px

Texteinstellungen des Dropdown-Menüs

Ändern Sie dann die Farbe der Dropdown-Menüzeile.

• Farbe der Dropdown-Menüzeile: #007dff

Symbole

Zusammen mit der Farbe des Hamburger-Menüsymbols.

• Hamburger Menüsymbolfarbe: #007dff

Textmodul 1 zu Spalte 3 hinzufügen

Kopie hinzufügen

Auf zum dritten Modul! Fügen Sie ein Textmodul mit einer Kopie Ihrer Wahl hinzu.

Hintergrundfarbe

Fügen Sie als nächstes eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #007dff

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Schriftstärke des Textes: Fett
• Textfarbe: #ffffff
• Textgröße: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Textausrichtung: Mitte

Größe

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

• Breite: 33%
• Modulausrichtung: Mitte

Abstand

Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 0.8vw (Desktop), 2vw (Tablet & Telefon)
• Untere Polsterung: 0.8vw (Desktop), 2vw (Tablet & Telefon)

Grenze

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einen Randradius hinzufügen.

• Alle Ecken: 100px

Textmodul 2 zu Spalte 3 hinzufügen

Symbol zum Inhaltsfeld hinzufügen

Weiter zum nächsten Modul, das ein weiteres Textmodul ist. Fügen Sie dem Inhaltsfeld das folgende Pfeilsymbol hinzu: '▼'.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Textfarbe: #007fff
• Textgröße: 3vw
• Textzeilenhöhe: 0em
• Textausrichtung: Mitte

Z-Index

Wir erhöhen auch den z-Index des Moduls.

• Z-Index: 11

Kontaktformular Modul zu Spalte 3 hinzufügen

Felder Ihrer Wahl mit voller Breite hinzufügen

Das nächste und letzte Modul, das wir in der dritten Spalte benötigen, ist ein Kontaktformular-Modul. Fügen Sie alle benötigten Felder mit voller Breite hinzu.

Titel hinzufügen

Verwenden Sie auch einen Titel.

Hintergrundfarbe

Als nächstes ändern wir die Hintergrundfarbe.

• Hintergrundfarbe: #e7f2ff

Feldeinstellungen

Wechseln Sie dann zur Registerkarte Design des Moduls und ändern Sie die Feldeinstellungen.

• Feldhintergrundfarbe: #ffffff
• Feldtextfarbe: #dddddd
• Textfarbe des Feldfokus: #007dff
• Fields Top Padding: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Felder untere Polsterung: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Fields-Schriftart: Open Sans

• Feldtextgröße: 0.7vw (Desktop), 1.8vw (Tablet), 3vw (Telefon)

Einstellungen für Titeltext

Ändern Sie als nächstes die Einstellungen für den Titeltext.

• Titelüberschriftsebene: H3
• Schriftstärke des Titels: Fett
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #007dff
• Titeltextgröße: 1vw (Desktop), 2.5vw (Tablet), 3.5vw (Telefon)
• Höhe der Titelzeile: 1,6 em

Captcha-Texteinstellungen

Zusammen mit den Captcha-Texteinstellungen.

• Captcha-Schriftart: Open Sans
• Captcha-Textfarbe: #007dff

Tasteneinstellungen

Fahren Sie fort, indem Sie die Schaltfläche gestalten.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #007dff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px

• Schaltflächenschrift: Open Sans
• Schriftstärke der Schaltfläche: Fett

• Knopfoberer Rand: 1vw
• Tastenpolsterung oben: 1vw (Desktop), 2vw (Tablet & Telefon)
• Tastenunterseite Polsterung: 1vw (Desktop), 2vw (Tablet & Telefon)
• Tastenbelegung links: 2vw (Desktop), 7vw (Tablet & Telefon)
• Tastenpolsterung rechts: 2vw (Desktop), 7vw (Tablet & Telefon)

Abstand

Verwenden Sie dann einige benutzerdefinierte Abstandswerte für verschiedene Bildschirmgrößen.

• Obere Polsterung: 4vw (Desktop), 6vw (Tablet & Telefon)
• Untere Polsterung: 4vw (Desktop), 6vw (Tablet & Telefon)
• Linke Polsterung: 2vw (Desktop), 6vw (Tablet & Telefon)
• Rechte Polsterung: 2vw (Desktop), 6vw (Tablet & Telefon)

Grenze

Ändern Sie als nächstes die Rahmeneinstellungen.

• Alle Ecken: 10px

Hauptelement, Kontakttitel & Captcha CSS

Vervollständigen Sie die Einstellungen des Moduls, indem Sie einige kleine CSS-Änderungen zur Registerkarte "Erweitert" hinzufügen.

Hauptelement:

border-radius: 20px;

Kontakttitel:

margin-bottom: 1vw;

Captcha:

margin-top: 1.5vw;

3. Passen Sie Elemente an, um ein Kontaktformular beim Klicken zu erstellen

Höhe von Spalte 3 hinzufügen

Sobald Sie alle Module installiert haben, ist es an der Zeit, den Effekt zu erstellen. Der erste Schritt, um das gewünschte Ergebnis zu erzielen, besteht darin, die Einstellungen von Spalte 3 zu öffnen und eine reaktionsschnelle benutzerdefinierte Höhe auf der Registerkarte "Erweitert" hinzuzufügen.

Desktop:

height: 3vw;

Tablette:

height: 5vw;

Telefon:

height: 6vw;

CSS-Klasse zu Button & Arrow hinzufügen

Dann fügen wir den beiden ersten Textmodulen in Spalte 3 dieselbe CSS-Klasse hinzu.

• CSS-Klasse: show-contact

CSS-Klasse zum Kontaktformular hinzufügen

Wir benötigen auch eine benutzerdefinierte CSS-Klasse für das Kontaktformular-Modul.

• CSS-Klasse: Kontaktformular-Modul

Kontaktformular-Modul ausblenden

Fahren Sie fort, indem Sie dem Hauptelement des Kontaktformulars eine zusätzliche Zeile CSS-Code hinzufügen. Dadurch können wir das Modul vor dem Klicken ausblenden.

display: none;

Codemodul zu Spalte 3 mit JQuery & CSS Code hinzufügen

Und um die Klickfunktion zu erstellen, benötigen wir etwas JQuery-Code. Wir werden auch benutzerdefinierten CSS-Code verwenden. Fügen Sie in Spalte 2 ein neues Codemodul mit dem Code hinzu. Stellen Sie sicher, dass Sie den JQuery-Code zwischen script-Tags und den CSS-Code zwischen style-Tags platzieren.

jQuery(function($){
$(".show-contact").click(function() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

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 Ihrem benutzerdefinierten Header ein Dropdown-Kontaktformular hinzufügen. Dies ist eine großartige Möglichkeit, von Anfang an Aktionen auszulösen. Wir haben die JSON-Datei auch kostenlos geteilt! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

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.