Begrüßung gestartet #

Mit dem Sticky Content-Modul von ElementsKit können Sie jeden Abschnitt der Seite oder des Beitrags an einer ausgewählten Position festhalten. In diesem Tutorial erklären wir verschiedene Funktionen des Sticky Content-Moduls und wie Sie diese nutzen können, um Ihre Inhalte hervorzuheben.

Sehen Sie sich unseren Video-Guide an:

Oder befolgen Sie die Schritt-für-Schritt-Anleitung:

Aktivieren Sie das Sticky Content-Modul #

Um mit der Verwendung des Sticky Content-Moduls zu beginnen, sollten Sie es zunächst in der Liste der ElementsKit-Module aktivieren. Ohne die Aktivierung dieses Moduls können Sie es nicht mit Elementor verwenden. So aktivieren Sie das Sticky Content-Modul:

• Gehe zu ElementsKit ➔ Module. Wechseln Sie nun zum Sticky Content-Modul AN und klicken Sie auf Änderungen speichern.

Klebrig oben drauf #

Mit dieser Funktion können Sie jeden Abschnitt oben auf der Seite platzieren.

Sehen Sie sich unseren Video-Guide an:

Oder befolgen Sie die Schritt-für-Schritt-Anleitung:

• Navigieren Sie zu ElementsKit→ Kopfzeile und Fußzeile→ klicken Bearbeiten mit Elementor.

• Klick auf das Symbol für den inneren Abschnitt.
• Gehe zu Fortschrittlich-> Erweitern Sie ElementsKit Sticky.
• Wählen Sie die Option „Sticky“➔ Spitze aus dem Dropdown-Menü.

• Erstellen Sie eine neue Seite -> Klicken Sie auf ElementsKit-Symbol um jede fertige Seite aus unseren vorgefertigten Vorlagen einzufügen.

• Gehen Sie nun auf Ihre Seite-> Sie können sehen, dass Ihr Header oben klebrig ist.

Änderung der Hintergrundfarbe des Sticky oben #

Sie können das Problem daran erkennen, dass der Header-Teil zwar klebrig, aber transparent ist. Wir müssen also die Hintergrundfarbe ändern. Unter der Funktion „Sticky Until“ finden Sie die Option, die Hintergrundfarbe des Sticky-Bereichs zu ändern.

• Wählen Sie eine klebrige Hintergrundfarbe: Weiß.
• Klicken Sie auf Aktualisieren

• Gehen Sie zur Startseite -> Aktualisieren -> Nach unten scrollen.
• Sie können sehen, dass die Hintergrundfarbe der Kopfzeile weiß ist.

Klebrig, bis es oben ist #

Wenn Sie möchten, dass Ihre Abschnitte bis zu mehreren Abschnitten haften und nach einem bestimmten Abschnitt nicht mehr haften bleiben, können Sie die Abschnitts-ID hier festlegen. Halten wir es bis zum Abschnitt „Über uns“ fest.

• Klicke auf Bearbeiten mit Elementor.

• Klicken Sie auf „Über uns“. Symbol für den inneren Abschnitt.
• Gehen Sie nun zu den erweiterten Einstellungen und legen Sie fest CSS-ID und kopieren Sie sie.

• Gehe zu Header➔ Fortschrittlich➔ Elementskit Sticky➔ Klebrig bis.
• Fügen Sie nun den Abschnitt „Über uns“ ein CSS-ID in die Klebrig bis Feld.

• Jetzt können Sie die Kopfzeile sehen Bleibt bis zum Abschnitt „Über uns“ erhalten.

Funktion zum Hinzufügen von Klassen #

Wenn Sie eine transparente Kopfzeile verwenden, kann es zu Problemen mit der Hintergrundfarbe kommen. Wenn Sie nach unten scrollen, benötigen Sie möglicherweise eine Hintergrundfarbe. Hier bietet Ihnen ElementsKit eine weitere Option, und zwar eine Funktion zum Hinzufügen von Klassen. Wenn Sie beispielsweise 50 Pixel nach unten scrollen, wird eine neue Klasse hinzugefügt, nämlich „ekit-sticky-effects“. Mit dieser Klasse können Sie jedes gewünschte CSS erstellen. Mal sehen, wie Sie es schaffen können.

• Gehen Sie zu Customizer-> Zusätzliches CSS.
• Verwenden Sie die Klasse: „ekit-sticky-effects“ und machen Sie die Hintergrundfarbe Grau.

• Gehen Sie zu Kopfzeile -> Entfernen Sie die Hintergrundfarbe.
• Offset hinzufügen. Zum Beispiel: 50px.

• Sie können sehen, dass die Hintergrundfarbe gleich ist Transparent. Aber nach dem Scrollen bis zu 50 Pixel wird eine Hintergrundfarbe hinzugefügt.

Klebriger Offset oben #

• Sie können festlegen, wie viel Platz frei bleiben soll, während Ihr Inhalt oder Bild oben haften bleibt. Dasselbe können Sie auch für andere klebrige Positionen tun. Geben Sie den Sticky-Offset an: 100 Pixel. Sie können sehen, dass der Header nach 100 Pixel angezeigt wird.

• Für die Anzeige des Stickys stehen Ihnen drei Geräteauswahloptionen zur Verfügung: Alle Geräte, nur Desktop, Desktop und Tablet. Wählen Sie eine Option, um genau zu entscheiden, auf welchen Geräten Sie den Inhalt als Sticky anzeigen möchten.

Beim Hochscrollen „Sticky“ anzeigen #

Mit dieser Funktion können Sie jeden Abschnitt der Seite festhalten, wenn Sie nach oben scrollen.

Sehen Sie sich unseren Video-Guide an:

Oder befolgen Sie die Schritt-für-Schritt-Anleitung:

• Klick auf das ElementsKit-Symbol um einen beliebigen Header aus unseren vorgefertigten Vorlagen einzufügen.

• Klick auf das Symbol für den inneren Abschnitt.
• Gehe zu Fortschrittlich-> Erweitern Sie ElementsKit Sticky.
• Wählen Sie die Sticky-Option➔ Beim Hochscrollen anzeigen aus dem Dropdown-Menü.

Gehe zu Elemente ➔ Ziehen Sie die folgenden Widgets per Drag-and-Drop auf den ausgewählten Bereich.

• Überschrift.
• Kreativ-Taste.
• Bild.
• Überschrift.
• Video.

• Klicken Sie auf Aktualisieren -> Zu Ihrer Seite gehen -> Aktualisieren -> Nach oben scrollen.
• Wenn Sie nach oben scrollen, sehen Sie, dass die Kopfzeile eingeklebt ist.

Bleibt bis zum Scrollen nach oben #

Machen wir es bis zum Abschnitt „Sticky Header“ klebrig.

• Klicken Sie auf den Sticky-Header Symbol für den inneren Abschnitt.
• Gehen Sie nun zu den erweiterten Einstellungen und legen Sie fest CSS-ID und kopieren Sie sie.

• Klicken Sie auf den Sticky-Navigationskopf Symbol für den inneren Abschnitt.
• Gehe zu Fortschrittlich➔ Elementskit Sticky➔ Klebrig bis.
• Fügen Sie nun die klebrigen Kopfzeilenabschnitte ein CSS-ID in die Klebrig bis Feld.

• Klicken Sie auf „Aktualisieren“ -> „Zur Startseite gehen“ -> „Aktualisieren“ -> „Nach oben scrollen“.
• Jetzt können Sie sehen, dass der Header so lange „Sticky“ ist, bis der Header-Bereich „Sticky“ ist und wenn der Videoabschnitt erscheint, ist der Header nicht mehr „Sticky“.

Klebrig auf der Unterseite #

Mit dieser Funktion können Sie jeden Abschnitt unten auf der Seite platzieren.

Sehen Sie sich unseren Video-Guide an:

Oder befolgen Sie die Schritt-für-Schritt-Anleitung:

• Klick auf das ElementsKit-Symbol um eine beliebige Fußzeile aus unseren vorgefertigten Vorlagen einzufügen.

Gehe zu Elemente ➔ Ziehen Sie die folgenden Widgets per Drag-and-Drop auf den ausgewählten Bereich.

• Überschrift.
• Kundenlogo.
• Video.
• Überschrift.

• Klick auf das Symbol für den inneren Abschnitt der Fußzeile.
• Gehe zu Fortschrittlich-> Erweitern Sie ElementsKit Sticky.
• Wählen Sie die Sticky-Option➔ Unten aus dem Dropdown-Menü.

• Klicken Sie auf Aktualisieren -> Zu Ihrer Seite gehen -> Aktualisieren -> Nach oben scrollen.
• Wenn Sie nach oben scrollen, können Sie sehen, dass die Fußzeile eingeklebt ist.

Klebrig bis auf den Boden #

Lassen Sie es bis zum unteren klebrigen Abschnitt klebrig machen.

• Klick auf das Unten klebrig Symbol für den inneren Abschnitt.
• Gehen Sie nun zu den erweiterten Einstellungen und legen Sie fest CSS-ID und kopieren Sie sie.

• Klicken Sie auf die Fußzeile Symbol für den inneren Abschnitt.
• Gehe zu Fortschrittlich➔ Elementskit Sticky➔ Klebrig bis.
• Fügen Sie nun den unteren klebrigen Abschnitt ein CSS-ID in die Klebrig bis Feld.

• Klicken Sie auf „Aktualisieren“ -> „Zur Startseite gehen“ -> „Aktualisieren“ -> „Nach oben scrollen“.
• Jetzt können Sie sehen, dass die Kopfzeile solange „Sticky“ ist, bis der untere Bereich „Sticky“ erreicht ist und der Abschnitt mit dem Kundenlogo in der Fußzeile nicht mehr „Sticky“ ist.

Klebrig auf der Säule #

Mit dieser Funktion können Sie beliebige Abschnitte auf die Säule kleben.

Sehen Sie sich unseren Video-Guide an:

Oder befolgen Sie die Schritt-für-Schritt-Anleitung:

• Wählen Sie Ihre Struktur aus dem ausgewählten Bereich aus. Hier nehme ich 3 Spalten.

Gehe zu Elemente ➔ Ziehen Sie die folgenden Widgets per Drag-and-Drop auf den ausgewählten Bereich.

• Überschrift.
• Bild.
• Icon-Box.

Lassen Sie uns die Überschrift und den Bildbereich einkleben.

• Klick auf das Symbol für den inneren Abschnitt der Überschrift.
• Gehe zu Fortschrittlich-> Erweitern Sie ElementsKit Sticky.
• Wählen Sie die Sticky-Option➔ Spalte aus dem Dropdown-Menü.

• Klick auf das Symbol für den inneren Abschnitt des Bildes.
• Gehe zu Fortschrittlich-> Erweitern Sie ElementsKit Sticky.
• Wählen Sie die Sticky-Option➔ Spalte aus dem Dropdown-Menü.

• Klicken Sie auf Aktualisieren -> Zu Ihrer Seite gehen -> Aktualisieren -> Nach unten scrollen.
• Sie können sehen, dass die Überschrift und das Bild eingeklebt sind und sich der Inhalt der Symbolbox auf der rechten Seite noch bewegt.