Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu portfela o pełnej szerokości

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. [Zalecane]

Portfolio z możliwością filtrowania Divi umożliwia przeglądanie najnowszych projektów w trybie siatki lub standardowym. Filtrowalne portfolio przypomina normalny moduł portfela, z tym wyjątkiem, że ładuje nowe projekty z żądaniem Ajax i zawiera opcje filtrowania listy projektów według kategorii. Po wybraniu określonej kategorii lista projektów jest natychmiast odświeżana z nową listą projektów wybranej kategorii.

pełna szerokość portfela divi.png

Jak dodać filtrowalny moduł portfolio na swojej stronie

Przed dodaniem filtrowalnego modułu portfolio na swojej stronie, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej 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 także kliknąć przycisk Włącz narzędzie Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

używaj konstruktora divi

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.

pełnoekranowy portfel divi.png

Znajdź moduł portfela z możliwością filtrowania na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że ​​możesz także wpisać słowo „portfolio pełnoekranowe”, a następnie kliknąć „Enter”, aby wyszukać i automatycznie dodać filtrowalny moduł portfolio! 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: dodawanie filtrowalnego modułu portfela do strony portfela

W tym przykładzie pokażę, jak dodać filtrowalny moduł portfela do strony portfela.

Podzielony portfel divi builder.jpg

Zacznijmy.

Użyj wizualnego konstruktora, aby dodać zwykłą sekcję o pełnej szerokości (kolumna 1) pod nagłówkiem strony. Następnie dodaj do portfela filtrowalny moduł portfela.

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

Opcje zawartości

Liczba artykułów: 8

Opcje projektowania

Układ: Ikona powiększenia siatki Kolor: #ffffff Wskaźnik nakładki Kolor: rgba (224,153,0,0.58) Czcionka tytułu: Domyślnie, Pogrubienie, wielkie litery Rozmiar czcionki tytułu: 14px Odstępy między literami tytułu: 1px Filtr czcionek: Domyślnie, Pogrubienie, Filtr wielkich liter Rozmiar czcionki: 14px Filtruj odstępy między literami: 1px Meta Rozmiar czcionki: 12px Meta Odstępy między literami: 1px

Opcje zaawansowane (niestandardowy CSS)

Aktywny filtr portfela: kolor: # e09900; Portfolio Tytuł: text-align: center; Portfolio Wiadomość meta: text-align: center; Pagination Active Page: color: # e09900! ważne;

moduł portfolio fullwith divi.png

To wszystko!

Filtrowalne opcje zawartości portfela

W zakładce treści 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.

moduł divi filterable portfolio full screen.png

Liczba stanowisk

Wybierz sposób wyświetlania postów, które chcesz wyświetlić, zanim lista zostanie podzielona na strony.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Uwzględnij kategorie

Wybierz kategorie, które chcesz wyświetlić. Publikacje kategorii, które nie zostaną wybrane, nie pojawią się na liście wygenerowanych publikacji.

Pokaż tytuł

W razie potrzeby wprowadź tytuł, który zostanie umieszczony nad listą projektów.

Pokaż kategorie

Wybierz, czy wyświetlać kategorię pod każdym artykułem w obszarze metadanych.

Wyświetl paginację

Ta opcja włącza / wyłącza stronicowanie. Jeśli podział na strony jest wyłączony, dla każdej kategorii będzie wyświetlana tylko jedna strona projektów.

Kolor tła

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

Obraz tła

Jeśli jest 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 pojawią się powyżej kolorów tła, co oznacza, że ​​kolor tła nie będzie widoczny po zastosowaniu obrazu tła.

Etykieta administracyjna

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Gdy używasz widoku WireFrame w Visual Builder, te etykiety pojawiają się w bloku modułu interfejsu Divi Builder.

Możliwość filtrowania projektów portfela

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Jest to karta, której użyjesz do zmiany wyglądu swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

moduł portfolio fullwidth divi section design.png

Usposobienie

Wybierz styl układu swojego portfolio. „Fullwidth” wyświetla jeden komunikat w wierszu, a „Grid” wyświetla projekty w siatce sąsiadująco z wieloma projektami w wierszu.

Kolor tekstu

Tutaj możesz wybrać, czy tekst ma być jasny, czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być wyraźny. Jeśli tło jest czyste, tekst musi być ciemny.

Czcionka tytułu

Możesz zmienić czcionkę tekstu tytułowego, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Rozmiar czcionki tytułu

Tutaj możesz dostosować rozmiar tekstu tytułu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wprowadzić wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Kolor tekstu tytułu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu tytułowego, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

Odstępy liter tytułu

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułowym, 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 swojego rozmiaru, aby zmienić typ jednostki.

moduł portfolio divi.png

Wysokość linii tytułowej

Wysokość linii wpływa na odstęp między wierszami tekstu tytułowego 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 znajduje się na prawo od 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 swojego rozmiaru, aby zmienić typ jednostki.

Filtruj czcionkę

Możesz zmienić czcionkę tekstu filtru, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Filtruj rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu filtru. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wprowadzić wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Filtruj kolor tekstu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu filtru, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

Przefiltruj odstępy między literami

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście filtru, 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 wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii filtra

Wysokość linii wpływa na odstęp między wierszami tekstu filtru 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 wejściowym znajduje się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Meta czcionki

Możesz zmienić czcionkę tekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Meta rozmiar czcionki

Tutaj możesz dostosować rozmiar swojego meta-tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wprowadzić wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu meta

Domyślnie wszystkie kolory tekstu Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor meta-tekstu, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

Odstępy między literami Meta

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą 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 wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość Meta Line

Wysokość linii wpływa na odstęp między każdą linią meta-tekstu Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wejściowym znajduje się na prawo od 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 swojego rozmiaru, aby zmienić typ jednostki.

meta portfolio module pełny ekran divi.png

Użyj granicy

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

Kolor obramowania

Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy w próbniku kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie ramki mają szerokość piksela 1. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając wartość niestandardową w polu wprowadzania po prawej stronie suwaka. Obsługiwane niestandardowe jednostki miary, co oznacza, że ​​możesz zmienić domyślną jednostkę „px” na coś innego, np. Em, vh, vw itp.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Styl graniczny

Obramowania obsługują osiem różnych stylów: bryłowy, kropkowany, kropkowany, podwójny, rowek, grzbiet, wkładka i start. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

Zaawansowane opcje filtrowalnego portfolio

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne bardziej doświadczonym projektantom stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Możesz także zastosować niestandardowe klasy i identyfikatory CSS do modułu, których można użyć do dostosowania modułu w pliku style.css motywu podrzędnego.

sekcja moduł zaawansowany portfolio fullwidth.png

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 określonych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Klasy CSS można użyć do utworzenia niestandardowego stylu CSS. Możesz dodać wiele klas oddzielonych spacją. Tych klas można używać w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny za pomocą 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 Niestandardowy CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych parametrach są już opakowane w znaczniki stylu. Wpisz reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się moduł. Możesz wyłączyć moduł indywidualnie na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
14 akcji
udział8
ćwierkanie2
Enregistrer4