Czy chciałbyś skorzystać z modułu Filtrowalne portfolio firmy? Divi a nie wiesz jaki układ wybrać?
Moduł « Filtrowalne portfolio "Aby Divi daje dwie opcje układu do wyboru. Obie opcje mają zalety i działają bardzo dobrze w określonych celach.
W tym artykule porównamy układy tego modułu o pełnej szerokości i siatce, aby pomóc Ci zdecydować, czego potrzebujesz dla swojego Witryna internetowa.
Dostosujemy również oba układy, aby zobaczyć, jak działają w jednym układzie Divi.
Zacznijmy!
badanie
Najpierw zobaczmy, co zamierzamy stworzyć w tym samouczku.
Wersja desktopowa układu siatki
Pobierz DIVI teraz !!!
Telefonowa wersja układu siatki
Wersja desktopowa układu o pełnej szerokości
Czytaj także: Divi: Jak używać efektów cienia i najechania do tworzenia interaktywnych treści
Wersja telefoniczna układu o pełnej szerokości
Jak zmienić układ modułu portfela filtrowalnego?
Domyślnie moduł „Filterable Portfolio” wyświetla układ w pełnej szerokości. Możesz zmienić układ, aby wyświetlać elementy w siatce. Najpierw otwórz parametry modułu.
Następnie wybierz zakładkę Projekt. Pierwsza opcja to układ. Ma rozwijaną listę z kilkoma opcjami. Wybierz, aby wybrać między Pełna szerokość et Krata.
Jeśli wybierzesz opcję, która nie jest aktualnie wybrana, moduł przeładuje i wyświetli pozycje portfela w tym układzie. Poniższy przykład przedstawia układ siatki.
Filtrowalne porównanie układu modułu portfela
Te dwa układy są bardzo różne, ale mają pewne podobieństwa. Oba wyświetlają filtr u góry modułu, tytuł i meta pod obrazami przedmiotu oraz paginację na dole modułu.
Oto spojrzenie na to, czym się różnią.
Układ o pełnej szerokości
Pełna szerokość wyświetla duży obraz z elementem portfolio zajmującym całą szerokość obszaru portfolio. Obrazy są wyświetlane w oryginalnej formie i rozszerzają się, aby dopasować je do dostępnej szerokości.
Nie dodaje dużo miejsca między pozycjami w portfelu. Zalecamy ograniczenie liczby postów do kilku. Poniższy przykład przedstawia układ o pełnej szerokości z 2 słupkami.
Układ siatki
Układ siatki wyświetla do 4 elementów w rzędzie. Dodaje więcej przestrzeni między elementami. Obrazy są przycinane w celu utworzenia miniatur o tym samym rozmiarze, niezależnie od rozmiaru i kształtu obrazu.
W tym przypadku ograniczyliśmy moduł do wyświetlania czterech postów, aby pokazać paginację.
Kiedy używać każdego układu modułu Portfolio filtrowalnego
Oba rozwiązania mają swoje zalety. Oto kilka wskazówek, kiedy używać każdego układu.
Układ o pełnej szerokości
Użyj układu o pełnej szerokości, gdy masz tylko kilka elementów do wyświetlenia lub chcesz skoncentrować się na kilku elementach.
Użyj tego układu również wtedy, gdy chcesz wyróżnić lub zwrócić uwagę na polecane obrazy.
Układ siatki
Użyj układu Siatka, jeśli chcesz pokazać wiele elementów lub jeśli chcesz, aby układ pokazywał więcej elementów na mniejszej przestrzeni.
Jak dostosować filtrowalne układy modułów portfela
Teraz, gdy widzieliśmy, jak wybierać układy, jak działają i kiedy ich używać, zobaczmy, jak dostosować te dwa układy.
Wykorzystamy stronę Portfolio w Darmowy pakiet układu malarza dostępne w Divi. Oto oryginalna strona.
Zastąpimy portfolio modułem Filtrowalne portfolio i użyjemy tych samych obrazów i tytułów.
Stworzymy dwie wersje: jedną z układem o pełnej szerokości, a drugą z układem siatki.
Jak dostosować układ siatki w filtrowalnym module portfolio
Zaczniemy od układu siatki. Wykorzystam kolory i czcionki z oryginalnego layoutu.
Treść
Otwórz je parametry modułu i wpisz 4 dla Ilość postów. Zaznacz wszystko kategorie który chcesz wyświetlić w module.
- Liczba postów: 4
- Uwzględnione kategorie: Wybierz kategorie
Usposobienie
Następnie wybierz zakładkę Wnętrze i wybierz Krata w opcjach układu.
- Układ: Siatka
Obraz
Przewiń do Obraz i wybierz opcję Pudełko Cień. Zmień to kolor cienia w rgba(0,0,0,0.05).
- Cień pudełka: 4ème opcja
- Kolor cienia: rgba(0,0,0,0.05)
teksty
Następnie przewiń w dół do teksty i zmodyfikuj wyrównanie W centrum. To centruje filtr, tytuł, meta i paginację.
- Wyrównanie tekstu: do środka
Tekst tytułu
Następnie przewiń w dół do Tekst tytułu i zmień następujące ustawienia.
- Czcionka tytułu: Merriweather
- Kolor tekstu tytułu: #000000
Zmień rozmiar policja 26px dla komputerów stacjonarnych, 20px dla tabletów i 18px dla telefonów.
- Rozmiar tekstu tytułu: komputer 26 pikseli, tablet 20 pikseli, telefon 18 pikseli
Filtruj tekst kryterium
Następnie przewiń w dół do Tekst kryteriów filtrowania i zmień następujące ustawienia:
- Kryteria filtrowania:
- Czcionka: Montserrat
- Waga czcionki: pogrubiona
- Styl: TT
- Kolor tekstu: #fd6927
- Rozmiar tekstu: 12px
Meta tekst
Następnie przewiń w dół do Meta tekst. Zmień to policja w Montserrat i kolor w #fd6927.
- Rozmiar tekstu meta: Montserrat
- Meta kolor tekstu: #fd6927
Zdefiniuj taille na 12 pikselach,odstępy między literami na 2 piksele i hauteur linii na 1,2 em.
- Rozmiar tekstu: 12px
- Meta odstępy między literami: 2px
- Wysokość linii Meta: 1,2 em
Tekst paginacji
Na koniec przewiń w dół do Tekst paginacji i zmień to policja w Montserrat i ustaw kolor czcionka na czarno. Zamknij moduł i zapisz ustawienia.
- Czcionka paginacji: Montserrat
- Kolor tekstu stronicowania: #000000
Jak dostosować filtrowalny moduł portfela w układzie o pełnej szerokości?
Teraz skonfigurujmy moduł w układzie o pełnej szerokości.
Użyjemy tych samych wskazówek projektowych, co układ siatki, ale wprowadzimy kilka zmian, które będą dobrze działać w tym układzie. Użyjemy prostego kodu CSS, aby wprowadzić drobne poprawki.
Treść
Otwórz je parametry modułu i zmień liczbę publikacje do 2. Dzięki temu strona jest mniejsza i łatwiejsza w zarządzaniu z dużymi obrazami. Zaznacz wszystko kategorie który chcesz wyświetlić w module.
- Liczba postów: 2
- Uwzględnione kategorie: Wybierz kategorie
Elementy
Przewiń do Elementy i dezaktywuj Pokaż kategorie. Pozostałe pozostaw włączone. Kategorie będą nadal włączone dla filtra, ale nie będą wyświetlane z tytułem.
- Pokaż kategorie: NIE
Usposobienie
Wybierz zakładkę Projekt. Sous układ, pozostaw Układ ustawiony na Pełna szerokość, co jest ustawieniem domyślnym.
- Układ: pełna szerokość
Obraz
Następnie przewiń w dół do Obraz . Wybierz opcję Cień Pudełka i zmień to kolor odcień w rgba (0,0,0,0.05).
- Cień pudełka: 4ème opcja
- Kolor cienia: rgba(0,0,0,0.05)
teksty
Następnie przewiń w dół do Tekst. Zmienić wyrównanie W centrum. Filtr, tytuł i paginacja zostaną wyśrodkowane z obrazami.
- Wyrównanie tekstu: do środka
Tekst tytułu
Następnie przewiń w dół do Tekst tytułu . Zmień to policja do Merriweather i zmień kolor w czerni.
- Czcionka tytułu: Merriweather
- Kolor tekstu tytułu: #000000
Zmień rozmiar policja 40px dla komputerów stacjonarnych, 20px dla tabletów i 18px dla telefonów.
- Rozmiar tekstu tytułu: komputer 40 pikseli, tablet 20 pikseli, telefon 18 pikseli
Filtruj tekst kryterium
Następnie przewiń w dół do Tekst kryteriów filtrowania i zmień następujące ustawienia:
- Kryteria filtrowania:
- Czcionka: Montserrat
- Waga czcionki: pogrubiona
- Styl: TT
- Kolor tekstu: #fd6927
Tekst paginacji
Następnie przewiń w dół do Tekst paginacji. Zmień to policja w Montserrat zmień poids pół pogrubienie i ustaw kolor czcionki na #fd6927. Zamknij moduł i zapisz ustawienia.
- Czcionka paginacji: Montserrat
- Kolor: #fd6927
- Grubość czcionki: pół pogrubiona
Tekst tytułu CSS
Otwórz kartę Zaawansowane i przewiń do Tytuł portfela. Wybierz ikonę pulpitu. Skopiuj poniższy kod dla różnych rozmiarów ekranu. Zamknij moduł i zapisz ustawienia.
Tytuł portfela:
- Stacjonarny
padding-bottom:40px- Tablet
padding-bottom:30px- Telefon
padding-bottom:20px
Résultats
Wersja desktopowa układu siatki
Telefonowa wersja układu siatki
Pobierz DIVI teraz !!!
Wersja desktopowa układu o pełnej szerokości
Zobacz też: Divi: Jak zmienić gradient tła po najechaniu myszą
Wersja telefoniczna układu o pełnej szerokości
Pobierz DIVI teraz !!!
Wnioski
To jest nasze podejście do korzystania z układu o pełnej szerokości w porównaniu z siatką w module Portfolio z możliwością filtrowania z Divi. Wybór między dwiema opcjami układu jest łatwy.
Każda opcja ma zalety i powinna być zaprojektowana inaczej, aby współpracować z Twoim Witryna internetowa. Po prostu wprowadź kilka poprawek, aby upewnić się, że Twój moduł działa dobrze z dowolnym układem Divi.
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.
...
