Jak sprawić, by dowolny element strony Divi był lepki?

Wiedza, jak sprawić, by dowolny element strony Divi był przyklejony (lub naprawiony) jest jedną z tych przydatnych umiejętności, z których projektanci stron internetowych mogą korzystać na wiele sposobów. Jeśli nie znasz terminu „przyklejony”, odnosi się on po prostu do elementu na stronie internetowej, który pozostaje „stały”, gdy użytkownik przewija stronę w dół. Popularnym przykładem przyklejonego elementu jest stałe menu nawigacyjne. Divi ma domyślnie dostępną stałą (lub przyklejoną) funkcję nawigacji. Tak więc, gdy użytkownik przewija stronę w dół, stała wersja menu pozostaje zablokowana u góry strony podczas przewijania strony. Ale przyklejonych elementów można używać praktycznie do wszystkiego i jest to świetny sposób na zwrócenie uwagi na pożądane wezwanie do działania na dowolnej stronie.

W tym samouczku pokażę Ci prosty sposób na przyklejenie dowolnego elementu na stronie za pomocą wtyczki o nazwie Sticky Menu (lub Anything!) w Scroll. Wystarczy kilka chwil, aby skonfigurować ustawienia wtyczki. Następnie wszystko, co musisz zrobić, to dodać niestandardowy identyfikator CSS do swojego elementu. To jest takie proste.

Wejdźmy w to!

Czego potrzebujesz do tego samouczka

W tym samouczku będziesz potrzebować:

• Motyw Divi
• Sticky Menu (lub cokolwiek!) we wtyczce Scroll
• Układ strony bloga księgowego (dostępny z poziomu Divi Builder)

Jak sprawić, by dowolny element strony Divi był lepki?

Subskrybuj nasz kanał YouTube

Konfiguracja ustawień wtyczki

Po zainstalowaniu i aktywowaniu Sticky Menu (lub Anything!) we wtyczce Scroll w motywie Divi, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Ustawienia> Sticky Menu (lub Cokolwiek!).

Na karcie Ustawienia podstawowe zaktualizuj opcje w następujący sposób:

Najpierw musisz dodać unikalny identyfikator dla swojego przyklejonego elementu. Może to być identyfikator CSS lub klasa. Później dodamy ten identyfikator do naszego elementu w Divi. Aby ułatwić zapamiętanie, dodam identyfikator CSS „#sticky”.

Przyklejony element: #przyklejony

Następnie musisz dodać wartość w pikselach dla przestrzeni między górną częścią strony a przyklejonym elementem. Ponieważ stały pasek nawigacyjny Divi ma domyślnie wysokość 54 pikseli, chcemy dodać co najmniej 54 piksele dla tej opcji, aby nasz lepki element nie nachodził na ustaloną nawigację.

Odstęp między górą strony a przyklejonym elementem: 54 piksele

Dobrym pomysłem jest również wyłączenie przyklejonego elementu na telefonie komórkowym. W tym celu musimy skonfigurować wtyczkę, aby nie przyklejała elementu, gdy ekran jest mniejszy niż 980px.

Nie przyklejaj elementu, gdy ekran jest mniejszy niż: 980 pikseli

Zapisz ustawienia, a następnie przejdź do zakładki Ustawienia zaawansowane i zaktualizuj następujące elementy:

W przypadku opcji z-index chcemy się upewnić, że nasz element jest ułożony na wierzchu wszystkich innych elementów na stronie, zwłaszcza jeśli planujemy, aby nasz element nachodził na inne elementy podczas przewijania. Aby upewnić się, że tak się stanie, ustaw z-index na 99998.

Indeks Z: 99998

Aby dać ci wyobrażenie o tym, jak elementy są uporządkowane w Divi, sekcje mają indeks Z równy 2, kolumny mają indeks Z równy 9, a pasek nagłówka/nawigacji ma indeks Z równy 99999. chcąc, aby nasz przyklejony element był o 1 numer niższy niż indeks Z dla nawigacji nagłówka. Dzięki temu przyklejony element będzie znajdował się nad wszystkim innym na stronie oprócz nawigacji. Przyda się to, gdy będziesz chciał zatrzymać swój element i przesunąć go w górę strony, aby przyklejony element nie znajdował się na górze nawigacji podczas przewijania (wygląda na niechlujny i uszkodzony).

Następnie możemy dodać identyfikator elementu „push up”. Możesz myśleć o tym jako o korku dla naszego lepkiego elementu. Jest to zwykle element stopki. Zasadniczo identyfikuje element, który zatrzyma przyklejony element podczas przewijania strony w dół, umożliwiając wypchnięcie przyklejonego elementu w górę wraz z resztą strony. W tym przykładzie ustawię identyfikator za pomocą identyfikatora CSS „#stop”.

Element push-up: #stop

Zapisz ustawienia.

Teraz jesteśmy wyposażeni w moc potrzebną do stworzenia lepkiego elementu!

Przyklejanie elementu strony Divi

Aby pokazać, jak przykleić element Divi, użyję strony blogu księgowego Divi z pakietu układu księgowego. Aby rozpocząć, utwórz nową stronę, nadaj jej tytuł i wdróż program Visual Builder. Następnie wybierz opcję „Wybierz gotowy układ”. Z wyskakującego okna ładowania z biblioteki wybierz pakiet układu księgowego i wybierz stronę Blog.

Ta strona zawiera formularz zgody na subskrypcję e-mail na prawym pasku bocznym sekcji specjalistycznej. Aby zwrócić większą uwagę na ten formularz, możemy sprawić, że stanie się on przyklejony, gdy użytkownik przewinie stronę w dół. Następnie możemy sprawić, że element zatrzyma się (lub wypchnie) za każdym razem, gdy dotrze do następnej sekcji na stronie, aby się nie nakładał.

Jak zrobić lepką kolumnę?

W tym momencie jednak musimy zdecydować, który konkretny element chcemy przykleić. Moglibyśmy po prostu przykleić moduł opcji e-mail, ale to nie uwzględniłoby modułu Social Media Follow bezpośrednio pod formularzem, który również chcemy przykleić. I możemy nadać obu tym modułom ten sam identyfikator, ponieważ oba stałyby się przyklejone w tej samej pozycji, powodując nakładanie się. Najlepszym sposobem na to jest sprawienie, aby cała kolumna (kolumna 2) była lepka.

Aby kolumna 2 była przyklejona, otwórz ustawienia wiersza zawierającego kolumnę, na którą chcemy kierować. Następnie w zakładce Zaawansowane dodaj identyfikator CSS „przyklejony”. Odpowiada to unikalnemu identyfikatorowi elementu przyklejonego, który dodaliśmy w ustawieniach wtyczki.

Identyfikator CSS: lepki

(UWAGA: Nie umieszczaj tutaj symbolu hashtagu (lub funta) przed identyfikatorem. Upewnij się również, że dodałeś go do identyfikatora CSS, a nie klasy CSS)

Zapisz ustawienia i wyświetl podgląd aktywnej wersji strony. Jeśli przewiniesz w dół, zauważysz, że kolumna 2 (z obydwoma modułami) stanie się lepka, gdy osiągnie 54 piksele od góry okna i pozostanie w tej pozycji podczas dalszego przewijania.

Zatrzymywanie lepkiego elementu w sekcji

Jak widać, element nadal pozostaje lepki, więc nakłada się na zawartość innych sekcji poniżej. Aby temu zapobiec, możemy użyć naszego identyfikatora „push up” (#stop), który dodaliśmy w ustawieniach wtyczki.

Aby zatrzymać przyklejony element w poniższej sekcji, musimy otworzyć ustawienia sekcji i dodać identyfikator CSS „stop”.

Identyfikator CSS: stop

Teraz przejdź do podglądu działającej wersji strony. Zwróć uwagę, jak przyklejony element zatrzymuje się na zidentyfikowanej sekcji.

Całkiem fajnie, prawda?

Jak sprawić, by moduł był lepki?

Aby przykleić pojedynczy moduł, musisz dokonać korekty w Divi, aby upewnić się, że element ma prawidłowy indeks Z, aby podczas przewijania znajdował się na wierzchu innych elementów na stronie. Jak wspomniałem wcześniej, Divi przypisuje indeks z 2 do wszystkich sekcji. Wtyczka stosuje indeks z 99998 do przyklejonego elementu. Ale ponieważ moduł nie może być uporządkowany (lub zindeksowany) powyżej swojego elementu nadrzędnego (sekcji), moduł nadal będzie znajdował się za innymi modułami na stronie. Aby to naprawić, musimy upewnić się i ręcznie nadać sekcji zawierającej nasz lepki moduł indeks z 99998.

Aby to zilustrować, użyję tego samego układu strony Blog księgowego, którego używaliśmy wcześniej. Zanim dodamy nasz identyfikator CSS do modułu, najpierw musimy usunąć identyfikator CSS (przyklejony), który ustawiliśmy dla kolumny 2. A następnie usunąć identyfikator CSS (stop), który ustawiliśmy dla sekcji poniżej. Następnie otwórz ustawienia modułu Social Media Follow i dodaj identyfikator CSS „przyklejony” do modułu.

Jeśli wyświetlisz aktywną stronę, zauważysz, że przyklejony element jest ukryty podczas nakładania się na inne moduły w poniższych sekcjach podczas przewijania.

Aby to naprawić, otwórz ustawienia sekcji dla sekcji zawierającej przyklejony element modułu śledzącego w mediach społecznościowych. Następnie dodaj następujący niestandardowy kod CSS do elementu głównego:

z-index: 99998;

Teraz sprawdź stronę na żywo. Zwróć uwagę, jak ikony mediów społecznościowych będą przyklejać się na górze strony (54 piksele od góry), tuż pod stałą nawigacją, a następnie pozostaną nad innymi modułami podczas przewijania.

Tworzenie lepkiej sekcji

Aby cała sekcja była przyklejona, postępuj zgodnie z tym samym procesem, dodając identyfikator CSS „przyklejony” do wybranej sekcji. Nie ma potrzeby aktualizowania indeksu Z za pomocą niestandardowego css, ponieważ wtyczka robi to automatycznie.

Efekty najechania mogą powodować zakłócenia przyklejonych elementów

Jeśli masz aktywne efekty najechania na całej stronie lub na przyklejonym elemencie, możesz napotkać pewne usterki. Jeśli tak się stanie, może być konieczne wyłączenie efektów najechania na przyklejony element.

Tylko jeden przyklejony element na stronę

Wtyczka pozwala tylko na jeden przyklejony element na stronę, więc jeśli chcesz dodać wiele przyklejonych elementów, będziesz potrzebować bardziej zaawansowanego rozwiązania (lub innej wtyczki, która to obsługuje).

Końcowe przemyślenia

Mam nadzieję, że ten artykuł był pomocny w zapewnieniu odświeżająco prostego sposobu na przyklejenie dowolnego elementu strony Divi. Użyj go do tworzenia lepkich podmenu, lepkich wezwań do działania, lepkich ofert promocyjnych i prawie wszystkiego, co możesz wymyślić. Baw się odkrywając możliwości!

Czekam na kontakt z Państwem w komentarzach poniżej.

Pozdrawiam!