Feste Fußleisten können eine bequeme Möglichkeit sein, wichtige Informationen auf Ihrem Computer zu speichern Website im Vordergrund, wenn der Benutzer mit dem Inhalt Ihrer Seite auf einem beliebigen Gerät 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!: Das Hinzufügen dieses Modells ersetzt die Website-Vorlage standardmäßig (falls vorhanden) auf Ihrer Divi-Website. Wir empfehlen, es zu einer Test-Site hinzuzufügen, damit Sie auf einer Live-Site nichts durcheinander bringen.
So importieren Sie die Vorlage für die feste Fußzeile selbst Website, entpacken Sie die heruntergeladene ZIP-Datei, um auf die JSON-Datei zuzugreifen.
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 Website-Vorlage Standardeinstellung, die Sie nicht überschreiben möchten.
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.
Nun zum Tutorial, okay?
Teil 1: Hinzufügen einer globalen Fußzeile
Mit dem Theme Builder von Divi können Sie die Standardfußzeile durch eine neue ersetzen, indem Sie die aktualisieren Website-Vorlage Standardeinstellung.
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".
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.
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
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
Größe und Abstand
- Dachrinnenbreite: 1
- Breite: 100%
- Maximale Breite: 100%
- Polsterung: 0px nach oben, 0px nach unten, 3% links, 3% rechts
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;
Feste Positionierung
Um die Linie so zu fixieren, dass sie am unteren Bildschirmrand schwebt, müssen wir ihr wie folgt eine feste Position unten in der Mitte zuweisen:
- Position: fest
- Lage: untere Mitte
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.
Wählen Sie das Menü
Wählen Sie dann eines der Menüs aus, die Sie bereits auf Ihrem erstellt haben Website. Achten Sie darauf, die Anzahl der Menüpunkte auf 4 oder weniger zu beschränken.
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.
Hintergrund entfernen
Entfernen Sie dann den Standardmenühintergrund, damit er transparent ist.
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
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.
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.
Aktualisieren Sie im Popup-Fenster "Aktuelles Datum" Folgendes:
- vor:
- 01
Copyright ©
- nach:
- 01
| Tous Droits Reservés
- Datumsformat : benutzerdefiniert
- Benutzerdefiniertes Datumsformat : 20 Jahre
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
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.
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)
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:
- Hintergrundfarbe: #ffffff
- Auffüllen: 8 Pixel rechts, 8 Pixel links
- Abgerundete Ecken: 8px
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 ist eine Liste von Ressourcen zusätzliche, die Ihnen bei der Gestaltung Ihrer Website mit Divi helfen können.
- So erstellen Sie eine benutzerdefinierte Anmeldeseite in Divi
- So fügen Sie Divi ein Navigationsmodul in voller Breite hinzu
- So erstellen Sie einen Vollbild-Schieberegler in Divi
- Wie man einen kreisförmigen Zähler auf Divi hinzufügt
