Möchten Sie mit DIVI einen Sticky Footer erstellen, der beim Herunterscrollen vollständig sichtbar wird?
Hinzufügen einer klebrigen Fußzeile zu Ihrer Website kann Ihnen das gewisse Extra verleihen, nach dem Sie gesucht haben Website. Der „Reveal“-Effekt, der beim Herunterscrollen die Fußzeile sichtbar macht, verleiht Ihren Webseiten ein sehr charmantes Design.
Normalerweise erfordert dieser Effekt benutzerdefiniertes CSS, das einschränkend und schwierig zu verwenden ist. Aber dank DIVI können Sie es ganz einfach erreichen.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen Reveal-Effekt für Ihre klebrige Fußzeile erstellen. Alles, was es braucht, sind ein paar einfache Schritte.
Lassen Sie uns beginnen!
Übersicht
Hier ist ein kurzer Überblick über die klebrige Fußzeile mit Reveal-Effekt, die wir in diesem Tutorial erstellen werden.
Erstellen Sie eine neue Fußzeilenvorlage
Besuch Divi >> Theme Builder aus dem WordPress-Dashboard.
Klicken Sie dort auf "Fügen Sie eine globale Fußzeile hinzu"
Dann wähle "Erstellen einer globalen Fußzeile"
In diesem Tutorial verwenden wir ein vorgefertigtes Layout, um den Erstellungsprozess zu beschleunigen, aber Sie können es auch von Grund auf neu erstellen. Klicken Sie dazu auf „Aus Bibliothek laden“.
Unterhalb des Popup-Fensters Aus Bibliothek laden, finden und verwenden Sie das Layout " Marina-Über-Seite » aus dem Marina-Layout-Paket.
Sobald das Layout geladen ist, löschen Sie alle Abschnitte außer dem Fußzeilenabschnitt. Wir werden diesen Fußzeilenabschnitt verwenden, um den Reveal-Effekt hinzuzufügen.
Fügen Sie den Reveal-Effekt hinzu und machen Sie die Fußzeile klebrig
Fußzeile klebrig machen
Siehe auch: Wie erstelle ich ein Schiebe- und Push-Menü in DIVI?
Zuerst müssen wir die Fußzeile klebrig machen. Öffnen Sie dazu die Bereichseinstellungen und klicken Sie auf den Reiter fortgeschritten. Unter „Scroll-Effekte“, ändern Sie die Einstellungen wie folgt:
- Sticky Position: Stick to Bottom
Aktualisieren Sie den Z-Index für den Sticky-Zustand
Als Nächstes müssen wir unserem Fußzeilenabschnitt einen Z-Index von 0 geben, wenn sich der Abschnitt im Sticky-Zustand befindet. Dadurch bleibt der Abschnitt beim Scrollen hinter anderen Abschnitten oder Elementen im Hauptteil der Seite.
Aktualisieren Sie dazu die Position des Z-Index, indem Sie auf das Klebesymbol neben der Option Z-Index klicken. Aktualisieren Sie dann den Z-Index auf 0.
- Z-Index (klebrig): 0
Aktualisieren Sie den Z-Index des Sticky Footer-Platzhalters
Wenn einem Element in Divi eine Sticky-Position zugewiesen wird, wird auch automatisch ein doppeltes Platzhalterelement erstellt. Dies bietet die Funktionalität, die zum Positionieren und Entwerfen von klebrigen Elementen mit Divi Builder erforderlich ist.
Siehe auch: So erstellen Sie einen globalen Header mit dem Theme Builder von Divi
In diesem Fall wird ein Platzhalter für den Fußzeilenabschnitt mit einem Standard-Z-Index von 1 erstellt. Wir möchten nicht, dass unser eigentlicher Fußzeilenabschnitt (jetzt mit einem Z-Index von 0) hinter dem Platzhalterabschnitt liegt, also müssen wir die aktualisieren Z-Index des Platzhalters auf -1.
Fügen Sie dazu zunächst wie folgt eine benutzerdefinierte CSS-Klasse zum Fußzeilenabschnitt hinzu:
- CSS-Klasse: Sticky-Footer-Reveal
Öffnen Sie dann die Seiteneinstellungen über das Einstellungsmenü der Theme-Builder.
Gehe zum " Erweitert " und geben Sie das folgende CSS in das Feld ein CSS anpassen :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
Dadurch wird der Platzhalterabschnitt gezwungen, hinter der klebrigen Fußzeile zu bleiben.
Änderungen speichern
Wenn Sie fertig sind, speichern Sie die an der Fußzeilenvorlage vorgenommenen Änderungen.
Speichern Sie auch die Änderungen des Divi Theme Builder.
Endergebnis
Um das Endergebnis zu sehen, zeigen Sie eine Seite an und scrollen Sie.
Laden Sie DIVI jetzt herunter!!!
Zusammenfassung
Fügen Sie in Divi eine Sticky-Fußzeile zu Ihrem hinzu Website erfordert kein Plugin oder kompliziertes benutzerdefiniertes CSS. Verwendung des Konstruktors Themen, können Sie ganz einfach eine Fußzeilenvorlage erstellen Reveal-Effekt in ein paar minuten.
Hoffentlich verleiht dies Ihrem Footer-Design einen subtilen Schub mit einer attraktiven Interaktion, die die Besucher Wird schätzen. Wenn Sie Bedenken oder Vorschläge haben, finden Sie uns unter der Kommentarbereich um darüber zu diskutieren.
Siehe auch 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.
...
