Przejdź do głównej treści

Divi Tutorial: Jak korzystać z modułu osoby Divi Builder

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ł Divi Person to najlepszy sposób na utworzenie osobistego profilu profilu. Jest to doskonały moduł do wykorzystania na stronach O mnie lub w członkach zespołu, w których chcesz stworzyć biografię osób. Moduł ten łączył tekst, zdjęcia i linki z mediów społecznościowych w jeden spójny moduł.

Jak skonfigurować moduł Divi Person

Zanim dodasz moduł Divi Person 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 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 lignes i działy Divi.

osoba moduł divi.png

Znajdź moduł osoby 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 "osoba", a następnie kliknąć enter, aby wyszukać i automatycznie dodać moduł Person! 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 użycia przykładu: Dodanie sekcji "Nasz zespół" do strony "O nas"

Strona O nas jest dobrym miejscem do wprowadzenia członków zespołu za pomocą modułu Person. To dodaje osobistego charakteru i może pomóc w budowaniu zaufania do nowych klientów.

W tym przykładzie pokażę, jak używać modułu Osoba, aby dodać sekcję „Nasz zespół” do strony o małej firmie. Użyję trzyosobowego układu, trzech kolumn, dzięki którym sekcja będzie bardziej zwarta i będzie pasować do ogólnego wyglądu strony.

strona o us.jpg

Korzystając z programu Visual Builder, wstaw nową standardową sekcję z rzędem trzech kolumn (1 / 3 1 / 3 1 / 3). Następnie dodaj moduł Person do pierwszej kolumny.

moduł osoba wordpress divi.png

Zaktualizuj ustawienia modułu Person w następujący sposób:

Opcje zawartości

Imię i nazwisko: [Podaj imię osoby] Pozycja: [Podaj pozycję osoby] Podaj adresy URL profili mediów społecznościowych
Opis: [Wpisz krótką biografię] Zdjęcie: [Wpisz obraz 600 x 600]

Opcje projektowania

Ikona koloru: # fcbf00
Kursor ikony Kolor: # e0a831
Czcionka nagłówka: Roboto, pogrubiony, skorzystaj z
Rozmiar czcionki nagłówka: 30px
Kolor tekstu nagłówka: # 505050
Odstępy List nagłówka: 1px
Wysokość linii nagłówka: 1.5em
Rozmiar czcionki ciała: 18px
Rozmiar linii ciała: 1.4em
Niestandardowe dopełnienie: 15px w górę, 15px w prawo, 15px w dół, 15px w lewo

Opcje zaawansowane (niestandardowy CSS)

Główny element:
-webkit-box-shadow: 0 1px 5px rgba (0, 0, 0, 0.2)
-moz-box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);
box-shadow: 0 1px 5px rgba (0, 0, 0, 0,2);

zmień profil osoby divi.png

Zapisz ustawienia

Teraz dwukrotnie zduplikuj utworzony moduł Osoby i przeciągnij zduplikowane moduły do ​​drugiej i trzeciej kolumny wiersza. Ponieważ projekt został odroczony dla każdego z duplikatów modułów "Person", wystarczy zaktualizować zawartość obrazu, tytułu, lokalizacji, adresów URL mediów społecznościowych i opisu. osoby.

To wszystko!

Wynik modułu osoba 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]

Opcje zawartości osoby

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.

opcja zawartości divi.png

imię

To jest imię osoby, którą prezentujesz. Nazwa jest wyświetlana u góry modułu w większym tekście.

Pozycja

Pozycja jest wyświetlana pod nazwą w mniejszym tekście. Jest to często używane w odniesieniu do profesjonalnej pozycji osoby w zespole biznesowym. Na przykład Nick Roach, "Projektant graficzny".

Adres URL profilu Facebook

Wprowadź adres URL na swojej stronie na Facebooku lub pozostaw to pole puste, aby wyłączyć ikonę Facebooka.

Adres URL profilu na Twitterze

Wprowadź adres URL na swojej stronie Twitter lub pozostaw to pole puste, aby wyłączyć ikonę Twittera.

URL profilu Google+

Wprowadź adres URL na swojej stronie Google+ lub pozostaw to pole puste, aby wyłączyć ikonę Google+.

Adres URL profilu LinkedIn

Wprowadź adres URL na swojej stronie LinkedIn lub pozostaw to pole puste, aby wyłączyć ikonę LinkedIn.

Opis

Tutaj wprowadź treść głównego tekstu dla twojego modułu.

Adres URL obrazu

Tutaj możesz pobrać zdjęcie do wykorzystania w bio.

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 Person

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.

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]

Parametr design module person divi.png

Kolor ikony

Ta opcja kontroluje kolor ikon mediów społecznościowych pojawiających się w profilu każdej osoby. Domyślnie te ikony są szare, kup, że możesz zmienić ten kolor za pomocą tego ustawienia.

Kolor ikony na estakadzie

Możesz także zmienić kolor ikony mediów społecznościowych na hover. Wybierz żądany kolor za pomocą próbnika kolorów w tym ustawieniu.

Kolor tekstu

Tutaj możesz wybrać wartość swojego tekstu. Jeśli pracujesz na ciemnym tle, tekst powinien być włączony. Jeśli pracujesz z czystym tłem, twój tekst powinien być ciemny.

Czcionka nagłówka

Możesz zmienić czcionkę tekstu nagłówka, 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 nagłówka

Tutaj możesz zmienić rozmiar tekstu w nagłówku. 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 nagłówka

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

Rozstaw nagłówków

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście nagłówka, 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 nagłówka

Wysokość linii wpływa na przestrzeń między wierszami tekstu nagłówka Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zasięgu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w linii. pole wprowadzania 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 ciała

Możesz zmienić czcionkę swojego ciała, 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 ciała

Tutaj możesz dostosować rozmiar tekstu swojego ciała. 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 w kolorze

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

Rozstawianie liter ciała

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście, 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 ciała

Wysokość linii wpływa na przestrzeń między wierszami w twoim ciele Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądaną wielkość 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.

Margines niestandardowy

Margines to przestrzeń dodana na zewnątrz modułu, pomiędzy modułem a następnym elementem powyżej, poniżej lub z lewej i prawej strony. Możesz dodać niestandardowe wartości marginesów do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie te wartości są mierzone w pikselach, ale można wprowadzić niestandardowe jednostki miary w polach wejściowych.

Niestandardowe dopełnienie

Wypełnienie to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości wypełnienia do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie te wartości są mierzone w pikselach, ale można wprowadzić niestandardowe jednostki miary w polach wejściowych.

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

Zaawansowane opcje modułu Person

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.

moduł projektowania opcji divi.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.

Animacja

Domyślnie obrazy są animowane po przewinięciu strony. Tutaj możesz wybrać kierunek animacji lub wyłączyć ją.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub komputerach osobistych. 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 2
  1. Salut!
    Kiedy tworzę projekt lub publikację i używam modułu Osoba, dlaczego pole Pozycja znika, gdy przeglądam projekty lub publikacje za pomocą bloga lub modułu blogu z możliwością filtrowania?

    Jak wyświetlić pole Pozycja osoby w widoku Siatka blogów?

    Dzięki!

    1. Dobry wieczór i dziękuję za czekanie.
      Zazwyczaj moduły wyszukiwania nie wykonują skrótów. W związku z tym moduł Person (jak każdy inny moduł) generuje krótki kod, który można wyświetlić tylko poprzez podgląd artykułu lub strony, a nie z modułu, który oferuje podgląd wspomnianego artykułu lub strony.

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
19 akcji
udział10
ćwierkanie3
Enregistrer6