Cum să creați o cronologie cu modulul Blurb al lui Divi

În această postare, vă vom arăta cum puteți crea cu ușurință o cronologie simplă, dar elegantă, cu modulele dvs. Blurb ale Divi. Vom combina diferitele opțiuni pe care le oferă modulele și rândurile pentru a obține rezultatul pe care îl puteți vedea mai jos. Exemplul pe care îl vom distribui se bazează numai pe opțiunile Divi încorporate, ceea ce înseamnă că nu va trebui să adăugați niciun cod CSS suplimentar! De asemenea, ne asigurăm că arată bine atât pe desktop, cât și pe mobil.

Rezultat

Apariția unei cronologii se realizează cu două elemente de design; linia care traversează toate cele trei module Blurb și numerele. Versiunea desktop arată astfel:

Iar versiunea mobilă arată astfel:

Să începem!

Cum să creați o cronologie cu modulul Blurb al lui Divi

Abonați-vă la canalul nostru Youtube

Adăugați secțiunea standard

Culoarea fundalului secțiunii

Începeți prin adăugarea unei noi secțiuni standard și folosind „rgba (0,0,0,0.12)” ca culoare de fundal.

Secțiunea Căptușeală

Accesați fila Proiectare și utilizați o căptușeală superioară de „300 px”.

Adăugați rând cu trei coloane (cronologie)

Fundaluri de coloană

După ce ați creat secțiunea, adăugați un rând cu trei coloane. În fila Conținut a acelui rând, utilizați „# e09900” ca culoare de fundal pentru Coloana 1, „# 0c71c3” ca culoare de fundal pentru Coloana 2 și „# 8300e9” ca culoare de fundal pentru Coloana 3.

Dimensionare

Treceți la fila Proiectare și utilizați următoarele setări pentru subcategoria Dimensionare:

• Realizați acest rând pe lățime: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Marjă și căptușeală personalizate

Apoi, adăugați următoarele rânduri personalizate de umplere și marjă personalizată:

• Căptușeală superioară: 1 px
• Căptușeală inferioară: 0 px
• Marja inferioară: -200px

Și adăugați „3px” la umplutura de sus și de jos a fiecărei coloane.

Dezactivați pe tabletă și telefon

În cele din urmă, dezactivați rândul atât pe tabletă, cât și pe telefon.

Adăugați încă un rând cu trei coloane (module Blurb)

Fundalul gradientului coloanei

Odată ce ați creat primul rând cu trei coloane, puteți merge mai departe și îl puteți crea pe cel de-al doilea chiar sub acesta (aceștia împart aceeași secțiune). Fiecare dintre coloane are nevoie de un fundal degradat cu aceleași setări, dar cu o primă culoare diferită:

• Prima culoare: # e09900 (coloana 1), # 0c71c3 (coloana 2), # 8300e9 (coloana 3)
• A doua culoare: rgba (255, 255, 255, 0)
• Tipul gradientului: liniar
• Direcția gradientului: 180 grade
• Poziția inițială: 73%
• Poziție finală: 92%

Faceți lățimea completă a rândului

Apoi, accesați fila Design și activați opțiunea „Faceți acest rând lățime completă”.

Căptușeală personalizată la rând

Deschideți subcategoria de spațiere și utilizați următoarele rânduri personalizate de umplere și marjă personalizată pentru rând:

• Căptușeală de sus: 0 px
• Căptușeală dreaptă: 60 px
• Căptușeală inferioară: 100 px
• Garnitura stânga: 60 px
• Marja superioară: -100px

Adăugați „5 px” și în partea de sus a fiecărei coloane.

Modul Blurb

După ce ați completat setările rândului, puteți adăuga un modul Blurb la prima coloană a rândului pe care tocmai l-ați creat. În subcategoria Imagine și pictogramă a filei de conținut, activați opțiunea „Utilizați pictograma” și selectați o pictogramă la alegere.

Derulați în jos aceeași filă și utilizați „# f4f4f4” ca culoare de fundal.

Accesați fila Proiectare și efectuați următoarele ajustări la subcategoria Imagine și pictogramă:

• Culoare pictogramă: # e09900
• Plasare imagine / pictogramă: stânga
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 50 px

În subcategoria Text, asigurați-vă că Orientarea textului din stânga este activată.

Opțiunile pentru subcategoria Text antet sunt următoarele:

• Font antet: Runda Cretei
• Aliniere text antet: stânga
• Dimensiune font antet: 32 px
• Înălțimea liniei antetului: 1em

Apoi, deschideți subcategoria Text corp și utilizați următoarele setări:

• Alinierea textului corpului: stânga
• Dimensiunea fontului corpului: 12 px
• Înălțimea liniei corpului: 1.7em

Vom folosi și un chenar cu următoarele setări:

• Utilizați chenarul: Da
• Culoare margine: # 000000
• Lățimea chenarului: 2 px
• Stilul chenarului: punctat

Apoi, deschideți subcategoria Dimensionare și utilizați „279px” pentru Lățimea conținutului și „100%” pentru Lățimea.

În cele din urmă, adăugați „30 px” în partea de sus, dreapta, jos și stânga.

Modul text

După ce ați adăugat și modificat modulul Blurb, continuați și adăugați un modul de text chiar sub el. Modulul text va avea nevoie și de un fundal de gradient:

• Prima culoare: # e09900
• A doua culoare: rgba (255, 255, 255, 0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 20%
• Poziție finală: 24%

Treceți la fila Proiectare și utilizați următoarele setări pentru subcategoria Text:

• Dimensiune font text: 21 px
• Culoarea textului: #FFFFFF
• Înălțimea liniei textului: 1.7em
• Orientare text: centru

Deschideți subcategoria Dimensionare, utilizați o lățime de '48% 'și selectați alinierea modulului din dreapta.

În cele din urmă, utilizați o marjă superioară de „-100px” și adăugați „50px” la umplutura de sus și de jos.

Modul de clonare Blurb & Text

După ce ați completat prima coloană, puteți clona ambele module și le puteți plasa în celelalte două coloane. Singurele lucruri pe care va trebui să le schimbați sunt pictograma blurb, culoarea blurb și prima culoare de gradient a modulului text în „# 0c71c3” pentru a doua coloană și „# 8300e9” pentru ultima coloană.

Dezactivați pe tabletă și telefon

După ce ați finalizat acest al doilea rând, asigurați-vă că îl dezactivați și pentru telefon și tabletă.

Clonați rândul cu trei coloane (tabletă și telefon)

Versiunea cronologiei de pe tabletă și telefon este ușor diferită. Clonați rândul cu blurbs pe care le-ați creat în partea anterioară a acestei postări și urmați pașii următori pentru a se potrivi pe telefon și tabletă.

Adăugați fundal gradient rând

Rândul de pe tabletă și telefon va avea nevoie de următorul fundal de gradient:

• Prima culoare: rgba (0,0,0,0,7)
• A doua culoare: rgba (255, 255, 255, 0)
• Tipul gradientului: liniar
• Direcția gradientului: 90 grade
• Poziția inițială: 1%
• Poziție finală: 0%

Căptușeala rândurilor

Ștergeți toate padding-urile personalizate și marginile care au fost utilizate în versiunea desktop și adăugați „100px” la padding-ul superior.

Dezactivați pe desktop

În cele din urmă, în loc să dezactivați rândul de pe telefon și tabletă, dezactivați-l pe desktop.

Rezultat

După ce ați urmat toți pașii din postare, ar trebui să puteți obține următorul rezultat pe desktop:

Și următorul rezultat pe tabletă și telefon:

Gânduri finale

În această postare, v-am arătat cum puteți crea o cronologie simplă a Blurb Module utilizând nimic altceva decât opțiunile Divi încorporate. Doi factori care ajută la identificarea modulelor Blurb ca linie cronologică sunt linia care leagă toate cele trei module Blurb și numerele. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!