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

Obejrzyj przewodnik wideo:

Steps to Use ElementsKit Sticky Content:

• Iść do ElementsKit → Moduły → Enable Przyklejona treść → Save.
• Open page in Elementora.
• 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:

Włącz moduł zawartości przyklejonej #

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 Zestaw elementów from your dashboard and follow the steps:

1. Zestaw elementów pod Zestaw elementów podłącz
2. Go to MODULES
3. Toggle the Sticky Content module NA
4. Kliknij Zapisz zmiany

Steps 2: Sticky on Top #

Ta funkcja pomoże Ci umieścić dowolną sekcję na górze strony.

Obejrzyj nasz przewodnik wideo:

Możesz też postępować zgodnie z instrukcjami krok po kroku:

• Nawigować do ElementsKit → Stopka nagłówka → Kliknij Edytuj za pomocą Elementora.

• Utwórz nową stronę-> Kliknij Ikona ElementsKit aby wstawić dowolną gotową stronę z naszych gotowych szablonów.

1. Kliknij na Ikona sekcji wewnętrznej.
2. Iść do Zaawansowany
3. Rozwiń element ElementsKit Sticky.
4. Wybierz opcję Przyklejony➔ Szczyt z listy rozwijanej

• Teraz przejdź do swojej strony-> Możesz zobaczyć, że nagłówek jest przyklejony na górze.

Zmiana koloru tła naklejki na górze #

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.

• Wybierz lepki kolor tła: Blue.
• Kliknij Aktualizuj

Przyklejony aż do wierzchu #

Jeśli chcesz, aby sekcje były przyklejane do wielu sekcji i przestały być przyklejane po określonej sekcji, możesz ustawić tutaj identyfikator tej sekcji. Przyklejmy to do sekcji O nas.

• Kliknij Edytuj za pomocą Elementora.

1. Kliknij na Our School Goals 2019 inner section icon
2. Przejdź do opcji Zaawansowane
3. Find Layout

Ustaw CSS ID and Copy it.

• Iść do nagłówek➔Zaawansowany➔Przyklejony Elementskit➔Przyklejony aż.
• Teraz wklej sekcję o nas Identyfikator CSS w Przyklejony aż pole.

• Teraz możesz zobaczyć, że nagłówek to Sticky Until the Our School Goals 2019 Section.

Funkcja dodawania klasy #

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. Przejdź do konfiguratora-> Dodatkowe CSS.
2. Skorzystaj z klasy: „ekit-lepki-efekt” i ustaw kolor tła Szary.

• Przejdź do nagłówka-> Usuń Kolor tła.
• Dodaj przesunięcie. Na przykład: 50 pikseli.

• Widać, że kolor tła jest Przezroczysty. Ale po przewinięciu do 50 pikseli dodawany jest kolor tła.

Lepki offset na górze #

• Możesz zdecydować, ile miejsca pozostanie, gdy zawartość lub zdjęcie będzie przyklejone na górze. Możesz zrobić to samo dla innych lepkich pozycji. Podaj lepkie przesunięcie: 100 pikseli. Możesz zobaczyć, że nagłówek jest wyświetlany po 100px.

• Istnieją trzy opcje wyboru urządzenia, na którym będzie wyświetlana naklejka: Wszystkie urządzenia, tylko komputer stacjonarny, komputer stacjonarny i tablet. Wybierz opcję, aby dokładnie określić, na którym urządzeniu (urządzeniach) chcesz wyświetlać treść jako przyklejoną.

Pokaż przyklejony podczas przewijania w górę #

Ta funkcja pomoże Ci przykleić dowolną sekcję strony podczas przewijania w górę.

Obejrzyj nasz przewodnik wideo:

Możesz też postępować zgodnie z instrukcjami krok po kroku:

• Go back to ElementsKit jest przyklejony opcje.

• Wybierz opcję przyklejenia➔ Pokaż przy przewijaniu w górę z listy rozwijanej.

Kliknij Aktualizuj-> Przejdź do swojej strony->Odśwież-> Przewiń w górę.

Podczas przewijania w górę widać, że nagłówek jest przyklejony.

Przyklejony do momentu przewinięcia w górę #

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

• Click on the sticky Care About Us Ikona sekcji wewnętrznej.
• Now, going to the Layout settings from Advanced tab, Ustaw Identyfikator CSS i skopiuj go.

• Kliknij przyklejony nagłówek nawigacji Ikona sekcji wewnętrznej.
• Iść do Zaawansowany
• Znajdować Przyklejony Elementskit and paste that sticky header section’s Identyfikator CSS w Przyklejony aż pole.

• Kliknij Aktualizuj-> Przejdź do strony głównej-> Odśwież-> Przewiń w górę.
• Teraz możesz zobaczyć, że nagłówek jest przyklejony. Do momentu przyklejenia sekcji nagłówka i pojawienia się sekcji wideo nagłówek nie jest już przyklejony.

Przyklejony na spodzie #

Ta funkcja pomoże Ci umieścić dowolną sekcję na dole strony.

Obejrzyj nasz przewodnik wideo:

Możesz też postępować zgodnie z instrukcjami krok po kroku:

• Kliknij na Ikona ElementsKit aby wstawić dowolną stopkę z naszych gotowych szablonów.

Iść do Elementy ➔ Przeciągnij poniższe widżety i upuść na wybranym obszarze.

• Nagłówek.
• Logo Klienta.
• Wideo.
• Nagłówek.

• Kliknij na Ikona sekcji wewnętrznej stopki.
• Iść do Zaawansowany-> Rozwiń element ElementsKit Sticky.
• Wybierz opcję przyklejenia➔ Spód z listy rozwijanej.

• Kliknij Aktualizuj-> Przejdź do swojej strony->Odśwież-> Przewiń w górę.
• Podczas przewijania w górę widać, że stopka jest lepka.

Lepki aż do spodu #

Sprawmy, aby był lepki aż do dolnej części przyklejonej.

• Kliknij na Dolny lepki Ikona sekcji wewnętrznej.
• Teraz, przechodząc do ustawień zaawansowanych, ustaw Identyfikator CSS i skopiuj go.

• Kliknij stopkę Ikona sekcji wewnętrznej.
• Iść do Zaawansowany➔ Przyklejony Elementskit➔ Przyklejony aż.
• Teraz wklej dolną sekcję samoprzylepną Identyfikator CSS w Przyklejony aż pole.

• Kliknij Aktualizuj-> Przejdź do strony głównej-> Odśwież-> Przewiń w górę.
• Teraz widzisz, że nagłówek jest przyklejony. Dopóki dolna część naklejonej części i pojawienie się sekcji z logo klienta w stopce nie jest już lepka.

Przyklejony do kolumny #

Ta funkcja pomoże Ci przykleić dowolną sekcję do kolumny.

Obejrzyj nasz przewodnik wideo:

Możesz też postępować zgodnie z instrukcjami krok po kroku:

• Wybierz swoją konstrukcję z wybranego obszaru. Tutaj biorę 3 kolumny.

Iść do Elementy ➔ Przeciągnij poniższe widżety i upuść na wybranym obszarze.

• Nagłówek.
• Obraz.
• Pudełko z ikonami.

Przyklejmy nagłówek i sekcję obrazu.

• Kliknij na Ikona sekcji wewnętrznej nagłówka.
• Iść do Zaawansowany-> Rozwiń element ElementsKit Sticky.
• Wybierz opcję przyklejenia➔ Kolumna z listy rozwijanej.

• Kliknij na Ikona sekcji wewnętrznej obrazu.
• Iść do Zaawansowany-> Rozwiń element ElementsKit Sticky.
• Wybierz opcję przyklejenia➔ Kolumna z listy rozwijanej.

• Kliknij Aktualizuj-> Przejdź do swojej strony->Odśwież-> Przewiń w dół.
• Możesz zobaczyć, że nagłówek i obraz są przyklejone, a prawa strona pola z ikonami wciąż się porusza.