Springe zum Hauptinhalt

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

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Wenn Sie mit dem Themengenerator von Divi einen benutzerdefinierten Header für Ihre Website erstellen, suchen Sie nach der perfekten Möglichkeit, eine AAL (Call to Action) hinzuzufügen. Eine Möglichkeit, dies zu tun, besteht darin, ein Dropdown-Kontaktformular hinzuzufügen. Auf diese Weise können Sie das Gesamtbild Ihres Headers sauber halten und gleichzeitig mit Ihnen in Kontakt treten, ohne nach unten scrollen zu müssen. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Dropdown-Kontaktformular mit Divi- und JQuery & CSS-Code erstellen. 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.

Divi Dropdown-Menü

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.

Globaler Divi-Header

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.

Erstellen Sie einen globalen Divi-Header

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
Hintergrundanpassung

Abstand

Entfernen Sie dann die standardmäßige obere und untere Polsterung aus dem Abschnitt.

  • Obere Polsterung: 0px
  • Polsterung unten: 0px
Polsterkonfiguration

Schattenkiste

Tragen Sie auch einen subtilen Kastenfarbton auf.

  • Stärke der Schattenunschärfe: 50px
  • Schattenfarbe: rgba (0,0,0,0,15)
Divi Schattenkonfiguration

Fügen Sie eine neue Zeile hinzu

Spaltenstruktur

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

Wahlen Sie ein Layout

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%
Konfigurieren Sie die Divi-Line-Dimension

Abstand

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

  • Obere Polsterung: 1vw
  • Polsterung unten: 1vw
Konfiguration des Abschnittsabstands

Hauptelement

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

align-items: center;

Benutzerdefinierte CSS

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
Spaltenparameter

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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Bildmodul divi

Ausrichtung

Ändern Sie dann die Ausrichtung des Moduls.

  • Bildausrichtung: Mitte
Bildmodul ausrichten

Sizing

Ändern Sie auch die Breite.

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

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.

Personalisierung des Divi-Menümoduls

Bereitstellung

Wechseln Sie zur Registerkarte Moduldesign und ändern Sie den Layoutstil.

  • Stil: zentriert
Menümodulstil

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
Divi-Menütext

Dropdown-Menütexteinstellungen

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

  • Farbe der Zeile des Dropdown-Menüs: # 007dff
Divi Dropdown-Menü

Symbole

Mit Hamburger Menü Symbol Farbe.

  • Hamburger Menü Symbol Farbe: # 007dff
Menüsymbole divi

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.

Kontaktieren Sie uns divi module

Hintergrundfarbe

Fügen Sie dann eine Hintergrundfarbe hinzu.

  • Hintergrundfarbe: # 007dff
Divi Hintergrund

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
Divi Schriftfarbe

Sizing

Ändern Sie dann die Modulgrößenparameter.

  • Breite: 33%
  • Ausrichtung des Moduls: Mitte
Größe Abschnitt Text divi

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)
Konfiguration des Textmodulabstands

Grenze

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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Alle Ecken: 100px
Rahmenkonfiguration des Textmoduls

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: "▼".

Divi Fleche Textmodul

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
Schriftteil-Divi-Textmodul

Z Index

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

  • Z-Index: 11
Position des Divi-Textmoduls

Fügen Sie das Kontaktformularmodul zu Spalte 3 hinzu

Sie können jetzt ein Kontaktformular am unteren Rand des Textmoduls hinzufügen, das den Pfeil enthält. Dieses Modul ist recht einfach zu verwenden, daher müssen Sie die Felder anpassen, die Sie sichtbar machen möchten.

Kontaktformularmodul

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;

Muster-Kontaktformular

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
Showkontaktbereich hinzufügen

Fügen Sie dem Kontaktformular eine CSS-Klasse hinzu

Wir benötigen außerdem eine benutzerdefinierte CSS-Klasse für das Kontaktformularmodul.

  • CSS-Klasse: Kontaktformular-Modul
Fügen Sie der Divi-Form eine Klasse hinzu

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;

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Style CSS Modul Divi

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;}

Fügen Sie Javascript-Code hinzu

Übersicht

Nachdem wir alle Schritte durchlaufen haben, werfen wir einen letzten Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.

Büro

Designbeispiel

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. 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
4 Aktien
Aktie4
tweet
Registrieren