Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu Portfolio

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]

Dzięki modułowi Divi Portfolio możesz pokazać swoją pracę w dowolnym miejscu na swojej stronie z dowolną strukturą kolumn. W tym samouczku pokażę, jak korzystać z modułu portfela w Divi.

Jak dodać moduł portfela Divi

Zanim dodasz moduł portfela do swojej strony, 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 wprowadzeniu programu Visual Builder można kliknąć szary przycisk plus, aby dodać nowy moduł do strony. Nowe moduły można dodawać tylko w rzędach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać linii do swojej strony.

moduł portfolio wordpress divi.png

Znajdź moduł portfolio na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest przeszukiwalna, co oznacza, że ​​możesz również wpisać słowo "portfel", a następnie kliknąć "Enter", aby wyszukać i automatycznie dodać 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: Dodanie modułu portfela do strony portfela

W tym przykładzie pokażę, jak przedstawić portfolio na stronie portfolio.

przykład portfolio wordpress.jpg

Zacznijmy.

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

portet portfolio divi.png

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

Opcje zawartości

Liczba artykułów: 8
Pokaż paginację: NIE

Opcje projektowania

Układ: siatka
Ikona powiększenia koloru: #ffffff
Hover Overlay Color: rgba (224,153,0,0.58)
Czcionka tytułu: domyślna, pogrubiona, wielka litera
Rozmiar czcionki tytułu: 14px
Odstępy między literami: 1px
Meta rozmiar czcionki: 12px
Odstępy między znakami Meta: 1px

Opcje zaawansowane (niestandardowy CSS)

Tytuł portfela:
text-align: center;

Portfolio wiadomości meta:
text-align: center;

ustawienie portfolio css divi.jpg

Ł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]

To wszystko!

Opcje zawartości 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.

portfolio divi.png

Numer artykułu

Kontrolowanie liczby wyświetlanych projektów Pozostaw puste lub użyj 0, aby nie ograniczać liczby.

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.

Pokaż tytuł

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

Pokaż kategorie

Tutaj możesz włączyć lub wyłączyć linki kategorii.

Wyświetl paginację

Tutaj możesz włączyć lub wyłączyć stronicowanie dla tego kanału.

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 modułu portfela

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.

projekt opcji divimodule portfolio.png

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]

Usposobienie

Wybierz układ, którego chcesz użyć. "Grid" wyświetli wszystkie twoje elementy w układzie wielokolumnowym i wielorzędowym. Fullwidth wyświetla każdy projekt na osobnej linii, używając dużych, nie przyciętych, szerokich obrazów.

Kolor ikony powiększenia

Po najechaniu kursorem na element w module portfela pojawi się ikona nakładki. Możesz dostosować kolor użyty dla tej ikony, korzystając z próbnika kolorów w tym ustawieniu.

Kolor warstwy na estakadzie

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

Ikona wyboru przelotu

Tutaj możesz wybrać niestandardową ikonę, która będzie wyświetlana, gdy użytkownik będzie przeglądać elementy 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 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.

Rozmiar czcionki tytułu

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.

Czcionka Metas

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ść linków w obszarze meta

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.

Ł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]

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

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.

opcja css module portfolio.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 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.

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, chciałbym wiedzieć, czy można mieć prezentację w postaci siatki z trzema kolumnami, a nie czterema. Domyślnie moje projekty są wyrównane poziomo o cztery, a ponieważ chciałem ustawić sześć, chciałbym mieć prezentację w trzech kolumnach i dwóch wierszach. Zagłębiłem się w opcje, ale nie znalazłem nic na ten temat…
    Z góry dziękuję za pomoc.

  2. Witaj, czy możesz mi wyjaśnić, dlaczego pomiędzy poszczególnymi kolumnami mojego portfolio jest bardzo duża przestrzeń pod elementami. Nie po lewej i po prawej, ale raczej pod rzędami. Dziękuję bardzo.

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
8 akcji
udział2
ćwierkanie2
Enregistrer4