So fügen Sie mit Divis Theme Builder automatisch ein Kontaktformular für die untere Seite zu allen Seiten hinzu

Wenn Sie damit beschäftigt sind, alle Seiten einzurichten, die Sie in Ihre Website aufnehmen möchten, ist die Wahrscheinlichkeit groß, dass Sie am Ende jeder Seite ein Kontaktformular einfügen möchten, um die Reise Ihrer Besucher zu erleichtern. Mit Divi können Sie natürlich der Seite selbst ein Kontaktformular hinzufügen, aber wenn Sie den Prozess lieber rationalisieren möchten, ist dies auch möglich. Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie automatisch allen Ihren Seiten gleichzeitig ein Kontaktformular für die untere Seite hinzufügen. Wir fügen außerdem automatisch ein festes Symbol unten rechts mit einem Ankerlink hinzu, der die Leute automatisch zum Kontaktbereich der Seite weiterleitet, auf der sie sich befinden. Sie können die Seitenvorlage auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die Seitenvorlage KOSTENLOS herunter

Um die kostenlose Seitenvorlage in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Tutorial-Übersicht

• Richten Sie die Seiten Ihrer Website mit einem Layoutpaket Ihrer Wahl ein
• Sobald Ihr Seitendesignstil festgelegt ist, können Sie den Designstil im Kontaktformular auf der unteren Seite wiederverwenden
• Um das Kontaktformular für die untere Seite hinzuzufügen, müssen Sie zunächst eine neue Vorlage für alle Seiten erstellen
• Sobald die Vorlage erstellt wurde, können Sie mit dem visuellen Builder von Divi beginnen, den Körper der Vorlage zu erstellen
• Um sicherzustellen, dass alle einzigartigen Seiteninhalte auf jeder Seite angezeigt werden, fügen wir das Beitragsinhaltsmodul hinzu
• Das Post-Content-Modul enthält Ihr gesamtes dynamisches Seitendesign
• Unterhalb des Post-Content-Moduls fügen wir einen weiteren Abschnitt für unser Kontaktformular hinzu
• Wir gestalten das Kontaktformular und stellen sicher, dass wir dem Abschnitt eine eindeutige CSS-ID hinzufügen. Wir verwenden diese CSS-ID, um einen Ankerlink zu erstellen
• Bonus: Wir fügen in der unteren rechten Ecke jeder unserer Seiten ein festes Symbol hinzu und verlinken das Symbol mit dem Kontaktbereich dieser bestimmten Seite

1. Richten Sie Website-Seiten mit dem Layout-Paket Ihrer Wahl ein

Der Ansatz, den wir verfolgen, funktioniert auf jeder Art von Website, die Sie erstellen. Aber für dieses spezielle Tutorial verwenden wir den Designstil des Magazin-Layout-Pakets. Wenn Sie diesen Ansatz auf einer anderen Website verwenden, können Sie das Design gerne an Ihre Bedürfnisse anpassen.

2. Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Seitenvorlage hinzu

Gehen Sie zu Divi Theme Builder und fügen Sie eine neue Seitenvorlage hinzu

Gehen Sie zum Divi Theme Builder auf Ihrer Website. Fügen Sie dort eine neue Vorlage hinzu.

Verwenden Sie diese neue Vorlage auf allen Seiten, wenn das Kontaktformular auf der unteren Seite auf allen Seiten angezeigt werden soll. Sie können es auch auf bestimmten Seiten erscheinen lassen und/oder von bestimmten Seiten ausschließen.

• Verwenden auf: Alle Seiten

Beginnen Sie mit dem Erstellen des Vorlagenkörpers

Nachdem Sie die neue Vorlage erstellt haben, können Sie mit dem Erstellen des benutzerdefinierten Körpers beginnen.

3. Seiteninhalt zum Vorlagenkörper hinzufügen

Abschnittseinstellungen

Abstand

Innerhalb des Vorlageneditors werden Sie einen Abschnitt bemerken. Öffnen Sie diesen Abschnitt und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie auch die standardmäßige obere und untere Auffüllung aller Zeilen.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Modul für Post-Inhalte zur Spalte hinzufügen

Fahren Sie fort, indem Sie das Modul Post Content zur Spalte Ihrer Zeile hinzufügen. Dieses Modul stellt alle dynamischen Seiteninhalte dar, die Sie erstellt haben.

4. Kontaktformular auf der unteren Seite zum Vorlagenkörper hinzufügen

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Unterhalb des Abschnitts mit dem Post-Content-Modul fügen wir einen weiteren regulären Abschnitt hinzu. Dieser Abschnitt ist dem Kontaktformular gewidmet. Öffnen Sie die Abschnittseinstellungen und fügen Sie einen Verlaufshintergrund hinzu.

• Farbe 1: #ffffff
• Farbe 2: #ffc077
• Startposition: 50%
• Endposition: 50%

CSS-ID

Fügen Sie auch eine CSS-ID hinzu.

• CSS-ID: Kontakt

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile hinzufügen und die folgende Spaltenstruktur verwenden:

Textmodul Nr. 1 zu Spalte 1 hinzufügen

H2-Inhalt hinzufügen

Das erste Modul, das wir in der ersten Spalte benötigen, ist ein Textmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

H2-Texteinstellungen

Wechseln Sie zur Registerkarte Design des Moduls und ändern Sie die H2-Texteinstellungen wie folgt:

• Überschrift 2 Schriftart: Montserrat
• Überschrift 2 Schriftstärke: Fett
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 70px (Desktop), 48px (Tablet), 36px (Telefon)
• Überschrift 2 Zeilenhöhe: 1.2em

Größe

Fügen Sie auch eine maximale Breite hinzu.

• Maximale Breite: 750px

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fügen Sie der Spalte 1 ein weiteres Textmodul mit einem Inhalt Ihrer Wahl hinzu.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Cardo
• Schriftstärke des Textes: Fett
• Textfarbe: rgba(0,0,0,0.03)
• Textgröße: 150px (Desktop), 100px (Tablet), 60px (Telefon)
• Textzeilenhöhe: 1em

Abstand

Und spielen Sie mit den Abstandseinstellungen für verschiedene Bildschirmgrößen herum.

• Oberer Rand: -0.8em (Desktop), -100px (Tablet), -80px (Telefon)
• Linker Rand: -0.8em (Desktop & Tablet), -60px (Telefon)

Kontaktformular zu Spalte 2 hinzufügen

Alle benötigten Felder hinzufügen

In der zweiten Spalte ist das einzige Modul, das wir brauchen, ein Kontaktformular-Modul. Fügen Sie so viele Felder hinzu, wie Sie benötigen, und verknüpfen Sie auch Ihr E-Mail-Konto mit dem Modul.

Namens- und E-Mail-Felder in voller Breite umwandeln

Fahren Sie fort, indem Sie die Felder für Name und E-Mail-Adresse in die volle Breite drehen.

• Volle Breite machen: Ja

Feldeinstellungen

Gehen Sie zurück zu den allgemeinen Kontaktformular-Einstellungen und ändern Sie die Hintergrundfarbe der Felder.

• Feldhintergrundfarbe: #ffffff

Tasteneinstellungen

Ändern Sie als nächstes die Tasteneinstellungen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 14px
• Schaltflächentextfarbe: #ffffff
• Hintergrundfarbe der Schaltfläche: #000000 (Standard), #ff2a38 (Hover)
• Breite des Tastenrahmens: 8px

• Farbe des Knopfrahmens: rgba(0,0,0,0)
• Schaltflächenrandradius: 0px
• Tastenabstand der Buchstaben: 2px
• Tastenschriftstärke: Ultra Bold
• Schaltflächenschriftart: Großbuchstaben
• Schaltflächensymbol: In Liste suchen

Grenze

Fügen Sie auch einen Randradius hinzu.

• Alle Ecken: 5px

Box Schatten

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einen subtilen Kastenschatten hinzufügen.

• Stärke der Box-Schattenunschärfe: 50px
• Stärke der Box-Schattenausbreitung: -4px
• Schattenfarbe: rgba(0,0,0,0.08)

Bonus: Festes Ankersymbol unten rechts zum Vorlagenkörper hinzufügen

Neuen Abschnitt hinzufügen

Abstand

Um nun jeder Seite das feste Symbol unten rechts hinzuzufügen, müssen wir einen weiteren regulären Abschnitt hinzufügen. Öffnen Sie den Abschnitt und entfernen Sie alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Z-Index

Erhöhen Sie auch den z-Index des Abschnitts. Dadurch wird sichergestellt, dass das Symbol über allen Seiteninhalten angezeigt wird.

• Z-Index: 99999

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Größe

Öffnen Sie die Zeileneinstellungen und lassen Sie die Zeile die gesamte Breite des Abschnitts einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Blurb-Modul zur Spalte hinzufügen

Lassen Sie das Titel- und Inhaltsfeld leer

Um das Symbol unten rechts anzuzeigen, verwenden wir ein Blurb-Modul. Stellen Sie sicher, dass Sie das Titel- und Inhaltsfeld leer lassen.

Symbol auswählen

Wählen Sie dann ein Symbol Ihrer Wahl aus.

Verknüpfung

Verknüpfen Sie das Symbol mit dem Kontaktbereich, indem Sie die ID zur Modullink-URL hinzufügen.

• Modul-Link-URL: #contact

Hintergrundfarbe

Ändern Sie auch die Hintergrundfarbe des Moduls.

• Hintergrundfarbe: #ffc077

Symboleinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Symboleinstellungen wie folgt:

• Symbolfarbe: #ffffff
• Bild-/Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 30px

Größe

Ändern Sie auch die Größeneinstellungen des Moduls.

• Breite: 100px
• Modulausrichtung: Rechts

Abstand

Und fügen Sie einige benutzerdefinierte obere und untere Polsterung hinzu.

• Obere Polsterung: 33px
• Untere Polsterung: 33px

Grenze

Gehen Sie dann zu den Rahmeneinstellungen und fügen Sie einige abgerundete Ecken hinzu.

• Alle Ecken: 100px

Box Schatten

Fügen Sie auch einen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 50px
• Stärke der Box-Schattenausbreitung: -15px
• Schattenfarbe: rgba(0,0,0,0.23)

Hauptelement-CSS

Um das Symbol zu korrigieren, wenden wir drei Zeilen CSS-Code auf das Hauptelement des Moduls auf der Registerkarte "Erweitert" an.

bottom: 20px;
right: 20px;
position: fixed;

Blurb-Bild-CSS

Und entfernen Sie auch das standardmäßige untere Bildpolster des Moduls.

margin-bottom: 0px;

6. Alle Theme Builder-Änderungen speichern und das Ergebnis anzeigen

Sobald Sie den Hauptteil Ihrer Seitenvorlage fertiggestellt haben, können Sie alle Änderungen speichern, den Theme Builder beenden und das Ergebnis auf allen Ihren Seiten anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie allen Ihren Seiten gleichzeitig ein Kontaktformular für die untere Seite hinzufügen können. Um dies zu erreichen, haben wir eine neue Seitenvorlage eingerichtet, das Modul Post Content aufgenommen und am Ende der Vorlage einen Kontaktabschnitt hinzugefügt. Wir haben auch ein festes Symbol unten rechts mit einem Ankerlink eingefügt, der Besucher zum Kontaktbereich der Seite weiterleitet, auf der sie sich befinden. Sie konnten auch die JSON-Datei für die Seitenvorlage kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.