So machen Sie jedes Divi-Seitenelement klebrig

Zu wissen, wie man ein Divi-Seitenelement klebrig (oder fixiert) macht, ist eine dieser praktischen Fähigkeiten, die Webdesigner auf verschiedene Weise einsetzen können. Wenn Sie mit dem Begriff „klebrig“ nicht vertraut sind, bezieht er sich einfach auf ein Element auf einer Webseite, das „fixiert“ bleibt, während der Benutzer auf der Seite nach unten scrollt. Ein beliebtes Beispiel für ein Sticky-Element ist ein festes Navigationsmenü. Divi verfügt standardmäßig über eine feste (oder klebrige) Navigationsfunktion. Wenn der Benutzer auf der Seite nach unten scrollt, bleibt eine feste Version des Menüs oben auf der Seite hängen, während der Benutzer scrollt. Sticky-Elemente können jedoch für fast alles verwendet werden, und es ist eine großartige Möglichkeit, auf einer beliebigen Seite auf Ihren gewünschten Call-to-Action aufmerksam zu machen.

In diesem Tutorial zeige ich Ihnen eine einfache Möglichkeit, jedes Element auf Ihrer Seite mit dem Plugin Sticky Menu (oder Anything!) Es dauert nur wenige Augenblicke, um die Plugin-Einstellungen zu konfigurieren. Dann müssen Sie Ihrem Element nur noch eine benutzerdefinierte CSS-ID hinzufügen. So einfach ist das.

Lassen Sie uns darauf eingehen!

Was Sie für dieses Tutorial benötigen

Für dieses Tutorial benötigen Sie Folgendes:

• Divi-Thema
• Das Sticky Menu (oder alles andere!) im Scroll-Plugin
• Das Buchhalter-Blog-Seitenlayout (verfügbar im Divi Builder)

So machen Sie jedes Divi-Seitenelement klebrig

Abonnieren Sie unseren Youtube-Kanal

Konfigurieren der Plugin-Einstellungen

Sobald Sie das Sticky Menu (oder Anything!) on Scroll-Plugin installiert und in Ihrem Divi-Theme aktiviert haben, gehen Sie zum WordPress-Dashboard und navigieren Sie zu Einstellungen> Sticky Menu (oder Anything!).

Aktualisieren Sie auf der Registerkarte Grundeinstellungen die Optionen wie folgt:

Zuerst müssen Sie eine eindeutige Kennung für Ihr Sticky-Element hinzufügen. Dies kann eine CSS-ID oder eine Klasse sein. Diesen Bezeichner werden wir dann später unserem Element in Divi hinzufügen. Um es leichter zu merken, füge ich die CSS-ID „#sticky“ hinzu.

Klebriges Element: #klebrig

Dann müssen Sie den Pixelwert für den Abstand zwischen dem oberen Rand der Seite und dem Sticky-Element hinzufügen. Da die feste Navigationsleiste von Divi standardmäßig 54px hoch ist, möchten wir für diese Option mindestens 54px hinzufügen, damit unser Sticky-Element die feste Navigation nicht überlappt.

Abstand zwischen Seitenanfang und Sticky-Element: 54 Pixel

Es ist auch eine gute Idee, das Sticky-Element auf dem Handy zu deaktivieren. Dazu müssen wir das Plugin so konfigurieren, dass das Element nicht haftet, wenn der Bildschirm kleiner als 980px ist.

Element nicht aufkleben, wenn Bildschirm kleiner als: 980 Pixel

Speichern Sie Ihre Einstellungen und gehen Sie dann zur Registerkarte Erweiterte Einstellungen und aktualisieren Sie Folgendes:

Für die Option z-index möchten wir sicherstellen, dass unser Element über allen anderen Elementen auf der Seite gestapelt wird, insbesondere wenn wir planen, dass unser Element andere Elemente beim Scrollen überlappt. Um dies sicherzustellen, geben Sie den Z-Index auf 99998 ein.

Z-Index: 99998

Um Ihnen eine Vorstellung davon zu geben, wie Elemente in Divi angeordnet sind, haben Abschnitte einen Z-Index von 2, Spalten einen Z-Index von 9, und die Kopfzeile/Navigationsleiste hat einen Z-Index von 99999. Im Grunde sind wir also Wir möchten, dass unser Sticky-Element 1 Nummer niedriger ist als der Z-Index für die Header-Navigation. Dadurch wird sichergestellt, dass das Sticky-Element über allem anderen auf der Seite außer dem Nav liegt. Dies ist praktisch, wenn Sie Ihr Element stoppen und die Seite nach oben verschieben möchten, damit das klebrige Element beim Scrollen nicht oben auf dem Navi sitzt (sieht unordentlich und kaputt aus).

Als Nächstes können wir einen „Push-Up“-Elementbezeichner hinzufügen. Sie können sich dies als Stopper für unser klebriges Element vorstellen. Dies ist normalerweise ein Fußzeilenelement. Im Grunde identifiziert dies das Element, das das Sticky-Element beim Herunterscrollen der Seite stoppt, sodass das Sticky-Element mit dem Rest der Seite nach oben geschoben werden kann. Für dieses Beispiel setze ich den Bezeichner mit der CSS-ID „#stop“.

Liegestützelement: #stop

Einstellungen speichern.

Jetzt sind wir mit der Kraft ausgestattet, die wir brauchen, um ein klebriges Element herzustellen!

Ein Divi-Seitenelement klebrig machen

Um Ihnen zu zeigen, wie man ein Divi-Element anhängt, verwende ich die Buchhalter-Blog-Seite von Divi aus dem Buchhalter-Layout-Paket. Erstellen Sie zunächst eine neue Seite, geben Sie Ihrer Seite einen Titel und stellen Sie den Visual Builder bereit. Wählen Sie dann die Option „Wählen Sie ein vorgefertigtes Layout“. Wählen Sie im Popup „Aus Bibliothek laden“ das Buchhalter-Layout-Paket aus und wählen Sie die Blog-Seite.

Diese Seite enthält ein E-Mail-Abonnement-Optin-Formular in der rechten Seitenleiste eines Spezialbereichs. Um mehr Aufmerksamkeit auf dieses Formular zu lenken, können wir dafür sorgen, dass es klebrig wird, sobald der Benutzer auf der Seite nach unten scrollt. Dann können wir das Element stoppen (oder nach oben drücken), wenn es den nächsten Abschnitt auf der Seite erreicht, damit es sich nicht überlappt.

So machen Sie eine Spalte klebrig

An diesem Punkt müssen wir jedoch entscheiden, welches bestimmte Element wir klebend machen möchten. Wir könnten das E-Mail-Option-Modul einfach kleben, aber das würde das Social Media Follow-Modul direkt unter dem Formular nicht berücksichtigen, das wir ebenfalls kleben wollen. Und wir können beiden Modulen den gleichen Identifikator geben, da sie beide an derselben Position hängen bleiben und sich überlappen. Der beste Weg, dies zu tun, besteht darin, die gesamte Spalte (Spalte 2) klebrig zu machen.

Um Spalte 2 festzuhalten, öffnen Sie die Zeileneinstellungen der Zeile, die die Spalte enthält, auf die wir abzielen möchten. Fügen Sie dann auf der Registerkarte Erweitert die CSS-ID „sticky“ hinzu. Dies entspricht der eindeutigen Kennung des Sticky-Elements, die wir in unseren Plugin-Einstellungen hinzugefügt haben.

CSS-ID: sticky

(HINWEIS: Setzen Sie hier nicht das Hashtag- (oder Pfund-) Symbol vor die ID. Stellen Sie außerdem sicher, dass Sie es der CSS-ID und nicht der CSS-Klasse hinzufügen.)

Speichern Sie die Einstellungen und zeigen Sie eine Vorschau der Live-Version der Seite an. Wenn Sie nach unten scrollen, werden Sie feststellen, dass Spalte 2 (mit beiden Modulen) klebrig wird, sobald sie 54px vom oberen Rand des Fensters entfernt ist, und an dieser Position bleibt, während Sie weiter scrollen.

Anhalten des klebrigen Elements an einem Abschnitt

Wie Sie sehen, bleibt das Element weiterhin kleben, sodass es den Inhalt der anderen Abschnitte unten überlappt. Um dies zu verhindern, können wir unseren „Push-Up“-Identifikator (#stop) verwenden, den wir in den Plugin-Einstellungen hinzugefügt haben.

Um das Sticky-Element im Abschnitt unten zu stoppen, müssen wir die Abschnittseinstellungen öffnen und die CSS-ID „stop“ hinzufügen.

CSS-ID: stop

Sehen Sie sich jetzt die Live-Version der Seite an. Beachten Sie, wie das klebrige Element an dem von Ihnen identifizierten Abschnitt stoppt.

Ziemlich cool oder?

So machen Sie ein Modul klebrig

Um ein einzelnes Modul festzuhalten, müssen Sie in Divi eine Anpassung vornehmen, um sicherzustellen, dass Ihr Element den richtigen Z-Index hat, damit es beim Scrollen über anderen Elementen auf der Seite liegt. Wie ich bereits erwähnt habe, weist Divi allen Abschnitten einen Z-Index von 2 zu. Und das Plugin wendet den Z-Index von 99998 auf das Sticky-Element an. Da ein Modul jedoch nicht über seinem übergeordneten Element (dem Abschnitt) angeordnet (oder indiziert) werden kann, sitzt das Modul immer noch hinter anderen Modulen auf der Seite. Um dies zu beheben, müssen wir sicherstellen und dem Abschnitt, der unser Sticky-Modul enthält, manuell einen Z-Index von 99998 geben.

Um dies zu veranschaulichen, verwende ich das gleiche Seitenlayout des Buchhalter-Blogs, das wir zuvor verwendet haben. Bevor wir unsere CSS-ID zu einem Modul hinzufügen, müssen wir zuerst die CSS-ID (sticky) entfernen, die wir für Spalte 2 festgelegt haben. Und dann die CSS-ID (Stopp), die wir für den Abschnitt darunter festgelegt haben. Öffnen Sie danach die Einstellungen des Social Media Follow-Moduls und fügen Sie dem Modul die CSS-ID „sticky“ hinzu.

Wenn Sie die Live-Seite anzeigen, werden Sie feststellen, dass das Sticky-Element ausgeblendet ist, wenn es beim Scrollen die anderen Module in den Abschnitten unten überlappt.

Um dies zu beheben, öffnen Sie die Abschnittseinstellungen für den Abschnitt, der das Sticky-Element des Social Media Follow-Moduls enthält. Fügen Sie dann das folgende benutzerdefinierte CSS zum Hauptelement hinzu:

z-index: 99998;

Überprüfen Sie nun die Live-Seite. Beachten Sie, wie die Social-Media-Symbole am oberen Rand der Seite (54px von oben), direkt unter dem festen Nav und dann beim Scrollen über den anderen Modulen bleiben.

Einen Abschnitt klebrig machen

Um einen ganzen Abschnitt klebend zu machen, folgen Sie dem gleichen Verfahren, um die CSS-ID „klebrig“ in den Abschnitt Ihrer Wahl einzufügen. Sie müssen den Z-Index nicht mit benutzerdefiniertem CSS aktualisieren, da das Plugin dies automatisch für Sie erledigt.

Schwebeeffekte können zu Störungen bei klebrigen Elementen führen

Wenn auf Ihrer Seite oder auf Ihrem Sticky-Element Hover-Effekte aktiv sind, können einige Störungen auftreten. In diesem Fall müssen Sie möglicherweise die Schwebeeffekte für klebende Elemente deaktivieren.

Nur ein klebriges Element pro Seite

Das Plugin erlaubt nur ein Sticky-Element pro Seite. Wenn Sie also mehrere Sticky-Elemente hinzufügen möchten, benötigen Sie eine fortschrittlichere Lösung (oder ein anderes Plugin, das dies unterstützt).

Abschließende Gedanken

Ich hoffe, dieser Artikel war hilfreich, um eine erfrischend einfache Möglichkeit zu bieten, jedes Divi-Seitenelement klebrig zu machen. Verwenden Sie es, um klebrige Untermenüs, klebrige CTAs, klebrige Werbeangebote und so ziemlich alles andere zu erstellen, was dir einfällt. Viel Spaß beim Entdecken der Möglichkeiten!

Ich freue mich, von Ihnen in den Kommentaren unten zu hören.

Danke schön!