Möchten Sie eine erstellen Kontaktformular in Divi, das nach dem Klicken auf eine Schaltfläche angezeigt wird?
In diesem Divi-Tutorial zeigen wir Ihnen, wie Sie eine Kontaktformular die nach dem Klicken auf eine Schaltfläche mit nichts anderem als Divi, jQuery-Code und CSS-Code angezeigt wird.
Lesen Sie auch unseren Leitfaden über: Divi: So erstellen Sie eine klebrige Fußzeile mit „Reveal“-Effekt
Es ist eine großartige Möglichkeit, die zu halten Besucher Ihre Webseite konzentrierte sich auf die Aktion, zu der sie sich auf Knopfdruck verpflichtet hatten. Es bringt sie nicht auf eine andere Seite.
Übersicht
Unten können Sie einen kurzen Blick auf das werfen, was wir erstellen werden, und dann zum Tutorial springen!
Vorschau auf dem PC
Vorschau auf Telefon und Tablet
Erstellen Sie eine neue Seite mit einem vordefinierten Layout
Beginnen wir mit der Verwendung eines vordefinierten Layouts aus der Divi-Bibliothek. Für dieses Beispiel verwenden wir die Kontaktseite des Beauty-Produkt-Layout-Paket .
Fügen Sie eine neue Seite zu Ihrer hinzu Website und geben Sie ihm einen Titel, und wählen Sie dann die Option aus 'Divi Builder verwenden'.
Wir werden für dieses Beispiel ein vorgefertigtes Layout aus der Divi-Bibliothek verwenden, wählen Sie also „Layout wählen'.
Suchen und wählen Sie die Startseite des Layouts 'Innenarchitekturunternehmen'.
Wählen Sie 'Layout wählen', um das Layout zu Ihrer Seite hinzuzufügen.
Wir sind jetzt bereit, unser Tutorial fortzusetzen.
Erstellen Sie einen Abschnitt mit dem Button-Modul
Als erstes müssen wir einen neuen Abschnitt hinzufügen, in dem wir die Schaltfläche platzieren, die das ermöglicht Kontaktformular anzuzeigen.
Siehe auch: Divi: So erstellen Sie eine benutzerdefinierte Fußzeile
Fügen Sie einfach einen Standardabschnitt hinzu
Wählen Sie als Nächstes eine einspaltige Zeile aus.
Wenn Sie das getan haben, fügen Sie ihm ein Button-Modul hinzu.
Sie können die Schaltfläche beliebig anpassen, aber Sie müssen sicherstellen, dass die Schaltflächen-URL mit „#“ beginnt, gefolgt von etwas anderem. Sie können es nicht einfach leer lassen oder einfach das Zeichen „#“ verwenden. Durch Hinzufügen von „#“ und Text bewegt sich die Seite nicht, sobald Sie auf die Schaltfläche klicken. Wenn Sie es leer lassen, wird die Seite beim Klicken aktualisiert. Und wenn Sie nur '#' verwenden, werden Sie an den Anfang der Seite weitergeleitet.
Als nächstes müssen wir der Schaltfläche eine CSS-Klasse zuweisen. Wir werden diese CSS-Klasse später in diesem Artikel im jQuery-Code verwenden, um sicherzustellen, dass das Kontaktformular nach dem Klicken erscheint. Die Klasse, die wir der Schaltfläche zuweisen müssen, ist einfach „Schaltfläche“.
- CSS-Klasse: Schaltfläche
Erstellen Sie ein Kontaktformular für die PC-Version
Als Nächstes müssen wir das Desktop-Kontaktformular erstellen, das angezeigt wird, sobald jemand auf die Schaltfläche klickt, die wir im vorherigen Teil dieses Artikels erstellt haben. Später in diesem Artikel zeigen wir Ihnen auch, wie Sie die mobile Version erstellen.
Fügen Sie einen neuen Standardabschnitt hinzu
Beginnen Sie, indem Sie der Seite, an der Sie gerade arbeiten, einen neuen Standardabschnitt hinzufügen. Gehen Sie in den Abschnittseinstellungen zur Registerkarte „Erweitert“ und fügen Sie „Popup“ zum Feld „CSS-Klasse“ hinzu.
Scrollen Sie auf derselben Registerkarte nach unten und fügen Sie die folgenden CSS-Codezeilen in das Feld „Vorher“ der Unterkategorie „Benutzerdefiniertes CSS“ ein:
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999;
content: "";
background: rgba(0,0,0, 0.8);
position: fixed;
Indem wir dies hinzufügen, stellen wir sicher, dass der Abschnitt die gesamte Registerkarte einnimmt. Sie können die Hintergrundfarbe im CSS-Code anpassen, um das gewünschte Hintergrund-Overlay zu erstellen. In diesem Fall verwenden wir schwarze Farbe mit etwas Transparenz. Fügen Sie auf derselben Registerkarte dem Hauptelement auch die folgende CSS-Codezeile hinzu:
display: none;
Als letztes müssen wir auf der Registerkarte Erweitert den Abschnitt auf dem Telefon und Tablet in der Unterkategorie Sichtbarkeit deaktivieren.
Fügen Sie eine Zeile zu zwei Spalten hinzu
Fahren Sie fort, indem Sie eine zweispaltige Zeile hinzufügen und zur Registerkarte navigieren Design.
- Benutzerdefinierte Bundstegbreite verwenden: JA
- Maximale Breite: 1291px
Geben Sie die Parameter jeder Spalte ein.
Ändern Sie die inneren Ränder (oben, links und rechts) wie folgt:
- Interner Rand (oben, links, rechts): 30px
Schließen Sie ab, indem Sie zur Registerkarte Erweitert gehen. Fügen Sie im Hauptelement die folgenden CSS-Codezeilen hinzu:
transform: translatey(-50%) translatex(-50%);
position: fixed;
top: 50%;
left: 50%;
z-index: 1000;
border: 2px solid #0c71c3;
border-radius: 8px;
Fügen Sie das erste Textmodul hinzu
Nachdem Sie alle Änderungen an Abschnitt und Zeile vorgenommen haben, ist es an der Zeit, die verschiedenen Module hinzuzufügen, die Sie anzeigen möchten.
Als erstes fügen wir den angezeigten Titel hinzu. Beginnen Sie mit dem Hinzufügen eines neuen Textmoduls zur ersten Spalte der Zeile, schreiben Sie den Text in die Registerkarte Inhalt und wechseln Sie zur Registerkarte Design.
Auf der Registerkarte „Stil“ haben wir die folgenden Einstellungen für die Unterkategorie „Text“ verwendet:
- Header-Schriftart: Lobster
- Kopfzeile mit weichem Licht: Fetter Text
- Textausrichtung: Fett
- Kopftextfarbe: #002282
- Kopfzeilentextgröße: 37px
- Kopfzeilenhöhe: 1,7 em
Fügen Sie ein zweites Textmodul hinzu
Fahren Sie fort, indem Sie ein neues Textmodul hinzufügen und den Text eingeben, der auf der Registerkarte Inhalt angezeigt werden soll. Wechseln Sie zur Registerkarte Stil und wenden Sie die folgenden Einstellungen auf die Unterkategorie Text an:
- Textausrichtung: Zentriert
- Textschriftart: Arial
- Text Textgröße: 13px
- Textfarbe Text: #002282
- Textzeilenhöhe: 1,7 em
Fügen Sie ein Modul „Folgen Sie uns in sozialen Netzwerken“ hinzu
Als Nächstes fügen wir der ersten Spalte auch das Modul „Folgen Sie uns in den sozialen Medien“ hinzu. In diesem Fall haben wir drei Social-Media-Symbole ausgewählt; Facebook, Twitter und Instagram.
Das letzte, was wir tun müssen, ist, diesem Modul auf der Registerkarte Erweitert eine Auffüllung (links) hinzuzufügen. Fügen Sie dem Hauptelement die folgende CSS-Codezeile hinzu:
padding-left: 40%;
Fügen Sie ein Kontaktformular-Modul hinzu
Dann können wir zur zweiten Spalte in der Zeile wechseln. In dieser Spalte werden wir als Erstes das Kontaktformular-Modul platzieren.
Für dieses Beispiel haben wir nur zwei Felder ausgewählt; Name und E-Mail.
Navigieren Sie nach dem Hinzufügen des Moduls „Kontaktformular“ zur Registerkarte „Stil“ des Moduls „Kontaktformular“ und nehmen Sie die folgenden Änderungen an der Unterkategorie „Felder“ vor:
- Textfarbfelder: #002282
- Textgrößenfelder: #002282
- Feldlinienhöhe: 1,7 em
Nehmen Sie auf derselben Registerkarte die folgenden Änderungen an der Unterkategorie Schaltfläche vor:
- Benutzerdefinierte Stile für Button verwenden: Ja
- Schaltfläche "Textgröße": 20
- Textfarbe der Schaltfläche: #FFFFFF
- Hintergrundschaltfläche: #0086c4
Siehe auch: So erstellen Sie ein Schiebe- und Push-Menü in DIVI
- Breite des Schaltflächenrahmens: 2
- Schaltfläche Randradius: 3
Wechseln Sie zur Registerkarte Erweitert und fügen Sie eine Marge von 5 % hinzu.
Fügen Sie ein Zusammenfassungsmodul hinzu
Eine weitere Sache, die wir der zweiten Spalte hinzufügen müssen, ist ein Zusammenfassungsmodul. Das einzige, wofür wir dieses Modul brauchen, ist das Exit-Symbol oben rechts im Popup-Fenster. Wählen Sie das nächste Symbol aus der Liste der Symbole und lassen Sie alles andere leer.
Wechseln Sie dann zur Registerkarte „Erweitert“ und geben Sie als CSS-Klasse „Schließen“ ein.
Fügen Sie auf derselben Registerkarte die folgenden Codezeilen zum Hauptelement der benutzerdefinierten CSS-Unterkategorie hinzu:
position: absolute;
top: -45px;
right: -30px;
cursor: pointer;
Wenden Sie eine Verlaufsfüllung auf die Linie an
Schließlich fügen wir der Linie einen schönen Hintergrund mit Farbverlauf hinzu. Öffnen Sie die Einstellungen und wenden Sie die folgenden Änderungen an der Option für den Verlaufshintergrund an:
- Erste Verlaufsfarbe: #FFFFFF
- Zweite Verlaufsfarbe: #0c71c3
- Verlaufstyp: Linear
- Steigungsrichtung: 124 Grad
- Ausgangsposition: 50%
- Endposition: 50%
Erstellen Sie ein Kontaktformular für Tablet und Telefon
Jetzt, da wir die PC-Version erstellt haben, werden die Tablet- und Telefonversion viel schneller gehen. Die meisten Module, die wir für die PC-Version verwendet haben, sind die gleichen wie für die mobile Version.
Vorherigen Abschnitt duplizieren
Anstatt es für Telefon und Tablet zu deaktivieren, wie wir es für die PC-Version getan haben, werden wir die PC-Version in der Unterkategorie Sichtbarkeit in den Moduleinstellungen deaktivieren:
Ändern Sie den CSS-Code des Zusammenfassungsmoduls
Anstatt den Desktop-Code zu verwenden, verwenden Sie stattdessen Folgendes:
position: absolute;
top: -15px;
right: -25px;
cursor: pointer;
Wenden Sie eine Verlaufsfüllung auf die Linie an
Für die mobile Version verwenden wir verschiedene Einstellungen für den Verlaufshintergrund der Linie:
- Erste Verlaufsfarbe: #FFFFFF
- Zweite Verlaufsfarbe: #0c71c3
- Verlaufstyp: Linear
- Steigungsrichtung: 180 Grad
- Ausgangsposition: 40%
- Endposition: 40%
jQuery-Code hinzufügen
Das letzte, was wir für dieses Tutorial tun müssen, ist das Hinzufügen des jQuery-Codes. Fügen Sie ein Code-Modul hinzu und fügen Sie den folgenden JQuery-Code ein:
<script type="text/javascript">
jQuery(function($){
jQuery('.button').click(function() {
jQuery('.popup').css('display', 'block');
});
jQuery('.close').click(function() {
jQuery('.popup').css('display', 'none');
});});
</script>
Ergebnis
Wenn Sie der Meldung Schritt für Schritt folgen, sollten Sie in der Lage sein, das folgende Ergebnis auf dem Computer zu erhalten:
Und das folgende Ergebnis auf Tablets und Telefonen:
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Artikel haben wir Ihnen gezeigt, wie Sie ein One-Click-Kontaktformular erstellen. Verwenden Sie diese Methode, um mit Ihrem in Kontakt zu treten Besucher ist subtil, aber effektiv.
Wir hoffen, dass dieses Tutorial Sie für Ihre nächsten Divi-Projekte inspirieren wird. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich auch beraten lassen unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
