Cum să creați un arbore genealogic cu setările de transformare ale lui Divi

Ați încercat vreodată să creați un arbore genealogic pentru site-ul dvs., dar nu știați exact cum să îl abordați? Ei bine, în tutorialul Divi de astăzi, vă vom arăta exact cum să faceți asta. Pe lângă crearea arborelui genealogic, ne asigurăm, de asemenea, că acesta rămâne receptiv pe toate dimensiunile ecranului. Odată ce ați terminat de creat arborele genealogic, veți putea oricând să modificați imaginile, textul și designul în funcție de preferințele dvs. și să le pregătiți pentru difuzare! Doriți să începeți imediat cu acest design al arborelui genealogic? Veți putea descărca fișierul JSON gratuit și îl puteți adăuga la orice site web pe care îl creați!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT aspectul arborelui genealogic

Pentru a pune mâna pe aspectul gratuit al arborelui genealogic, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Abonați-vă la canalul nostru Youtube

Poziționarea membrilor familiei

Adăugați o secțiune nouă

Spațiere

Să începem să creăm! Primul lucru pe care trebuie să-l facem este să adăugăm o nouă secțiune obișnuită la pagina la care lucrăm. Deschideți setările secțiunii și adăugați câteva căptușeli personalizate de sus și de jos folosind lățimea ferestrei.

• Căptușeală superioară: 8vw
• Căptușeală inferioară: 8vw

Adăugați rândul # 1

Structura coloanei

Continuați adăugând primul rând în secțiunea dvs. utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a secțiunii și a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Pentru a adăuga spațiu alb în partea stângă și dreapta a rândului de pe desktop, vom adăuga câteva umpluturi personalizate la stânga și la dreapta folosind unitatea de lățime a ferestrei.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Căptușire stângă: 15vw (desktop), 0vw (tabletă și telefon)
• Căptușeală dreaptă: 15vw (desktop), 0vw (tabletă și telefon)

Adăugați modulul de imagine în coloană

Incarca imaginea

E timpul să începeți să adăugați module! Primul de care avem nevoie este un modul de imagine. Încărcați o imagine cu lățimea și înălțimea de „180 px”.

Aliniere

Apoi, accesați fila de proiectare și modificați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Modificați setările de dimensionare în continuare.

• Lățime: 49%
• Alinierea modulului: centru

Frontieră

Și transformați imaginea într-un cerc adăugând o valoare mare la fiecare dintre colțurile din setările de margine. Folosim „20vw”, dar puteți folosi orice număr mare doriți.

Adăugați un modul de text în coloană

Adauga continut

Treceți la modulul următor, care este un modul de text. Adăugați aici numele membrului familiei.

Culoare de fundal

Apoi, accesați setările de fundal și schimbați culoarea de fundal în alb.

• Culoare fundal: #ffffff

Setări text

Modificați setările de text în continuare. Dacă doriți să creați un alt aspect pentru arborele genealogic, nu ezitați să vă jucați cu aceste setări.

• Font text: Deschideți Sans
• Culoarea textului: # 000000
• Dimensiune text: 0,8vw (desktop), 1,2vw (tabletă), 1,9vw (telefon)
• Înălțimea liniei de text: 0.4em
• Orientare text: centru

Spațiere

Treceți la setările de spațiere și adăugați câteva marje personalizate și valori de umplere. Aceste valori ne vor ajuta să modelăm modulul text și să îl suprapunem ușor pe modulul imagine.

• Marja superioară: -0,5vw
• Marja stângă: 1vw
• Marja dreaptă: 1vw
• Căptușeală superioară: 2vw (desktop), 4vw (tabletă), 5vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 4vw (tabletă), 5vw (telefon)

Frontieră

Treceți la setările de margine și adăugați și o margine de sus.

• Lățimea marginii superioare: 5 px
• Culoarea chenarului superior: # 000000

Box Shadow

Împreună cu o umbră de cutie pentru a crea adâncime pe pagină.

• Box Shadow Vertical Position: 10 px
• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0,17)

Indicele Z

Pentru a ne asigura că modulul de text rămâne deasupra modulului de imagine, vom mări indexul Z în setările de vizibilitate ale modulului de text.

• Indicele Z: 2

Clone Row de trei ori

După ce ați terminat crearea primului rând și modificarea tuturor modulelor din acesta, puteți continua și clona rândul de trei ori. Acest lucru ne va ajuta să economisim timp în următorii pași ai tutorialului. Fiecare dintre aceste rânduri va fi utilizat pentru a crea un nivel diferit în arborele genealogic.

Personalizați rândul # 1

Clonați ambele module de 7 ori

Să începem să personalizăm primul nivel al arborelui genealogic! Treceți la modul wireframe și clonați cele două module din rândul dvs. de 7 ori. După ce ați terminat, backend-ul rândului dvs. ar trebui să arate astfel:

Coloana Element principal CSS

Transformăm întreaga coloană într-o grilă. În total, ar trebui să existe 16 module în coloana dvs. Vom plasa aceste 16 module în 8 coloane de grilă. Aceasta înseamnă că fiecare dintre cele 8 coloane de grilă va conține 2 module; un modul de imagine și un modul de text. Deschideți setările rândului din primul rând și adăugați următoarele linii de cod CSS la elementul principal al coloanei:

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

Personalizați rândul # 2

Clonați ambele module de 3 ori

Pe al doilea rând! Aici, vom clona ambele module de 3 ori.

Coloana Element principal

Transformăm coloana într-o grilă cu 4 coloane de grilă prin adăugarea următoarelor linii de cod CSS la elementul principal al coloanei rândului:

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

Motivul pentru care folosim această abordare, în loc să alegem doar o structură de coloane de rânduri existente cu 4 coloane, este că dorim ca totul să rămână 100% receptiv la dimensiuni mai mici de ecran.

Personalizați rândul # 3

Clonați ambele module

Pe al treilea rând! Clonați fiecare modul odată.

Coloana Element principal

Apoi, adăugați următoarele linii de cod CSS la elementul principal al coloanei:

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

Personalizați rândul # 4

Spațierea rândurilor

Trecem la următorul și ultimul rând! Aici, singurul lucru pe care trebuie să-l facem este să modificăm valorile de umplere a rândurilor.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Garnitura stânga: 31vw
• Garnitura dreapta: 31vw

Conectarea membrilor familiei utilizând modulele de imagine

Adăugați rândul # 1

Structura coloanei

Acum, că am aliniat toți membrii familiei, putem începe să îi conectăm! Pentru aceasta, adăugați un rând nou între primul și al doilea rând.

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați valorile de dimensionare.

• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Accesați setările de spațiere următoare și adăugați câteva valori de umplere personalizate.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Căptușire stângă: 15vw (desktop), 0vw (tabletă și telefon)
• Căptușeală dreaptă: 15vw (desktop), 0vw (tabletă și telefon)

Adăugați modulul de imagine în coloană

Încărcați ilustrația

Apoi, adăugați un modul de imagine și încărcați ilustrația pe care o puteți găsi în folderul pe care l-ați descărcat la începutul acestei postări.

Dimensionare

Accesați setările de dimensionare ale modulului de imagine și activați opțiunea „Forțează lățimea completă”.

• Forțează lățimea completă: Da

Spațiere

Asigurați-vă că dezactivați opțiunea „Afișați spațiul sub imagine” din setările de spațiere.

• Arată spațiul sub imagine: Nu

Clonați rândul de două ori și schimbați-le poziția

După ce ați terminat de modificat rândul și modulul de imagine din acesta, continuați și clonați-l de două ori. Plasați duplicatele în consecință:

Personalizați rândul # 1

Clonați modulul de imagine de trei ori

Reveniți la primul rând și clonați modulul de 3 ori.

Coloana Element principal

Plasați aceste module de imagine într-o grilă cu 4 coloane de grilă prin adăugarea următoarelor linii de cod CSS la elementul principal al coloanei rândului:

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

Personalizați rândul # 2

Clonează modulul de imagine

Treceți la al doilea rând și clonați modulul de imagine o dată.

Coloana Element principal

Plasați ambele module într-o grilă cu două coloane de grilă prin adăugarea următoarelor linii de cod CSS la elementul principal al coloanei rândului:

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

Personalizați rândul # 3

Schimbați spațiul

Treceți la următorul și ultimul duplicat. Aici, singurul lucru pe care va trebui să-l faceți este să modificați valorile de umplere personalizate și ați terminat!

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Garnitura stânga: 27vw
• Garnitura dreapta: 27vw

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un arbore genealogic modern cu Divi! Arborele genealogic pe care l-am recreat arată minunat pe toate dimensiunile ecranului. La începutul acestui tutorial, ați reușit să descărcați gratuit fișierul JSON și să începeți cu el imediat. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!