Erstellen Sie einen schwebenden Kontaktbereich mit Bildlaufeffekten auf Divi

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: 3vw
  • 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
• Ihre 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.

• Facebook
• Twitter
• Linkedin

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!