Wyróżnienie wtyczki Divi: filtrowalna siatka portfela DTS Pro

Filtrowalny moduł portfolio Divi pozwala zbudować portfolio w trybie pełnoekranowym lub w siatce. A co, jeśli chcesz mieć inny wygląd, który dodaje przycisk i opcje dla 3 lub 4 kolumn w siatce? Właśnie to robi wtyczka innej firmy o nazwie DTS Filterable Portfolio Grid Pro.

DTS Filterable Portfolio Grid Pro dodaje nowy moduł do Divi Builder. Wtyczka nadaje Twojemu portfolio nowy wygląd i ma opcje dla 3 lub 4 kolumn w siatce. Wyświetla typy postów projektu. Zawiera niestandardowy tekst przycisku i niestandardowe opcje zaawansowane.

Wtyczka jest dostępna na stronie dewelopera.

W tym wyróżnieniu wtyczki przyjrzymy się DTS Filterable Portfolio Grid Pro i zobaczymy, co może zrobić. Obrazy pochodzą z Unsplash.com.

Instalowanie DTS Filterable Portfolio Grid Pro

Prześlij i aktywuj wtyczkę jak zwykle. Po aktywacji wtyczki przejdź do Ustawień na pulpicie nawigacyjnym i wybierz Aktywacja DTS Filterable Portfolio Grid Pro . Wprowadź swój klucz API oraz e-mail i zapisz zmiany.

Ustawienia modułu

Wtyczka dodaje nowy moduł do Divi Builder. Jest niebieski, więc trudno go przegapić.

Ustawienia treści obejmują liczbę postów, wybór kategorii, pokaż tytuł, kategorie, paginację, tło i niestandardowy tekst przycisku.

Karta Projekt zawiera ustawienia układu, kolorów, czcionek, ikon, nakładek, obramowań i animacji.

Przykłady – Siatka

W ustawieniach domyślnych używana jest siatka z trzema kolumnami. Możesz zobaczyć animację najechania na środkowym kafelku. Kafelki zawierają obrazek z sekcją tytułową i przycisk umieszczony w środku. Na dole pokazuje kategorię. Kafelki wyświetlają cień, który oddala się po najechaniu. Jak łatwo się domyślić, każdy z tych elementów jest konfigurowalny.

W tym przykładzie zmieniłem siatkę na 4 kolumny i dostosowałem kolor tła przycisku, kolor tła przycisku i kolor czcionki przycisku. Czterokolumnowy układ zmienia rozmiary obrazu w celu dopasowania.

W tym przypadku zmniejszyłem promień przycisku, zwiększyłem rozmiar czcionki przycisków, zmieniłem ikonę po najechaniu kursorem i jej kolor oraz zmieniłem kolor nakładki po najechaniu kursorem. Wszystkie te regulacje są proste i intuicyjne.

W tym przykładzie ustawiłem promień obramowania na 0, aby utworzyć kwadratowe narożniki przycisku. Zwiększyłem rozmiary czcionek dla tekstu przycisku, tekstu tytułu i zmieniłem style czcionek. Zrobiłem również nakładkę najechania na czarną z wystarczającą kryciem, aby obraz był widoczny, i zmieniłem ikonę najechania.

Ten zmniejsza wysokość linii tytułu. Przyciemniłem też kolor czcionki i zwiększyłem odstępy między literami. Przywróciłem domyślną czcionkę kategorii i ustawiłem ją na kursywę. Promień przycisku jest ustawiony na 100 i dodałem własny tekst przycisku. Zmieniłem też kolor nakładki i wybrałem inną ikonę oraz zmieniłem jej kolor na biały. W tym przykładzie użyto również obramowania, które jest ustawione na kolor czerwony i szerokość 2 pikseli. Opcje obramowania obejmują kolor, szerokość i styl.

Moduł ma opcję koloru tekstu dla jasnego i ciemnego, jeśli używasz ciemnego tła za tytułem, ale obecnie nie ma możliwości zmiany tła za tytułem. Podejrzewam, że to nadchodząca funkcja.

Za modułem obowiązują ustawienia tła (standardowy kolor, gradient, obraz i wideo). Karty dotykają krawędzi koloru tła i nie ma żadnych korekt dopełnienia w module.

To mogłoby sprawić, że tło będzie wyglądało niezręcznie, ale istnieje kilka łatwych rozwiązań. Możesz dodać dopełnienie do sekcji lub wiersza, tak jak zrobiłem to we wszystkich obrazach w tym artykule, lub możesz użyć CSS, aby dodać dopełnienie do modułu.

Oto CSS, który dodałem do karty Zaawansowane w sekcji Element główny modułu. Po prostu mówi Divi, aby dodał dopełnienie do wszystkich 4 lokalizacji. Wartości obowiązują w tej samej kolejności, co pola wypełniania wierszy i modułów: góra, prawo, dół, lewo. Oznacza to, że nadałem górnemu dopełnieniu wartość 40, prawemu dopełnieniu wartość 30, dolnemu dopełnieniu wartość 20, a lewemu dopełnieniu 30.

Rezultat jest dokładnie taki, jak chciałem – różne poziomy wyściółki ze wszystkich czterech stron. Dzięki temu funkcja tła jest bardziej użyteczna i łatwa do wdrożenia.

Przykłady – Filtr

Ponieważ jest to portfel, który można filtrować, ma się rozumieć, że filtr można również dostosować. Zgodnie z oczekiwaniami istnieją korekty stylu, rozmiaru, wyrównania, koloru, odstępów i wysokości czcionki. Do tego momentu widzieliśmy filtr z ustawieniami domyślnymi.

W tym przykładzie użyto czerwonej czcionki Amatic SC. Zwiększyłem rozmiar czcionki, ale pozostawiłem domyślne odstępy i wysokość.

Ten używa czcionki o nazwie Bevan. Używam ciemniejszej czerwieni. Rozmiar czcionki jest taki sam, jak poprzednia czcionka.

Ten używa Arvo. Zmniejszyłem rozmiar czcionki i wybrałem ciemnoszary kolor.

Animacje

Animacje Divi są również dostępne w ustawieniach modułu. Wybierz brak, zanikanie, przesuwanie, odbijanie, powiększanie, odwracanie, składanie i rolowanie. Możesz także dostosować animację, aby powtarzała się tylko raz lub w pętli, wybrać kierunek, czas trwania, opóźnienie, intensywność, początkowe krycie i krzywą prędkości.

W tym przykładzie użyto Roll. Wszystko inne zostawiłem domyślnie.

Korzystanie z siatki portfela w układzie

DTS Filterable Portfolio Grid Pro wygląda świetnie w układzie. Oto przykładowy układ zdjęć z blogiem, portfolio i formularzem kontaktowym. Używam domyślnych ustawień siatki portfolio i ładnie się łączy.

Korzystanie z siatki portfela z dodatkiem

DTS Filterable Portfolio Grid Pro jest również kompatybilny z Extra. Oto spojrzenie na podobny układ jak układ Divi powyżej. Używa to również ustawień domyślnych. Używam siatki 3 kolumn z niedopasowanymi rozmiarami obrazu. To proste rozwiązanie — wystarczy użyć obrazów o tym samym rozmiarze.

Licencja

Do wyboru są dwie opcje licencji: pojedyncza i rozszerzona. Oba obejmują dożywotnie aktualizacje i 6 miesięcy wsparcia.

Końcowe przemyślenia

DTS Filterable Portfolio Grid Pro jest łatwy w użyciu i zapewnia wiele eleganckich stylizacji, aby Twoje portfolio się wyróżniało. Chciałbym dodać kilka funkcji, takich jak tytuł i kolory tła meta, ale nadal zapewnia wystarczająco dużo funkcji, które można łatwo polecić. Jeśli interesuje Cię filtrowalny moduł siatki tła ze stylizacją wykraczającą poza standardowy moduł Divi, warto zajrzeć do DTS Filterable Portfolio Grid Pro.

Chcemy usłyszeć od Ciebie! Czy wypróbowałeś DTS Filterable Portfolio Grid Pro? Daj nam znać, co o tym myślisz w komentarzach.

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