Podświetlenie wtyczki Divi: Divi FilterGrid

Divi FilterGrid to wtyczka innej firmy, która dodaje nowy moduł do filtrowania do Divi Builder. Może wyświetlać posty z dowolnego niestandardowego typu postu i tworzyć niestandardowe filtry, aby wyświetlać je zgodnie z wybraną przez Ciebie taksonomią. Wyświetlaj posty na blogu, projekty, produkty, twórz galerie i wiele więcej.

W tym wyróżnieniu wtyczki przyjrzymy się Divi FilterGrid, zobaczymy, co może zrobić i zobaczymy, jak łatwy jest w użyciu. Wtyczkę można kupić na stronie dewelopera.

Divi FilterGrid Module

Moduł Divi FilterGrid zostanie dodany do Divi Builder. Ikona jest w kolorze i wyróżnia się na tle innych.

Karta zawartości filtra DiviG

Karta Treść dodaje wiele funkcji. Obejmują one elementy postów, opcje zapytań, opcje filtrów, opcje paginacji i tło umożliwiające dostosowanie wszystkich kolorów tła. Zawiera również standardowe opcje linku i etykiety administratora.

Elementy postu

Opcje Post Elements pozwalają pokazać lub ukryć wyróżniony obraz, a następnie określić akcję miniatury. Możesz utworzyć link do posta, pokazać obraz w lightbox, w galerii lightbox, pokazać post w wyskakującym okienku lub otworzyć niestandardową galerię lightbox. W tym przykładzie pokazuję post w wyskakującym okienku.

Ten otwiera obraz w galerii lightbox. Czytelnik może wybrać strzałki, aby zobaczyć polecane obrazy wszystkich postów. Kliknięcie tytułu posta nadal otwiera post na tej samej karcie.

Możesz także zmienić kolor nakładki, ikonę i kolor ikony. Dostosowałem każdy z nich na powyższym obrazku. Możesz także wyświetlić tytuł, dodać link do tytułu, dodać fragment, ograniczyć liczbę znaków w fragmencie, wyświetlić przycisk Czytaj więcej, dodać niestandardowe pola i nie tylko. Dodałem fragment i wyłączyłem meta postu.

Opcje zapytań

Opcje zapytania pozwalają wybrać typ zapytania z podstawowego, zaawansowanego i niestandardowego. Wybierz kategorie, numer postu, numer offsetu i uporządkuj według opcji. W tym przykładzie wybrałem jedną kategorię.

Opcje zaawansowane zapewniają kilka nowych funkcji. Wybierz określone typy postów, taksonomie, terminy oraz wyklucz terminy i taksonomie. Możesz także wyświetlać prywatne posty i przyklejone posty. W powyższym przykładzie ustawiam taksonomię. Pozwala mi wybrać określone kategorie lub tagi, których chcę użyć, a następnie określić ich związek z wyszukiwanym terminem. Terminy potomne działają w ten sam sposób. Pozwala to uzyskać bardziej szczegółowe informacje, a nie tylko wyświetlać posty na podstawie kategorii lub tagów. Możesz także ustawić numer postu i opcje zamówienia dla taksonomii.

Typ zapytania niestandardowego umożliwia korzystanie z zawartości niestandardowej. Zawiera łącze do dokumentacji, w której można dowiedzieć się, jak to skonfigurować. Zapytania niestandardowe są wykonywane za pomocą kodu w pliku functions.php. Dokumentacja zawiera kilka przykładów, które pomogą Ci przez to przejść.

Opcje filtrów

Opcje filtrów umożliwiają filtrowanie siatki według wyszukiwanych terminów. Wybierz domyślny filtr, a zobaczysz moduł, w którym możesz wybrać kategorie i tagi dla postów i projektów. Możesz także ustawić kolejność i filtrować według identyfikatora, nazwy lub niestandardowego zamówienia. W przypadku zamówienia niestandardowego zobaczysz pole, w którym możesz wpisać wartości oddzielone przecinkami.

Opcje paginacji

Opcje paginacji pozwalają wybrać typ paginacji. Wybierz między stronami, przycisk wczytaj więcej lub wczytaj więcej podczas przewijania. W przypadku opcji stronicowania możesz wybrać strzałki, tekst i liczbę stron wyświetlanych w linkach. Dodałem tekst i zmieniłem strzałki w tym przykładzie.

Tło

Ustawienia tła pozwalają dostosować tło siatki, filtry, aktywny filtr, paginację i aktywną paginację. Zawiera również standardowe opcje tła, których można się spodziewać w module Divi. W powyższym przykładzie dostosowałem kolory tła dla filtra, siatki i paginacji.

Karta projektu siatki filtra Divi

Karta Projekt zapewnia dostosowania opcji układu, tekstu tytułu posta, tekstu metadanych posta, tekstu treści postu, tekstu filtrów, tekstu paginacji, przycisku Czytaj więcej, przycisku Załaduj więcej i wszystkich standardowych opcji modułu Divi.

Opcje układu

Opcje układu pozwalają wybrać układ, karnację, ustawić szerokość elementów, rozmiar odstępu między kolumnami i wierszami oraz rozmiar czcionki siatki. Zmniejszyłem szerokość elementów, usunąłem rynnę i wybrałem Midnight jako skórkę. Zmniejszyłem też rozmiar czcionki.

To są lewe filtry pionowe. Umieszcza filtry w pionowym stosie po lewej stronie. Zwiększyłem szerokość elementów, aby obrazy były większe.

To są elementy w nakładce. W tej opcji posty są krótsze.

Powiększ obraz pokazuje każdy obraz z nakładką i tytułem na środku. Obraz powiększa się po najechaniu.

Biblioteka pokazuje karty z ramką i umieszcza tytuł nad obrazem.

To jest układ listy z domyślną skórką.

To jest pełna szerokość. Umieszcza tytuł, meta i fragment na dole obrazu.

Karta Zaawansowane modułu Divi FilterGrid

Karta Zaawansowane dodaje 15 niestandardowych pól CSS dla prawie każdego elementu w module. Użytkownicy CSS nie będą mieli problemów z kierowaniem określonych elementów do dostosowania.

Stylizacja modułu Divi FilterGrid

Opcje układu mogą tworzyć ciekawe projekty. W tym przykładzie zmniejszyłem szerokość, aby wyświetlały się w jednym rzędzie. Usunąłem też meta i fragment.

W tym przypadku zwiększyłem szerokość przedmiotów. Tworzy to ładny projekt galerii mozaiki.

W tym przypadku dodałem tytuł, całą meta, fragment i przycisk Czytaj więcej. Zmieniłem kolor tytułu, wersaliki, zwiększyłem rozmiar, wyśrodkowałem i zwiększyłem odstępy między znakami. Zmniejszyłem również rozmiar przycisku Czytaj więcej i stylizowałem tekst na biały.

Istnieje wiele opcji stylizacji przycisku Czytaj więcej. W tym przypadku wróciłem do domyślnego rozmiaru, ale sprawiłem, że tekst jest lekki. Zaokrągliłem krawędzie i nadałem mu gradient tła.

Nie wyświetla się w trybie edytora, ale możesz również dodać obrazek do przycisku. Możesz dodać sam obraz, z pełną nakładką lub z nakładką gradientową. W tym przykładzie dodałem obraz za moim zielonym gradientem.

Tekst meta danych postu dopasowuje wszystkie meta postu razem. Zmieniłem kolor i odstępy między wierszami.

Tekst filtrów umożliwia stylizowanie czcionki filtru. Zwiększyłem rozmiar czcionki, zmieniłem kolor i dodałem efekt cienia. Domyślny styl filtra ma inny kolor dla wybranego filtra. Możesz to zmienić osobno w opcji tła na karcie Treść.

W tym przykładzie dostosowuję tekst stronicowania. Zmieniłem kolor, zwiększyłem rozmiar, dodałem odstępy między znakami i dodałem cień. Dostosowałem również siłę rozmycia.

Przycisk Wczytaj więcej zawiera również podstawowe opcje stylizacji. Używam tekstu domyślnego (można go zmienić w zakładce treści). Ustawiłem też tekst na biały (domyślnie jest zielony).

Zwiększyłem rozmiar czcionki, dodałem odstępy między znakami, dostosowałem obramowanie, dodałem gradient i wyłączyłem wyświetlanie tylko ikony po najechaniu myszą.

Divi FilterGrid i niestandardowe typy postów

Uważam, że jest to łatwe w użyciu z niestandardowymi typami postów. W opcjach zapytania kliknij Wybierz typy postów, a następnie wybierz typ posta z modalu.

Nadal pokazuje oryginalny filtr, ale możesz utworzyć własny lub go wyłączyć. W opcjach filtrowania kliknij filtruj taksonomie i wybierz swoje taksonomie z listy. Kliknij Ustaw wartości .

Mam teraz niestandardowy filtr dla moich produktów WooCommerce.

Mam teraz moduł produktu WooCommerce, który mogę dostosować do własnych upodobań.

Przykład bloga Divi FilterGrid

W tym przykładzie zastąpiłem moduł bloga ze strony blogu układu Dog Walker. Stylizowałem go tak, aby pasował do kolorów, stylów czcionek i zaokrąglonych rogów postów. Następnie dodałem produkty WooCommerce, aby pojawiły się na liście blogów. To świetny sposób na dodawanie różnego rodzaju treści do swojego strumienia bloga.

Wynik wygląda niesamowicie. Tworzy blog z możliwością filtrowania lub możesz wyłączyć filtr i po prostu pokazać zawartość.

Dokumentacja i cena modułu Divi FilterGrid

Dokumentacja dostępna jest na stronie dewelopera. Kliknij przyciski, aby wyświetlić szczegółowe informacje o zaawansowanych funkcjach. Możesz odwiedzić stronę FAQ lub przesłać zgłoszenie do pomocy technicznej stąd. Możesz również kliknąć znak zapytania dla każdej funkcji w module, aby zobaczyć wyjaśnienie, jak z niej korzystać.

Istnieją cztery opcje zakupu Divi FilterGrid:

• Pojedyncza witryna – 19
• 5 stron – 39 $
• Nieograniczone witryny – 59 $
• Dożywotnia nieograniczona liczba witryn – 129 $

Wtyczkę można kupić na stronie dewelopera.

Końcowe myśli

Divi FilterGrid to ciekawa wtyczka. To doskonały moduł do wyświetlania różnego rodzaju treści. Możesz wyświetlać praktycznie każdy typ postu i wyświetlać jednocześnie wiele typów postów. Opcje filtrowania mogą być tak złożone, jak chcesz.

Uwielbiam mieć opcje dostosowywania kolorów tła. Posiadanie opcji kolorów na karcie Zawartość oznacza, że ​​opcje kolorów znajdują się w dwóch różnych lokalizacjach. Myślę, że byłoby bardziej intuicyjne, gdyby te dostosowania kolorów zostały przeniesione do karty Projekt. Fajnie jest jednak móc samodzielnie dostosowywać kolory.

Uważam, że jest to bardzo intuicyjne. Polecam zbadanie, aby zobaczyć wszystkie opcje. Jeśli chcesz dodać potężną filtrowaną siatkę do wyświetlania typów postów, Divi FilterGrid to łatwa wtyczka do polecenia.

Chcemy usłyszeć od Ciebie. Czy próbowałeś Divi FilterGrid? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem Thepanyo / shutterstock.com