Powitanie rozpoczęte #

Moduł Sticky Content w ElementsKit umożliwia przyklejenie dowolnej sekcji strony lub postu do wybranej pozycji. W tym samouczku wyjaśnimy różne funkcje modułu Sticky Content i sposoby ich wykorzystania, aby wyróżnić swoją treść.

Obejrzyj nasz przewodnik wideo:

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

Włącz moduł zawartości przyklejonej #

Aby rozpocząć korzystanie z modułu Sticky Content, pierwszą rzeczą, którą powinieneś zrobić, to włączyć tę opcję z listy modułów ElementsKit. Bez włączenia tego modułu nie można go używać z Elementorem. Oto jak włączyć moduł Sticky Content:

• Iść do Zestaw elementów ➔ Moduły. Teraz przełącz moduł Sticky Content NA i kliknij Zapisz zmiany.

Klejący na górze #

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.

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

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

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

Zmiana koloru tła naklejki na górze #

Możesz zobaczyć problem polegający na tym, że część nagłówka jest lepka, ale jest przezroczysta. Musimy więc zmienić kolor tła. W funkcji Przyklejony do możesz znaleźć opcję zmiany koloru tła przyklejonej sekcji.

• Wybierz lepki kolor tła: Biały.
• Kliknij Aktualizuj

• Przejdź do strony głównej->Odśwież->Przewiń w dół.
• Możesz zobaczyć, że kolor tła nagłówka jest biały.

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.

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

• 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 Przyklejony do sekcji O nas.

Funkcja dodawania klasy #

Kiedy używasz przezroczystego nagłówka, możesz napotkać problem z kolorem tła. Jeśli przewiniesz w dół, możesz potrzebować koloru tła. Zatem tutaj ElementsKit zapewnia inną opcję, a jest to funkcja dodawania klas. Jeśli przewiniesz w dół, na przykład 50px, zostanie dodana nowa klasa, a mianowicie „ekit-sticky-effects”. Używając tej klasy, możesz stworzyć dowolny CSS. Zobaczmy, jak możesz to zrobić.

• Przejdź do konfiguratora-> Dodatkowe CSS.
• 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:

• Kliknij na Ikona ElementsKit aby wstawić dowolny nagłówek z naszych gotowych szablonów.

• Kliknij na Ikona sekcji wewnętrznej.
• Iść do Zaawansowany-> Rozwiń element ElementsKit Sticky.
• Wybierz opcję przyklejenia➔ Pokaż przy przewijaniu w górę z listy rozwijanej.

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

• Nagłówek.
• Kreatywny przycisk.
• Obraz.
• Nagłówek.
• Wideo.

• 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ę #

Przyklejmy go aż do sekcji Przyklejonego nagłówka.

• Kliknij przyklejony nagłówek Ikona sekcji wewnętrznej.
• Teraz, przechodząc do ustawień zaawansowanych, ustaw Identyfikator CSS i skopiuj go.

• Kliknij przyklejony nagłówek nawigacji Ikona sekcji wewnętrznej.
• Iść do Zaawansowany➔ Przyklejony Elementskit➔ Przyklejony aż.
• Teraz wklej tę przyklejoną sekcję nagłówka 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.