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.

Wenn Sie einen benutzerdefinierten Header für Ihre erstellen Website, mit dem Theme-Builder von Divi, werden Sie nach der perfekten Möglichkeit suchen, einen AAL (Call to Action) hinzuzufügen. Eine Möglichkeit, dies zu tun, besteht darin, ein Dropdown-Kontaktformular hinzuzufügen. Dies trägt dazu bei, das Gesamtbild Ihrer Kopfzeile sauber zu halten, und bietet gleichzeitig die Möglichkeit, mit Ihnen in Kontakt zu treten, ohne nach unten scrollen zu müssen. In diesem Tutorial zeigen wir Ihnen, wie Sie ein Dropdown-Kontaktformular mit erstellen 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.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie erstellen Einfach und kostenlos jedes Website- oder Blog-Design mit einem professionellen Look. Hören Sie auf, viel für eine Website zu zahlen, die Sie selbst erstellen können.

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

Sie möchten Ihre Produkte im Internet verkaufen?

Laden Sie WooCommerce kostenlos herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen und ganz einfach Ihren Online-Shop zu erstellen. Perfekt für Anfänger.

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 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.

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: Kontaktformular-Modul

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. 

%d Blogger wie diese Seite: