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 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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 dodasz moduł Divi Person do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej 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 podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego 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 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.

osoba moduł divi.png

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.

strona o nas.jpg

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.

moduł osoba wordpress divi.png

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

Opcje zawartości

Imię i nazwisko: [Wpisz nazwisko osoby] Pozycja: [Wprowadź rozszerzenie osoby] Wprowadź adresy URL profili mediów społecznościowych
Opis: [Wpisz krótką biografię] Zdjęcie: [Wpisz 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);

zmień profil osoby divi.png

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!

moduł wyników osoba divi.jpg

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

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.

opcja zawartości divi.png

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.

Parametr design module person divi.png

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.

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

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]

moduł projektowania opcji divi.png

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 do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie 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.

Inne samouczki Divi

Ten artykuł zawiera komentarze 3

  1. Witam,
    Dziękuję za te bardzo przydatne artykuły.
    Podobnie jak adresy URL do Facebooka, Twittera, Google+ lub LinkedIn, czy wiesz, czy można dodać adres URL do swojego profilu na Instagramie? Dziękuję 🙂

  2. Salut!
    Kiedy tworzę projekt lub post i korzystam z modułu Osoba, dlaczego pole Pozycja znika, gdy przeglądam projekty lub posty za pomocą bloga lub bloku 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. Dlatego moduł Person (jak każdy inny moduł) generuje krótki kod, który można renderować tylko poprzez podgląd artykułu lub strony, a nie z modułu oferującego podgląd wspomnianego artykułu lub strony.

Zostaw komentarz

Twoj adres e-mail nie bedzie 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
19 akcji
udział10
ćwierkanie3
Enregistrer6