Divi: So fügen Sie einem globalen Header ein Kontaktformular hinzu

Muss ein hinzufügen Kontaktformular zu einem globalen Header?

Wenn Sie einen benutzerdefinierten Header für Ihre erstellen Website Mit dem Divi Theme Builder suchen Sie nach der perfekten Möglichkeit, einen CTA (Call to Action) hinzuzufügen. Eine Möglichkeit, dies zu tun, besteht darin, a hinzuzufügen Kontaktformular scrollen. 

Dies hilft Ihnen, das Gesamtbild Ihres Headers sauber zu halten und gleichzeitig die Möglichkeit zu geben, hineinzukommen Kontakt ohne scrollen zu müssen. 

In diesem Tutorial zeigen wir Ihnen, wie Sie eine erstellen Kontaktformular Scrollbar mit Divi- und JQuery- und CSS-Code.

Fangen wir an!

Übersicht

Bevor wir in dieses Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis, das wir erhalten werden.

Erstellen Sie einen globalen Header

Gehen Sie zum Theme-Builder

Gehen Sie im Divi-Menü in Ihrem WordPress-Dashboard zu Theme Builder und klicken Sie auf „Globalen Header hinzufügen“.

Wählen Sie „Globale Kopfzeile erstellen“.

Erstellen Sie einen Kopfzeilenstil

Abschnittseinstellungen

Hintergrundfarbe

Sobald Sie sich im Vorlageneditor befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und ändern Sie die Hintergrundfarbe.

• Hintergrund: #FFFFFF

Abstand

Entfernen Sie dann die standardmäßigen oberen und unteren inneren Ränder aus dem Abschnitt.

• Innerer Randscheitel: 0px
• Unterer interner Rand: 0px

Schattenkiste

Wenden Sie auch einen subtilen Kastenschatten an.

• Box Shadow Blue Stärke: 50px
• Schriftfarbe Untertitel: rgba(0,0,0,0.15)

Fügen Sie eine neue Zeile hinzu

Struktur der Spalte

Fügen Sie dem Abschnitt eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:

Sizing

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

• Benutzerdefinierte Bundstegbreite verwenden: Ja
• Spaltenabstand: 1
• Spaltenhöhen harmonisieren: Ja
• Maximale Breite: 95%
• Maximale Breite: 100%

Abstand

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

• Maximale interne Marge: 1vw
• Unterer Innenrand: 1vw

Hauptelement

Richten Sie den gesamten Spalteninhalt aus, indem Sie dem Hauptzeilenelement eine einzelne Zeile CSS-Code hinzufügen.

align-items: center;

Z Index von Spalte 2

Wir stellen auch sicher, dass die zweite Spalte einen höheren Z-Index-Wert für responsives Design hat.

• Z-Index: 12

Bildmodul zu Spalte 1 hinzufügen

Logo herunterladen

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

Ausrichtung

Ändern Sie dann die Ausrichtung des Moduls.

• Bildausrichtung: Zentriert

Sizing

Ändern Sie auch die Breite.

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

Menümodul zu Spalte 2 hinzufügen

Wählen Sie Menü

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

Bereitstellung

Wechseln Sie auf die Registerkarte Modulstil und ändern Sie den Layoutstil.

• Stile: Zentriert

Menütexteinstellungen

Ändern Sie dann die Texteinstellungen im Modulmenü.

• Schriftmenü: Öffnen Sie Keine
• Menü für schwaches Licht: halbfett
• Menütextfarbe: #000000
• Menütextgröße: 0,8 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)
• Buchstabenabstand im Menü: 1px

Texteinstellungen für Dropdown-Menüs

Ändern Sie als Nächstes die Linienfarbe aus dem Dropdown-Menü.

• Zeilenfarbe des Dropdown-Menüs: #007dff

Symbole

Ändern Sie die Farbe des Hamburger-Menüsymbols.

• Farbe des Hamburger-Menüsymbols: #007dff

Textbaustein zu Spalte 3 hinzufügen

Nachricht hinzufügen

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

Hintergrundfarbe

Fügen Sie eine Hintergrundfarbe hinzu.

• Hintergrundfarbe: #007dff

Texteinstellungen

Wechseln Sie in den Reiter Moduldesign und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Open Sans
• Weicher heller Text: Fett
• Textfarbe Text: #ffffff
• Text Textgröße: 0,8 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)
• Textausrichtung: Zentriert

Sizing

Ändern Sie dann die Modulgrößenparameter.

• Maximale Breite: 33%
• Modulausrichtung: Mitte

Abstand

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

• Höchste interne Marge: 0,8 vw (Desktop), 2 vw (Tablet und Telefon)
• Interne Marge niedrig: 0,8 vw (Desktop), 2 vw (Tablet und Telefon)

Grenze

Vervollständigen Sie die Modulparameter, indem Sie einen Rahmenradius hinzufügen.

• Abgerundetes Rechteck: 100px

Fügen Sie in Spalte 3 einen weiteren Textbaustein hinzu

Fügen Sie dem Inhaltsbereich ein Symbol hinzu

Kommen wir zum nächsten Modul, einem weiteren Textmodul. Fügen Sie im Inhaltsbereich folgendes Pfeilsymbol hinzu: '▼'.

Texteinstellungen

Wechseln Sie in den Reiter Moduldesign und ändern Sie die Texteinstellungen entsprechend:

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

Z-Index

Lassen Sie uns auch den Z-Index des Moduls erhöhen.

• Z-Index: 11

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

Fügen Sie Felder Ihrer Wahl in voller Breite hinzu

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 in voller Breite hinzu.

Fügen Sie einen Titel hinzu

Verwenden Sie auch einen Titel.

Hintergrundfarbe

Als nächstes ändern wir die Hintergrundfarbe.

• Hintergrundfarbe: #e7f2ff

Feldeinstellungen

Gehen wir zur Registerkarte Stil des Moduls und ändern die Feldeinstellungen.

• Felder mit Hintergrundfarbe: #ffffff
• Feldtextfarbe: #dddddd
• Fokustextfarbe: #007dff
• Vertex Padding Fields: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Untere Füllfelder: 1vw (Desktop), 2vw (Tablet), 3vw (Telefon)
• Schriftfelder: Keine öffnen

• Felder Textgröße: 0,7 vw (Desktop), 1,8 vw (Tablet), 3 vw (Telefon)

Einstellungen für den Titeltext

Bearbeiten Sie die Titeltexteinstellungen.

• Überschrift 3 einfügen: HXNUMX
• Titel mit weichem Licht: Fetter Text
• Textausrichtung: zentriert
• Titeltextfarbe: #007dff
• Titel Textgröße: 1 vw (Desktop), 2,5 vw (Tablet), 3,5 vw (Telefon)
• Höhe der Titelzeile: 1,6 em

Captcha-Texteinstellungen

Mit Captcha-Texteinstellungen.

• Schriftart-Captcha: Öffnen Sie Sans
• Captcha-Textfarbe: #007dff

Tasteneinstellungen

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

• Benutzerdefinierte Stile für Button verwenden: Ja
• Schaltflächentextgröße: 0,8 vw (Desktop), 2 vw (Tablet), 3 vw (Telefon)
• Textfarbe der Schaltfläche: #ffffff
• Hintergrund-Schaltfläche: #007dff
• Schaltfläche Rahmenbreite: 0 Pixel
• Randradius der Schaltfläche: 100 px

• Schriftart-Schaltfläche: Keine öffnen
• Schaltfläche „Weiches Licht“: Fettgedruckter Text

• Knopfrand: 1vw
• Obere Polstertaste: 1vw (Desktop), 2vw (Tablet und Telefon)
• Untere Polstertaste: 1vw (Desktop), 2vw (Tablet und Telefon)
• Linke Pad-Taste: 2vw (Desktop), 7vw (Tablet und Telefon)
• Rechte Pad-Taste: 2vw (Desktop), 7vw (Tablet und Telefon)

Abstand

Verwenden Sie benutzerdefinierte Auffüllwerte auf verschiedenen Bildschirmgrößen.

• Maximaler interner Headroom: 4vw (Desktop), 6vw (Tablet und Telefon)
• Interner Rand Unten: 4vw (Desktop), 6vw (Tablet und Telefon)
• Linker Innenrand: 2vw (Desktop), 6vw (Tablet und Telefon)
• Rechter Innenrand: 2vw (Desktop), 6vw (Tablet und Telefon)

Grenze

Ändern Sie dann die Rahmeneinstellungen.

• Abgerundetes Rechteck eingeben: 10px

Hauptelement, Kontakttitel und Captcha-CSS

Vervollständigen Sie die Moduleinstellungen, indem Sie einige kleine CSS-Änderungen auf der Registerkarte „Erweitert“ hinzufügen.

Hauptelement:

01	border-radius: 20px;

Titel der Kontakt :

01	margin-bottom: 1vw;

Captcha:

01	margin-top: 1.5vw;

Passen Sie Elemente an, um mit einem Klick ein Kontaktformular zu erstellen

Fügen Sie die Höhe von Spalte 3 hinzu

Sobald Sie alle Module an Ort und Stelle haben, ist es an der Zeit, den Effekt zu erstellen. Der erste Schritt, um das gewünschte Ergebnis zu erzielen, besteht darin, die 3-Spalten-Einstellungen zu öffnen und auf der Registerkarte „Erweitert“ eine benutzerdefinierte Reaktionshöhe hinzuzufügen.

Schreibtisch :

01	height: 3vw;

Tablette:

01	height: 5vw;

Telefon:

01	height: 6vw;

Fügen Sie der Schaltfläche und dem Pfeil eine CSS-Klasse hinzu

Als Nächstes fügen wir dieselbe CSS-Klasse den ersten beiden Textbausteinen in Spalte 3 hinzu.

• CSS-Klasse: show-Kontakt

Fügen Sie dem Kontaktformular eine CSS-Klasse hinzu

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

• CSS-Klasse: Kontaktformular-Modul

Kontaktformularmodul ausblenden

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

01	display: none;

Codemodul zu Spalte 3 mit JQuery- und CSS-Code hinzufügen

Und um die Klickfunktion zu erstellen, benötigen wir JQuery-Code. Wir werden auch benutzerdefinierten CSS-Code verwenden. Fügen Sie in Spalte 2 mit dem Code ein neues Codemodul hinzu. Achten Sie darauf, JQuery-Code zwischen script-Tags und CSS-Code zwischen style-Tags zu 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;

}

Übersicht

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.

Zusammenfassung

In diesem Artikel haben wir Ihnen gezeigt, wie Sie Ihrer benutzerdefinierten Kopfzeile ein Dropdown-Kontaktformular hinzufügen.

Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.