Möchten Sie eine benutzerdefinierte Fußzeile in DIVI erstellen?
Einer der wichtigsten Teile des Theme Builders von Divi ist die Möglichkeit, globale Fußzeilen dynamisch zu Ihren Webseiten und Beiträgen hinzuzufügen.
Sobald Sie eine Fußzeile entworfen haben, können Sie sie mit dem Theme Builder von Divi automatisch zu jeder Art von Seite oder Beitrag hinzufügen.
In diesem Tutorial führen wir Sie Schritt für Schritt durch den Prozess zum Erstellen und Hinzufügen einer globalen Fußzeile zu Ihrer Website.
Übersicht
Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf die Fußzeile, die wir entwerfen werden.
Büro
Gehen Sie zum Divi Theme Builder und fügen Sie eine globale Fußzeile hinzu
- Gehen Sie zu Divi > Theme Builder und klicken Sie auf " Fügen Sie eine globale Fußzeile hinzu«
- Wählen " Erstellen Sie eine globale Fußzeile«
Passen Sie Abschnitt #1 an
Hintergrundfarbe
Öffnen Sie den Abschnitt, den Sie auf der Seite finden, und ändern Sie die Hintergrundfarbe des Abschnitts.
- Hintergrund: #000000
Abstand
Wechseln Sie zur Registerkarte Design und ändern Sie dann die Abstandseinstellungen für den Abschnitt.
- Rand (oben, links und rechts): 6vw
- Interner Rand (links und rechts): 30px
Grenze
Fügen Sie dann links und rechts einen oberen Rand hinzu.
- Abgerundetes Rechteck oben links: 20px
- Abgerundetes Rechteck oben rechts: 20px
Schattenkiste
Fügen Sie auch einen Kastenschatten in die Abschnittseinstellungen ein.
- Stärke der Bogenschattenunschärfe: 135px
- Schriftfarbe Untertitel: rgba(0,0,0,0.18)
Fügen Sie dem Abschnitt eine neue Zeile hinzu
Struktur der Spalte
Fahren Sie fort, indem Sie Ihrem Abschnitt eine Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:
Fügen Sie der Spalte ein Textmodul hinzu
Fügen Sie einen Titel der Größe H2 hinzu (Überschrift 2)
Fügen Sie ein Textmodul mit ein Inhalt der Größe H2.
H2-Texteinstellungen
Wechseln Sie zum Reiter von Design des Moduls und ändern Sie die Parameter des H2-Textes entsprechend:
- Header-Schriftart: Poppins
- Gedämpftes Licht Header: halbfett
- Textausrichtung: Zentriert
- Textfarbe der Kopfzeile: #ffffff
- Kopfzeilentextgröße: 31 Pixel (Desktop), 24 Pixel (Tablet), 18 Pixel (Telefon)
- Kopfzeilenhöhe: 1,6 em
Sizing
Fügen Sie dem Modul auch eine maximale Breite hinzu.
- Maximale Breite: 700 Pixel
Schaltflächenmodul zur Spalte hinzufügen
Text zur Schaltfläche hinzufügen
Fügen Sie ein Button-Modul direkt unter dem Text-Modul in Ihre Spalte ein und geben Sie einen Text Ihrer Wahl ein.
Ausrichtung
Wechseln Sie zum Reiter von Design des Moduls und ändern Sie die Ausrichtung der Schaltfläche in die Mitte.
- Schaltflächenausrichtung: zentriert
Tasteneinstellungen
Fahren Sie fort, indem Sie die Schaltfläche anpassen.
- Benutzerdefinierte Stile für Button verwenden: Ja
- Schaltflächentextgröße: 12px
- Textfarbe der Schaltfläche: #000000
- Hintergrundschaltfläche: #FFFFFF
- Schaltfläche Rahmenbreite: 0 Pixel
Lesen Sie auch: So zeigen Sie eine Blogseite als Karussell in DIVI an
- Randradius der Schaltfläche: 100 px
- Buchstabenabstand der Schaltfläche: 1 px
- Button-Schriftart: Poppins
- Taste für weiches Licht: Halb fett
- Schaltfläche „Stil kopieren“: TT
Abstand
Fügen Sie auch benutzerdefinierte Innenrandwerte hinzu.
- Interner Rand (oben und unten): 14px
- Innerer Rand: Links (40px); Rechts (58px)
Abschnitt 2
Fügen Sie einen zweiten „normalen“ Abschnitt unter dem vorherigen hinzu.
Hintergrundfarbe
Hintergrundfarbe ändern
- Hintergrund: #ffffff
Abstand
Entfernen Sie dann alle inneren Ränder (oben und unten).
- Interner Rand (oben und unten): 0px
Grenze
Fügen Sie dem Schnitt außerdem einen Randradius hinzu.
- Abgerundetes Rechteck (oben links): 20px
- Abgerundetes Rechteck (oben rechts): 20px
Schattenkiste
Und vervollständigen Sie die Abschnittseinstellungen, indem Sie einen subtilen Kastenschatten hinzufügen.
- Box-Schattenunschärfe-Stärke: 135px
- Schriftfarbe Untertitel: rgba(0,0,0,0.18)
Fügen Sie dem Abschnitt eine neue Zeile hinzu
Struktur der Spalte
Nachdem Sie die Abschnittseinstellungen abgeschlossen haben, fügen Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzu:
Sizing
Öffnen Sie, ohne noch Module hinzuzufügen, die Zeileneinstellungen und ändern Sie sie wie folgt:
- Benutzerdefinierte Bundstegbreite verwenden: Ja
- Spaltenabstand: 1
- Spaltenhöhen harmonisieren: Ja
- Maximale Breite: 100%
- Maximale Breite: 100%
Abstand
Entfernen Sie dann die standardmäßigen inneren Ränder (Oben und Unten) von der Linie.
- Interner Rand (oben und unten): 0px
Spaltenabstand
Fahren Sie fort, indem Sie die Spalteneinstellungen öffnen, um benutzerdefinierte Füllwerte hinzuzufügen.
- Innerer Rand (oben und unten): 100 Pixel (Desktop), 50 Pixel (Tablet und Telefon)
- Interner Rand (links und rechts): 100 px (Desktop), 50 px (Tablet und Telefon)
Fügen Sie der Spalte das Modul Text Nr. 1 hinzu
Inhalt hinzufügen
Wir können nun Module hinzufügen. Fügen Sie der Spalte ein Textmodul hinzu und fügen Sie das ein Inhalt Ihrer Wahl.
Texteinstellungen
Wechseln Sie zum Reiter von Design des Moduls und passen Sie die Textparameter entsprechend an:
- Textschrift: Poppins
- Schriftstärke des Textes: Fett
- Textfarbe: #000000
- Textgröße: 17px
- Textausrichtung: Zentriert
Abstand
Fügen Sie dann benutzerdefinierte (obere und untere) Ränder hinzu.
- Oberer Rand: 10 px
- Unterer Rand: 30px
Fügen Sie der Spalte ein Trennmodul hinzu
Fügen Sie direkt unter dem Textmodul ein Separator-Modul hinzu.
Sichtbarkeit
Stellen Sie sicher, dass die Option " Trennzeichen anzeigen Ist aktiviert.
- Trennzeichen anzeigen: Ja
Linie
Ändern Sie die Linienfarbe in Schwarz.
- Etikettenfarbe: #000000
Sizing
Ändern Sie auch die Splitter-Größeneinstellungen.
- Maximale Breite: 15%
- Textausrichtung: Zentriert
Fügen Sie der Spalte das Modul Text Nr. 2 hinzu
Inhalt hinzufügen
Fahren Sie fort, indem Sie der Spalte ein weiteres Textmodul sowie ein hinzufügen Inhalt Ihrer Wahl.
Ajouter un lien
Fügen Sie einen Link zu der Seite ein, auf die dieses Modul verweisen soll.
Texteinstellungen
Wechseln Sie dann auf die Registerkarte Design und ändern Sie die Texteinstellungen wie folgt:
- Textschriftart: Poppins
- Weicher heller Text: Klar
- Textfarbe Text: #777777
- Text Textgröße: 15 px
- Textausrichtung: Zentriert
Abstand
Fügen Sie außerdem einen Rand hinzu (oben und unten).
- Rand (oben und unten): 10 px
Klonen Sie Textmodul Nr. 2 nach Bedarf
Sobald Sie das zweite Textmodul fertiggestellt haben, können Sie es beliebig oft klonen (abhängig davon, wie viele anklickbare Fußzeilenelemente Sie einfügen möchten).
Inhalte und Links bearbeiten
Stellen Sie sicher, dass Sie den Modulinhalt und die Links für jedes Duplikat bearbeiten.
Klonen Sie die gesamte Spalte zweimal
Nachdem Sie die Säule und ihre Module fertiggestellt haben, können Sie sie zweimal klonen.
Hintergrundfarbe von Spalte 2
Öffnen Sie dann die Einstellungen für Spalte 2 und ändern Sie die Hintergrundfarbe.
- Hintergrund: #f9f9f9
Inhalte und Links bearbeiten
Stellen Sie sicher, dass Sie alle Inhalte und Links in jeder doppelten Spalte bearbeiten.
Fügen Sie eine neue Spalte
Als Nächstes fügen Sie der Zeile eine vierte Spalte hinzu.
Hintergrundfarbe
Ändern Sie die Hintergrundfarbe der neuen Spalte.
- Hintergrund: #0fffc7
Abstand
Ändern Sie die inneren Ränder wie folgt:
- Interner Rand (oben und unten): 70px
- Interner Rand (links und rechts): 50px
Fügen Sie Spalte 4 das Modul „Folgen Sie uns in den sozialen Medien“ hinzu
Fügen Sie soziale Netzwerke hinzu
Fahren Sie fort, indem Sie ein Modul hinzufügen " Folgen Sie uns in sozialen Netzwerken in Spalte 4 und fügen Sie die sozialen Netzwerke Ihrer Wahl ein.
Symbolstile für soziale Medien zurücksetzen
Klicken Sie auf " Stile von Rollenelementen zurücksetzen für jedes der sozialen Netzwerke.
Ausrichtung
Wechseln Sie dann auf die Registerkarte Design und die Ausrichtung des Moduls ändern.
- Textausrichtung: Zentriert
Symboleinstellungen
Ändere auch die Farbe von Social-Media-Symbolen.
- Symbolfarbe: #000000
E-Mail-Optionsmodul zu Spalte 4 hinzufügen
Mod einfügen " E-Mail Optin "unter dem Modul" Folgen Sie uns in sozialen Netzwerken«
Inhalt und Titel des Moduls löschen
Email-Konto
Fügen Sie dann ein E-Mail-Konto hinzu. Wenn Sie kein E-Mail-Konto hinzufügen, wird das Modul nicht angezeigt, nachdem Sie den Design-Builder verlassen haben.
Hintergrundfarbe entfernen
- Hintergrundfarbe verwenden: Nein
Feldeinstellungen
Wechseln Sie zur Registerkarte Design und ändern Sie die Feldeinstellungen wie folgt:
- Hintergrundfarbenfelder: rgba(0,0,0,0)
- Textfarbfelder: #000000
- Champs Schriftart: Poppins
- Textgrößenfelder: 13px
- Rahmenbreite Felder: 1 px
Tasteneinstellungen
Passen Sie auch die Schaltfläche Ihres Moduls an.
- Benutzerdefinierte Stile für Button verwenden: Ja
- Schaltflächentextgröße: 12px
- Textfarbe der Schaltfläche: #000000
- Hintergrundschaltfläche: #FFFFFF
- Randbreite: 0px
- Randradius der Schaltfläche: 100 px
- Buchstabenabstand der Schaltfläche: 1 px
- Button-Schriftart: Poppins
- Taste für schwaches Licht: Halb fett
- Schaltfläche „Stil kopieren“: TT
Siehe auch: So erstellen Sie ein Sticky-Kontaktformular in DIVI
- Tastenfüllung (oben und unten): 15px
Dynamisches Textmodul zu Spalte 4 hinzufügen
Das nächste und letzte Modul, das wir benötigen, um dieses Design fertigzustellen, ist ein Textmodul.
Aktivieren Sie die Option " Verwenden Sie dynamische Inhalte".
Wählen Sie dann die Option " Aktuelles Datum".
Und ändern Sie die dynamischen Inhaltseinstellungen wie folgt:
- Vorderseite: Copyright ©
- Nach: | Alle Rechte vorbehalten
- Datumsformat: Zoll
- Benutzerdefiniertes Datumsformat: 20y
Texteinstellungen
Wechseln Sie als Nächstes zum Stil-Tab und ändern Sie die Texteinstellungen:
- Textschriftart: Poppins
- Textfarbe Text: #000000
- Text Textgröße: 16 px
Abstand
Vervollständigen Sie die Modulparameter, indem Sie Rand hinzufügen und voila!
- Oberer Rand: 50 px
Speichern Sie globale Fußzeilen- und Themenerstellungsoptionen
Wenn Sie fertig sind, speichern Sie Ihre Arbeit, bevor Sie den Builder verlassen. Divi-Thema.
Sobald Sie das Vorlagenlayout verlassen haben, speichern Sie Ihre gesamten Theme-Builder-Änderungen und Sie sind fertig!
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
In diesem Tutorial haben wir Ihnen gezeigt, wie einfach es ist, mit dem Theme Builder von Divi eine schöne benutzerdefinierte globale Fußzeile zu erstellen.
Wir hoffen, dass dieses Tutorial Sie dazu inspirieren wird, schöne globale Fußzeilen für Ihre nächsten Divi-Projekte zu erstellen.
Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
