Springe zum Hauptinhalt

Erstellen Sie einen schwebenden Kontaktbereich mit Bildlaufeffekten auf Divi

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]

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

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
Divi 1 Abschnitt Abstandskonfiguration

Sichtbarkeit

Stellen Sie dann die Überläufe auf sichtbar ein.

  • Horizontaler und vertikaler Überlauf: sichtbar
schwimmender Kontaktabschnitt

Position

Stellen Sie abschließend den Z-Index des Abschnitts auf 10 ein.

  • Z-Index: 10
Divi Abschnitt Position

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.

Zeile hat zwei Spalten divi

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%
Divi-Linienparameter

Sichtbarkeit

Klicken Sie auf die Registerkarte Erweitert und passen Sie die Überläufe an.

  • Horizontaler und vertikaler Überlauf: sichtbar
Divi Line Overflow Konfiguration

Position

Schließen Sie die Zeileneinstellungen ab, indem Sie die Positionseinstellungen ändern.

  • Position: Relativ
  • Versetzter Ursprung: Oben links
  • Vertikaler Versatz
    • Desktop: -8vw
Konfigurieren Sie die Position der Teilleitung

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
Spaltenfarbe 1 Divi

Abstand

Passen Sie als nächstes die Abstandseinstellungen an.

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]

  • Polsterung oben und unten
    • Desktop und Tablet: 7vw
  • Linke und rechte Polsterung
    • Desktop: 3vw
    • Tablet und Telefon: 6vw
Konfiguration mit zwei Spaltenabständen

Grenze

Fügen Sie dann den Rahmeneinstellungen einige abgerundete Ecken hinzu.

  • Abgerundete Ecken: 10px alle vier Ecken
Divi-Abschnitt mit abgerundeten Kanten

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
Passen Sie den Bildlaufeffekt für Divi-Abschnitte an

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
Anpassung der Divi-Spalte

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
Divi-Scrolling-Effekt

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.

Inhaltsmodul für Spalte 1

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
Personalisierung der Divi-Schriftarten

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
Divi Kontaktformular hinzufügen

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
Divi Kontaktformular Spam-Schutz

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
Farbfelder anpassen 1

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
Anpassen des Divi-Button-Stils 1
Farbkonfiguration der Divi-Schaltfläche

Sizing

Wir ändern dann die Größenparameter.

  • Breite: 100%
  • Maximale Breite: 100%
Aufteilungskonfiguration

Abstand

Wir werden auch Top-Polster 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]

  • Obere Polsterung: 4vw
Divi Abstand

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
Divi Border Konfiguration

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
Modul folgen Sie uns in sozialen Netzwerken

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
Ändern Sie den Hintergrund von Divi 1

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
Farbdivi anpassen

Artikelabstand

Fügen Sie dann einen kleinen Rand hinzu, um die Symbole voneinander zu trennen.

  • Rechter Rand: 1vw
Konfiguration des Social-Sharing-Abstands

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.

Stilelement kopieren
Stilelement divi einfügen

Ausrichtung

Wechseln Sie zur Registerkarte Hauptdesign und stellen Sie sicher, dass das Modul linksbündig ausgerichtet ist.

  • Ausrichtung des Moduls: links
Wählen Sie die Ausrichtung

Sizing

Passen Sie dann die Größe des Moduls an.

  • Breite: 100%
Konfigurieren Sie die Teilung

Abstand

Löschen Sie auch alle Standardfüllungen.

  • Obere, untere, linke und rechte Polsterung: 0vw
Konfigurieren Sie den Divi-Abstand

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
Konfiguration des Divi-Modulrahmens

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]
Konfiguration der Divi-Textmoduladresse

Kontext

Ändern Sie die Hintergrundfarbe des Moduls.

  • Farbe: Dunkelblau # 25274d
Hintergrundkonfiguration des Textmoduls

Text

Wechseln Sie zur Registerkarte Design und gestalten Sie den Text.

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]

  • Schriftart: Sänfte
  • Farbe: gelb # ffd868
  • Größe: 18px
Divi Modul Textschrift

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
Divi Abstand Rand

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.
Divi-Textmodul mit abgerundeten Rändern

Übersicht

Nachdem wir den Abschnitt mit den schwebenden Kontakten neu erstellt haben, sehen Sie sich das Ergebnis auf verschiedenen Bildschirmgrößen an.

schwimmender Kontaktabschnitt

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.

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!

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
0 Aktien
Aktie
tweet
Registrieren