Moduł portfela o pełnej szerokości w Motyw Divi, działa tak samo jak normalny moduł Portfolio, z wyjątkiem tego, że wyświetla projekt w pięknym trybie Fullwdth. Zawiera również kilka unikalnych nowych konfiguracji: Grid i Carousel. Moduł działa poprzez wyświetlanie listy Twoich najnowszych projektów i może być używany przez projektantów i artystów, którzy chcą wyświetlić galerię swoich najnowszych prac.
Jak dodać moduł Portfolio Fullwidth do swojej strony
Zanim będziesz mógł dodać pełny moduł portfolio do swojej strony, musisz najpierw wskoczyć do Divi Builder. Kiedyś Motyw Divi zainstalowany na twoim Witryna internetowa, zauważysz przycisk Użyj Divi Builder nad edytorem postów 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 także kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoje Witryna internetowa na pierwszym planie, jeśli jesteś zalogowany do pulpitu WordPress.
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 w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony. Mamy świetne samouczki na temat korzystania z elementów linii i sekcji Divi.
Znajdź filtrowalny moduł portfela na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że można również wpisać słowo „portfolio z możliwością filtrowania”, a następnie kliknąć „Enter”, aby automatycznie znaleźć i dodać moduł portfolio z możliwością filtrowania. 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 filtrującego modułu portfela do strony portfela
W tym przykładzie pokażę, jak zaprezentować portfolio na stronie portfolio, która obejmuje całą szerokość strony.
Zacznijmy.
Użyj kreatora wizualnego, aby dodać sekcję o pełnej szerokości poniżej nagłówka strony. Następnie dodaj filtrowalny moduł portfolio.
Zaktualizuj filtrowalne ustawienia portfela w następujący sposób:
Opcje zawartości
Numer wiadomości: 8 Wyświetlanie paginacji: NIE
Opcje projektowania
Układ: Powiększenie siatki Kolor ikony: # 000000 Kolor nakładki po najechaniu: #ffffff Czcionka tytułu: domyślna, pogrubiona, wielkie litery Rozmiar czcionki tytułu: 14 pikseli Odstępy między literami w tytule: 1 piksel Rozmiar czcionki meta: 12 pikseli Odstępy meta litery: 1px
To wszystko!
Opcja zawartości modułu portfela
W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.
Tytuł portfela
Wprowadź tytuł wyświetlany nad portfolio lub pozostaw go pustym, aby nie używać tytułu.
Uwzględnij kategorie
Wybierz kategorie, które chcesz wyświetlić. Projekty z niewybranych kategorii nie pojawią się na liście projektów.
Liczba stanowisk
Kontroluj liczbę wyświetlanych projektów Pozostaw puste lub użyj 0, aby nie ograniczać kwoty.
Pokaż tytuł
Wybierz, czy tytuł każdego projektu ma być wyświetlany po najechaniu myszą na element projektu.
Pokaż datę
Wybierz, czy data publikacji każdego projektu ma być wyświetlana po umieszczeniu wskaźnika myszy nad elementem projektu.
Kolor tła
Zdefiniuj niestandardowy kolor tła dla swojego modułu lub pozostaw puste, aby użyć koloru domyślnego.
Obraz tła
Jeśli jest ustawiona, 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 pojawią się na wierzchu kolorów 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 łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.
Opcje projektowania portfeli o pełnej szerokości
Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany czegokolwiek.
Usposobienie
Wybierz układ, którego chcesz użyć. „Siatka” wyświetli wszystkie Twoje elementy w układzie z wieloma kolumnami i wieloma wierszami. Karuzela wyświetla elementy w jednym rzędzie sąsiadujących obrazów, które przesuwają się, aby odsłonić dodatkowe elementy na liście.
Ikona Zoom Color
Po najechaniu kursorem na pozycję w module portfolio pojawia się ikona nakładki. Możesz dostosować kolor używany z tej ikony za pomocą próbnika kolorów w tym ustawieniu.
Umieść nakładkę kolorów
Gdy najedziesz kursorem na element w module portfolio, kolor nakładki pojawi się u góry obrazu oraz poniżej tekstu i ikony tytułu portfolio. 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
Selektor ikon kursora
Tutaj możesz wybrać niestandardową ikonę, która będzie wyświetlana, gdy odwiedzający najedzie kursorem na pozycje portfolio w module.
Kolor tekstu
Tutaj możesz wybrać, czy tekst ma być jasny, czy ciemny.
Czcionka tytułu
Możesz zmienić czcionkę tekstu tytułu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.
Tytułowy rozmiar czcionki
Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Kolor tekstu tytułu
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu w tytule, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy liter tytułu
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułu, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Wysokość linii tytułowej
Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu tytułu.Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Meta czcionki
Możesz zmienić czcionkę swojego metatekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.
Rozmiar czcionki Metas
Tutaj możesz dostosować rozmiar swojego meta-tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Kolor tekstu meta
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor swojego metatekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy między literami Meta
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą swojego meta-tekstu, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Wysokość Meta Line
Wysokość wiersza wpływa na odstęp między wierszami w meta-tekście Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Użyj granicy
Włączenie tej opcji spowoduje umieszczenie ramki wokół modułu. To obramowanie można dostosować za pomocą następujących parametrów warunkowych.
Kolor obramowania
Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy z próbnika kolorów, aby zastosować go do obramowania.
Szerokość granicy
Domyślnie krawędzie mają szerokość 1 piksela. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając niestandardową wartość w polu wprowadzania po prawej stronie suwaka. Obsługiwane są niestandardowe jednostki miary, co oznacza, że możesz zmienić domyślną jednostkę z „px” na inną, np. Em, vh, vw itp.
Styl graniczny
Krawędzie obsługują osiem różnych stylów: jednolity, kropkowany, kropkowany, podwójny, rowek, grzbiet, nakładka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.
Zaawansowane opcje portfela Pełna szerokość
Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.
Identyfikator CSS
Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.
Klasa CSS
Wprowadź opcjonalne klasy CSS, których chcesz użyć w tym module. Klasy CSS można używać do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas, oddzielonych spacją. Klasy te mogą być używane w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny. Witryna internetowa korzystając z opcji motywu Divi lub ustawień strony Divi Builder.
Niestandardowy CSS
Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.
Automatyczna karuzela
Jeśli wybrana jest opcja układu karuzeli i chcesz, aby karuzela przesuwała się automatycznie bez konieczności klikania przez gościa następnego przycisku, włącz tę opcję i dostosuj prędkość wirowania poniżej, jeśli chcesz.
Automatyczna prędkość karuzeli
Tutaj możesz wskazać prędkość obrotu karuzeli, jeśli opcja „Automatyczne obracanie 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 umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]
Inne samouczki Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Witam,
Udaje mi się mieć portfel z możliwością filtrowania lub portfel o pełnej szerokości, ale pełnej szerokości nie można filtrować.
Chciałbym móc dodać tytuł danego projektu do mojego filtrowalnego obrazu portfolio, tak jak ma to miejsce w przypadku „klasycznych” portfeli. Czy wiesz jak to zrobić ?
Cześć!
Właśnie poszedłem do Divi i natknąłem się na drogę do stworzenia strony „Reklamy”, na której moje nowe reklamy będą wyświetlane obok siebie w małych miniaturach / miniaturach, tak jak na stronach agencji nieruchomości. Dla informacji utworzyłem już swoją stronę REKLAMY i kilka artykułów (jeden artykuł na ogłoszenie), które kojarzę z kategorią REKLAMY…. ale pojawiają się w dużym formacie. Mam nadzieję, że dobrze wytłumaczyłem się w mojej problematyce! Czekając na sugestie, z góry dziękujemy za wyjaśnienia i rady! Dobranoc !! Z poważaniem - Jerome
Witaj, jeśli korzystasz z modułu bloga, musisz dodać konkretny CSS, który ma zastosowanie do tego modułu. Niestety ta forma nie oferuje wielu opcji dostosowywania.
Witam,
Dziękuję za bardzo kompletny artykuł.
Udaje mi się wyświetlić portfolio o pełnej szerokości lub portfolio z możliwością filtrowania, ale z dużymi marginesami wokół niego.
Czy wiesz, czy divi może wyświetlać portfolio z możliwością filtrowania o pełnej szerokości?
Albo wyświetlić filtrowalny portfel bez ważnych marż?
dziękuję
Witam Delphine,
Nigdy nie testowałem, ale skontaktuję się z Tobą, jeśli będę miał odpowiedź.
Witam, bardzo podobał mi się twój artykuł, ale kiedy próbuję odtworzyć tego typu układ, między moimi obrazami są duże odstępy. Wolałbym, aby obrazy były połączone, jak w twoim przykładzie. Jak skonfigurować moduł do tego?
Dziękujemy!
Witaj Valerie,
Czy próbowałeś wyłączyć wszystkie wtyczki tylko po to, aby sprawdzić, czy wyświetlacz się poprawia?