Jede Website benötigt einen Kontaktbereich, aber das bedeutet nicht, dass Sie sich für ein Standarddesign entscheiden müssen. Mit den Scroll-Effekten von Divi können Sie einen schwebenden Kontaktbereich erstellen, der auffällt. Verbessern Sie Ihre Benutzerinteraktion mit einem vertikal scrollenden Kontaktbereichslayout, das Besucher zur Interaktion mit Ihrem Kontaktformular einlädt. In diesem Artikel zeigen wir Ihnen, wie Sie einen schwebenden Kontaktabschnitt in voller Breite erstellen, den Sie jeder Seite hinzufügen können. Mit dem Divi Theme Builder können Sie es sogar oben in einer Fußzeile auf der gesamten Website hinzufügen.
Unten finden Sie eine kostenlose herunterladbare Datei mit dem JSON-Layout, die Sie in Ihre eigene Divi-Bibliothek hochladen können. Wir haben auch eine PSD-Vorlage hinzugefügt, mit der Sie den Kartenhintergrund neu erstellen können, sowie eine Karten-Pin-SVG, mit der Sie sie mit Ihren eigenen Farben anpassen können.
Erstellen Sie eine Elementstruktur
In diesem Entwurf verwenden wir ein Hintergrundbild, das auf Google Map den Ort darstellt, den Sie hervorheben möchten. Sie können dies mit Photoshop oder einem anderen Bildeditor tun.
Einen neuen Abschnitt hinzufügen
Jetzt ist es an der Zeit, den schwebenden Kontaktbereich mit dem Divi Builder zu erstellen! Als erstes öffnen wir eine neue oder vorhandene Seite und fügen einen neuen Abschnitt hinzu.
Fügen Sie auf der Registerkarte "Inhalt" den Hintergrund der Karte hinzu, die Sie in Photoshop erstellt haben.
- Hintergrundbild: Ihre geänderte Karte
Abstand
Passen Sie als Nächstes die Einstellungen für den Abschnittsabstand auf der Registerkarte Entwurf an.
- Oberer und unterer Rand: 50vh
- Polsterung unten: 0vw
Sichtbarkeit
Stellen Sie dann die Überläufe auf sichtbar ein.
- Horizontaler und vertikaler Überlauf: sichtbar
Position
Stellen Sie abschließend den Z-Index des Abschnitts auf 10 ein.
- Z-Index: 10
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Jetzt ist die Zeit gekommen, ein paar Dinge hinzuzufügen. Fügen Sie zunächst eine Zeile mit 2 Spalten hinzu.
Sizing
Öffnen Sie die Linienparameter und passen Sie die Größe wie folgt an.
- Breite
- Büro: 90%
- Tablet und Telefon: 80%
- Maximale Breite: 90%
Sichtbarkeit
Klicken Sie auf die Registerkarte Erweitert und passen Sie die Überläufe an.
- Horizontaler und vertikaler Überlauf: sichtbar
Position
Schließen Sie die Zeileneinstellungen ab, indem Sie die Positionseinstellungen ändern.
- Position: Relativ
- Versetzter Ursprung: Oben links
- Vertikaler Versatz
- Desktop: -8vw
Einstellungen für Spalte 1
Hintergrund
Bevor wir Module hinzufügen, müssen wir die einzelnen Spalten formatieren. Fügen Sie Spalte 1 eine Hintergrundfarbe hinzu.
- Einfarbig: # 25274d
Abstand
Passen Sie als nächstes die Abstandseinstellungen an.
- Polsterung oben und unten
- Desktop und Tablet: 7vw
- Linke und rechte Polsterung
- Desktop: 3 vw
- Tablet und Telefon: 6vw
Grenze
Fügen Sie dann den Rahmeneinstellungen einige abgerundete Ecken hinzu.
- Abgerundete Ecken: 10px alle vier Ecken
Bildlaufeffekte
Verwenden Sie in den Einstellungen für Bildlaufeffekte eine vertikale Bewegung. Dies wird uns helfen, einen schwebenden Effekt zu erzeugen.
- Bildlauftransformationseffekte: Vertikale Bewegung
- Vertikale Bewegung / Desktop-Set
- Startversatz: 4
- Mittlerer Versatz: 0 (bei 50%)
- Endversatz: -4
- Vertikale Bewegung / Tablet und Telefon
- Startversatz: 4
- Mittlerer Versatz: 0 (bei 40% und 60%)
- Endversatz: -3
- Bewegungseffekt auslösen: Mitte des Elements
Einstellungen für Spalte 2
Position
Kommen wir nun zu den Parametern der zweiten Spalte. Passen Sie die Positionseinstellungen entsprechend an.
- Position: Relativ
- Ursprung des Versatzes: oben links
- Vertikaler Versatz
- Büro: 25vw
Scroll-Effekte
Wir fügen dieser Spalte auch eine vertikale Bewegung hinzu.
- Scroll-Transformationseffekte: vertikale Bewegung
- Definieren Sie die vertikale / Desktop-Bewegung
- Startoffset: 2
- Durchschnittlicher Offset: 0 (bei 50%)
- Endversatz: -2
- Definieren Sie vertikale Bewegung / Tablet und Telefon
- Startoffset: 0
- Durchschnittlicher Offset: 0 (bei 50%)
- Endversatz: -2
- Bewegungseffekt-Trigger: Element oben
Fügen Sie der 1-Spalte einen Textbaustein hinzu
Inhalt
Es ist Zeit, Module hinzuzufügen, beginnend mit einem Textmodul in Spalte 1. Fügen Sie den gewünschten H2-Inhalt hinzu.
Titeltext
Gehen Sie zur Registerkarte Design und gestalten Sie den H2-Text wie folgt.
- Titelstufe: H2
- Schriftart: Palanquin Dark
- Schriftgewicht: fett
- Schriftstil: TT
- Farbe: gelb # ffd868
- Größe
- Büro: 5vw
- Tablette: 10vw
- Telefon: 12vw
- Buchstabenabstand: 4px
Fügen Sie Spalte 1 ein Kontaktformularmodul hinzu
Inhalt
Fügen Sie unter dem Textmodul ein Kontaktformular hinzu. Dies sind die Felder, die wir verwenden:
- Name
- E–Mail
- Material
- Nachricht
SPAM-Schutz
Vor dem Stylen des Kontaktformularmoduls. Aktivieren Sie den Spam-Schutz und verbinden Sie Ihr ReCaptcha-Konto.
- Verwenden Sie einen Spam-Schutzdienst: Ja
- Dienstleister: ReCaptcha
- Wählen Sie ein Konto
Felder
Wechseln Sie zur Registerkarte "Design" und gestalten Sie die Felder wie folgt.
- Hintergrundfarbe: Dunkelblau # 25274d
- Textfarbe: hellgrau # d1d1d1
- Fokus Hintergrundfarbe: Dunkelblau # 25274d
- Fokustextfarbe: hellgrau # d1d1d1
- Schriftart: Sänfte
- Stil: TT
- Textgröße
- Büro: 0.9vw
- Tablette: 2vw
- Telefon: 3vw
- Buchstabenabstand: 1px
Taste
Stilisieren Sie dann die Schaltfläche.
- Benutzerdefinierte Stile: Ja
- Textgröße: 20px
- Textfarbe: dunkelblau # 25274d
- Hintergrundfarbe: Gelb # ffd868
- Randradius: 7px
- Symbolfarbe: Dunkelblau # 25274d
- Oberer Rand: 5px
Sizing
Wir ändern dann die Größenparameter.
- Breite: 100%
- Maximale Breite: 100%
Abstand
Wir werden auch Top-Polster hinzufügen.
- Obere Polsterung: 4vw
Grenze
Vervollständigen Sie die Modulparameter, indem Sie die Rahmenparameter anpassen.
- Eingänge mit abgerundeten Ecken: 6px an den vier Ecken
- Einträge Rahmenstile: alle vier Seiten
- Eingangsrandbreite: 2px
- Einträge Rahmenfarbe: gelb # ffd868
Fügen Sie das Social Media Tracking-Modul zu Spalte 2 hinzu
Inhalt
Gehen Sie zu Spalte 2 und fügen Sie ein Social Media-Modul hinzu. Nutzen Sie alle sozialen Netzwerke, die Sie benötigen.
Pfandrecht
Fügen Sie vor dem Stylen Links zu den entsprechenden Netzwerken hinzu.
Kontext des Artikels
Öffnen Sie nun das erste soziale Netzwerk und ändern Sie die Hintergrundfarbe.
- Farbe: Dunkelblau # 25274d
Elementsymbol
Ändern Sie auf der Registerkarte "Design" desselben Elements die Symboleinstellungen wie folgt.
- Farbe: gelb # ffd868
- Symbol Schriftgröße
- Schreibtisch und Tablet: 31 px
- Telefon: 26 px
Artikelabstand
Fügen Sie dann einen kleinen Rand hinzu, um die Symbole voneinander zu trennen.
- Rechter Rand: 1vw
Kopieren und Einfügen von Elementstilen
Um die verbleibenden sozialen Netzwerke zu formatieren, kehren Sie zum Hauptinhaltsfenster zurück und kopieren Sie die Elementstile vom ersten Symbol. Fügen Sie dann die Elementstile in die verbleibenden sozialen Netzwerke ein.
Ausrichtung
Wechseln Sie zur Registerkarte Hauptdesign und stellen Sie sicher, dass das Modul linksbündig ausgerichtet ist.
- Ausrichtung des Moduls: links
Sizing
Passen Sie dann die Größe des Moduls an.
- Breite: 100%
Abstand
Löschen Sie auch alle Standardfüllungen.
- Obere, untere, linke und rechte Polsterung: 0vw
Grenze
Fügen Sie abschließend in den Rahmeneinstellungen abgerundete Ecken hinzu. Dadurch werden die Ränder aller Symbole gleichzeitig angepasst.
- abgerundete Ecken
- Oben links und rechts: 7 Pixel
- Unten links und rechts: 0px
Fügen Sie der 2-Spalte einen Textbaustein hinzu
Inhalt
Fügen Sie unter dem Social Media-Modul ein weiteres Textmodul hinzu. Fügen Sie Inhalte Ihrer Wahl hinzu. Wir haben zwei Adressen hinzugefügt, eine Telefonnummer und eine E-Mail. Verwenden Sie Fettdruck auf dem Titel jedes Elements in Großbuchstaben.
- Hauptsitz: 1587 Sukhumvit Soi 21, Bangkok, Thailand.
- Verkaufsstelle : Emporium Mall, 2. Stock
- Telefon: (321) 564 2398
- E-Mail: [E-Mail geschützt]
Kontext
Ändern Sie die Hintergrundfarbe des Moduls.
- Farbe: Dunkelblau # 25274d
Text
Wechseln Sie zur Registerkarte Design und gestalten Sie den Text.
- Schriftart: Sänfte
- Farbe: gelb # ffd868
- Größe: 18px
Abstand
Fügen Sie auch benutzerdefinierte Abstandswerte hinzu.
- Oberer Rand
- Büro: -60px
- Tablet und Telefon: -50 Pixel
- Obere, untere, linke und rechte Polsterung
- Büro: 3vw
- Tablette: 6vw
- Telefon: 8vw
Grenze
Vervollständigen Sie das Modul, indem Sie in den Rahmeneinstellungen abgerundete Ecken hinzufügen. Das ist es!
- Abgerundete Ecken: 10 Pixel oben rechts, unten links und unten rechts.
Übersicht
Nachdem wir den Abschnitt mit den schwebenden Kontakten neu erstellt haben, sehen Sie sich das Ergebnis auf verschiedenen Bildschirmgrößen an.
Zusätzliche Ressourcen
Die Ressourcen können das, was Sie gerade gelesen haben, ergänzen. Sie können zusätzlich oder von Personen verwendet werden, die das Divi-Thema nicht haben.
- Wie ein Popup-Kontaktformular auf Wordpress hinzufügen
- So fügen Sie ein Dropdown-Formular zum globalen Header von Divi hinzu
- 5 Plugins zum Erstellen von Kontaktformularen
zu beenden
Die Verwendung der neuen Divi-Bildlaufeffekte verwandelt jedes Standardlayout in ein schönes Design. Indem Sie Ihren eigenen Hintergrund erstellen, haben Sie mehr Kontrolle über das Erscheinungsbild des fertigen Designs. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!
