Moduł Divi Person to najlepszy sposób na utworzenie osobistego bloku profilu. To świetny dodatek do wykorzystania na stronach O mnie lub tych, które zawierają członków zespołu, na których chcesz utworzyć biografię poszczególnych osób. Ten moduł łączył tekst, obrazy i linki do mediów społecznościowych w jeden spójny moduł.

Jak skonfigurować moduł Divi Person

Zanim będziesz mógł dodać moduł Divi Person do swojej strony, musisz najpierw przejść 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 lignes i działy przez Divi.

Znajdź moduł osoby 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 „osoba”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł Osoba! 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 sekcji „Nasz zespół” do strony O nas

Strona o nas to dobre miejsce na przedstawienie członków swojego zespołu za pomocą modułu Person. Dodaje osobistego charakteru i może pomóc w budowaniu zaufania wśród 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. Będę używać trzyosobowego układu trzech kolumn, dzięki czemu sekcja będzie bardziej zwarta i dopasowana do ogólnego projektu strony.

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

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

Opcje zawartości

Imię i nazwisko: [wpisz imię osoby]
Stanowisko: [Wpisz rozszerzenie osoby]
Wprowadź adresy URL profili mediów społecznościowych
Opis: [Wprowadź krótką biografię]
Obraz: [Zrób zdjęcie 600 x 600]

Opcje projektowania

Ikona koloru: # fcbf00
Kolor ikony kursora: # e0a831
Czcionka nagłówka: Roboto, pogrubienie, dźwignia w
Rozmiar czcionki nagłówka: 30px
Kolor tekstu nagłówka: # 505050
Odstępy między nagłówkami liter: 1 piks
Wysokość wiersza nagłówka: 1.5 em
Rozmiar czcionki w treści: 18 pikseli
Rozmiar linii ciała: 1.4em
Niestandardowe wypeł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);

Zapisz ustawienia

Teraz zduplikuj dwukrotnie utworzony moduł Person i przeciągnij zduplikowane moduły do ​​drugiej i trzeciej kolumny w wierszu. Ponieważ projekt został przeniesiony dla każdego ze zduplikowanych modułów „Person”, wszystko, co musisz zrobić, to zaktualizować zawartość o obraz, tytuł, stanowisko, adresy URL mediów społecznościowych i opis. osoby.

To wszystko!

Opcje zawartości osoby

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.

Imię

To jest imię osoby, którą przedstawiasz. Nazwa jest wyświetlana w górnej części modułu większym tekstem.

Pozycja

Pozycja jest wyświetlana pod nazwą mniejszą czcionką. Jest to często używane w odniesieniu do stanowiska zawodowego osoby w zespole korporacyjnym. Na przykład Nick Roach, „Grafik”.

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 na Twitterze lub pozostaw to pole puste, aby wyłączyć ikonę Twittera.

URL profilu Google+

Wpisz 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 biografii.

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

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.

Kolor ikony

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

Kolor ikony po najechaniu kursorem

Możesz także zmienić kolor po najechaniu na ikony mediów społecznościowych. 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 na jasnym tle, tekst powinien być ciemny.

Czcionka nagłówka

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

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

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

Odstępy między literami w nagłówku

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 nagłówka, 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ść wiersza nagłówka

Wysokość wiersza wpływa na odstęp między każdym wierszem tekstu nagłówka.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 pole wprowadzania 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.

Czcionka ciała

Możesz zmienić swoją czcionkę główną, 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 ciała

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

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

Rozstawianie liter ciała

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, 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 ciała

Wysokość linii wpływa na odstęp pomiędzy każdym wierszem tekstu w Twoim ciele 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.

Margines niestandardowy

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

Niestandardowe wypełnienie

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

Zaawansowane opcje modułu Person

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.

Animacja

Domyślnie obrazy są animowane podczas przewijania strony. Tutaj możesz wybrać kierunek animacji lub ją dezaktywować.

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, eliminując pewne 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