Descărcați o secțiune cronologică GRATUITĂ realizată cu opțiunile de transformare ale lui Divi

Când vine vorba de structurarea conținutului, crearea unei cronologii este o modalitate excelentă de a păstra informațiile interesante și atractive pentru vizitatorii dvs. De asemenea, îi ajută să navigheze și să proceseze informațiile pe care le citesc mult mai repede. Și când utilizați un design frumos, acesta ridică aspectul general al paginii dvs. În această postare, vă vom arăta cum să creați o secțiune uimitoare de cronologie cu opțiunile de transformare ale lui Divi. Designul pe care îl vom recrea va rămâne receptiv pe dimensiuni de ecran mai mici.

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 secțiunii cronologiei

Pentru a pune mâna pe aspectul secțiunii cronologiei gratuite, 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!

Să începem să recreăm!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Spațiere

Creați o pagină nouă sau deschideți una existentă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii, accesați setările de spațiere și adăugați câteva căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 12vw
• Căptușeală inferioară: 0vw

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului. Accesați setările de dimensionare din fila de proiectare și permiteți rândului să ocupe întreaga lățime a ecranului.

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

Vizibilitate

Vom folosi acest rând pentru a adăuga o ilustrație în pașii următori. Totuși, avem nevoie doar de această ilustrație pentru desktop. De aceea, vom ascunde întregul rând pe tabletă și telefon.

Adăugați un modul de imagine

Încărcați ilustrația

După cum sa menționat în pasul anterior al acestui post, singurul motiv pentru care avem nevoie de acest rând este să adăugăm ilustrația cronologiei. O puteți găsi în dosarul pe care l-ați descărcat la începutul acestei postări. După ce îl localizați, încărcați-l într-un nou modul de imagine.

Dimensionare

Pentru a ne asigura că totul rămâne receptiv la toate dimensiunile ecranului, vom activa opțiunea „Forțează lățimea completă” în setările de dimensionare ale modulului de imagine.

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

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un al doilea rând la secțiune, 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 ecranului.

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

Spațiere

Apoi, accesați setările de spațiere. Aici, dorim să limităm spațiul ocupat de rând (pe desktop) prin eliminarea tuturor umpluturilor personalizate de sus și de jos. Păstrăm niște umpluturi de sus și de jos pe dimensiuni de ecran mai mici.

• Căptușeală superioară: 0 px (desktop), 15 vw (tabletă și telefon)
• Căptușeală inferioară: 0 px (desktop), 15vw (tabletă și telefon)

Adăugați Blurb Module la coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul Blurb în coloana 1. Introduceți un conținut la alegere.

Selectați pictograma

Continuați selectând o pictogramă la alegere.

Fundal de gradient

Adăugați și un fundal de gradient.

• Culoare 1: # a5c4ff
• Culoare 2: #ffffff
• Poziția inițială: 40%
• Poziție finală: 40%

Setări pictograme

Apoi, accesați fila Design și modificați setările pictogramei.

• Culoare pictogramă: #ffffff
• Plasarea pictogramelor: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 5vw (desktop), 17vw (tabletă), 18vw (telefon)

Setări text titlu

Treceți la setările pentru textul titlului și modificați opțiunile în consecință:

• Titlu Font: Didact Gothic
• Greutatea fontului titlului: Bold
• Alinierea textului titlului: centru
• Dimensiune text titlu: 1.1vw (desktop), 2.7vw (tabletă), 4vw (telefon)
• Înălțimea liniei de titlu: 2.8em

Setări text corp

Faceți același lucru pentru setările de text ale corpului.

• Font corp: Open Sans
• Alinierea textului corpului: centru
• Dimensiunea textului corpului: 0,7vw (desktop), 1,5vw (tabletă), 2,1vw (telefon)
• Înălțimea liniei corpului: 2em

Spațiere

Adăugăm, de asemenea, niște valori de marjă și umplere personalizate pe care le vom personaliza în funcție de diferite dimensiuni ale ecranului.

• Marja stângă: 3vw
• Marja dreaptă: 3vw
• Marja inferioară: 5vw (tabletă), 7vw (telefon)
• Căptușeală superioară: 2vw (desktop), 6vw (tabletă și telefon)
• Căptușeală inferioară: 2vw (desktop), 6vw (tabletă și telefon)
• Căptușeală stângă: 3vw (desktop), 9vw (tabletă și telefon)
• Căptușeală dreaptă: 3vw (desktop), 9vw (tabletă și telefon)

Frontieră

Treceți la setările de margine și adăugați „20 px” la fiecare colț.

Box Shadow

Nu în ultimul rând, creați o anumită adâncime a paginii adăugând o umbră de casetă subtilă la modulul Blurb.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,1)

Clonați modulul Blurb de trei ori și plasați duplicatele în coloanele rămase

După ce ați terminat de creat și personalizat modulul Blurb, îl puteți clona de trei ori. Plasați duplicatele în coloanele rămase ale rândului.

Schimbați fundalul de gradient al duplicatului nr. 1

Deschideți primul duplicat (Blurb Module în coloana 2) și modificați prima culoare a fundalului de gradient.

• Culoare 1: # ffa5ae

Schimbați fundalul de gradient al duplicatului nr. 2

Faceți același lucru și pentru modulul Blurb din coloana 3.

• Culoare 1: # f7e3a0

Schimbați fundalul de gradient al duplicatului nr. 3

Și modificați și fundalul de gradient al ultimului modul Blurb.

• Culoare 1: # caa5ff

Adăugați setări de transformare la modulele Blurb

Adăugați Transform Translate to Blurb Module # 1

Acum, că avem toate elementele de design de care avem nevoie, putem începe să le transformăm poziția! Pentru a face acest lucru, vom folosi opțiunea de traducere transformată. Deschideți modulul Blurb din coloana 1 și modificați valorile în consecință:

• Partea de jos: 2vw (desktop), 0vw (tabletă și telefon)
• Dreapta: -106vw (Desktop), 0vw (Tabletă și telefon)

Adăugați Transform Translate to Blurb Module # 2

Treceți la cel de-al doilea modul Blurb și modificați valorile traduse de transformare în consecință:

• Partea de jos: 16,6vw (partea de jos), 0vw (tabletă și telefon)
• Dreapta: -78vw (Dreapta), 0vw (Tabletă și telefon)

Adăugați Transform Translate to Blurb Module # 3

Deschideți modulul Blurb din coloana 3 în continuare și utilizați următoarele valori de traducere de transformare:

• Partea de jos: 17vw (desktop), 0vw (tabletă și telefon)
• Dreapta: -46vw (Desktop), 0vw (Tabletă și telefon)

Adăugați Transform Translate to Blurb Module # 4

Faceți același lucru pentru ultimul modul Blurb, folosind următoarele valori:

• Partea de jos: -66vw (desktop), 0vw (tabletă și telefon)
• Dreapta: -24vw (Desktop), 0vw (Tabletă și telefon)

Adăugați marja inferioară negativă la rândul 2

Utilizarea opțiunii de traducere a transformării nu va elimina spațiul care este inițial ocupat de modulele Blurb din rând. Pentru a scăpa de acest spațiu, putem adăuga o marjă de jos negativă la rând și am terminat!

• Marja inferioară: -15vw (desktop), 0vw (tabletă și telefon)

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați o secțiune de cronologie frumoasă folosind noile opțiuni de transformare ale Divi. La începutul tutorialului, ați putut descărca gratuit fișierul și ilustrația JSON! Acest lucru ar trebui să vă ajute să începeți 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.