Crearea unei secțiuni Polaroid Hero cu opțiunile de transformare ale lui Divi

Secțiunile cu eroi creativi fac site-urile web memorabile și speciale. Acest design al secțiunii erou polaroid evocă un sentiment de rătăcire de epocă. Folosind opțiuni de transformare a coloanei, polaroidele pot fi aranjate în orice mod doriți, ca și cum ar fi întinse pe o masă.

Puteți recrea acest design de secțiune erou polaroid cu propriile imagini pătrate. Veți putea descărca gratuit fișierul JSON!

Să ajungem la asta.

previzualizare

Desktop

Mobil

Descărcați designul secțiunii Polaroid Hero GRATUIT

Pentru a pune mâna pe designul gratuit al secțiunii erou polaroid, 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

Să începem să recreăm

Adăugați o secțiune nouă

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați.

Separator inferior

Adăugați un separator de fund verde menta.

• Amplasarea divizorului: partea de jos
• Stil divizor: # 12
• Culoare divizor: Verde Menta # d2f2d0
• Înălțimea împărțitorului: 23vw

Spațiere

Reglați spațiul secțiunii.

• Marja superioară: 7vw
• Marja inferioară: 0 px
• Căptușeală superioară și inferioară: 0 px

Adăugați un rând nou

Structura coloanei

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

Dimensionare

Acum, ajustați dimensiunea rândului.

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

Spațiere

Apoi, reglați umplutura de sus și de jos în setările de spațiere.

• Căptușeală superioară și inferioară: 0 px

Afişa

Adăugați o linie de cod CSS la elementul principal al rândului pentru a menține coloanele una lângă cealaltă pe dimensiuni de ecran mai mici.

• CSS personalizat - Element principal: afișaj: flex;

display: flex;

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

Încărcați imaginea pătrată

Adăugați un modul de imagine în coloana 1 și încărcați o imagine pătrată.

Aliniere

Acum, reglați alinierea modulului.

• Alinierea modulului: centru

Dimensionare

Apoi, faceți modulul lățime completă.

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

Adăugați un modul de text în coloana 1

Adauga continut

Adăugați un modul text și introduceți un conținut. Vom folosi cuvântul „polaroid”.

Text

Stilizați fontul textului.

• Font text: Advent Pro
• Aliniere text: centru
• Culoarea textului: gri foarte închis # 474747
• Mărimea textului:
  • Desktop: 1vw
  • Tabletă + telefon: 2vw
• Spațiere scrisoare text: 0,1vw
• Înălțimea liniei textului: 1,8em

Dimensionare

Utilizați „100%” pentru lățime în setările de dimensionare.

• Lățime: 100%

Spațiere

Acum reglați spațiul.

• Marja superioară: 1vw

Clonați modulele de două ori și plasați duplicatele în coloanele rămase

Schimbați imaginea și copia duplicatelor

Schimbați imaginile din fiecare modul de imagine duplicat. Dacă designul dvs. solicită acest lucru, modificați și conținutul textului.

Setări coloana 1

fundal

Continuați deschizând setările coloanei 1 ale rândului. Setați fundalul pe alb pentru a crea efectul polaroid.

• Culoare fundal: alb #ffffff

Spațiere

Adăugați niște căptușeală inferioară pentru a crea marginea inferioară polaroid mai largă.

• Căptușeală inferioară: 2vw

Frontieră

Adăugați o margine pentru a termina vizualul polaroid.

• Lățimea marginii pe 4 laturi: 1vw
• Lățimea marginii superioare: 2vw
• Lățimea marginii drepte: 2vw
• Lățimea marginii inferioare: 1vw
• Lățimea marginii stângi: 2vw
• Culoare margine: alb #ffffff

Box Shadow

Completați setările coloanei 1 adăugând o umbră de casetă subtilă.

• Box Shadow: # 1

Extindeți setările coloanei 1

Utilizați opțiunea Extinde stiluri pentru a extinde setările coloanei.

• Reveniți la fereastra principală a setărilor rândului și faceți clic pe cele trei puncte din dreapta primei file coloane.
• Selectați „extindeți stilurile articolelor” și selectați „pe tot acest rând”.

Coloana 1 Stiluri de transformare

Acum, reglați setările de transformare din prima coloană.

• Transformă Traducere: axa x -11vw, axa y -6vw
• Transformare Rotire: 341 grade, prima opțiune

Coloana 2 Stiluri de transformare

Apoi, ajustați setările de transformare pentru a doua coloană.

• Transformare transformare: axa x -22w, axa y 0vw
• Transformare Rotire: 10 grade, prima opțiune

Coloana 3 Stiluri de transformare

În cele din urmă, ajustați setările de transformare pentru coloana a treia.

• Scala de transformare: 68% ambele axe
• Transformare transformare: axa x -46w, axa y 12vw
• Transformare Rotire: 31 grade, prima opțiune

Adăugați o secțiune nouă

fundal

Adăugați o nouă secțiune și aplicați un fundal verde mentă secțiunii.

• Culoare fundal: Verde Menta # d2f2d0

Separator inferior

Acordați secțiunii un separator inferior.

• Amplasarea divizorului: partea de jos
• Stil divizor: # 12
• Culoare divizor: alb #ffffff
• Înălțimea împărțitorului: 23vw

Spațiere

Eliminați umplutura implicită de sus.

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou cu 3 coloane.

Copiați și lipiți stilurile rândurilor

Folosind vizualizarea wireframe, copiați și lipiți stilurile de rând din prima secțiune

• Mai întâi, faceți clic pe cele trei puncte din dreapta meniului rând din prima secțiune. Selectați „copiați stiluri de rând”.
• Apoi, faceți clic pe cele trei puncte din dreapta meniului rând în a doua secțiune. Selectați „lipiți stiluri de rând”.

Copiați și lipiți setările coloanei

Acum, copiați setările coloanei din primul rând și lipiți-le pe coloanele 1 și 2 din noul rând.

• Mai întâi, deschideți setările rândului din primul rând.
• În al doilea rând, faceți clic pe cele trei puncte din partea dreaptă a filei primei coloane și selectați „copiați stilurile articolelor”.
• Apoi, derulați în jos până la noul rând și deschideți fila de setări.
• În cele din urmă, faceți clic pe cele trei puncte din partea dreaptă a primei coloane și selectați „lipiți stiluri de element”.

Coloana 1 Stiluri de transformare

Acum, ajustați stilurile de transformare din coloana 1.

• Scala de transformare: 75% ambele axe
• Transformare transformare: axa x -8w, axa y -14vw
• Transform Rotate: prima opțiune de 35 grade

Coloana 2 Stiluri de transformare

Apoi, modificați stilurile de transformare din coloana 2.

• Transformă Traducere: axa x -17w, axa y 2vw
• Transformare Rotire: prima opțiune de 346 grade

Adăugați module de imagine

Duplicați și trageți modulele de imagine

Acum, reveniți la vizualizarea wireframe pentru a duplica și trage două module de imagine.

• În primul rând, copiați primul modul de imagine în prima secțiune de două ori.
• Apoi, glisați-le în prima și a doua coloane ale celei de-a doua secțiuni.
• Schimbați imaginea din fiecare modul pentru o nouă imagine pătrată.

Adăugați module de text

Duplicați și trageți module text

După imagini, procedați la fel cu modulele de text. Duplicați din prima secțiune și trageți în a doua secțiune.

• În vizualizarea wireframe, copiați de două ori modulul text din prima coloană din prima secțiune.
• Acum, trageți noile module de text în coloanele 1 și 2 din a doua secțiune.
• Dacă doriți să modificați conținutul, faceți acest lucru acum.

Adăugați un modul de text în coloana 3

Adauga continut

Faceți clic pe simbolul plus din a treia coloană și adăugați un modul text. Introduceți conținut H2 și paragraf.

Text

Stilizați textul după cum urmează.

• Font text: Advent Pro
• Aliniere text: centru
• Culoarea textului: Gri închis # 848484
• Mărimea textului:
  • Desktop: 1vw
  • Tabletă + telefon: 1.9vw
• Spațiere scrisoare text: 0,1vw
• Înălțimea liniei de text:
  • Desktop: 1.2em
  • Tabletă + telefon: 1.3em

Text de antet

Acum, stilizați textul H2.

• Rubrica: H2
• H2 Font: Adamina
• Greutatea fontului H2: îndrăzneț
• Culoarea fontului H2: gri foarte închis # 444444
• Dimensiunea fontului H2:
  • Desktop: 2vw
  • Tabletă + telefon: 3vw
• Spațierea literelor H2: 4 px
• Înălțimea liniei H2:
  • Desktop: 1,7vw
  • Tabletă + telefon: 1,5vw

Dimensionare

Apoi, ajustați dimensiunea.

• Lăţime:
  • Desktop: 60%
  • Tabletă: 91%
  • Telefon: 100%
• Alinierea modulului: centru

Spațiere

În cele din urmă, reglați distanța.

• Marja superioară: -12vw

Adăugați un modul buton la coloana 3

Adăugați o copie

Faceți clic pe simbolul plus de sub text și adăugați un modul buton. Adăugați o copie la buton.

Aliniere

Schimbați alinierea butonului.

• Aliniere: centru

Stiluri de butoane personalizate

Stilează butonul în consecință.

• Dimensiune text buton:
  • Desktop: 1vw
  • Tabletă: 2.4vw
  • Telefon: 2.3vw
• Lățimea chenarului butonului: 0 px
• Culoarea textului butonului: negru # 000000
• Distanța dintre litere și butoane: 4 px
• Buton Font: Advent Pro
• Buton Font Greutate: Bold

Spațiere

Aplicați o valoare de marjă superioară.

• Marja superioară: 2vw

Adăugați un modul divizor în coloana 3

Vizibilitate

Sub buton, adăugați un separator și stilizați după cum urmează.

• Vizibilitate: Da

Linia

Acordați separatorului o culoare verde strălucitor.

• Culoare linie: # 55f252

Dimensionare

Schimbați setările de dimensionare ale divizorului și ați terminat!

• Greutatea divizorului
  • Desktop: 7 px
  • Tabletă + telefon: 4 px
• Lăţime:
  • Desktop: 10%
  • Tabletă + telefon: 30%
• Alinierea modulului: centru

previzualizare

Să aruncăm o privire din nou asupra designului finalizat al secțiunii erou polaroid pe diferite dimensiuni de ecran.

Desktop

Mobil

Este o folie!

În acest post, v-am arătat cum să recreați o secțiune de erou polaroid folosind opțiunile de transformare ale lui Divi. Acesta este un mod excelent de a prezenta mai multe imagini în secțiunea erou a paginii. Sperăm că acest design vă va inspira propriile modele de secțiuni de eroi creativi! Dacă aveți întrebări, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.