Jak stylizować paginację w module filtrowalnego portfela Divi

Filtrowalny moduł portfolio Divi to świetny i łatwy sposób na wyświetlanie swojej pracy i projektów na swojej stronie internetowej. Możesz używać kategorii do tworzenia różnych filtrów dla swojego modułu portfolio i oferuje łatwy sposób na utrzymanie zaktualizowanego portfolio bez konieczności każdorazowego modyfikowania projektu witryny. Po prostu dodaj nowy projekt w panelu WordPress, a następnie zostanie on automatycznie wypełniony w module portfolio na Twojej stronie, o ile jest odpowiednio skategoryzowany.

W tym samouczku pokażemy Ci 3 różne sposoby stylizowania paginacji w module filtrowalnego portfolio Divi. Dostosowując ten projekt, możesz dopasować moduł portfolio do ogólnego projektu witryny i zwrócić uwagę na pracę, którą chcesz wyświetlić.

Zacznijmy!

zapowiedź

Oto podgląd tego, co zaprojektujemy

Pierwszy styl stronicowania

Drugi styl paginacji

Trzeci styl stronicowania

Czego potrzebujesz, aby zacząć

Zainstaluj i aktywuj Divi

Zanim zaczniemy, zainstaluj i aktywuj motyw Divi i upewnij się, że masz najnowszą wersję Divi na swojej stronie internetowej.

Dodaj projekty portfela

Aby portfolio wypełniło się projektami po dodaniu go do naszej strony, najpierw musimy dodać projekty w panelu WordPress. Wybierz Projekty na pasku bocznym WordPress, a następnie dodaj nowy projekt. Upewnij się, że projekt ma wyróżniony obraz i kategorię, aby można go było filtrować.

Teraz możesz zacząć!

Jak stylizować paginację w module filtrowalnego portfela Divi

Utwórz nową stronę z gotowym układem

Zacznijmy od użycia gotowego układu z biblioteki Divi. Do tego projektu użyjemy Painter Portfolio Page z pakietu layoutu Painter.

Dodaj nową stronę do swojej witryny, nadaj jej tytuł i wybierz opcję Użyj Divi Builder.

W tym przykładzie użyjemy gotowego układu z biblioteki Divi, więc wybierz Przeglądaj układy.

Wyszukaj i wybierz układ strony portfolio malarza.

Wybierz opcję Użyj tego układu, aby dodać układ do swojej strony.

Teraz jesteśmy gotowi do zbudowania naszego projektu.

Dodaj filtrowalny moduł portfela

Zastąpimy istniejącą zawartość portfolio na tej stronie modułem portfolio z możliwością filtrowania. Najpierw usuń istniejącą sekcję portfolio.

Następnie wstaw nową sekcję na stronie, pod sekcją „ostatnia praca”.

Następnie dodaj do sekcji wiersz z pojedynczą kolumną.

Dodaj filtrowalny moduł portfela do nowego wiersza.

Twoje portfolio z możliwością filtrowania powinno zapełniać się Twoimi projektami, o ile zostały one dodane do sekcji projektów pulpitu WordPress.

Filtrowalne ustawienia portfela

Teraz dostosujmy projekt portfolio z możliwością filtrowania. Otwórz ustawienia modułu, a następnie zmień liczbę postów na 6.

• Liczba postów: 6

W elementach wyłącz opcję Pokaż kategorie.

• Pokaż kategorie: Nie

Przejdź na kartę Projekt i otwórz ustawienia układu. Ustaw układ na siatkę.

• Układ: Siatka

Następnie otwórz ustawienia nakładki. Ustaw kolor ikony powiększenia, kolor nakładki najechania kursorem i selektor ikon po najechaniu kursorem w następujący sposób:

• Kolor ikony powiększenia: #fdd23a
• Kolor nakładki: rgba (61,61,61,0.28)
• Najeżdżający selektor ikon: Plus ikona

Otwórz ustawienia obrazu, a następnie dodaj cień pola obrazu.

Następnie ustaw kolor cienia.

• Kolor cienia: #f2f2f2

Następnie zmień ustawienia czcionki tytułu w następujący sposób:

• Czcionka tytułu: Merriweather
• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu#000000

Ustaw rozmiar tekstu tytułu i wysokość linii.

• Rozmiar tekstu tytułu: 25px
• Wysokość wiersza tytułu: 2em

Przejdź do sekcji Tekst kryteriów filtrowania i zmień ustawienia czcionki w następujący sposób:

• Czcionka kryteriów filtrowania: Montserrat
• Kryteria filtrowania Grubość czcionki: pogrubiona
• Kryteria filtrowania Kolor tekstu: #000000

Teraz, gdy większość naszych projektów modułów jest już gotowa, możemy przejść do dostosowywania stylów paginacji.

Pierwszy styl stronicowania

Dla pierwszego stylu paginacji ustawimy inny kolor czcionki dla aktywnej strony. Dodatkowo ustawimy rozmiar tekstu paginacji tak, aby zwiększał się po najechaniu myszą. Zacznijmy.

W filtrowalnych ustawieniach portfolio otwórz ustawienia tekstu stronicowania. Dostosuj czcionkę w następujący sposób:

• Czcionka paginacji: Montserrat
• Grubość czcionki paginacji: pogrubiona
• Wyrównanie tekstu stronicowania: do prawej
• Kolor tekstu stronicowania: #000000

Ustaw rozmiar tekstu. Następnie. użyj ustawień najechania, aby zwiększyć rozmiar tekstu po najechaniu.

• Rozmiar tekstu paginacji: 17px
• Rozmiar tekstu paginacji po najechaniu: 21px

Na koniec przejdź do zakładki Zaawansowane i dodaj następujący niestandardowy kod CSS do sekcji CSS aktywnej strony stronicowania. To włącza żółty kolor na aktywnej stronie.

color: #FDD23A !important;

Ostateczny projekt

A oto ostateczny wygląd naszego pierwszego projektu.

Drugi styl paginacji

Drugi styl paginacji, który zaprojektujemy, obejmuje kolor tła za paginacją, kilka efektów kolorystycznych najechania i inny kolor aktywnej strony.

W filtrowalnych ustawieniach portfolio otwórz ustawienia tekstu stronicowania. Dostosuj czcionkę w następujący sposób:

• Czcionka paginacji: Merriweather
• Grubość czcionki paginacji: pogrubiona
• Wyrównanie tekstu stronicowania: do środka
• Kolor tekstu paginacji: #9e9e9e
• Kolor tekstu stronicowania po najechaniu: #000000

Następnie ustaw rozmiar tekstu i wysokość linii.

• Rozmiar tekstu paginacji: 26px
• Wysokość linii stronicowania: 2em

Przejdź na kartę Zaawansowane i dodaj następujący niestandardowy kod CSS do sekcji CSS stronicowania portfela. To doda kolor tła i usunie obramowanie:

background:#f2f2f2;
border:none;

Na koniec dodaj następujący kod CSS do sekcji CSS aktywnej strony stronicowania, aby ustawić inny kolor tekstu dla aktywnej strony.

color: #000000 !important;

Ostateczny projekt

Oto ostateczny projekt naszego drugiego stylu paginacji.

Trzeci styl stronicowania

Dla naszego ostatecznego projektu paginacji dodamy żółte kółko za aktywną stroną. Ustawimy również inny kolor czcionki dla aktywnej strony i po najechaniu myszą.

W filtrowalnych ustawieniach portfolio otwórz ustawienia tekstu stronicowania. Następnie dostosuj czcionkę w następujący sposób:

• Czcionka paginacji: Merriweather
• Grubość czcionki paginacji: pogrubiona
• Wyrównanie tekstu stronicowania: do środka
• Kolor tekstu stronicowania: #000000
• Kolor tekstu stronicowania po najechaniu: #FDD23A
• Rozmiar tekstu paginacji: 26px

Przejdź na kartę Zaawansowane i dodaj następujący niestandardowy kod CSS do sekcji CSS paginacji portfela, aby usunąć obramowanie:

border:none;

Na koniec dodaj następujący kod CSS do sekcji CSS aktywnej strony stronicowania. Ten CSS ustawi inny kolor tekstu i okrągłe tło dla aktywnej strony.

padding: 10% 60% 10% 60%;
background-color: #FDD23A;
border-radius: 80%;
color: #ffffe7!important;

Ostateczny projekt

Oto ostateczny projekt naszego ostatniego układu.

Ostateczny wynik

Przyjrzyjmy się teraz wszystkim trzem ostatecznym projektom z naszymi różnymi stylami paginacji.

Pierwszy styl stronicowania

Drugi styl paginacji

Trzeci styl stronicowania

Końcowe przemyślenia

Filtrowalny moduł portfela można łatwo dostosować do projektu witryny. Możesz też szybko dodawać nowe projekty z pulpitu WordPress, aby aktualizować swoje portfolio. Ten moduł jest świetny dla projektantów, artystów, fotografów i innych twórców, którzy mogą pochwalić się swoją pracą pięknymi obrazami i łatwą nawigacją. Aby uzyskać więcej unikalnych pomysłów na projekty portfela, zapoznaj się z tym samouczkiem dotyczącym tworzenia dynamicznego szablonu projektu portfela. Czy korzystałeś na swojej stronie z filtrowalnego modułu portfolio? Daj nam znać w komentarzach!