Cum să stivați frumos articole de portofoliu cu opțiunile de transformare ale lui Divi

Noile opțiuni de transformare Divi au deschis o mulțime de noi uși către crearea unui design web atrăgător din punct de vedere vizual. Ne aduce un pas mai aproape de a nu avea nevoie de niciun software de editare a imaginilor atunci când proiectăm un site web de la zero. Îl putem transforma pentru a arăta exact așa cum ne dorim, având în același timp un design 100% receptiv.

În acest post, vom folosi noile opțiuni de transformare pentru a stiva frumos articole din portofoliu. Aceasta este o abordare excelentă pentru prezentarea site-urilor web realizate anterior, de exemplu. De asemenea, ne vom asigura că imaginile rămân acolo unde sunt, indiferent de dimensiunea ecranului pe care îl folosesc vizitatorii. Sperăm că acest tutorial vă va inspira să fiți creativi cu noile opțiuni de transformare ale Divi atunci când personalizați un site web în funcție de nevoile dvs.

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.

Să începem să recreăm!

Adăugați o secțiune nouă

Fundal de gradient

Începeți prin adăugarea unei noi secțiuni la pagina dvs. Deschideți setările secțiunii și adăugați un fundal de gradient.

• Culoare 1: # f4f4f4
• Culoare 2: rgba (255,255,255,0)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 30%
• Poziție finală: 30%

Spațiere

Apoi, accesați fila de proiectare și modificați valorile de umplere personalizate din setările de spațiere.

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

Adăugați un rând nou

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 și modificați setările de dimensionare.

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

Spațiere

Apoi, accesați setările de spațiere și eliminați umplutura implicită de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Afişa

De asemenea, ne asigurăm că ambele coloane apar una lângă cealaltă pe dimensiuni de ecran mai mici. Pentru a face acest lucru, va trebui să adăugăm o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați modulul de imagine nr. 1 în coloana 1

Incarca imaginea

Acum putem începe să adăugăm diferite module! Pentru a putea urma acest tutorial, continuați și salvați următorul ecran de imprimare pe computer:

Încărcați ecranul de imprimare într-un modul de imagine din prima coloană.

Dimensionare

Apoi, accesați fila de proiectare și activați opțiunea „Forțează lățimea completă”. După ce o faceți, imaginea va ocupa întreaga lățime a coloanei.

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

Spațiere

Pentru a micșora dimensiunea imaginii, vom adăuga câteva margini personalizate la stânga și la dreapta. Veți observa că folosim o unitate de vizualizare pentru a ne asigura că dimensiunea imaginii rămâne intactă, indiferent de dimensiunea ecranului.

• Marja superioară: -10vw
• Garnitura stânga: 11vw
• Garnitura dreapta: 11vw

Frontieră

Adăugați „2vw” la fiecare dintre colțurile din setările de margine următoare.

Box Shadow

Împreună cu o umbră de cutie.

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

Transformă Traducere

Acum putem începe să transformăm imaginea! Adăugați următoarele valori la fila de traducere a transformării din opțiunile de transformare:

• Jos: -26vw
• Dreapta: -2vw

Valorile pe care le adăugați aici depind de lățimea și înălțimea imaginii dvs., deci dacă utilizați o imagine diferită, va trebui să modificați valorile în consecință. Asigurați-vă că utilizați unități de vizualizare pentru a vă asigura că poziția imaginii rămâne aceeași pe toate dimensiunile ecranului.

Transformare Rotire

Treceți la fila rotire transformare și rotiți imaginea în consecință:

• Stânga: 24 grade
• Centru: 46 grade
• Dreapta: -7 grade

Traduceți Skew

Nu în ultimul rând, activați traducerea înclinată cu următoarele valori:

• Jos: -4 grade
• Dreapta: 24 grade

Adăugați modulul de imagine nr. 2 în coloana 1

Incarca imaginea

Treceți la următorul modul de imagine! Salvați următorul ecran de imprimare pe computer sau utilizați un alt ecran de imprimare la alegere:

Continuați încărcând ecranul de imprimare în al doilea modul de imagine din coloana 1.

Dimensionare

Apoi, accesați setările de dimensionare și activați opțiunea „Forțează lățimea completă”.

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

Spațiere

Micsoram dimensiunea imaginii si o facem sa se suprapuna cu imaginea anterioara folosind unele valori de marjă personalizate în setările de spațiere.

• Marja superioară: -81vw (desktop), -50vw (tabletă și telefon)
• Marja stângă: 11vw
• Marja dreaptă: 11vw

Frontieră

Vom adăuga „2vw” la fiecare dintre colțurile din setările de margine următoare.

Box Shadow

Și vom adăuga și o umbră de cutie. Observați cum folosim o umbră de casetă mai întunecată pentru a doua imagine a articolului de portofoliu. Acest lucru vă va ajuta să creați o mai mare adâncime între articolele din portofoliu.

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

Transformă Traducere

Apoi, accesați setările de transformare și modificați valorile de traducere a transformării:

• Jos: -8vw
• Dreapta: 0 px

Din nou, aceste valori depind într-adevăr de modul în care doriți să poziționați ecranul de imprimare și de ce dimensiuni are ecranul dvs. de imprimare. Cu cât imaginea este mai mică, cu atât va trebui să o împingeți mai mult spre stânga folosind o valoare negativă mai mare.

Transformare Rotire

Treceți la fila de rotire a transformării și jucați-vă cu toate cele trei valori.

• Stânga: 24 grade
• Centru: 46 grade
• Dreapta: -7 grade

Traduceți Skew

Nu în ultimul rând, modificați valorile de înclinare a traducerii:

• Jos: -4 grade
• Dreapta: 24 grade

Adăugați modulul de imagine nr. 3 în coloana 1

Incarca imaginea

Pentru următorul și ultimul modul de imagine, avem nevoie în coloana 1. Salvați următorul ecran de imprimare pe computer sau utilizați orice alt ecran de imprimare la alegere:

Adăugați ecranul de imprimare pe care l-ați salvat într-un nou modul de imagine.

Dimensionare

Apoi, accesați setările de dimensionare și activați opțiunea „Forțează lățimea completă”.

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

Spațiere

Mergeți la setările de spațiere și modificați valorile de marjă în consecință:

• Marja superioară: -107vw
• Marja stângă: 19vw
• Marja dreaptă: 19vw

Frontieră

Continuați adăugând „2vw” la fiecare dintre colțurile modulului de imagine.

Box Shadow

Adăugați o umbră de cutie în continuare. Din nou, folosim o culoare de umbră mai puternică decât cele pe care le-am folosit pentru cele două module de imagine anterioare.

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

Transformă Traducere

Apoi, accesați setările de transformare și modificați valorile de traducere a transformării:

• Jos: -42vw
• Dreapta: 11vw

Transformare Rotire

Treceți la fila Rotire transformare și faceți și câteva modificări acolo.

• Stânga: 24 grade
• Centru: 46 grade
• Dreapta: -7 grade

Traduceți Skew

Nu în ultimul rând, modificați valorile de înclinare a traducerii.

• Jos: -4 grade
• Dreapta: 24 grade

Adăugați modulul de text al titlului în coloana 2

Adăugați o copie H2

Trecem la a doua coloană! Adăugați un modul text cu un conținut H2 la alegere.

Setări text H2

Mergeți la setările de text H2 următoare și efectuați câteva modificări.

• Rubrica 2 Font: Roboto
• Rubrica 2 Greutate font: Subțire
• Titlul 2 Alinierea textului: stânga
• Rubrica 2 Culoarea textului: # 000000
• Titlul 2 Dimensiune text: 5vw (desktop), 6vw (tabletă), 7vw (telefon)
• Rubrica 2 Spațierea literelor: -1 px

Spațiere

Continuați prin adăugarea unor valori de marjă personalizate în setările de spațiere.

• Marja superioară: 35vw (desktop), 10vw (tabletă), 0vw (telefon)
• Marja stângă: -4vw
• Marja dreapta: 4vw

Adăugați modulul divizor în coloana 2

Vizibilitate

Următorul modul de care avem nevoie în coloana 2 este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, accesați fila de proiectare și schimbați culoarea separatorului.

• Culoare: # 8193fa

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 8 px
• Lățime: 28%

Spațiere

Și adăugați câteva valori de marjă personalizate.

• Marja superioară: 1vw
• Marja stângă: -4vw
• Marja dreapta: 4vw

Adăugați modulul de descriere a textului în coloana 2

Adauga continut

Următorul modul de care avem nevoie în coloana 2 este un alt modul de text. Adăugați un conținut de paragraf la alegere.

Setări text

Apoi, accesați setările de text și efectuați câteva modificări.

• Font text: Deschideți Sans
• Dimensiune text: 0,6vw (desktop), 1,2vw (tabletă), 1,8vw (telefon)
• Înălțimea liniei de text: 3.1em (desktop), 2.7em (tabletă), 2.6em (telefon)
• Orientare text: stânga

Spațiere

Adăugați câteva valori de marjă personalizate în continuare.

• Marja superioară: 1vw
• Marja stângă: -4vw
• Marja dreapta: 4vw

Adăugați un modul buton la coloana 2

Adăugați o copie

Următorul și ultimul modul de care avem nevoie pentru a finaliza proiectarea este un modul buton. Adăugați o copie la alegere.

Setări buton

Apoi, accesați fila de proiectare și modificați setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoare 1: # 5627ba
• Culoare 2: # 8fb5fc
• Direcția gradientului: 122deg
• Lățimea chenarului butonului: 0 px
• Greutatea fontului: Ultra Bold
• Stilul fontului: majuscule

Spațiere

Modificați și marja personalizată și valorile de umplere.

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

Box Shadow

Nu în ultimul rând, adăugați o umbră de casetă subtilă și ați terminat!

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

previzualizare

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

Gânduri finale

În această postare, v-am arătat cum să fiți creativi cu noile opțiuni de transformare ale Divi. Mai exact, am stivuit articole de portofoliu pentru a crea un design frumos și atrăgător din punct de vedere vizual. De asemenea, ne-am asigurat că imaginile arată excelent pe toate dimensiunile ecranului. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!