Wenn Sie einen benutzerdefinierten Header für Ihre erstellen Website, mit dem Theme Builder von Divi suchen Sie nach der perfekten Möglichkeit, einen AAL (Call to Action) hinzuzufügen. Eine Möglichkeit, dies zu tun, besteht darin, a hinzuzufügen Kontaktformular scrollen. Dies hilft Ihnen dabei, das Gesamtbild Ihres Headers sauber zu halten und gleichzeitig die Möglichkeit zum Eingeben zu bieten Kontakt mit Ihnen, ohne nach unten scrollen zu müssen. In diesem Tutorial zeigen wir Ihnen, wie Sie eine erstellen Kontaktformular Dropdown mit Divi und JQuery & CSS-Code. Sie können die JSON-Datei auch kostenlos herunterladen!
Gehen wir.
Übersicht
Bevor wir uns mit dem Tutorial befassen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.
1. Gehen Sie zu Divi Theme Builder und erstellen Sie einen globalen Header
Gehen Sie zu Divi Theme Builder
Gehen Sie zunächst zum Divi Theme Builder im Backend Ihrer WordPress-Site.
Erstellen Sie einen globalen Header
Klicken Sie auf "Globalen Header hinzufügen" und wählen Sie "Globalen Header erstellen", um einen benutzerdefinierten globalen Header zu erstellen.
2. Erstellen Sie das Header-Design
Abschnittseinstellungen
Hintergrundfarbe
Sobald Sie sich in der gesamten Header-Vorlage befinden, werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und verwenden Sie eine weiße Hintergrundfarbe.
- Hintergrundfarbe: #FFFFFF
Abstand
Entfernen Sie dann die standardmäßige obere und untere Polsterung aus dem Abschnitt.
- Obere Polsterung: 0px
- Polsterung unten: 0px
Schattenkiste
Tragen Sie auch einen subtilen Kastenfarbton auf.
- Stärke der Schattenunschärfe: 50px
- Schattenfarbe: rgba (0,0,0,0,15)
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie dem Abschnitt weiterhin eine neue Zeile hinzu, indem Sie die folgende Spaltenstruktur verwenden:
Sizing
Öffnen Sie die Zeilenparameter und ändern Sie die Größenparameter wie folgt, ohne weitere Module hinzuzufügen:
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Spaltenhöhen ausgleichen: Ja
- Breite: 95%
- Maximale Breite: 100%
Abstand
Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.
- Obere Polsterung: 1vw
- Polsterung unten: 1vw
Hauptelement
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 auch sicher, dass die zweite Spalte für reaktive Zwecke einen höheren Z-Index-Wert hat.
- Z-Index: 12
Fügen Sie Spalte 1 ein Bildmodul hinzu
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: Mitte
Sizing
Ändern Sie auch die Breite.
- Breite: 3vw (Desktop), 5vw (Tablet), 7vw (Telefon)
Fügen Sie ein Menümodul zu Spalte 2 hinzu
Wählen Sie das Menü
In der zweiten Spalte fügen wir ein Menümodul hinzu.
Bereitstellung
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie den Layoutstil.
- Stil: zentriert
Menütexteinstellungen
Ändern Sie dann die Texteinstellungen im Modulmenü.
- Menüschrift: Öffnen ohne
- Schriftgröße des Menüs: Halb fett
- Menütextfarbe: # 000000
- Menütextgröße: 0.8 VW (Desktop), 2 VW (Tablet), 3 VW (Telefon)
- Menübuchstabenabstand: 1px
Dropdown-Menütexteinstellungen
Ändern Sie dann die Farbe der Linie im Dropdown-Menü.
- Farbe der Zeile des Dropdown-Menüs: # 007dff
Symbole
Mit Hamburger Menü Symbol Farbe.
- Hamburger Menü Symbol Farbe: # 007dff
Fügen Sie das 1-Textmodul zur 3-Spalte hinzu
Kopie hinzufügen
Fahren wir mit dem dritten Modul fort! Fügen Sie ein Textmodul mit einer Kopie Ihrer Wahl hinzu.
Hintergrundfarbe
Fügen Sie dann eine Hintergrundfarbe hinzu.
- Hintergrundfarbe: # 007dff
Texteinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:
- Textschrift: Öffnen Sie Sans
- Schriftgewicht des Textes: fett
- Textfarbe: #ffffff
- Textgröße: 0.8vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Textausrichtung: Mitte
Sizing
Ändern Sie dann die Modulgrößenparameter.
- Breite: 33%
- Ausrichtung des Moduls: Mitte
Abstand
Fügen Sie dann eine benutzerdefinierte obere und untere Polsterung hinzu.
- Obere Polsterung: 0.8vw (Desktop), 2vw (Tablet und Telefon)
- Bodenpolsterung: 0.8vw (Schreibtisch), 2vw (Tablet und Telefon)
Grenze
Vervollständigen Sie die Modulparameter, indem Sie einen Rahmenradius hinzufügen.
- Alle Ecken: 100px
Fügen Sie das 2-Textmodul zur 3-Spalte hinzu
Fügen Sie dem Inhaltsbereich ein Symbol hinzu
Fahren wir mit dem nächsten Modul fort, bei dem es sich um ein weiteres Textmodul handelt. Fügen Sie im Inhaltsbereich den folgenden Pfeil hinzu: "▼".
Texteinstellungen
Wechseln Sie zur Registerkarte Moduldesign und ändern Sie die Texteinstellungen entsprechend:
- Textschrift: Öffnen Sie Sans
- Textfarbe: # 007fff
- Textgröße: 3vw
- Höhe der Textzeile: 0em
- Textausrichtung: Mitte
Z Index
Wir erhöhen auch den z-Index des Moduls.
- Z-Index: 11
Fügen Sie das Kontaktformularmodul zu Spalte 3 hinzu
Sie können jetzt eine hinzufügen Kontaktformular direkt am unteren Rand des Textmoduls, das den Pfeil enthält. Dieses Modul ist recht einfach zu verwenden, Sie müssen also anpassen, welche Felder Sie sichtbar machen möchten.
3. Passen Sie die Elemente an, um mit einem Klick ein Kontaktformular zu erstellen
Fügen Sie die Höhe von Spalte 3 hinzu
Sobald alle Mods vorhanden sind, ist es Zeit, den Effekt zu erstellen. Der erste Schritt zum Erreichen des gewünschten Ergebnisses besteht darin, die Einstellungen in Spalte 3 zu öffnen und auf der Registerkarte "Erweitert" eine benutzerdefinierte Höhe hinzuzufügen.
Büro:
height: 3vw;
Tablette:
height: 5vw;
Telefon:
height: 6vw;
Fügen Sie der Schaltfläche und dem Pfeil eine CSS-Klasse hinzu
Dann fügen wir den ersten beiden Textmodulen in Spalte 3 dieselbe CSS-Klasse hinzu.
- CSS-Klasse: show-Kontakt
Fügen Sie dem Kontaktformular eine CSS-Klasse hinzu
Wir benötigen außerdem eine benutzerdefinierte CSS-Klasse für das Kontaktformularmodul.
- CSS-Klasse: Kontakt-Formularmodul
Blenden Sie das Kontaktformularmodul aus
Fahren Sie fort, indem Sie dem Hauptelement des Kontaktformularmoduls eine zusätzliche Zeile CSS-Code hinzufügen. Dadurch können wir das Modul vor dem Klicken ausblenden.
display: none;
Fügen Sie Spalte 3 ein Codemodul mit JQuery- und CSS-Code hinzu
Und um die Klickfunktion zu erstellen, benötigen wir JQuery-Code. Wir werden auch benutzerdefinierten CSS-Code verwenden. Fügen Sie Spalte 2 ein neues Codemodul mit dem Code hinzu. Stellen Sie sicher, dass JQuery-Code zwischen Skript-Tags und CSS-Code zwischen Stil-Tags platziert wird.
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 alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Büro
Was man sich merken sollte
In diesem Artikel haben wir Ihnen gezeigt, wie Sie Ihrem benutzerdefinierten Header ein Dropdown-Kontaktformular hinzufügen. Es ist eine großartige Möglichkeit, frühzeitig Aktionen auszulösen.
