Czy chcesz utworzyć pasek nawigacyjny pomiędzy postami, który będzie przyklejany w Divi?
Przyklejony pasek nawigacji po wpisach to skuteczny sposób na zwiększenie komfortu użytkownika każdego Witryna internetowa bloga. Oprócz głównej nawigacji w Twojej witrynie, linki nawigacyjne po wpisach umożliwiają użytkownikom łatwe przejście do poprzedniego lub następnego wpisu Twój blog. Jeśli dodasz te linki nawigacyjne do postów do paska przyklejonego, linki te pozostaną widoczne i bardziej dostępne.
W tym samouczku utworzymy pasek nawigacyjny między postami przyklejonymi w Divi. Aby to zrobić, użyjemy wbudowanych opcji Divi, aby przekształcić wiersz w lepki pasek. Następnie wykorzystamy moduł nawigacji po artykułach do zaprojektowania linków „poprzedni artykuł” i „następny artykuł”.
Dodatkowo, dodamy tytuł posta jako dynamiczną zawartość na środku paska, która będzie przypominać użytkownikom o aktualnie przeglądanym postu, dając navbarowi ładny element „przeszłość, teraźniejszość i przyszłość”.
Zacznijmy!
badanie
Oto krótkie spojrzenie na projekt, który będziemy tworzyć w tym samouczku.
To, czego potrzebujesz, aby zacząć
Chociaż możesz dodać ten lepki pasek nawigacyjny posta do dowolnego układu lub szablonu postu na blogu w Divi, użyjemy gotowego szablonu posta na blogu, aby przyspieszyć proces i szybko rozpocząć projektowanie.
Zaimportuj szablon postu na blogu „Meal Kit” do Divi Theme Builder
Aby rozpocząć, pobierz darmowy szablon postu na blogu dla pakietu układów Divi's Meal Kit . Aby to zrobić, przejdź do wpis na blogu .
Następnie wprowadź swój adres e-mail, aby pobrać plik zip.
Następnie rozpakuj plik, aby był gotowy do importu.
Aby zaimportować plik do edytora motywów, wykonaj następujące kroki:
- Przejdź do Divi > Kreator motywów.
- Kliknij ikonę przenoszenia.
- W wyskakującym oknie Przenośność wybierz kartę importu.
- Wybierz poprzednio pobrany rozpakowany plik do zaimportowania.
- Kliknij « Importuj narzędzie do tworzenia motywów Divi Szablony ».
- Kliknij ikonę edycji, aby edytować zaimportowany szablon.
Utwórz lepki pasek nawigacyjny w Divi
Część 1: Tworzenie lepkiej linii
Aby utworzyć przyklejony pasek nawigacyjny, użyjemy trzykolumnowego wiersza jako przyklejonego kontenera dla naszych łączy nawigacyjnych między wpisem a tytułem wpisu.
Czytaj także: Divi: Jak korzystać z opcji „Powtarzanie gradientu” do tworzenia niestandardowych wzorów tła
W drugiej sekcji układu szablonu dodaj nowy wiersz poniżej wiersza zawierającego treść posta.
Ustawienia linii
Otwórz ustawienia linii.
Najpierw musimy dodać pozycję przyklejenia do linii, abyśmy mogli zaktualizować inne opcje projektu w stanie przyklejenia.
Pod zakładką Zaawansowane, zaktualizuj następujące informacje:
- Lepka pozycja: trzymaj się góry i dołu
- Górny limit lepkości: sekcja
- Dolny limit lepkości: obszar ciała
Aby mieć pewność, że kolumny nie nakładają się na siebie na urządzeniach mobilnych, dodaj następujący niestandardowy kod CSS do Główny element :
display:flex;
flex-wrap:nowrap;
align-items:center;
Pod zakładką Treść, dodaj biały kolor tła do linii w stanie przyklejenia w następujący sposób:
- tło: brak
- Bakground: #ffffff (Przyklejony)
W ustawieniach Wnętrze, zaktualizuj następujące informacje:
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
- Wypełnienie: 0px (góra i dół)
Ukryj środkową kolumnę na tablecie i telefonie
Aby ukryć kolumnę na urządzeniu mobilnym, otwórz ustawienia dla kolumny 2 (środkowa kolumna) i zaktualizuj opcje widoczności w następujący sposób:
- Wyłącz na: telefonie, tablecie
Część 2: Tworzenie linków do nawigacji po artykułach
Aby zapewnić większą elastyczność projektowania na potrzeby nawigacji po wpisach, użyjemy dwóch oddzielnych modułów nawigacji po wpisach. W lewej kolumnie dodamy moduł nawigacji po wpisach, który wyświetla tylko link do poprzedniego artykułu. W prawej kolumnie dodamy moduł nawigacji po wpisach, który wyświetla tylko łącze do następnego wpisu.
Link do poprzedniego posta
W kolumnie 1 dodaj nowy moduł nawigacji po wpisach.
Otwórz ustawienia modułu, zaktualizuj zakładkę opcji Treść w następujący sposób:
- Poprzedni link (tekst): Poprzedni post
- Pokaż link do poprzedniego wpisu: TAK
- Pokaż link do następnego posta: NIE
- Tło: #000000
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Czcionka linków: Kumbh Sans
- Grubość czcionki linków: pogrubiona
- Styl czcionki: TT
- Kolor tekstu linków: #ffffff
- Rozmiar tekstu linków: 26px (komputer), 16px (tablet i telefon)
- Wysokość linii: 1,3 em
- Wypełnienie: 0,9 em (góra), 0,7 em (dół), 2 em (lewy i prawy)
Ponieważ ukrywamy środkową kolumnę na telefonie komórkowym, dwie pozostałe kolumny, które będą zawierać linki nawigacyjne, mogą teraz zajmować 50% szerokości przeglądarki na tablecie i telefonie.
Zobacz też: Divi: Jak zmienić styl kilku elementów po najechaniu kursorem lub po kliknięciu
Aby łącze nawigacyjne obejmowało 50% widocznego obszaru, dodaj następujący niestandardowy kod CSS w polu Łącza CSS w celu wyświetlania na tablecie:
display:block;
width:50vw;
text-align:center;
float:none;
Utworzenie linku do następnego posta
Aby utworzyć link do następnego posta, skopiuj moduł nawigacji po postach (z linkiem do poprzedniego posta), który właśnie zaprojektowaliśmy i wklej go w kolumnie 3 (prawa kolumna).
Następnie otwórz ustawienia nawigacji po wpisach dla zduplikowanego modułu w prawej kolumnie i zaktualizuj następujące opcje karty treści:
- Następny link: Następny post
- Pokaż link do poprzedniego wpisu: NIE
- Pokaż link do następnego posta: TAK
- Tło: #ffb100
Pod zakładką Wnętrze, zaktualizuj kolor tekstu linku:
- Kolor tekstu linków: #000000
Część 3: Tworzenie dynamicznego tytułu posta
Po umieszczeniu obu linków nawigacyjnych jesteśmy gotowi do dodania tytułu posta jako treści dynamicznej w środkowej kolumnie.
Chodzi o to, aby użytkownik miał przyjemne przypomnienie o czytanej wiadomości z możliwością przejścia do poprzedniej i następnej wiadomości.
W środkowej kolumnie dodaj nowy moduł Tekst.
Pod zakładką Treść, kliknij ikonę „Użyj zawartości dynamicznej” w obszarze ciała, a następnie wybierz Tytuł posta/archiwum.
Po dodaniu dynamicznego tytułu posta otwórz ustawienia Tytuł posta/archiwum i zaktualizuj zawartość przed:
- Przed czytaniem
Następnie zapisz zmiany.
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Czcionka tekstu: Kumbh Sans
- Grubość czcionki tekstu: pogrubiona
- Styl czcionki: TT
- Tekst Kolor tekstu: przezroczysty (komputer stacjonarny), #000000 (przyklejony)
- Rozmiar tekstu: 16px
- Odstępy między literami: 1px
- Wysokość linii: 1,3 em
- Wyrównanie tekstu: wyśrodkowane
- Maksymalna szerokość: 96%
- Moduł wyrównania: środek
- Wypełnienie: 0,5em (góra i dół)
Ostateczny wynik
Pobierz DIVI teraz !!!
Wnioski
W tym samouczku pokazaliśmy, jak łatwo jest utworzyć lepki pasek nawigacji po wpisach dla szablonu postów na blogu w Divi.
Funkcjonalność przyklejania kreski/linii można również łatwo dostosować za pomocą wbudowanych opcji Divi. Na przykład możesz ograniczyć stan przyklejenia do sekcji lub ustawić go tylko na górze lub na dole okna przeglądarki.
Mam nadzieję, że będzie to przydatne w Twojej następnej witrynie blogowej. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
