Podświetlenie wtyczki Divi: Filtr Divi

Divi Filter to wtyczka innej firmy do Divi, która dodaje kilka unikalnych opcji filtrowania do Twojej witryny Divi. Pozwala użyć dowolnego modułu Divi jako filtra, a dowolny moduł można uwzględnić w przefiltrowanych wynikach. Istnieją dwie wersje wtyczki: darmowa i premium. Wersja premium ma najlepsze funkcje, ale dzięki bezpłatnej wersji możesz wiele zdziałać. W tym wyróżnieniu wtyczki Divi przyjrzymy się darmowej wersji Divi Filter i zobaczymy, co może zrobić, aby pomóc Ci zdecydować, czy jest to odpowiednia wtyczka dla Twoich potrzeb.

Instalowanie filtra Divi

Prześlij i aktywuj wtyczkę jak zwykle.

Iść do:

• Wtyczki w panelu WordPress
• Wybierz opcję Prześlij wtyczkę
• Kliknij Wybierz plik i przejdź do swojej wtyczki
• Wybierz Zainstaluj teraz

Po aktywacji wtyczki zobaczysz wyskakujące okienko z opcją otrzymywania alertów bezpieczeństwa, informacji o aktualizacjach funkcji i umożliwienia niewrażliwego śledzenia diagnostycznego. Po prostu wybierz Zezwól i Kontynuuj lub Pomiń, aby zamknąć wyskakujące okienko.

Korzystanie z filtra Divi

Filtr Divi nie dodaje modułów ani funkcji do elementów Divi. Filtry są dodawane ręcznie za pomocą klas CSS.

Na początku może to być mylące (zwłaszcza jeśli jesteś podobny do mnie i po prostu chcesz wskoczyć i zacząć odkrywać funkcje. Zwykle nurkuję głową, a później czytam instrukcje). Na szczęście ma dobrze napisaną dokumentację, która przeprowadzi Cię przez to. Kiedy raz przez to przejdziesz, to nabiera sensu i staje się bardziej intuicyjne.

Filtr Divi działa poprzez filtrowanie utworzonych kategorii. Kroki dodawania filtra są proste:

1. Utwórz wyzwalacz dla filtru, dodając klasę CSS. Wyzwalaczem mogą być przyciski, obrazy itp. Dodasz nazwę kategorii do klasy. Nazwy kategorii mogą być dowolne.
2. Utwórz nową sekcję i dodaj klasę CSS.
3. Dodaj moduły do ​​kolumn, które chcesz filtrować w nowej sekcji.
4. Dodaj klasy CSS do kolumn zawierających kategorie, które chcesz filtrować. Kategorie pasują do wyzwalaczy.

Myśli o procesie ręcznym

Chociaż jest to proces ręczny, nie jest trudny w użyciu. Możemy zastosować dowolny moduł Divi. To otwiera wiele możliwości. Możemy stosować moduły w dowolnej kombinacji. Wszystko w kolumnie zostanie uwzględnione w wynikach filtrowania.

Pozwala nam to filtrować mapy, przełączniki, formularze, moduły tekstowe, menu, tabele cen, komentarze, przyciski, kod, dźwięk itp. Ponieważ sam filtr składa się z modułów Divi, możemy je stylizować w dowolny sposób i użyj kodu, CSS itp.

Tworzenie filtra

W moim pierwszym przykładzie stworzyłem artykuły do ​​centrum pomocy, korzystając ze strony kontaktowej z układu Meal Kit. Przyciski służą do filtrowania, a przełączniki do informacji. Przełączniki mogą zawierać dowolny rodzaj treści, taki jak pisemne samouczki, filmy itp. Dodałem klasę przycisku do zakładki Zaawansowane. Dodałem też klasę z kategorią. W tym przypadku kategoria to Motywy.

Następnie dodałem klasę CSS do sekcji zawierającej przełączniki, które chcę filtrować.

Na koniec dodałem klasę kategorii do każdej kolumny. Każdy z przełączników pasuje do tematu kolumny, w której je umieściłem.

Teraz, kiedy klikam jeden z przycisków, ta kategoria jest wyświetlana, a wszystkie inne kategorie są usuwane. Mogę też stworzyć sposób na ich odzyskanie. Wersja pro ponownie je ułoży, dzięki czemu zobaczysz wiele kolumn.

Dodałem nowy przycisk, który wyłączy filtr i wyświetli wszystkie kategorie. W tym celu dodałem klasę przycisku do pola Klasy CSS, ale nie dodałem klasy kategorii. Bez określonej kategorii przycisk uruchomi wszystkie kategorie.

Aby zademonstrować przycisk Wszystkie, kliknąłem przycisk, aby filtrować kategorie. Kliknąłem filtr wtyczek, więc kategoria wtyczek jest teraz wyświetlana.

Wybranie Wszystkie pokazuje ponownie każdą kategorię. Jest to prosty sposób na usunięcie filtra i umożliwienie użytkownikowi zobaczenia wszystkich kolumn.

Kolejny przykład filtra Divi

W tym przykładzie chciałem utworzyć filtr z samym tekstem. Filtr wyświetli wybory na podstawie najpopularniejszych, najlepszych ofert i najnowszych opcji filtrowania. Do modułów tekstowych dodałem klasy CSS. Pierwsza zawiera tylko klasę przycisku, więc wyświetli wszystkie kolumny.

Na tym obrazku dodałem klasę przycisku i klasę kategorii do modułu tekstowego Najpopularniejsze. Dodam też klasy do pozostałych dwóch modułów tekstowych.

Następnie dodaję klasy CSS do każdej kolumny. Każda kolumna zawiera jedną notkę. Filtr wyświetli tylko jedną z trzech notek.

Na koniec dodaję klasę CSS df-area do sekcji zawierającej notki.

Kliknięcie dowolnego z modułów tekstowych powoduje wyświetlenie informacji o tej kategorii. Pozostałe dwie notki są teraz ukryte.

Kliknięcie Zobacz wszystko przywraca je z powrotem.

Postanowiłem poeksperymentować i dodać wiele kategorii do każdej kolumny. Czasami element musi być wymieniony w wielu kategoriach. Dzieje się tak z pewnością w przypadku, gdy filtr zawiera terminy takie jak najnowsze lub najlepsze oferty.

Filtr Divi działał dokładnie zgodnie z oczekiwaniami. Do każdej kolumny dodałem dwie kategorie i teraz każdy z filtrów wyświetla dwie kolumny zamiast jednej.

Przykład trzeciego filtra Divi

W moim trzecim przykładzie z filtrem Divi chciałem kontynuować tok myślenia z poprzedniego przykładu, ale chciałem uzyskać trochę bardziej złożony. Stworzę listę przepisów z modułami tekstowymi jako wyzwalaczami. Będzie to obejmować wiele kategorii i dodaję je do kolumn w różnych kombinacjach. W tym przykładzie użyto strony Przepisy z pakietu układu Meal Kit Divi. Do modułów tekstowych dodałem odpowiednie klasy CSS.

Sekcja zawiera klasę Area. Używam obrazów do przefiltrowanych elementów.

Do każdej kolumny dodam wiele kategorii. Oczywiście w prawdziwym życiu przedmioty będą musiały pasować do tych kategorii. Losowo wybieram obrazy do zrzutu ekranu.

Oto strona pokazująca wszystkie przepisy. Ten jest ustawiony na trzy kolumny.

Oto strona z wybranym filtrem. Filtruje jedną kolumnę.

Dodałem więcej kolumn, aby mieć więcej kombinacji kategorii.

Mój wynik wyświetla cztery kolumny z wybranym filtrem. Oczywiście musiałbym być ostrożny przy wyborze tych kategorii, ale myślę, że to działa, aby przekazać sedno sprawy. Nie ma znaczenia, ile masz kolumn, jakie moduły się w nich znajdują ani ile masz modułów. Filtr działa tak samo niezależnie.

Jak zdobyć filtr Divi

Filtr Divi jest dostępny za darmo w Divi Marketplace. Darmowa wersja filtruje tylko kolumny, ale z tą wersją możesz wiele zrobić.

Wersja premium dodaje filtr do wierszy, animacje filtrów, filtry rozwijane, nieograniczoną liczbę filtrów na wszystkich stronach i nie tylko. Te funkcje rozszerzą to, co możesz filtrować, a animacje nadadzą mu dopracowany wygląd.

Wersja pro zaczyna się od 19 €. Możesz uaktualnić do wersji pro w bezpłatnej wtyczce, dzięki czemu możesz wypróbować darmową wersję i uaktualnić do wersji pro w dowolnym momencie. W wersji pro dostępnych jest kilka układów, od których możesz zacząć. Możesz je również kupić osobno.

Kończąc myśli o filtrze Divi

Oto nasze spojrzenie na filtr Divi. Musisz tworzyć filtry ręcznie. Na szczęście nie jest to trudne, a to daje dużą kontrolę. Po przejściu przez to jest wystarczająco łatwe w użyciu bez zbytniego zastanowienia się nad tym. Podoba mi się sposób, w jaki to działa, ponieważ wszystko może być używane jako spust i wszystko można umieścić w kolumnach. Treść nie ma znaczenia. To odróżnia go od standardowego filtra treści.

Te przykłady obejmują tylko to, co można zrobić w bezpłatnej wersji. Wersja pro zapewnia większą kontrolę i więcej elementów, do których można zastosować filtry. Gorąco polecam wypróbowanie darmowej wersji, aby sprawdzić, czy może zrobić to, czego potrzebujesz, a następnie zaktualizować, jeśli lubisz korzystać z wtyczki.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś filtr Divi? Daj nam znać, co o tym myślisz w komentarzach poniżej.

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