Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu portfela z filtrem

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecana]

Moduł Portfolio Divi Theme Fullwidth działa tak jak zwykły moduł portfela, z tym wyjątkiem, że wyświetla Twój projekt w oszałamiającym trybie Fullwdth. Zawiera także nowe unikalne funkcje: siatkę i karuzelę. Moduł działa, wyświetlając listę najnowszych projektów i może być używany przez projektantów i artystów, którzy chcą wyświetlić galerię swoich najnowszych prac.

moduł porfolio o pełnej szerokości divi.png

Jak dodać moduł portfolio o pełnej szerokości do swojej strony

Zanim dodasz do swojej strony pełny moduł portfolio, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi w witrynie zauważysz przycisk Użyj Divi Builder nad wydawcą za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją witrynę na pierwszym planie, jeśli jesteś podłączony do pulpitu WordPress.

divi budowniczy

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko wewnątrz linii. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać do niej linii. Mamy świetne samouczki na temat korzystania z elementów linii i sekcji Divi.

filterable port.png

Zlokalizuj filtrowany moduł portfolio na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest dostępna do przeszukiwania, co oznacza, że ​​możesz również wpisać słowo "filtrowalny portfel", a następnie kliknąć "Enter", aby automatycznie wyszukać i dodać filtrowalny moduł portfela. Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany.

Przykład zastosowania: Dodanie modułu filtrowalnego portfela do strony portfela

W tym przykładzie pokażę, jak przedstawić portfolio na stronie portfolio, które obejmuje całą szerokość strony.

portfolio na całej stronie divi.jpg

Zacznijmy.

Użyj wizualnego konstruktora, aby dodać sekcję Pełnej szerokości pod nagłówkiem strony. Następnie dodaj filtrowany moduł portfela.

dodaj filtrowalny portfel divi.jpg

Zaktualizuj filtrowalne ustawienia portfela w następujący sposób:

Opcje zawartości

Liczba wiadomości: 8 Pokaż podział na strony: NIE

Opcje projektowania

Układ: Siatka zoom Ikona color: # odzysk 000000 Hover Kolor: #ffffff Tytuł tekstu: Domyślnie, pogrubienie, dużymi literami rozmiar czcionki Tytuł: wielkość 14px Tytuł Oddzielone litery 1px Meta Meta czcionki: 12px Odstępy litery: 1px

filtrowalny moduł portfolio divi.png

To wszystko!

Opcja zawartości modułu portfela

Na karcie treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze znajdzie się na tej karcie.

filtrowalny moduł portfolio divi content section.png

Tytuł portfela

Wpisz tytuł wyświetlony nad portfelem lub pozostaw go pusty, aby nie używać tytułu.

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

Dołącz kategorie

Wybierz kategorie, które chcesz wyświetlić. Projekty z kategorii, które nie są wybrane, nie pojawią się na liście projektów.

Liczba stanowisk

Sprawdź liczbę wyświetlanych projektów Pozostaw puste lub użyj 0, aby uniknąć ograniczenia kwoty.

Pokaż tytuł

Wybierz, czy tytuł każdego projektu jest wyświetlany, czy nie, po najechaniu kursorem na element projektu.

Pokaż datę

Wybierz, czy data publikacji każdego projektu jest wyświetlana, czy nie, po najechaniu kursorem na element projektu.

Kolor tła

Ustaw niestandardowy kolor tła dla swojego modułu lub pozostaw puste pole, aby użyć domyślnego koloru.

Obraz tła

Jeśli zostanie ustawiony, ten obraz będzie używany jako tło dla tego modułu. Aby usunąć obraz tła, po prostu usuń adres URL z pola ustawień. Obrazy tła będą wyświetlane nad kolorami tła, co oznacza, że ​​kolor tła nie będzie widoczny po zastosowaniu obrazu tła.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu ułatwienia identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułów interfejsu Divi Builder.

Opcje projektowania portfeli o pełnej szerokości

Na karcie Projektowanie znajdują się wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest karta, której użyjesz, aby zmienić wygląd swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

moduł projektowania divi.png

Usposobienie

Wybierz układ, którego chcesz użyć. „Siatka” wyświetli wszystkie elementy w układzie wielokolumnowym i wielorzędowym. Karuzela wyświetla elementy w jednym rzędzie kafelkowych obrazów, które przesuwają się, aby odsłonić dodatkowe elementy na liście.

Ikona powiększenia koloru

Po najechaniu kursorem na element w module portfela pojawi się ikona nakładki. Możesz dostosować kolor użyty w tej ikonie przy użyciu próbnika kolorów w tym ustawieniu.

Umieść nakładkę kolorów

Po najechaniu kursorem na element w module portfela, kolor nakładki pojawia się u góry obrazu oraz pod ikoną tekstu i tytułu portfela. Domyślnie używany jest półprzezroczysty biały kolor. Jeśli chcesz użyć innego koloru, możesz dostosować kolor za pomocą próbnika kolorów w tym ustawieniu

Ustaw wskaźnik ikony

Tutaj możesz wybrać niestandardową ikonę, która będzie wyświetlana, gdy użytkownik będzie przeglądać elementy portfolio w module.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Kolor tekstu

Tutaj możesz wybrać, czy tekst ma być jasny czy ciemny.

opcja projektowania filtrowalny moduł portfolio divi.png

Czcionka tytułu

Możesz zmienić czcionkę tekstu tytułu, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Tytułowy rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu tytułu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu tytułu, wybierz odpowiedni kolor z próbnika kolorów za pomocą tej opcji.

Odstępy liter tytułu

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułowym, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość linii wpływa na przestrzeń między każdą linią tekstu tytułu Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

filtrowalny moduł sekcji divi moduł metadonnee.png

Meta czcionki

Możesz zmienić czcionkę swojego meta tekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki Metas

Tutaj możesz dostosować rozmiar meta-tekstu. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu meta

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor meta-tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między literami Meta

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą meta-tekstu, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość Meta Line

Wysokość linii wpływa na przestrzeń między każdą linią meta-tekstu. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Użyj granicy

Włączenie tej opcji spowoduje umieszczenie granicy wokół twojego modułu. Granicę tę można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

Ta opcja wpływa na kolor twojej granicy. Wybierz niestandardowy kolor w selektorze kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie granice mają szerokość piksela 1. Możesz zwiększyć tę wartość, przeciągając suwak zasięgu lub wprowadzając wartość niestandardową w polu wprowadzania po prawej stronie suwaka. Niestandardowe jednostki miary obsługiwane, co oznacza, że ​​możesz zmienić domyślną jednostkę "px" na inną, np. Em, vh, vw itp.

Styl graniczny

Granice obsługują osiem różnych stylów: pełny, kropkowany, kropkowany, podwójny, groove, grzebień, intarsja i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

Zaawansowane opcje portfela Pełna przepustowość

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą okazać się przydatni, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

divi z możliwością filtrowania w module module forward.png section

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w Twoim dziecięcym motywie Divi lub niestandardowym arkuszu stylów CSS dodawanym do strony lub witryny internetowej przy użyciu opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Pozycje CSS w tych parametrach są już zapakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

Automatyczna karuzela

Jeśli wybrana jest opcja układu karuzelowego i chcesz, aby karuzela automatycznie się przesuwała bez konieczności klikania przez kolejnego użytkownika, włącz tę opcję i dostosuj prędkość obrotową poniżej, jeśli chcesz.

Automatyczna prędkość karuzeli

Tutaj możesz wprowadzić prędkość obrotową karuzeli, jeśli opcja "Automatyczny obrót karuzeli" jest aktywowana powyżej. Im wyższa liczba, tym dłuższa przerwa między każdym obrotem. (Np. 1000 = 1 s)

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 7
  1. Witam,
    Udało mi się mieć portfel z filtrem lub portfel o pełnej szerokości, ale pełnej szerokości nie można filtrować.
    Chciałbym móc dodać tytuł projektu do moich filtrowalnych zdjęć portfolio, jak ma to miejsce w przypadku „klasycznych” portfolio. Czy wiesz jak to zrobić ?

  2. Cześć!

    Właśnie poszedłem na Divi i natknąłem się na drogę do stworzenia strony „Reklamy”, na której moje nowe reklamy pojawiałyby się obok siebie w małych miniaturach / miniaturach, jak na stronach agencji nieruchomości. Dla informacji utworzyłem już swoje strony OGŁOSZENIA i niektóre artykuły (artykuł do reklamy), które kojarzę z kategorią OGŁOSZENIA…. ale pojawiają się w dużym formacie. Mam nadzieję, że wyjaśniłem się dobrze w mojej problematyce! W oczekiwaniu na sugestie z góry dziękuję za wyjaśnienia i porady! Dobranoc !! Z poważaniem - Jerome

    1. Witaj, jeśli korzystasz z modułu blogu, musisz dodać określony CSS, który dotyczy tego modułu. Niestety ta forma nie oferuje wielu opcji dostosowywania.

  3. Witam,

    Dziękuję za bardzo kompletny artykuł.
    Udaje mi się wyświetlić porftolio o pełnej szerokości lub portfolio z filtrem, ale z dużymi marginesami.
    Czy wiesz, czy divi może wyświetlać filtrowalne portfolio o pełnej szerokości?
    Lub wyświetlić portfel filtrowalny bez znaczących marż?

    dziękuję

  4. Witaj, naprawdę doceniam twój artykuł, ale kiedy próbuję odtworzyć ten typ układu, mam duże odstępy między moimi obrazami. Wolałbym mieć załączone obrazy jak w twoim przykładzie. Jak skonfigurować do tego moduł?

    Dziękujemy!

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
14 akcji
udział2
ćwierkanie2
Enregistrer10