Jak stworzyć drzewo genealogiczne z ustawieniami transformacji Divi

Czy kiedykolwiek próbowałeś stworzyć drzewo genealogiczne dla swojej witryny, ale nie wiesz, jak do tego podejść? Cóż, w dzisiejszym samouczku Divi pokażemy ci dokładnie, jak to zrobić. Oprócz tworzenia drzewa genealogicznego upewniamy się również, że pozostaje ono responsywne na wszystkich rozmiarach ekranu. Po zakończeniu tworzenia drzewa genealogicznego zawsze będziesz mógł modyfikować obrazy, tekst i projekt zgodnie z własnymi preferencjami i przygotować je do uruchomienia! Chcesz od razu zacząć korzystać z tego projektu drzewa genealogicznego? Będziesz mógł bezpłatnie pobrać plik JSON i dodać go do dowolnej tworzonej witryny!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ drzewa genealogicznego ZA DARMO

Aby położyć swoje ręce na darmowym układzie drzewa genealogicznego, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Subskrybuj nasz kanał YouTube

Pozycjonowanie członków rodziny

Dodaj nową sekcję

Rozstaw

Zacznijmy tworzyć! Pierwszą rzeczą, którą musimy zrobić, to dodać nową zwykłą sekcję do strony, nad którą pracujemy. Otwórz ustawienia przekroju i dodaj niestandardowe górne i dolne wyściółki, używając szerokości rzutni.

• Górna wyściółka: 8vw
• Dolna wyściółka: 8vw

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając pierwszy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość sekcji i ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Aby dodać białe znaki po lewej i prawej stronie wiersza na komputerze, dodamy niestandardowe dopełnienie lewego i prawego obszaru za pomocą jednostki szerokości widocznego obszaru.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 15vw (komputer stacjonarny), 0vw (tablet i telefon)
• Prawa wyściółka: 15vw (komputer stacjonarny), 0vw (tablet i telefon)

Dodaj moduł obrazu do kolumny

Załaduj obrazek

Czas zacząć dodawać moduły! Pierwszym, którego potrzebujemy, jest moduł obrazu. Prześlij obraz o szerokości i wysokości „180px”.

Wyrównanie

Następnie przejdź do zakładki projekt i zmień wyrównanie obrazu.

• Wyrównanie obrazu: Środek

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru.

• Szerokość: 49%
• Wyrównanie modułu: Środek

Granica

I zamień obraz w okrąg, dodając wysoką wartość do każdego z rogów w ustawieniach obramowania. Używamy „20vw”, ale możesz użyć dowolnej wysokiej liczby.

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Przejdźmy do następnego modułu, którym jest moduł tekstowy. Tutaj dodaj imię członka rodziny.

Kolor tła

Następnie przejdź do ustawień tła i zmień kolor tła na biały.

• Kolor tła: #ffffff

Ustawienia tekstu

Następnie zmodyfikuj ustawienia tekstu. Jeśli chcesz stworzyć inny wygląd i styl drzewa genealogicznego, możesz pobawić się tymi ustawieniami.

• Czcionka tekstu: Otwórz Sans
• Kolor tekstu: #000000
• Rozmiar tekstu: 0,8vw (komputer), 1,2vw (tablet), 1,9vw (telefon)
• Wysokość linii tekstu: 0.4em
• Orientacja tekstu: Środek

Rozstaw

Przejdź do ustawień odstępów i dodaj niestandardowe wartości marginesów i dopełnienia. Te wartości pomogą nam ukształtować moduł tekstowy i sprawić, że nieznacznie nałoży się na moduł obrazu.

• Górny margines: -0,5vw
• Lewy margines: 1vw
• Prawy margines: 1vw
• Górna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 5vw (telefon)
• Dolna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 5vw (telefon)

Granica

Przejdź do ustawień obramowania i dodaj również górną granicę.

• Szerokość górnej krawędzi: 5px
• Kolor górnej krawędzi: #000000

Cień Pudełka

Wraz z Box Shadow, aby stworzyć głębię na stronie.

• Pozycja pionowa cienia pudełka: 10px
• Siła rozmycia cieni w pudełku: 50px
• Kolor cienia: rgba(0,0,0,0.17)

Indeks Z

Aby upewnić się, że moduł tekstowy pozostaje na górze modułu obrazu, zwiększymy indeks Z w ustawieniach widoczności modułu tekstowego.

• Indeks Z: 2

Klonuj rząd trzy razy

Gdy skończysz tworzyć pierwszy wiersz i modyfikować wszystkie znajdujące się w nim moduły, możesz sklonować wiersz trzy razy. Pomoże nam to zaoszczędzić czas w kolejnych krokach samouczka. Każdy z tych wierszy zostanie użyty do stworzenia innego poziomu w drzewie genealogicznym.

Dostosuj rząd nr 1

Sklonuj oba moduły 7 razy

Zacznijmy dostosowywać pierwszy poziom drzewa genealogicznego! Przełącz się na tryb szkieletowy i sklonuj dwa moduły w rzędzie 7 razy. Gdy skończysz, zaplecze Twojego wiersza powinno wyglądać tak:

Główny element kolumny CSS

Zamieniamy całą kolumnę w siatkę. W sumie w Twojej kolumnie powinno być 16 modułów. Umieścimy te 16 modułów w 8 kolumnach siatki. Oznacza to, że każda z 8 kolumn siatki będzie zawierać 2 moduły; jeden moduł obrazu i jeden moduł tekstowy. Otwórz ustawienia wiersza pierwszego wiersza i dodaj następujące wiersze kodu CSS do głównego elementu kolumny:

display: grid;
grid-template-columns: repeat(8, 12.5%);

Dostosuj rząd nr 2

Sklonuj oba moduły 3 razy

Do drugiego rzędu! Tutaj zamierzamy sklonować oba moduły 3 razy.

Główny element kolumny

Zamieniamy kolumnę w siatkę z 4 kolumnami siatki, dodając następujące wiersze kodu CSS do głównego elementu kolumny w wierszu:

display: grid;
grid-template-columns: repeat(4, 25%);

Powodem, dla którego stosujemy to podejście, zamiast po prostu wybierać istniejącą strukturę kolumn wierszy z 4 kolumnami, jest to, że chcemy, aby wszystko pozostało w 100% responsywne na mniejszych rozmiarach ekranu.

Dostosuj wiersz nr 3

Sklonuj oba moduły

Do trzeciego rzędu! Sklonuj każdy moduł raz.

Główny element kolumny

Następnie dodaj następujące wiersze kodu CSS do głównego elementu kolumny:

display: grid;
grid-template-columns: repeat(2, 50%);

Dostosuj wiersz nr 4

Rozstaw wierszy

Do następnego i ostatniego rzędu! Tutaj jedyne, co musimy zrobić, to zmodyfikować wartości dopełnienia wierszy.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 31vw
• Prawa wyściółka: 31vw

Łączenie członków rodziny za pomocą modułów obrazu

Dodaj wiersz nr 1

Struktura kolumny

Teraz, gdy ustawiliśmy wszystkich członków rodziny, możemy zacząć ich łączyć! Aby to zrobić, dodaj nowy wiersz między pierwszym a drugim wierszem.

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień wartości rozmiaru.

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 15vw (komputer stacjonarny), 0vw (tablet i telefon)
• Prawa wyściółka: 15vw (komputer stacjonarny), 0vw (tablet i telefon)

Dodaj moduł obrazu do kolumny

Prześlij ilustrację

Następnie dodaj moduł obrazu i prześlij ilustrację, którą znajdziesz w folderze, który pobrałeś na początku tego postu.

Rozmiary

Przejdź do ustawień rozmiaru modułu obrazu i włącz opcję „Wymuś pełną szerokość”.

• Wymuś pełną szerokość: tak

Rozstaw

Upewnij się, że wyłączyłeś opcję „Pokaż przestrzeń pod obrazem” w ustawieniach odstępów.

• Pokaż przestrzeń pod obrazem: Nie

Klonuj rząd dwa razy i zmień swoją pozycję

Po zakończeniu modyfikowania wiersza i znajdującego się w nim modułu obrazu, sklonuj go dwukrotnie. Umieść duplikaty odpowiednio:

Dostosuj rząd nr 1

Klonuj moduł obrazu trzy razy

Wróć do pierwszego rzędu i sklonuj moduł 3 razy.

Główny element kolumny

Umieść te moduły obrazu w siatce z 4 kolumnami siatki, dodając następujące wiersze kodu CSS do głównego elementu kolumny wiersza:

display: grid;
grid-template-columns: repeat(4, 25%);

Dostosuj rząd nr 2

Moduł klonowania obrazu

Przejdź do drugiego rzędu i sklonuj moduł obrazu raz.

Główny element kolumny

Umieść oba moduły w siatce z dwiema kolumnami siatki, dodając następujące wiersze kodu CSS do głównego elementu kolumny wiersza:

display: grid;
grid-template-columns: repeat(2, 50%);

Dostosuj wiersz nr 3

Zmień odstępy

Przejdź do następnego i ostatniego duplikatu. Tutaj jedyne, co musisz zrobić, to zmienić niestandardowe wartości dopełnienia i gotowe!

• Górna wyściółka: 0px
• Dolna wyściółka: 0px
• Lewa wyściółka: 27vw
• Prawa wyściółka: 27vw

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy Ci, jak stworzyć nowoczesne drzewo genealogiczne z Divi! Drzewo genealogiczne, które odtworzyliśmy, wygląda świetnie na wszystkich rozmiarach ekranu. Na początku tego samouczka można było również bezpłatnie pobrać plik JSON i od razu zacząć go używać. Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś komentarz w sekcji komentarzy poniżej!