So erstellen Sie eine benutzerdefinierte Fußzeile mit Divi Builder

Rifat Divi Tutorials Apr 11, 2022

Als Ergebnis des Divi Theme Builders hat eine neue Ära in der Website-Erstellung begonnen. Mit dieser neuen Funktion können Sie Ihren Seiten und Artikeln dynamisch globale Fußzeilen hinzufügen. Um einer Seite oder einem Beitrag eine Fußzeile hinzuzufügen, verwenden Sie einfach den Theme Builder von Divi (der im Divi-Theme enthalten ist). In diesem Artikel zeigen wir Ihnen nun, wie Sie eine globale Fußzeile erstellen und zu Ihrer Website hinzufügen. Zusätzlich können Sie die JSON-Datei kostenlos herunterladen!

Vorschau

Schauen wir uns zunächst an, wie die globale Fußzeile auf Bildschirmen unterschiedlicher Größe aussieht, bevor wir beginnen.

Entwurfsverfahren

Melden Sie sich zunächst bei Ihrem WordPress-Dashboard an. Navigieren Sie in Ihren Divi-Theme-Optionen zum Theme Builder.

Dort haben Sie die Möglichkeit, eine bereits vorhandene globale Fußzeile zu verwenden oder mithilfe der Divi-Bibliothek eine neue von Grund auf neu zu erstellen. Wir werden in dieser Lektion eine benutzerdefinierte Fußzeile von Grund auf neu erstellen, also fahren Sie fort und wählen Sie Option eins aus.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Abschnitt Nr. 1

BG-Farbe

Jetzt ist es an der Zeit, kreativ zu werden! Öffnen Sie den Abschnitt auf der Seite und ändern Sie die Hintergrundfarbe des Abschnitts.

  • Hintergrundfarbe: #000000

Abstand

Aktualisieren Sie als Nächstes den Abschnittsabstand gemäß den folgenden Werten.

  • Obere Marge: 6vw
  • Linker Rand: 6vw
  • Rechter Rand: 6vw
  • Linke Polsterung: 30px
  • Rechte Polsterung: 30px

Grenze

Der nächste Schritt besteht darin, oben, links und rechts einen Rahmen hinzuzufügen.

  • Oben links: 20px
  • Oben rechts: 20px

Box Schatten

Ein Box-Schatten sollte auch in den Abschnittseinstellungen enthalten sein.

  • Box Shadow Blur Stärke: rgba(0,0,0,0.18)
  • Schattenfarbe: rgba(0,0,0,0.18)

Neue Zeile hinzufügen

Fügen Sie dem Abschnitt nun eine neue einspaltige Zeile hinzu.

Neuen Textbaustein hinzufügen

Fügen Sie als Nächstes ein Textmodul hinzu und fügen Sie diesem Modul eine Kopie hinzu.

H2-Texteinstellungen

Ändern Sie die H2-Texteinstellungen auf der Design-Registerkarte des Moduls nach Bedarf:

  • Überschrift 2 Schriftart: Poppins
  • Überschrift 2 Schriftstärke: Semi Bold
  • Überschrift 2 Textausrichtung: Zentriert
  • Überschrift 2 Textfarbe: #ffffff
  • Überschrift 2 Textgröße: 31px (Desktop), 24px (Tablet), 18px (Telefon)
  • Überschrift 2 Zeilenhöhe: 1,6 m

Textmodulgröße

Das Modul sollte auch eine maximale Breite haben.

  • Maximale Breite: 700 Pixel

Schaltflächenmodul hinzufügen

Fügen Sie direkt unter dem Textmodul ein Schaltflächenmodul hinzu und füllen Sie es mit einer beliebigen Kopie.

Tastenausrichtung

Ändern Sie die Schaltflächenausrichtung auf der Design-Registerkarte des Moduls in die Mitte.

  • Tastenausrichtung: Mitte

Tasteneinstellungen

Lassen Sie uns nun die Schaltfläche gestalten.

  • Benutzerdefinierte Stile für Schaltflächen verwenden: Ja
  • Schaltflächentextgröße: 12px
  • Schaltflächentextfarbe: #000000
  • Hintergrundfarbe der Schaltfläche: #FFFFFF
  • Rahmenbreite der Schaltfläche: 0px
  • Randradius der Schaltfläche: 100px
  • Buchstabenabstand der Schaltfläche: 1px
  • Button-Schriftart: Poppins
  • Schriftstärke der Schaltfläche: Halbfett
  • Schaltflächen-Schriftstil: Großbuchstaben

Tastenabstand

Es ist Zeit, eine benutzerdefinierte Polsterung hinzuzufügen.

  • Obere Polsterung: 14px
  • Untere Polsterung: 14px
  • Linke Polsterung: 40px
  • Rechte Polsterung: 58px

Abschnitt Nr. 2

Hintergrundfarbe

Das nächste normale Kapitel ist da! Wählen Sie eine weiße Hintergrundfarbe für den Abschnitt aus.

  • Hintergrundfarbe: #ffffff

Abstand

Entfernen Sie die gesamte Polsterung von oben und unten.

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

Grenze

Dem Abschnitt sollte auch ein Grenzradius hinzugefügt werden.

  • Oben links: 20px
  • Oben rechts: 20px

Box Schatten

Beenden Sie nun die Abschnittsbearbeitung, indem Sie einen Kastenschatten hinzufügen.

  • Box-Schattenunschärfe-Stärke: 135px
  • Schattenfarbe: rgba(0,0,0,0.18)

Neue Zeile hinzufügen

Sie können Ihrem Abschnitt jetzt eine neue Zeile hinzufügen, indem Sie diesen Anweisungen folgen:

Zeilengröße

Öffnen Sie die Zeileneinstellungen und aktivieren Sie die Zeile, um den gesamten Bildschirm einzunehmen, ohne zusätzliche Module hinzuzufügen.

  • Benutzerdefinierte Bundstegbreite verwenden: Ja
  • Rinnenbreite: 1
  • Spaltenhöhen ausgleichen: Ja
  • Breite: 100%
  • Maximale Breite: 1000 x 025

Reihenabstand

Entfernen Sie die Polsterung der Reihe oben und unten.

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

Spaltenabstand

Gehen Sie zu den Spalteneinstellungen und fügen Sie spezifische Polsterwerte für die verschiedenen Bildschirmbreiten hinzu.

  • Obere Polsterung: 100px (Desktop), 50px (Tablet & Phone)
  • Untere Polsterung: 100 Pixel (Desktop), 50 Pixel (Tablet & Phone)
  • Linke Polsterung: 50px
  • Rechte Füllung: 50px

Textbaustein 1

Bei Modulerweiterungen heißt es jetzt oder nie! Fügen Sie Spalte 1 ein Standard-Textmodul hinzu und füllen Sie es mit dem, was Sie möchten.

Texteinstellungen

Ändern Sie die Texteinstellungen im Design-Tab des Moduls nach Bedarf:

  • Textschriftart: Poppins
  • Schriftstärke des Textes: Fett
  • Textfarbe: #000000
  • Textgröße: 17px
  • Textausrichtung: Zentriert

Abstand

Der nächste Schritt besteht darin, einige eindeutige obere und untere Ränder hinzuzufügen.

  • Oberer Rand: 10px
  • Unterer Rand: 30px

Sichtbarkeit des Teilermoduls

Teilermodule können direkt unter dem Textmodul hinzugefügt werden, wenn die Option „Teiler anzeigen“ aktiviert ist.

  • Teiler anzeigen: Ja

Linie

Ändern Sie nun die Farbe.

  • Linienfarbe: #000000

Dimensionierung

Die Größe des Teilers kann ebenfalls geändert werden.

  • Breite: 15%
  • Modulausrichtung: Mitte

Textbaustein 2

Der Spalte können nun Textbausteine ​​hinzugefügt werden.

Verknüpfung

Fügen Sie eine URL zu der Seite hinzu, auf die Sie dieses Modul verweisen möchten.

Texteinstellungen

Passen Sie auf der Registerkarte Design die Texteinstellungen wie folgt an:

  • Textschriftart: Poppins
  • Schriftstärke des Textes: Leicht
  • Textfarbe: #777777
  • Textgröße: 15px
  • Textausrichtung: Zentriert

Abstand

Fügen Sie außerdem oben und unten auf der Seite etwas Platz ein.

  • Oberer Rand: 10px
  • Unterer Rand: 10px

Textbaustein 2 Klonen

Es ist möglich, das zweite Textmodul in der Spalte unbegrenzt oft zu klonen, sobald es fertig aufgebaut ist (je nachdem, wie viele anklickbare Fußzeilenelemente Sie einfügen möchten).

Verknüpfungen ändern

Achten Sie bei jeder Kopie darauf, den Inhalt und die Links des Moduls zu aktualisieren.

Spalte zweimal klonen

Sie können eine Spalte zweimal klonen, nachdem Sie sie und alle ihre Module erstellt haben.

Spalte 2 BG Farbänderung

Sie können eine Spalte zweimal klonen, nachdem Sie sie und alle ihre Module erstellt haben.

  • Spalte 2 Hintergrundfarbe: #f9f9f9

Neue Spalte hinzufügen

Eine vierte Spalte sollte dann hinzugefügt werden.

Hintergrundfarbe

Färben Sie den Hintergrund der neuen Spalte ein.

  • Hintergrundfarbe: #0fffc7

Abstand

Zusätzlich zu den Füllwerten in der Spalte.

  • Obere Polsterung: 70px
  • Untere Polsterung: 70px
  • Linke Polsterung: 50px
  • Rechte Füllung: 50px

Symbol für soziale Medien

Fügen Sie Spalte 4 ein Social Media Follow-Modul hinzu, um die Tabelle zu vervollständigen.

Ausrichtung

Passen Sie auf der Registerkarte Entwurf die Position des Moduls an.

  • Modulausrichtung: Mitte

Symbol

Ändern Sie nun die Symbolfarbe.

  • Symbolfarbe: #000000

E-Mail-Modul

Fahren Sie fort, indem Sie ein E-Mail-Opt-in-Modul in Spalte 4 einfügen und dann den Titel- und Textinhalt löschen. Verknüpfen Sie als Nächstes ein persönliches E-Mail-Konto. Wenn das E-Mail-Konto nicht hinzugefügt wird, wird das Modul nach dem Beenden des Builders nicht angezeigt.

Entfernen Sie außerdem BG aus dem E-Mail-Modul.

Feldeinstellung

Gehen Sie zur Registerkarte Design und nehmen Sie die folgenden Anpassungen an den Feldern vor:

  • Felder Hintergrundfarbe: rgba(0,0,0,0)
  • Felder Textfarbe: #000000
  • Fields Schriftart: Poppins
  • Textgröße der Felder: 13px
  • Feldrandbreite: 1px
  • Rahmenfarbe der Felder: #000000

Taste

Ändern Sie nun den Schaltflächenstil.

  • Benutzerdefinierte Stile für Schaltflächen verwenden: Ja
  • Schaltflächentextgröße: 12px
  • Schaltflächentextfarbe: #000000
  • Hintergrundfarbe der Schaltfläche: #FFFFFF
  • Rahmenbreite der Schaltfläche: 0px
  • Randradius der Schaltfläche: 100px
  • Buchstabenabstand der Schaltfläche: 1px
  • Button-Schriftart: Poppins
  • Schriftstärke der Schaltfläche: Halbfett
  • Schaltflächen-Schriftstil: Großbuchstaben
  • Obere Polsterung: 15px
  • Untere Polsterung: 15px

Dynamisches Textmodul hinzufügen

Schließlich müssen wir ein Textmodul hinzufügen, um dieses Design fertigzustellen. Wählen Sie im Inhaltsfeld die Option für dynamische Inhalte aus. Nehmen Sie von dort aus die folgenden Änderungen vor.

  • Dynamischer Inhalt: Aktuelles Datum
  • Vorher: Copyright ©
  • Nach: | Alle Rechte vorbehalten
  • Datumsformat: Benutzerdefiniert
  • Benutzerdefiniertes Datumsformat: 20 Jahre

Texteinstellungen

Ändern Sie auf der Registerkarte Design die folgenden Einstellungen.

  • Textschriftart: Poppins
  • Textfarbe: #000000
  • Textgröße: 16px

Abstand

Sie sind mit den Einstellungen des Moduls fertig, wenn Sie einen oberen Rand hinzufügen.

  • Oberer Rand: 50px

Endgültige Vorschau

Werfen wir einen letzten Blick auf die Ergebnisse auf verschiedenen Bildschirmgrößen, nachdem wir alle Prozesse abgeschlossen haben.

Abschließende Gedanken

In diesem Handbuch haben wir Ihnen beigebracht, wie Sie den neuen Theme Builder von Divi verwenden, um eine beeindruckende benutzerdefinierte globale Fußzeile zu erstellen. Mithilfe des Theme Builders und der integrierten Module und Designoptionen von Divi können Sie in wenigen Stunden wunderschöne Websites erstellen. Es ist unser Ziel, dass Sie dieses Tutorial verwenden, um in Zukunft einige schöne globale Divi-Fußzeilen zu erstellen. Fühlen Sie sich frei, Fragen oder Kommentare im Kommentarbereich unten zu hinterlassen!