Der Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position.

Sehen Sie sich die Videoanleitung an:

Steps to Use ElementsKit Sticky Content:

• Gehe zu ElementsKit → Modules → Enable Klebriger Inhalt → Save.
• Open page in Elementor.
• Select section/column/widget → Advanced → ElementsKit Sticky.
• Choose Sticky Type (Top / Bottom / Scroll Up / Column).
• Set Offset, Sticky Until (CSS ID), Background if needed.
• Update and test on devices.

Follow the module’s detail functions:

Aktivieren Sie das Sticky Content-Modul #

To start using the Sticky Content module, the first thing you should do is to enable this from the list of ElementsKit modules. Go to ElementsKit from your dashboard and follow the steps:

1. ElementsKit unter ElementsKit Plugin
2. Go to MODULES
3. Toggle the Sticky Content module AN
4. Klicke auf Änderungen speichern

Steps 2: Sticky on Top #

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.

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

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

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

Änderung der Hintergrundfarbe des Sticky oben #

You can change the background color whenever you need. Under the Sticky Until feature, you can find the option to change the background color of the sticky section.

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

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.

1. Klick auf das Our School Goals 2019 inner section icon
2. Gehen Sie zu Erweitert
3. Find Layout

Stellen Sie die ein CSS ID and Copy it.

• 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 Sticky Until the Our School Goals 2019 Section.

Funktion zum Hinzufügen von Klassen #

ElementsKit provides you another option and that is a class adding feature. If you scroll down for example 50px, a new class will be added and that is “ekit-sticky-effects”. Using this class you can make any CSS you want. Let’s see how you can do it.

1. Gehen Sie zu Customizer-> Zusätzliches CSS.
2. 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:

• Go back to ElementsKit Sticky Optionen.

• Wählen Sie die Sticky-Option➔ Beim Hochscrollen anzeigen aus dem Dropdown-Menü.

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 #

Let’s make it sticky until the Care About Us Section.

• Click on the sticky Care About Us Symbol für den inneren Abschnitt.
• Now, going to the Layout settings from Advanced tab, stellen Sie die ein CSS-ID und kopieren Sie sie.

• Klicken Sie auf den Sticky-Navigationskopf Symbol für den inneren Abschnitt.
• Gehe zu Fortschrittlich
• Finden Elementskit Sticky and paste that sticky header section’s 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.