Jak zbudować responsywny, stały pasek boczny z płynnie przewijanymi linkami zakotwiczenia w Divi

Paski boczne nie są tak popularne jak kiedyś. W wielu przypadkach stają się bardziej rozpraszające niż pomocne. Ale czasami pasek boczny ma sens, zwłaszcza w przypadku długich treści. Dlatego postanowiłem stworzyć pasek boczny, który ma wiele sensu.

Dzisiaj pokażę ci, jak możesz użyć Divi Builder do stworzenia responsywnego, stałego (lub przyklejonego) paska bocznego z płynnie przewijanymi linkami zakotwiczonymi (lub linkami do przeskakiwania). Ponieważ pasek boczny pozostaje widoczny, a linki kotwiczne płynnie przewijają się do różnych sekcji na stronie, pasek boczny pozostaje powiązany z treścią, co czyni go przydatną funkcją UX. Podobnie jak konspekt dokumentu, ta kombinacja sprawia, że ​​zawartość strony internetowej jest bardziej dostępna i łatwiejsza do odczytania. To odświeżające rozwiązanie dla tych długich przewijanych stron.

Sprawdź to!

zapowiedź

Oto zapowiedź tego, co będziemy wspólnie budować.

Koncepcja

Ci z Was, którzy mieszkają w Dokumentach Google tak samo jak ja, wiedzą o tym pomocnym narzędziu do tworzenia konspektów dokumentów, które pozwala łatwo wdrożyć stały pasek boczny z klikalnym konspektem, który przeskakuje do różnych nagłówków w dokumencie. Uwielbiam to, ponieważ pomaga mi znacznie szybciej znajdować informacje. Pomyślałem, że fajnie byłoby wprowadzić tę samą funkcję na swoją stronę.

Czego potrzebujesz, aby zacząć

W tym samouczku wszystko, czego naprawdę potrzebujesz, to Divi! Będziemy również korzystać ze strony przepisów z pakietu układów przepisów żywnościowych, który jest swobodnie dostępny z Divi Builder.

Dodawanie układu do strony

Subskrybuj nasz kanał YouTube

Aby rozpocząć, utwórz nową stronę i wdróż Divi Builder. Wybierz opcję „Wybierz gotowy układ”. Z wyskakującego okienka Load From Library (Załaduj z biblioteki) wybierz pakiet układu przepisów żywnościowych, a następnie kliknij, aby użyć strony przepisów.

Po załadowaniu układu kliknij, aby zbudować na interfejsie.

Tworzenie nowej sekcji

W interfejsie Divi Builder utwórz nową sekcję i przeciągnij ją na samą górę układu.

Skopiuj przycisk w sekcji nagłówka układu i wklej go w jednokolumnowym wierszu nowej utworzonej sekcji.

Otwórz ustawienia przycisku i dodaj następujący niestandardowy kod CSS do elementu głównego w zakładce Zaawansowane:

display: block !important;

To po prostu pozwala, aby przycisk obejmował całą szerokość kolumny.

Zmień tekst przycisku na „Wprowadzenie”. A następnie dodaj następujące elementy dla adresu URL linku przycisku:

#wprowadzanie

W ten sposób tworzysz link do kotwicy. Hashtag (#) informuje przeglądarkę, że zamierzasz połączyć się z identyfikatorem CSS. Poniższy tekst „wstęp” będzie odpowiadał nazwie identyfikatora CSS, który dodamy do jednej z naszych sekcji w układzie. Nazwa identyfikatora CSS może być dowolna. Upewnij się tylko, że pasuje do identyfikatora CSS, który podasz później w sekcji.

Powiel przycisk, a następnie powtórz proces nadawania przyciskowi nowego tekstu przycisku i nowego adresu URL łącza przycisku. Ponieważ będzie to link do kotwicy, który przeskakuje do innej sekcji strony, upewnij się, że identyfikator CSS (tekst po „#”) jest unikalny i odpowiada nazwie, którą później nadasz swojej sekcji.

W przypadku tego przycisku zmień tekst przycisku na „Składniki”, a adres URL linku przycisku na „#ingredients”.

Ponownie zduplikuj przycisk, a następnie nadaj nowemu przyciskowi tekst „Odżywianie” i zmień adres URL linku przycisku na „#nutrition”.

Zduplikuj przycisk jeszcze raz, a następnie nadaj nowemu przyciskowi tekst „Instrukcje” i zmień adres URL linku przycisku na „#instrukcje”.

To wszystko, co musimy teraz zrobić. Wrócimy do tej sekcji i za chwilę zmienimy ją w stały pasek boczny.

Dodawanie identyfikatorów CSS do sekcji i wierszy

Teraz, gdy mamy już cały nasz przycisk utworzony z linkami zakotwiczenia, jesteśmy gotowi do dodania odpowiednich nazw identyfikatorów CSS do naszych sekcji i wierszy.

Linki zakotwiczone automatycznie przeskoczą do dowolnego elementu na stronie o odpowiednim identyfikatorze CSS. Identyfikator CSS można zastosować do tekstu wbudowanego, modułów, wierszy lub sekcji. Jeśli chciałbyś dodać identyfikator CSS do nagłówka za pomocą HTML, wyglądałoby to mniej więcej tak:

<h2 id="introduction">Introduction</h2>

Ponieważ jednak chcemy przeskoczyć do sekcji strony, możemy dodać identyfikator CSS do określonej sekcji strony. Zapewni to użytkownikowi wystarczająco wygodną przestrzeń do oglądania, aby odwiedzający mógł łatwo rozpoznać, gdzie się znajduje na stronie. Przeskakiwanie do tekstu wbudowanego lub do modułu może spowodować zakłopotanie odwiedzającego.

Jak omówiliśmy wcześniej, każdy z utworzonych adresów URL przycisków ma odpowiadać identyfikatorom CSS sekcji, do których muszą przejść.

W przypadku przycisku „Wprowadzenie” musimy dodać identyfikator CSS do sekcji strony zawierającej treść wstępu. Aby to zrobić, otwórz ustawienia sekcji trzeciej sekcji strony (sekcji bezpośrednio pod nagłówkiem) i dodaj następujący identyfikator CSS w zakładce Zaawansowane:

Identyfikator CSS: wprowadzenie

Odpowiada to utworzonemu wcześniej przyciskowi linku do kotwicy Wprowadzenie.

Teraz w tej samej sekcji znajdź wiersz zawierający nagłówek „Składniki”. Następnie otwórz ustawienia wiersza i dodaj następujący identyfikator CSS:

Identyfikator CSS: składniki

Będzie to odpowiadać utworzonemu wcześniej przyciskowi linku do zakotwiczenia składników.

Przewiń w dół do następnej sekcji z nagłówkiem „Odżywianie” i otwórz ustawienia sekcji. Następnie dodaj następujący identyfikator CSS:

Identyfikator CSS: odżywianie

Będzie to odpowiadało przyciskowi linku do kotwicy odżywiania, który stworzyliśmy wcześniej.

Na koniec przewiń w dół do następnej sekcji układu z tytułem „Instrukcje krok po kroku”. Następnie otwórz ustawienia sekcji i dodaj następujący identyfikator CSS w zakładce Zaawansowane:

Identyfikator CSS: instrukcje

Będzie to odpowiadało utworzonemu wcześniej przyciskowi linku do zakotwiczenia instrukcji.

Zapisz zmiany.

Teraz jest dobry moment, aby sprawdzić, czy linki kotwiczne działają. Otwórz stronę w nowej karcie i kliknij przyciski w górnej sekcji, aby upewnić się, że przeskakują/przewijają się do odpowiednich lokalizacji na stronie.

Jeśli nie działają, wróć i sprawdź, czy identyfikatory CSS są poprawne i pasują.

Tworzenie stałego układu paska bocznego

Dodawanie lewych marginesów do sekcji w celu utworzenia miejsca na pasek boczny

Posiadanie linków kotwiczących u góry strony jest dobre w przypadku takich rzeczy, jak spis treści. Ale w tym przypadku użycia chcemy, aby linki kotwiczne były widoczne dla użytkownika przez cały czas, aby użytkownik nie musiał przewijać z powrotem na górę strony po kliknięciu jednego z linków. Stały pasek boczny rozwiąże ten problem, ponieważ pozostanie nieruchomy z boku strony, gdy użytkownik kliknie linki kotwiczne.

Ale zanim ustawimy pasek boczny, musimy zrobić dla niego trochę miejsca po lewej stronie naszej strony. W tym celu dodamy lewy margines do każdej sekcji układu.

Ilość lewego marginesu, który dodamy do każdej sekcji, będzie równa szerokości paska bocznego, więc nadszedł czas, aby zdecydować, jak szeroki ma być pasek boczny. W tym przykładzie wystarczy 20% szerokości.

Otwórz ustawienia drugiej sekcji (tej bezpośrednio pod naszymi przyciskami linków do kotwicy) i dodaj następujący niestandardowy margines:

Margines niestandardowy: pozostało 20%

Teraz, zanim zapiszesz ustawienia, kliknij prawym przyciskiem myszy opcję Margines niestandardowy i kliknij „Kopiuj margines niestandardowy” i zapisz ustawienia.

W każdej z pozostałych sekcji w układzie strony wklej margines niestandardowy do sekcji, klikając sekcję prawym przyciskiem myszy i klikając „Wklej niestandardowy margines”.

Spowoduje to pozostawienie 20% lewego marginesu we wszystkich sekcjach z wyjątkiem samej górnej sekcji zawierającej przyciski linków do zakotwiczenia.

Tworzenie stałego paska bocznego

Aby utworzyć pasek boczny, musimy nadać mu stałą pozycję po lewej stronie strony. Zasadniczo zmienimy więc górną sekcję w stały pasek boczny. Aby to zrobić, otwórz ustawienia górnej sekcji i zaktualizuj następujące elementy:

Na karcie Projekt zaktualizuj wysokość i szerokość…

Szerokość: 20%
Wzrost: 100%

W zakładce Zaawansowane zaktualizuj pozycję…

Pozycja: naprawiona
Przesunięcie pionowe: 80px

Daje to sekcji stałą pozycję o szerokości 20% strony. Umieszcza również sekcję po lewej stronie strony i 80 pikseli od góry strony, aby dostosować wysokość nawigacji nagłówka. Wysokość 100% zapewnia, że ​​sekcja obejmuje całą wysokość strony.

Teraz wyświetl stronę w innej karcie przeglądarki, aby zobaczyć funkcjonalność. Podczas przewijania strony pasek boczny pozostaje stały i możesz klikać przyciski linków do zakotwiczenia, aby z łatwością przechodzić do różnych sekcji.

Mocowanie zakładki stopki

Być może zauważyłeś, że sekcja zachodzi na dolny pasek stopki u dołu strony.

Istnieje kilka sposobów rozwiązania tego problemu. Na przykład mogę usunąć „wysokość: 100%” z sekcji lub możesz dodać CSS do ustawień strony, aby dostosować szerokość paska stopki. Ale jeśli chcesz zachować 100% wysokość przekroju, łatwym rozwiązaniem jest usunięcie koloru tła przekroju. Otwórz ustawienia sekcji, której używamy dla paska bocznego i dodaj następujący kolor tła:

Kolor tła: rgba (255,255,255,0)

Jeśli chcesz zmienić kolor paska bocznego, możesz otworzyć ustawienia strony i zmienić kolor tła obszaru zawartości.

Ponieważ kolor tła sekcji jest przezroczysty, kolor tła obszaru zawartości strony prześwituje. A ponieważ wszystkie nasze pozostałe sekcje mają kolor tła, będzie on widoczny tylko w sekcji paska bocznego bez nakładania się na dolny pasek stopki.

Dokonywanie korekt dla urządzeń mobilnych

Ten projekt naprawdę nie ma sensu w przypadku smartfonów, ponieważ nie ma miejsca na pasek boczny, a posiadanie linków u góry strony będzie wymagało od użytkownika przewijania w górę za każdym razem, gdy chce kliknąć link kotwiczny. Ale projekt nadal będzie działał na tablecie, ale może być konieczne utworzenie więcej miejsca na te linki kotwiczne. Aby to zrobić, otwórz ustawienia wiersza dla wiersza paska bocznego sekcji i zaktualizuj następujące elementy:

Szerokość niestandardowa: 100
Niestandardowe wypełnienie (komputer): 10% po lewej, 10% po prawej
Niestandardowe wypełnienie (tablet): 0% w lewo, 0% w prawo

Teraz pozostaje nam tylko ukryć (lub wyłączyć) sekcję na smartfonie. Aby to zrobić, otwórz ustawienia sekcji i przejdź do zakładki Zaawansowane i kliknij pole wyboru, aby wyłączyć na smartfonie.

Otóż ​​to. Masz teraz responsywne, stałe menu paska bocznego z płynnie przewijanymi linkami do kotwic!

Wynik końcowy

Sprawdźmy teraz efekt końcowy.

A oto jak wygląda układ na tablecie.

Dowiedz się więcej o elementach stałych i połączeniach kotwic

Jeśli uważasz, że ten samouczek był pomocny, zapoznaj się z niektórymi z naszych powiązanych samouczków poniżej:

• 5 fajnych rzeczy, które możesz zrobić w Divi dzięki linkom do kotwic
• Jak sprawić, by dowolny element strony Divi był lepki?
• Jak dodać stałe widżety do paska bocznego w WordPress
• Jak sprawić, by Twoja nawigacja Divi zaczynała się na dole, a następnie pozostawała nieruchoma na górze podczas przewijania?
• Jak naprawić stopkę Divi?
• Jak stworzyć pływające wyskakujące menu w Divi

Końcowe przemyślenia

Piękno tej konfiguracji polega na tym, że możesz łatwo dodawać stałe paski boczne do dowolnej strony z różnymi linkami do kotwicy (lub cokolwiek chcesz). Ponieważ twój pasek boczny jest w zasadzie sekcją Divi, możesz go dostosować za pomocą wbudowanych ustawień, dodać więcej wierszy i użyć dowolnej kombinacji modułów.

Ta konfiguracja byłaby świetna w przypadku kursów członkowskich, samouczków, często zadawanych pytań, portfolio lub długich postów na blogu. Możesz go nawet używać do witryn jednostronicowych. Czy masz inne zastosowania do udostępnienia? Ciekawe, jakie są w komentarzach.

Pozdrawiam!