Divi: Jak dostosować element siatki modułu „Filterable Portfolio”.

Czy chcesz wiedzieć, jak dostosować elementy siatki modułu Filtrowalne portfolio programu Divi ? Śledź nas w tym samouczku...

Miej strefę na swoim Witryna internetowa zaprezentowanie swojej pracy jest ważne. Jeśli jesteś stylistą, możesz stworzyć kilka projektów na swoim Witryna internetowa WordPress, aby pokazać swoje koncepcje. Jeśli jesteś twórcą marki, możesz użyć portfolio, aby zaprezentować swoją pracę. Co więcej, możemy nawet pójść dalej i dodać różne kategorie dla naszych projektów. To tu co robi moduł filtrowalnego portfela Divi? .

Dzięki temu modułowi jesteśmy w stanie w łatwy i uporządkowany sposób pokazać naszą ciężką pracę. 

W dzisiejszym samouczku dostosujemy poszczególne elementy siatki modułu Filtrowalne portfolio. Wykorzystamy layouty z darmowych paczek layoutów Konferencja Divi et Instruktor Jogi Divi Online dołączane do każdego zakupu Divi . 

Jak wszystko dot Divi, mamy możliwość dostosowania tego modułu do naszych potrzeb i pragnień. Zanim jednak przejdziemy do stylizacji, dowiedzmy się nieco więcej o module.

Co to jest moduł filtrowalnego portfela Divi?

Projekty są częścią niestandardowego typu postów, który działa tak samo jak posty. Możesz je znaleźć na pulpicie nawigacyjnym WordPress.

Tutaj utworzysz swoje indywidualne projekty, które zapełnią moduł Filtrowalnego Portfolio. Moduł daje nam dwa sposoby na pokazanie naszych projektów: w formacie siatki ou w formacie pełnej szerokości. Dla nas użyjemy i dostosujemy format siatki. 

Dzięki modułowi Filtrowalne Portfolio będziemy mogli zaprezentować nasze najnowsze projekty. Użytkownicy naszej witryny zobaczą pasek filtrowania u góry naszej siatki portfolio. Stamtąd mogą przeglądać różne kategorie portfolio, które pozwalamy wyświetlać w module.

Oto przykładowa konfiguracja siatki modułu z przykładowymi projektami:

Obszary, które należy wziąć pod uwagę podczas tworzenia filtrowalnego portfolio Divi

Jak wszystkie mody Divi, moduł Filterable Portfolio zawiera szereg funkcji, które możemy dostosować do naszych potrzeb i pragnień. Dzięki temu większość funkcji dostarczanych z modułem można modyfikować w zakładce Wnętrze z modułu ustawień modułu. Możemy edytować następujące obszary i nie tylko:

• Tytuł Projektu
• Kategoria projektu
• Winieta
• Filtruj tekst
• Miniatura po najechaniu myszką
• Paginacja

To nie jest pełna lista, a nawet nie zaczęliśmy mówić o tym, jak CSS dodał głębsze dostosowania do tego modułu!

Jak dostosujemy moduł filtrowalnego portfolio Divi

Jak wspomniano wcześniej, w tym samouczku użyjemy dwóch układów: Konferencja Divi et Instruktor Jogi Divi Online. Poniżej znajdziesz przegląd prac, które będziemy wykonywać podczas tego samouczka.

Aranżacja elementów layoutu „Divi Conference”.

Układ elementów layoutu „Divi Online Yoga Instructor”.

Możesz łatwo pobrać oba układy z Divi Budowniczy. 

Teraz zacznijmy!

Zobacz też: Divi: Wybierz między siatką a układem o pełnej szerokości modułu Filtrowalne portfolio

Dostosowanie modułu filtrowalnego portfolio Divi: „Divi Conference Edition”

Najpierw musimy zainstalować szablon strony wydarzenia z pakietu Divi Conference Layout Pack. Po utworzeniu Twojej nowej strony w WordPress i aktywacji Divi Builder wejdziemy do Biblioteki Divi.

Wejdź do biblioteki układów Divi

Kliknij ikonę « Załaduj z biblioteki aby wejść do biblioteki układów Divi

Znajdź układ w Bibliotece układów Divi

Korzystając z funkcji wyszukiwania w bibliotece układu Divi, poszukuje usposobienie" Strona wydarzenia konferencyjnego”.

Zainstaluj układ

Po wybraniu układu kliknij przycisk „ Użyj tego układu aby zainstalować układ na swojej stronie.

Wyjmij i wymień moduł obrazu

Usuniemy pokazany poniżej moduł Obraz, aby zrobić miejsce dla modułu Filtrowalne portfolio, który będziemy dostosowywać. Kliknij na " Usuń po najechaniu na obraz, aby usunąć zdjęcie.

Wstaw moduł filtrowalnego portfela Divi

Po usunięciu modułu obrazu możemy teraz zrobić miejsce dla naszego modułu filtrowalnego portfolio. Zamierzamy kliknąć ikonę „ Dodaj moduł (szary znak plus), a następnie wybierz moduł w wyświetlonym oknie modalnym modułu.

Ustalenie liczby postów i układu portfolio

Domyślnie ten moduł przedstawi Twoją pracę w jednej kolumnie. Będziemy jednak używać układu siatki, który jest domyślnie wyposażony w 4 kolumny. 

W związku z tym zalecamy wybranie wielokrotności liczby 4 (4, 8, 12, 16 itd.) jako liczby postów w Twoim portfolio. 

W tym samouczku użyjemy 12 projektów w naszej siatce.

Zacznij dostosowywać filtrowalne portfolio Divi: tytuł i metatekst

Teraz, gdy nasze projekty są wyświetlane w siatce, połączmy niektóre elementy projektu z naszego wybranego szablonu. W takim przypadku użyjemy stylu dostarczonego z Divi Conference Layout Pack w naszym nowym module.

Styl tekstu

• Wyrównanie tekstu: wyśrodkowane
• Kolor tekstu: ciemny

Styl tekstu tytułu

• Poziom nagłówka tytułu: H2
• Czcionka tytułu: Korona One
• Kolor tekstu: #000000

Styl tekstu meta

• Meta Czcionka: Domyślna (Open Sans)
• Kolor tekstu meta: #ff6651

Teraz, gdy mamy już gotowe style tytułów w siatce portfolio, wprowadźmy pewne zmiany w rzeczywistym kształcie samych miniatur projektów.

Zmień ramkę miniatury projektu i zaokrąglone rogi

W naszym pakiecie Divi Conference Layout używamy unikalnej kombinacji zaokrąglonych rogów, aby nadać unikalny kształt niektórym klatkom kluczowym w pakiecie. Zastosujmy ten styl do miniatur naszego modułu.

Obraz

• Obraz:
  • Zaokrąglone rogi: 50px 50px 50px 0px
  • Style obramowania: wszystkie
  • Szerokość obramowania: 3px
  • Kolor: #000000
  • Styl obramowania: solidny

Dzięki temu nasze miniatury będą miały kształt pasujący do pozostałych obrazów w pakiecie układu.

Dostosowywanie nakładki po najechaniu kursorem

Pójdźmy o krok dalej z naszą stylizacją i wprowadźmy niewielką zmianę w domyślnej nakładce dostarczanej z tym modułem. Zmienimy kolor, a także ikonę, która jest używana od razu po wyjęciu z pudełka.

Nałożenie

• Kolor ikony powiększenia: #bcf5fd
• Kolor nakładki po najechaniu kursorem: #ff6651
• Selektor ikon po najechaniu kursorem: Zoom

Jak widać, dodaliśmy kolory marki dla tego układu do nakładki, a także zmieniliśmy ikonę, którą Divi zapewnia domyślnie dla funkcji nakładki po najechaniu kursorem w tym module.

Dostosowywanie paginacji

Zaczniemy teraz używać małych fragmentów CSS, aby dodać dodatkowe dostosowania do naszego modułu filtrowalnego portfolio. Najpierw dostosujemy paginację tego modułu. Następnie usuniemy ramkę, która pojawia się nad nią za pomocą pojedynczej linii CSS

Tekst paginacji

• Paginacja:
  • Czcionka: Korona One
  • Wyrównanie tekstu: wyśrodkowane
  • Kolor tekstu: #ff6651, #000000 (po najechaniu kursorem)

W przypadku naszego CSS przełączymy się na kartę Zaawansowane naszego modułu. Po drugie, klikniemy na zakładkę Niestandardowe CSS. Następnie wprowadzimy następujący fragment kodu, aby usunąć obramowanie nad naszą paginacją, nadając jej bardziej przejrzysty wygląd.

Paginacja portfolio

border-top: 0px;

Używanie ustawień Divi i CSS do dostosowywania tekstu filtra

Jeśli chodzi o tekst filtru, podniesiemy go. Zamierzamy użyć CSS do zmiany tła, a także efektów najechania kursorem. 

Chcemy mieć idealną ciągłość między nowo dodanym modułem a stylem pakietu layoutów. Najpierw wprowadźmy nasze ustawienia Divi dla czcionki.

Filtruj tekst kryteriów

• Kryteria filtrowania:
  • Czcionka: Korona One
  • Kolor czcionki: #ffffff, #000000 (najedź kursorem)

Wygląda na to, że nasz filtr zniknął. Rzeczywiście, w stanie domyślnym jest to biały tekst na białym tle. Jednak zmienimy to za pomocą niestandardowego CSS w dwóch miejscach. 

Najpierw dodamy fragment kodu CSS w ustawieniach strony, który doda tło do tekstu filtra. Po drugie, dostosujemy filtr aktywnego portfela za pomocą zakładki Zaawansowane modułu.

Mieć dostęp ustawienia strony, kliknij trzy kropki na środku ekranu. następnie wybierz ikonę koła zębatego który otworzy ustawienia strony. wtedy ty przejdź do karty Niestandardowy CSS i wprowadź następujące informacje, aby dodać tło do tekstu filtru.

Niestandardowy CSS

W tym fragmencie kodu CSS kierujemy się na kolor tła filtra. Kierujemy również i stylizujemy jego stan zawisu. Następnie w programie dodajmy trochę więcej CSS do modułu i zaznacz naszą zakładkę Active Filter.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}

Aktywny styl karty filtra portfela

Aktywna zakładka ffiltr portfela zwraca uwagę użytkowników na aktualnie odwiedzaną kategorię portfolio. Obecnie ten filtr ma biały tekst i jasne tło. 

Przejdziemy do zakładki Zaawansowane modułu Filterable Portfolio i dodaj tekst do stanów domyślnych i stanu najechania na tę funkcję. Oto właściwości CSS, które dodamy w stanie domyślnym:

background: #ff6651;
color: #ffffff !important;

Stan po najechaniu myszką

Po najechaniu kursorem zmienimy tło na czarne.

color: #000000!important;

Ostateczny wygląd projektu filtrowalnego portfolio Divi z „Divi Conference”

Oto ostateczny wygląd!

A teraz, oto jak to wygląda po najechaniu myszką!

Dostosowanie modułu filtrowalnego portfolio Divi: „Divi Online Yoga Instructor”

Podobnie jak w przypadku Divi Conference Edition, znajdź swój układ w pakiecie układów instruktora jogi online w Divi Builder. 

W tym samouczku użyjemy układu strony docelowej. Przewiń w dół do sekcji Klasy sekcji z tytułem Sekcja Wszystkie nadchodzące zajęcia.

Wstawianie modułu Portfolio filtrowalne

Stąd usuniemy wiersze z klasami. Kliknij fioletową ikonę z trzema kropkami . Następnie, wybierz widok szkieletowy. Na koniec usuniesz dwa wiersze zawierające trzy kolumny.

Następnie zastąpimy je pojedynczą kolumną w rzędzie w środku. Następnie dodamy nasz moduł Filtrowalne portfolio.

Podobnie jak w poprzednim przykładzie, użyjemy układu siatki dla tego modułu z wielokrotnością 4 dla liczby postów. 

Teraz zróbmy coś nieco innego z informacjami, które prezentujemy na mapie. 

W zakładce Treść, nawigować do Elementy i odznacz Pokaż kategorie . Oznacza to, że moduł Portfolio wyświetli tylko nazwę projektu bez nazwy kategorii, w której się znajduje.

Dostosowanie tekstu kryteriów filtrowania, tytułu projektu i tekstu paginacji

Zdefiniujmy bazę stylów dla części tekstowych naszego modułu. Treść tego układu to Otwarte Sans a czcionka użyta w głównych nagłówkach to Cinzel. Dlatego będziemy używać kombinacji tych dwóch czcionek w całym procesie stylizacji.

teksty

• Wyrównanie tekstu: wyśrodkowane
• Kolor tekstu: jasny

Tekst tytułu

• Czcionka tytułu: Cinzel
• Kolor tekstu tytułu: #ffffff

Filtruj tekst kryteriów

• Kryteria filtrowania Grubość czcionki: pogrubiona
• Tekst kryteriów filtrowania Kolor: #ffffff

Tekst paginacji

• Grubość czcionki paginacji: pogrubiona

Tak obecnie wygląda nasz filtrowalny moduł portfolio. To niewiele, ale powoli dochodzimy do celu!

Utwórz półprzezroczystą nakładkę po najechaniu kursorem

Czerpmy inspirację z różnych modułów i pięknych przejść w tym układzie. W tym celu utworzymy półprzezroczystą nakładkę po najechaniu kursorem i dostosujemy ikonę, która pojawia się również po najechaniu myszką.

• Kolor ikony powiększenia: #323741
• Kolor nakładki po najechaniu kursorem: rgba (255 201 165, 0,85)
• Selektor ikon po najechaniu kursorem: wyszukaj arkusz i zobacz ikonę powyżej

Dodawanie obramowania do elementów siatki portfolio za pomocą niestandardowego CSS

Podobnie jak w naszym pierwszym przykładzie, teraz użyjemy CSS, aby zwiększyć zainteresowanie naszym modułem Portfolio filtrowalne. 

Teraz dodamy obramowanie wokół każdego pojedynczego elementu w siatce portfela. Użyj poniższego fragmentu CSS w niestandardowej części CSS ustawień strony, aby dodać nasze obramowanie. 

Będziemy również używać „border” jako klasy CSS dla tego modułu.

• Klasa CSS: obramowanie

Niestandardowy CSS

/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}

Tutaj mamy teraz nasz filtrowalny moduł Portfolio z ładnym obramowaniem – i wypełnieniem – wokół każdego elementu siatki.

Dodano CSS do obramowania stylu stronicowania

W przeciwieństwie do naszego poprzedniego przykładu, dodajmy kolor do obramowania naszej strony za pomocą CSS. Będzie to dotyczyć również okolicy Ustawienia > Niestandardowa strona CSS .

/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}

Styl tekstu kryteriów filtrowania

Podobnie jak w przypadku naszego modułu Divi Conference Portfolio, chcemy dodać jazz do naszych filtrów kategorii. Ponownie chcemy czerpać ze stylu, który jest już obecny w dostarczonym nam szablonie. 

Oto kod CSS, który dodamy w naszej niestandardowej sekcji CSS, aby kierować reklamy na tło i najechanie kursorem na nasz pasek filtra.

/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
 
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}

Dzięki tym dwóm nowym dodatkom do naszego niestandardowego CSS wygląda tak, jak będzie wyglądał nasz moduł filtrowalnego portfolio.

Zwróć jednak uwagę, jak traci się aktywny filtr portfela. Zawsze ma jasne tło z białym tekstem. Przejdźmy do ustawień modułu i dodajmy CSS, aby to zmienić.

Niestandardowy CSS

Aktywny filtr portfela:

background: #ffffff;
color: #323741 !important;

Usuń animację modułu

Aby zapewnić przejrzystość, usuniemy domyślną animację, która jest dostarczana z modułem Filtrowalne portfolio. W tym celu najpierw musimy wrócić do ustawień naszej strony i dodać CSS, który będzie kierował na elementy siatki portfolio i usuwał przejście ślizgowe to dzieje się po wyjęciu z pudełka.

Niestandardowy CSS

/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}

Czytaj także: Divi: Jak zmienić liczbę kolumn w blogu

Zmień siatkę portfela z czterech kolumn na trzy

Naszym najnowszym dodatkiem do CSS będzie przekształcenie naszego modułu filtrowalnego portfolio z czterech kolumn do trzech. Dzięki temu będziemy mieli więcej miejsca na oglądanie naszych projektów. 

Ponadto dodamy dodatkową linię do naszego modułu. Znajdziesz tu również najnowszy fragment kodu CSS, którego możesz użyć do konwersji kolumn.

Niestandardowy CSS

W tym ostatnim fragmencie dodamy identyfikator CSS #siatka z trzema kolumnami do naszego modułu Nadal zachowamy naszą klasę CSS w stanie nienaruszonym.

/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
 
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
 
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}

Pobierz DIVI teraz !!!

Wnioski

Podobnie jak w przypadku większości modułów Divi, ustawienia dostarczane z Divi można dalej rozwijać za pomocą CSS. Prezentowanie swojej pracy jest ważną częścią prowadzenia firmy online, bloga lub marki. 

W związku z tym posiadanie zorganizowanego sposobu wyświetlania swojej pracy jest niezbędne. Zdobądź wskazówki, które zostały udostępnione dzisiaj, aby wziąć udział we własnej podróży projektowej modułu Divi's Filterable Portfolio.

Mam nadzieję, że ta technika doda kolejną przydatną umiejętność projektowania do przyszłych projektów.

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.

Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...