Jak stylizować filtr kategorii w module Divi's Filterable Portfolio

Filtrowalny moduł portfela Divi zawiera wiele elementów, a każdy z nich może być indywidualnie stylizowany. Filtr jest jednym z najbardziej przydatnych elementów, ale czasami jest pomijany. W tym poście zobaczymy, jak stylizować filtr kategorii w module filtrowalnego portfela Divi. Zobaczymy, co można zrobić ze standardowymi ustawieniami, i zagłębimy się w CSS, aby zobaczyć, jak jeszcze bardziej go ostylować.

Zacznijmy!

Zapowiedź

Najpierw zobaczmy, co zbudujemy w tym samouczku.

Przykład pierwszy filtru kategorii dla komputerów stacjonarnych

Filtr kategorii telefonów Przykład pierwszy

Przykład drugi filtru kategorii dla komputerów stacjonarnych

Filtr kategorii telefonu Przykład drugi

Przykład trzeci filtru kategorii dla komputerów stacjonarnych

Filtr kategorii telefonów Przykład trzeci

Dzielenie projektów na kategorie

Aby jak najlepiej wykorzystać filtr kategorii, musisz podzielić swoje projekty na kategorie, które będą najbardziej sensowne dla czytelników. Aby utworzyć kategorie, przejdź do Projekty > Kategorie w panelu WordPress.

Tutaj zobaczysz pola do dodania nazwy, informacji o pracy, kategorii nadrzędnej i opisu. Zobaczysz także listę kategorii na liście, na której możesz je edytować.

Po utworzeniu kategorii wybierz te dla każdego projektu, które są najbardziej sensowne dla czytelnika. Aby utworzyć swoje projekty, przejdź do Projekty i kliknij Dodaj nowy w menu lub na górze strony.

Na moje przykłady stworzyłem projekty dla firmy remontowej. Firma skupiłaby się na remontach domów, ale obejmowałaby również podobne prace dla korporacji i mogłaby budować od podstaw. W przypadku domów używam kategorii Wnętrze i Zewnętrzne. Do wszystkich innych prac dodałem Korporację i Budownictwo.

Filtrowalne ustawienia modułu portfela

W naszym przykładzie zamienię sekcję portfolio na stronie Portfolio z bezpłatnego pakietu Renovation Layout Pack na moduł portfolio z możliwością filtrowania. Najpierw zobaczmy, jak stylizować moduł. Następnie nadamy styl filtrowi na trzy różne sposoby. Oto strona przed wprowadzeniem zmian.

Oto strona po dodaniu modułu Portfolio filtrowalnego w miejsce obrazów.

Najpierw określimy styl modułu. Użyjemy tych samych ustawień we wszystkich trzech przykładach.

Zawartość

Na karcie Treść ustaw Liczbę postów na 8 i wybierz Kategorie z listy Uwzględnionych kategorii.

• Liczba postów: 8
• Zawarte kategorie: twój wybór

Elementy

Przewiń w dół do opcji Elementy i wyłącz opcję Pokaż kategorie . Wykorzystamy tylko tytuły i zezwolimy filtrowi na wyświetlanie kategorii.

• Pokaż kategorie: Nie

Układ

Następnie przejdź do karty Projekt i wybierz Siatka w obszarze Układ . Wybrałem go już dla poprzednich obrazów, ale domyślnie moduł wyświetla pełną szerokość.

• Układ: Siatka

Tekst

Następnie przewiń do Tekst i ustaw Wyrównanie tekstu na Środek. To centruje filtr i paginację z modułem, a tytuły z obrazami projektu.

• Wyrównanie tekstu: do środka

Tekst tytułu

Następnie przewiń do Tekst tytułu . Zmień czcionkę na Kanit i ustaw wagę na pół pogrubioną. Ustaw kolor na czarny.

• Czcionka: Kanit
• Waga: Semi Bold
• Kolor: #000000

Zmień rozmiar czcionki na 20 pikseli dla komputerów stacjonarnych, 18 pikseli dla tabletów i 16 pikseli dla telefonów. Ustaw odstęp między wierszami na 1px i wysokość linii na 1,3em.

• Rozmiar: pulpit 20px, tablet 18px, telefon 16px
• Odstępy między literami: 1px
• Wysokość linii: 1,3 em

Tekst paginacji

Następnie przewiń w dół do tekstu paginacji i zmień czcionkę na Kanit. Zmień kolor na czarny.

• Czcionka: Kanit
• Kolor: #000000

Zmień odstępy między wierszami na 1px. Zapisz swoją pracę. Możemy teraz stylizować filtr kategorii dla naszych przykładów.

• Odstępy między literami: 1px

Przykłady filtrów kategorii

Teraz możemy przejść do naszych przykładów filtrów kategorii. Używam wskazówek projektowych z pakietu układu.

Filtr kategorii Przykład pierwszy

Nasz pierwszy przykład jest najprostszy z trzech. Używa podstawowych ustawień i nie robi nic wymyślnego. Działa dobrze z projektem układu.

Tekst kryteriów filtrowania

Na karcie Projekt przewiń w dół do Tekst kryteriów . Zmień czcionkę na Kanit. Zmień styl na TT i kolor na czarny.

• Czcionka: Kanit
• Styl: TT
• Kolor: #000000

Ustaw odstęp między wierszami na 1px i ustaw wysokość linii na 1.3em. To tyle w przypadku pierwszego. Teraz zapisz ustawienia i zamknij moduł.

• Odstępy między literami: 1px
• Wysokość linii: 1,3 em

Filtr kategorii Przykład drugi

W naszym drugim przykładzie użyjemy prostego kodu CSS dla modułu i strony, aby utworzyć zaokrąglone rogi i cień pudełka. Ten wygląda zupełnie inaczej.

Tekst kryteriów filtrowania

Przejdź do karty Projekt i przewiń w dół do Tekst kryteriów filtrowania . Zmień czcionkę na Kanit. Ustaw kolor na czarny, rozmiar na 16 pikseli, a wysokość linii na 1,5 em. Rozmiar czcionki działa dobrze na wszystkich rozmiarach ekranu, więc nie musimy dostosowywać go do tabletów lub telefonów.

• Czcionka: Kanit
• Kolor: #000000
• Rozmiar: 16px
• Wysokość linii: 1,5 em

Moduł CSS

Następnie przejdź do zakładki Zaawansowane . Przewiń w dół do Active Portfolio Filter i dodaj CSS dla koloru tła i zamknij moduł. Zmienia to kolor tła aktywnego filtra. Każdy filtr kliknięty przez użytkownika zmienia kolor tła, a poprzedni filtr powraca do zwykłego koloru.

• Aktywny filtr CSS portfela:

  background-color:#ffd000;

Ustawienia strony CSS

Następnie otwórz Ustawienia strony w menu strony. W module Ustawienia strony wybierz kartę Zaawansowane i wklej niestandardowy CSS w polu. Ten CSS usuwa obramowanie z elementów filtra, tworzy promień obramowania 25 pikseli i dodaje 5 pikseli marginesu między elementami. Dodaje również mały cień pudełka na dole przedmiotów i zmienia kolor cienia. Zamknij moduł i zapisz ustawienia.

• Niestandardowe CSS:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

Filtr kategorii Przykład trzeci

Nasz trzeci przykład jest zgodny z podobnymi pomysłami projektowymi CSS z poprzedniego przykładu. Nie zawiera zaokrąglonych rogów i zmienia kolor czcionki i tła po najechaniu myszą. Używa również CSS zarówno dla modułu, jak i strony.

Tekst kryteriów filtrowania

Przejdź do karty Projekt i przewiń w dół do Tekst kryteriów filtrowania . Wybierz Kanit jako Czcionka , ustaw Styl na TT i Kolor na biały.

• Czcionka: Kanit
• Styl: TT
• Kolor: #ffffff

Następnie wybierz opcję Hover dla koloru tekstu i zmień kolor na czarny. To zajmuje się czcionkami po najechaniu kursorem. Tłem zajmiemy się za pomocą CSS. Zmień odstępy między literami na 1px i wysokość linii na 1.3em.

• Kolor najechania: #000000
• Odstępy między literami: 1px
• Wysokość linii: 1,3 em

Moduł CSS

Następnie przejdź do zakładki Zaawansowane i przewiń w dół do Active Portfolio Filter . Dodaj następujący kod CSS , aby zmienić tło aktywnego filtra. Zamknij moduł.

• Aktywny filtr CSS portfela:

  background-color:#ffd000

Ustawienia strony CSS

Na koniec otwórz Ustawienia strony . przejdź do zakładki Zaawansowane i wprowadź następujący niestandardowy CSS . Zamknij moduł i zapisz ustawienia. Zmienia to tło na czarne, dodaje 15px dopełnienia na górze i na dole oraz 30px dopełnienia po lewej i prawej stronie. Spowoduje to zmianę rozmiaru elementów filtru, aby ściśle pasowały do ​​przycisków w układzie i pomaga stworzyć zmianę koloru dla efektu najechania. Po najechaniu kursorem tło zmieni się na białe.

• Niestandardowe CSS:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

Wyniki

Przykład pierwszy filtru kategorii dla komputerów stacjonarnych

Filtr kategorii telefonów Przykład pierwszy

Przykład drugi filtru kategorii dla komputerów stacjonarnych

Filtr kategorii telefonu Przykład drugi

Przykład trzeci filtru kategorii dla komputerów stacjonarnych

Filtr kategorii telefonów Przykład trzeci

Końcowe myśli

Oto nasze spojrzenie na to, jak stylizować filtr kategorii w module filtrowalnego portfela Divi. Filtr kategorii zawiera te same narzędzia do stylizacji, co inne elementy, dzięki czemu można go łatwo dostosować do pracy z dowolnym układem Divi. Dodając CSS zarówno do modułu, jak i strony, możemy stylizować filtr kategorii na wiele unikalnych sposobów, aby wyróżnić się z tłumu.

Chcemy usłyszeć od Ciebie. Czy stylizowałeś filtr kategorii w module filtrowalnego portfela Divi? Daj nam znać w komentarzach.