Divi Plugin Highlight - Divi Portfolio Grid

Divi zawiera moduł portfolio, który wyświetla twoje portfolio w pełnej szerokości lub w układzie siatki i zawiera wszystkie podstawowe funkcje, których można oczekiwać od modułu Divi - tła, czcionki, kolory, obramowania, nakładki, ikony itp. A jeśli chcesz inny układ, na przykład projekt wielokolumnowy, lub nowe funkcje, takie jak dostosowywalny przycisk? Możesz być zainteresowany wtyczką innej firmy o nazwie Divi Portfolio Grid.

Divi Portfolio Grid to wtyczka innej firmy ze sklepu Divi Theme Store. Zapewnia nie tylko standardowe funkcje modułu Divi, ale także układ 2, 3 i 4 kolumn z nowymi funkcjami stylizacji, dzięki czemu możesz tworzyć unikalne portfolio. Dodaje również przycisk z tekstem i efektami najechania, aby zmienić kolory.

W tym przeglądzie przyjrzymy się Divi Portfolio Grid, korzystając z przykładowego portfolio, które stworzyłem. Wszystkie obrazy użyte w portfolio i tła zostały zaczerpnięte z Unsplash.com.

Instalowanie wtyczki Divi Portfolio Grid

Zanim będziesz mógł przesłać wtyczkę, musisz rozpakować pobrany plik. W spakowanym pliku znajdziesz spakowany plik wtyczki wraz z krótkim przewodnikiem w formacie PDF. Skrócony przewodnik to dokument, który przeprowadzi Cię przez proces instalacji i omówi sposób korzystania z modułu. Prześlij spakowany plik wtyczki, który znajduje się w pobranym pliku, zainstaluj i aktywuj jak zwykle.

Funkcje modułu portfela niestandardowego

Wtyczka dodaje nowy moduł do Divi Builder o nazwie Custom Portfolio Module. Moduł działa jak każdy inny moduł Divi Builder z zaplecza – możesz więc przeciągać i upuszczać go w dowolnym rzędzie oraz dostosowywać zawartość, projekt i ustawienia zaawansowane.

Dostosuj kolor tła, wybierz obraz tła, wybierz układ, utwórz niestandardowy tekst przycisku, wybierz liczbę postów do wyświetlenia, wybierz kategorię, pokaż meta, wybierz kolory itp.

Wszystkie standardowe elementy konstrukcyjne są tutaj również dostępne. Dostosuj kolory, czcionki, przyciski, ikony, nakładki i nie tylko.

Przykłady – korzystanie z modułu Divi Custom Portfolio

Dla moich przykładów utworzyłem stronę, dodałem tło, aby nadać jej wizualnego rozbłysku, zrobiłem wiersz o pełnej szerokości i dodałem moduł Portfolio Grid. Zanim przyjrzymy się temu, rzućmy okiem na standardowy moduł portfolio Divi Building dla porównania.

Standardowy moduł portfela Divi

Oto spojrzenie na stronę przy użyciu standardowego modułu portfolio Divi. Ustawiłem go na układ siatki i ustawiłem kolor czcionki na jasny. Wszystkie inne funkcje są ustawione domyślnie. Zawiera również nakładki z ikonami (w trybie siatki), obramowaniami, tłem, meta i stylami czcionek.

Polecany obraz projektu jest wyświetlany z tytułem projektu i kategorią pod obrazem. Kliknięcie w tytuł przeniesie Cię do projektu. Kliknięcie tytułu kategorii otwiera stronę kategorii dla tej kategorii. Zawiera również efekty najechania z opcjami koloru nakładki i ikon podczas korzystania z układu siatki.

Przykłady modułów niestandardowych portfolio

Zawiera trzy układy do wyboru, dzięki czemu możesz ustawić swoje portfolio w 2, 3 lub 4 kolumnach. Przyjrzyjmy się każdemu układowi z różnymi dostosowaniami i funkcjami.

Oto spojrzenie na układ dwukolumnowy. Wyświetla wyróżniony obraz projektu, zawiera klikalny tytuł i kategorię na pasku pod obrazem oraz umieszcza przycisk z tekstem nad obrazem i paskiem. To są domyślne funkcje i kolory.

Obraz zawiera te same efekty najechania, co standardowy moduł portfolio, ale przycisk zawiera również efekty najechania. W tym przykładzie widać, że domyślne ustawienia przycisków zmieniają fioletowe tło na czerwone.

Możesz także zobaczyć ładny efekt najechania kursorem, który tworzy cień za kartą, nad którą najeżdżasz. Tytuł jest wyświetlany jako podpowiedź. Nakładka po najechaniu myszą jest również funkcją domyślną, więc nie trzeba jej włączać. Przejście efektu najechania wyświetla cięższy cień do momentu zakończenia przejścia.

Oto spojrzenie na układ 3 kolumn. W tym przykładzie zmieniłem kolor tła i tekstu przycisku oraz zmieniłem tekst, aby wyświetlał moją własną wiadomość.

Przycisk zawiera również efekt najechania cieniem. W tym przykładzie najeżdżam tylko na przycisk, więc obraz nie wyświetla efektu najechania. Tło i tekst przycisku zmieniły kolor.

W tym przykładzie zastosowano układ 4-kolumnowy. Ustawiłem promień przycisku na 0 i zmieniłem wszystkie style czcionek.

Efekt najechania umieszcza niebieską nakładkę z kryciem 47% (przepraszam za nieparzystą liczbę, ale to tam zatrzymała się moja mysz, więc poszedłem z nią), a ikona pola wyboru na czerwono. Przycisk zmienia się z ciemnoszarego z jasnym tekstem zakładki na złamaną biel z ciemnoszarym tekstem.

W tym przykładzie dodałem tło, które pokazuje się za tytułem i meta. Dodałem czerwoną ramkę o szerokości 2 pikseli (więc dobrze widać na obrazku). Dostosowałem wszystkie czcionki i kolory, zmieniłem kolor tła przycisku, kolor najechania kursorem i kolor ikony. Pozostawiłem domyślny kolor nakładki po najechaniu kursorem, aby pokazać kontrast między wyróżnionym obszarem obrazu a obrazem tła za tytułem i sekcją meta.

Przycisk wyświetla się tylko wtedy, gdy wyświetlasz tytuł. Ten przykład wyświetla tylko kategorię.

W tym przykładzie wyświetlany jest tylko tytuł projektu. Ponieważ wyświetlany jest tytuł, wyświetlany jest również przycisk.

W tym przykładzie umieściłem czerwoną nakładkę z kryciem 66. Zmieniłem ikonę najechania i dostosowałem przycisk i jego efekty najechania. Obraz tła (szare niebo) jest umieszczony za tytułem. Ten używa różnych kategorii projektów. Promień przycisku jest ustawiony na 10.

Divi Portfolio Grid – Responsywne

Wtyczka jest responsywna. Oto 3-kolumnowy układ na iPadzie (emulowany w Narzędziach dla programistów Chrome) w trybie pionowym. Aby dowiedzieć się więcej o narzędziach dla programistów Google Chrome, zapoznaj się z artykułem Dlaczego warto już teraz zacząć korzystać z narzędzi programistycznych przeglądarki Chrome.

To ten sam układ w trybie poziomym.

To ten sam układ w Galaxy S5 w trybie portretowym.

A oto układ wykorzystujący Galaxy S5 w trybie poziomym.

Licencja, aktualizacje i dokumentacja

Licencja obejmuje nieograniczone użytkowanie i obejmuje dożywotnie aktualizacje. Dokumentacja znajduje się w pliku PDF, który znajduje się w spakowanym folderze. Jest to krótki dokument i zawiera przewodnik z obrazami na początek. Jest to łatwa w użyciu wtyczka i uważam, że wszystko jest intuicyjne. Jeśli jesteś przyzwyczajony do korzystania z modułów Divi, z tym modułem powinieneś poczuć się jak w domu.

Divi Portfolio Grid można kupić w sklepie Divi Theme Store.

Końcowe przemyślenia

Divi Portfolio Grid jest łatwy w użyciu i zapewnia wystarczającą liczbę dodatkowych funkcji w porównaniu ze standardowym modułem Divi portfolio, który wielu użytkowników uzna za niezbędny. Zawiera układy 2, 3 i 4 kolumn, dodaje przycisk z efektami najechania, nakładki z ikonami i wszystkie stylizacje modułów, których można się spodziewać, w tym zaawansowane funkcje CSS, dzięki czemu możesz dostosować styl za pomocą własnego kodu. Jeśli potrzebujesz portfolio z funkcjami wykraczającymi poza standardowy moduł portfela Divi, Divi Portfolio Grid może być modułem, którego potrzebujesz.

Chcielibyśmy usłyszeć od Ciebie! Czy próbowałeś Divi Portfolio Grid? Daj nam znać o swoim doświadczeniu w komentarzach poniżej.

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