Springe zum Hauptinhalt

So erstellen Sie mit Divi eine feste Fußzeilenleiste

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]

Feste Fußzeilenleisten können eine praktische Möglichkeit sein, wichtige Informationen über die Vorderseite und das Zentrum Ihrer Website beizubehalten, wenn der Benutzer auf einem beliebigen Gerät mit Ihrem Seiteninhalt interagiert. 

Wie bei Divi befindet sich eine Fußzeilenleiste normalerweise als statisches Element ganz unten auf der Seite nach dem Hauptfußzeileninhalt. Dazu gehören beispielsweise Copyright-Text und Social-Media-Symbole. 

Wenn Sie jedoch den Inhalt der Fußzeilenleiste am unteren Rand der Seite nicht ausblenden, können Sie eine benutzerdefinierte Fußzeilenleiste erstellen, die beim Scrollen des Benutzers am unteren Bildschirmrand angezeigt wird.

In diesem Tutorial werden wir eine vollständig personalisierte feste Fußzeilenleiste mit dem Divi-Themengenerator entwerfen. Dies ist praktisch, damit Sie diese kleinen, aber wichtigen Inhalte jederzeit im Blick behalten.

Mögliches Ergebnis

Hier ist eine Übersicht über die feste Fußzeile, die wir entwerfen werden.

So fügen Sie die feste Fußzeilenleistenvorlage zum Herunterladen auf Ihre Divi-Site hinzu

WARNUNG!: Durch Hinzufügen dieser Vorlage wird die Standard-Website-Vorlage (falls vorhanden) auf Ihrer Divi-Site ersetzt. Wir empfehlen, dass Sie es einer Test-Site hinzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.

Entpacken Sie die Download-Zip-Datei, um auf die JSON-Datei zuzugreifen, um die feste Fußzeilenleistenvorlage auf Ihre eigene Website zu importieren.

Gehen Sie dann zum WordPress-Dashboard und gehen Sie zu Divi> Theme Builder.

Klicken Sie dann oben rechts auf der Seite auf das Portabilitätssymbol.

Wählen Sie im Portabilitätsfenster die JSON-Datei aus, die Sie gerade entpackt haben, und wählen Sie die Option "Backup vor dem Import herunterladen", falls Sie zuvor etwas in der Standard-Website-Vorlage hatten, das Sie nicht hatten. wollte nicht ersetzen.

Klicken Sie dann auf die Schaltfläche Importieren.

Speichern Sie abschließend die Änderungen am Themengenerator und zeigen Sie eine Live-Seite an, um die feste Fußzeilenleiste anzuzeigen.

Speichern Sie Divi-Änderungen

Nun zum Tutorial, okay?

Teil 1: Hinzufügen einer globalen Fußzeile

Mit dem Divi-Themengenerator können Sie die Standardfußzeile durch eine neue ersetzen, indem Sie die Standardwebsite-Vorlage aktualisieren.

Um eine globale Fußzeile zu erstellen, rufen Sie das WordPress-Dashboard auf und gehen Sie zu Divi> Theme Builder. Klicken Sie dann in der Standard-Website-Vorlage auf den Bereich "Globale Fußzeile hinzufügen".

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]

Wählen Sie dann die Option "Benutzerdefinierte Fußzeile erstellen" aus der Dropdown-Liste.

Dadurch wird der Modelllayout-Editor bereitgestellt, in dem Sie sofort mit den drei Auswahlmöglichkeiten für den Baubeginn aufgefordert werden. Wählen Sie "Von Grund auf neu erstellen".

Teil 2: Erstellen der festen Fußzeile

Nachdem wir den Vorlagenlayout-Editor bearbeitet haben, können wir mit dem Entwerfen der festen Fußzeile beginnen. Sobald Sie fertig sind, haben Sie eine feste Fußzeile mit drei Spalten, die für den Inhalt bereit sind.

Fügen Sie der Zeile ein dreispaltiges Layout hinzu

Fügen Sie der Zeile zunächst ein dreispaltiges Layout hinzu.

3-reihiger Abschnitt

Schnitthöhe

Nachdem die drei Spalten hinzugefügt wurden, geben wir dem Abschnitt eine definierte Höhe. Dies ist wichtig, um am unteren Rand der Seite Platz zu schaffen, an dem das Festnetz schließlich endet. Wir werden auch die Standardauffüllung oben und unten entfernen.

Öffnen Sie zum Einstellen der Höhe und der Polsterung die Abschnittseinstellungen und aktualisieren Sie Folgendes:

  • Höhe: 85px
  • Auffüllen: 0px hoch, 0px niedrig
Divi 1 Abschnitt Höhenkonfiguration

Leitungseinstellungen

Nachdem unser Abschnitt fertig ist, können wir die Zeile so anpassen, dass sie als feste Fußzeilenleiste dient. Öffnen Sie die Zeileneinstellungen und aktualisieren Sie Folgendes:

Kontext

  • Hintergrundfarbe: # 1a1e36
Zugriff auf Leitungseinstellungen

Größe und Abstand

  • Dachrinnenbreite: 1
  • Breite: 100%
  • Maximale Breite: 100%
  • Polsterung: 0px nach oben, 0px nach unten, 3% links, 3% rechts
Passen Sie den Divi-Bereich an

Benutzerdefiniertes CSS

Obwohl die Zeile fest ist, soll die Höhe der Zeile mit der Höhe des übergeordneten Abschnitts übereinstimmen, damit der Platz am unteren Rand der Seite die Zeile ordnungsgemäß enthält. Und wir möchten sicherstellen, dass der Inhalt der Zeile vertikal ausgerichtet bleibt. Fügen Sie dazu dem Hauptelement der Zeile das folgende benutzerdefinierte CSS hinzu:

Büro

Höhe: erben! wichtig; Anzeige: flex; Elemente ausrichten: Mitte;

Telefon

Höhe: erben! wichtig; Anzeige: Block;
Fügen Sie einen CSS-Code hinzu

Feste Positionierung

Um die Linie so zu fixieren, dass sie am unteren Rand des Bildschirms schwebt, müssen Sie ihr wie folgt eine feste Position in der unteren mittleren Position geben:

  • Position: fest
  • Lage: untere Mitte
Fußzeilenposition

Teil 2: Erstellen des Inhalts der festen Fußzeile

Zu diesem Zeitpunkt haben wir eine feste Fußzeile für den Inhalt bereit. Wir können jeder der drei Spalten jeden gewünschten Inhalt hinzufügen. Da es sich jedoch um eine Fußzeilenleiste handelt, die auf eine Höhe von 85 Pixel begrenzt ist, müssen wir die Menge des Inhalts begrenzen. Aus diesem Grund werden wir in Spalte 4 ein kleines Menü mit einem dynamischen Logo und 1 Menüelementen hinzufügen. In Spalte 2 werden wir Copyright-Text mit einem dynamischen aktuellen Jahr hinzufügen. In Spalte 3 werden drei Social-Media-Tracking-Symbole hinzugefügt.

Fügen Sie Spalte 1 ein Menü hinzu

Fügen Sie in Spalte 1 ein Menümodul hinzu.

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]

Wordpress-Menüauswahl

Wählen Sie das Menü

Wählen Sie dann eines der Menüs aus, die Sie bereits auf Ihrer Website erstellt haben. Stellen Sie sicher, dass die Menüpunkte bei 4 oder weniger liegen.

Auswahlmenü WordPress-Modul

Fügen Sie das Site-Logo als dynamischen Inhalt hinzu

Für das Logo-Menü fügen wir das Site-Logo dynamisch hinzu. Klicken Sie auf das Symbol "Dynamischen Inhalt verwenden", während Sie den Mauszeiger über den Logo-Vorschaubereich bewegen. Wählen Sie dann das Site-Logo aus der Dropdown-Liste.

Fügen Sie ein Logo hinzu

Hintergrund entfernen

Entfernen Sie dann den Standardmenühintergrund, damit er transparent ist.

Löschen Sie den Hintergrund

Menu Design

An diesem Punkt sind wir bereit, dem Menü ein Design hinzuzufügen. Für dieses Design werden wir es einfach und klein halten. Aktualisieren Sie die folgenden Designparameter:

  • Schriftmenü: Überführung
  • Menütextfarbe: # b59c61
  • Sepia Bild: 100%
  • Maximale Logohöhe: 50px
Ändern Sie die Schriftfarbe

Fügen Sie Spalte 2 Copyright-Text hinzu

Sobald das Menü eingerichtet ist, gehen Sie zu Spalte 2, um den Copyright-Text hinzuzufügen.

Fügen Sie ein Textmodul hinzu

Fügen Sie Spalte 2 ein neues Textmodul hinzu.

Auswahlmodul Text divi

Fügen Sie das aktuelle Datum dynamisch mit Vorher- und Nachher-Text hinzu

Hier werden wir mit dynamischen Inhalten kreativ, um das aktuelle Jahr im Copyright-Text anzuzeigen. Dadurch wird sichergestellt, dass das Jahr automatisch für die Lebensdauer der Website aktualisiert wird.

Klicken Sie dazu auf das Symbol "Dynamischen Inhalt verwenden" und wählen Sie "Aktuelles Datum" aus der Liste.

Auswahldatum

Aktualisieren Sie im Popup-Fenster "Aktuelles Datum" Folgendes:

  • vor:
  • 01Copyright ©
  • nach:
  • 01| Tous Droits Reservés
  • Datumsformat : benutzerdefiniert
  • Benutzerdefiniertes Datumsformat : 20 Jahre
Passen Sie das Datum an

Formatieren Sie den Text

Aktualisieren Sie das Textdesign und den Rand wie folgt:

  • Textschrift: Überführung
  • Textfarbe: # b59c61
  • Textausrichtung: Mitte
  • Rand (nur Telefon): 10 Pixel oben, 10 Pixel unten
Textmodul zur Auswahl von Divi-Schriftarten

Dies unterstützt Copyright-Text.

Fügen Sie Spalte 3 Social-Media-Tracking-Symbole hinzu

Fügen Sie in Spalte 3 ein Social-Media-Tracking-Modul hinzu.

Fügen Sie soziale Netzwerke hinzu

Fügen Sie auf der Registerkarte Inhalt der Site die erforderlichen sozialen Netzwerke hinzu. Für dieses Design verwenden wir drei davon.

Modul zur Überwachung sozialer Netzwerke hinzufügen

Social Media Tracking-Einstellungen

Aktualisieren Sie anschließend die Designeinstellungen für alle Social Media-Tracking-Symbole wie folgt:

  • Modulausrichtung: gerade (Desktop und Tablet), Mitte (Telefon)
  • Symbolfarbe: # 1a1e36
  • Verwenden Sie eine benutzerdefinierte Symbolgröße: JA
  • Symbol Schriftgröße: 16px (Desktop und Tablet), 14px (Telefon)
Personnalsier Polizei Divi

Aktualisieren Sie die Einstellungen für soziale Medien

Öffnen Sie die Einstellungen für das erste Netzwerk und aktualisieren Sie Folgendes, um das Design des einzelnen Symbols für soziale Netzwerke zu aktualisieren:

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]

  • Hintergrundfarbe: #ffffff
  • Auffüllen: 8 Pixel rechts, 8 Pixel links
  • Abgerundete Ecken: 8px
feste Fußstange divi

Erweitern Sie die Einstellungen für soziale Medien auf alle

Öffnen Sie dann das Menü für zusätzliche Einstellungen für das erste Netzwerk und wählen Sie " Elementstile erweitern " In der Liste. Wählen Sie im Popup-Fenster "Stile erweitern" die Option "Stile erweitern in". Diese Spalte "Und klick Erweitern .

Dadurch wird das Design auf die übrigen Symbole in der Spalte erweitert.

Abschließende Gedanken

In einigen Fällen ist das Hinzufügen einer festen Fußzeile sinnvoll. Die Höhe der Stange ist klein genug, um nicht abzulenken oder zu viel Platz auf dem Handy einzunehmen. Außerdem können Sie wichtige CTAs hinzufügen, um bessere Conversions und eine reibungslosere Benutzererfahrung zu erzielen.

Bei diesem Entwurf wird der Platz am unteren Rand der Seite erstellt, indem eine feste Höhe für den Abschnitt festgelegt wird und die feste Linie dann die Höhe des Abschnitts erben kann (obwohl dieser fest ist). 

Andere Ressourcen

Hier finden Sie eine Liste zusätzlicher Ressourcen, die Sie beim Entwerfen Ihrer Website mit Divi unterstützen können.

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
3 Aktien
Aktie3
tweet
Registrieren