Jak zaprojektować przewijalny obszar widżetów ostatnich postów w Divi

Moduł paska bocznego Divi jest niezwykle przydatnym narzędziem do integracji niestandardowych obszarów widżetów z Twoim projektem. Pozwala to wyświetlić dowolny widżet WordPress w układzie Divi. W tym samouczku pokażę, jak utworzyć przewijalny obszar widżetów ostatnich postów w Divi. Będę projektować sekcję „Z naszego bloga” z obszarem widżetów ostatnich postów po prawej stronie modułu bloga. Będzie to idealne rozwiązanie do zaprezentowania kilku najnowszych postów na blogu na stronie głównej lub stronie docelowej.

Zacznijmy!

zapowiedź

Oto mały rzut oka na projekt, który zbudujemy w tym samouczku.

Pobierz przewijalny układ ostatnich postów ZA DARMO

Aby położyć ręce na przewijanym projekcie układu ostatnich postów z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Subskrybuj nasz kanał YouTube

Tworzenie obszaru widżetów ostatnich postów

Ponieważ zamierzamy dodać widżet ostatnich postów do naszego układu Divi, pierwszą rzeczą, którą musimy zrobić, jest utworzenie nowego obszaru widżetów (z widżetem ostatnich postów), który będzie używany z modułem paska bocznego Divi.

Aby utworzyć obszar widżetów ostatnich postów, przejdź do Wygląd > Widgety. Następnie utwórz nowy obszar widżetów, nadając obszarowi nazwę (nazwij go „ostatnimi postami”, jeśli chcesz) i klikając przycisk Utwórz. Odśwież stronę, aby zobaczyć dostępny nowy obszar widżetów.

Otwórz przełącznik widżetu Ostatnie posty, który jest dostarczany z WordPress po lewej stronie. Następnie wybierz z listy obszar widżetów „ostatnie wpisy” i kliknij Dodaj widżet, aby dodać widżet do obszaru widżetów.

Następnie otwórz obszar widżetu ostatnich postów i zaktualizuj widżet Ostatnie posty o tytuł. Ustaw liczbę wyświetlanych postów na dużą liczbę, abyśmy mieli wystarczająco dużo postów do przewijania, gdy nasz projekt będzie gotowy.

Teraz, gdy mamy już obszar widżetów, możemy rozpocząć projektowanie Divi.

Tworzenie sekcji „Z naszego bloga” z przewijalnym obszarem widżetów ostatnich postów

Projektowanie sekcji nagłówka

Utwórz nową zwykłą sekcję z jednym wierszem kolumny.

Przed dodaniem modułu zaktualizuj sekcję o następujące elementy:

Kolor tła: #333333
Niestandardowe wypełnienie: 0px dół

Następnie usuń również dolną wyściółkę wiersza, aktualizując ustawienia wiersza:

Niestandardowe wypełnienie: 0px dół

Następnie dodaj moduł tekstowy do wiersza.

Następnie zaktualizuj następujące ustawienia tekstu:

Dla treści dodaj następujący nagłówek h2 html:

<h2>From our Blog</h2>

Następnie zaktualizuj następujące ustawienia tekstu:

Czcionka nagłówka 2: Roboto
Styl czcionki nagłówka 2: TT
Kolor tekstu nagłówka 2: #ffffff
Rozmiar tekstu nagłówka 2: 40px
Nagłówek 2 Odstępy między literami: 2px

To dba o nagłówek naszego układu. Teraz nadszedł czas, aby stworzyć resztę układu za pomocą sekcji specjalistycznej.

Tworzenie Sekcji Specjalistycznej

Korzystanie z oddzielnej sekcji specjalistycznej dla reszty układu pozwoli nam mieć dedykowany pasek boczny po prawej stronie dla naszego przewijalnego obszaru widżetów. Ponadto pozwoli nam to dopasować rozmiar i styl naszych wierszy po lewej stronie sekcji oddzielnie od obszaru paska bocznego.

Śmiało i dodaj sekcję specjalistyczną z układem kolumn po prawej stronie w następujący sposób:

Następnie dodaj jeden wiersz kolumny do sekcji.

Przed dodaniem modułu zaktualizujmy nasze ustawienia sekcji i wierszy.

Dostosowywanie ustawień sekcji

Otwórz ustawienia sekcji specjalności i zaktualizuj następujące elementy:

Kolor tła: #333333
Szerokość rynny: 2
Niestandardowe wypełnienie: góra 0 pikseli
Kolumna 2 Niestandardowe dopełnienie: 0px na górze, 0px na dole

Dostosuj ustawienia wiersza

Następnie otwórz ustawienia wiersza i zaktualizuj następujące elementy:

Wysokość: 640px
Szerokość górnej krawędzi: 8px
Kolor górnej granicy: #444444
Szerokość dolnego obramowania: 8px
Kolor dolnej krawędzi: #444444

Niestandardowa wysokość 640 pikseli jest podana w celu dopasowania do wysokości przewijanego obszaru widżetów ostatnich postów, który dodamy do paska bocznego naszej sekcji specjalistycznej. zapewni to, że oba będą miały tę samą wysokość, co zapewni bardziej estetyczny wygląd.

Dodawanie modułu bloga

W jednokolumnowym wierszu po lewej stronie dodaj moduł bloga.

Następnie zaktualizuj ustawienia modułu bloga w następujący sposób:

Liczba postów: 2

Układ: Siatka
Czcionka tytułu: Roboto
Meta Czcionka: Roboto
Waga czcionki Meta: lekka
Meta styl czcionki: TT
Czcionka stronicowania: Roboto
Styl czcionki paginacji: TT
Kolor tekstu paginacji: #ffffff
Rozmiar tekstu paginacji: 18px
Odstępy między literami paginacji: 2px

Dodawanie przewijanego obszaru widżetów ostatnich postów

Wreszcie nadszedł czas, aby dodać przewijalne najnowsze posty do naszego układu. Aby to zrobić, dodaj moduł paska bocznego do obszaru paska bocznego sekcji specjalistycznej po prawej stronie.

Następnie wybierz utworzony wcześniej obszar widżetów „ostatnie wpisy”, wybierając go z menu rozwijanego Obszar widżetów pod zakładką treści.

Następnie zaktualizuj projekt tekstu tytułu i treści w następujący sposób:

Czcionka tytułu: Roboto
Styl czcionki tytułu: TT
Kolor tekstu tytułu: #ffffff
Odstępy między literami tytułu: 2px
Czcionka ciała: Roboto
Styl czcionki ciała: podkreślenie

Następnie ukryj separator granic w następujący sposób:

Pokaż separator granicy: NIE

Następnie nadaj modułowi paska bocznego maksymalną wysokość i niestandardowe wypełnienie w następujący sposób:

Maksymalna wysokość: 640px
Niestandardowe dopełnienie: 30 pikseli na górze, 30 pikseli na dole, 5% w prawo

Maksymalna wysokość 640 pikseli odpowiada niestandardowej wysokości 640 pikseli podanej w sąsiednim wierszu.

Teraz, gdy nadaliśmy modułowi paska bocznego maksymalną wysokość 640px, musimy ustawić przepełnienie pionowe, aby przewijać, aby uzyskać naszą funkcję przewijania. Aby to zrobić, przejdź do zakładki Zaawansowane i zaktualizuj następujące elementy:

Przepełnienie pionowe: Przewiń

Ostateczny wynik

Otóż ​​to! Sprawdźmy teraz efekt końcowy.

Opcja bonusowa: dodanie niestandardowego CSS do paska przewijania projektu (nie obsługiwane przez wszystkie przeglądarki)

Stylizacja paska przewijania w WordPressie jest trochę uciążliwa, jeśli chcesz obsługiwać różne przeglądarki. W większości przypadków będziesz chciał pozostawić to domyślnym stylom przeglądarki i nazwać to dniem. Ale jeśli chcesz dostosować pasek przewijania do wyglądu swojej strony, możesz dodać niestandardowy kod CSS. Niestety, obsługa przeglądarek jest ograniczona do przeglądarek, które obsługują właściwości CSS z prefiksem ::webkit (w zasadzie tylko Safari i Chrome). Oto jak to zrobić.

Otwórz ustawienia sekcji specjalności i dodaj następującą klasę CSS:

Klasa CSS: cust-scroll

Następnie otwórz modalne ustawienia strony i dodaj następujący niestandardowy kod CSS do strony.

/* width */
.cust-scroll ::-webkit-scrollbar {
  width: 8px;
}

/* Track */
.cust-scroll ::-webkit-scrollbar-track {
  background: #444444; 
}
 
/* Handle */
.cust-scroll ::-webkit-scrollbar-thumb {
  background: #888888; 
}

/* Handle on hover */
.cust-scroll ::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}

Zmienia to szerokość paska przewijania na 8px i dostosowuje kolory ścieżki i uchwytu. Zachęcamy do samodzielnego eksperymentowania z większą liczbą wzorów i kolorów.

A jeśli się zastanawiasz, rezerwą dla innych przeglądarek będzie domyślny styl przeglądarki dla pasków przewijania.

Końcowe przemyślenia

Dodanie pionowego przewijania do treści przydaje się, gdy chcesz dać użytkownikom możliwość przeglądania większej ilości treści w ograniczonej przestrzeni. Przewijalny obszar widżetu ostatnich postów jest doskonałym przykładem tego, jak przewijanie w pionie może działać naprawdę dobrze. Oczywiście możesz zastąpić moduł paska bocznego używany w tym samouczku modułem tekstowym i dodać przewijanie w pionie do dowolnej treści. To samo dostosowanie będzie dotyczyć każdego modułu.

Jeśli chodzi o stylizację paska przewijania, jestem pewien, że istnieją inne wtyczki lub rozwiązania Javascript, które dałyby bardziej rozwiązanie dla różnych przeglądarek. Jeśli znasz jakieś dobre, podziel się nimi z nami.

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

Pozdrawiam!