Descărcați gratuit o secțiune Hero Spatter Animation Color pentru Divi

Modul în care proiectați secțiunea erou a paginii dvs. stabilește așteptările pentru restul paginii. Dacă proiectați o pagină de destinație care sărbătorește ceva, indiferent dacă este vorba de o aniversare sau o vânzare, cu siguranță vă poate ajuta să aduceți atmosfera festivă în designul dvs. O modalitate de abordare este prin adăugarea unei animații colorate în fundalul secțiunii eroului. Accentul va rămâne în continuare pe copia scrisă și pe CTA pe care le furnizați. În acest tutorial, vă vom arăta cum să creați o frumoasă secțiune de animație colorată, cu setările încorporate ale Divi. Veți putea descărca gratuit fișierul JSON!

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 secțiunea The Spatter Animation Hero Section Layout

Pentru a pune mâna pe aspectul gratuit al secțiunii erou de animație, 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!

Adăugați o secțiune nouă

Fundal de gradient

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și aplicați un fundal de gradient la alegere.

• Culoare 1: # 070a49
• Culoare 2: # 6f00f7
• Tipul gradientului: liniar
• Direcția gradientului: 148 grade

Dimensionare

Treceți la fila de proiectare a secțiunii și adăugați o înălțime minimă la setările de dimensionare. Aceasta va transforma secțiunea noastră pe ecran complet.

• Înălțime minimă: 100vh

Spațiere

Urmează să eliminăm toate umpluturile implicite, sus și jos.

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

Vizibilitate

Și pentru a ne asigura că nu apare nicio bară de derulare orizontală în designul nostru, vom ascunde revărsările secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați rândul # 1

Structura coloanei

Odată ce setările secțiunii sunt la locul lor, adăugați un prim rând folosind 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ă atingă ambele părți stânga și dreapta ale containerului secțiunii modificând setările de dimensionare după cum urmează:

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

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Element principal CSS

Și pentru a ne asigura că modulele apar una lângă alta pe dimensiuni mai mici de ecran, vom adăuga o linie de cod CSS la elementul principal al rândului.

display: flex;

Coloana 1 Animație

Odată ce setările de rând generale sunt la locul lor, deschideți setările coloanei 1 și adăugați animație.

• Stil de animație: Zoom
• Regia de animație: Centru
• Intensitate animație: 100%

Coloana 2 Animație

Adăugați animație la a doua coloană următoare.

• Stil de animație: Zoom
• Regia de animație: Centru
• Întârziere animație: 250 ms
• Intensitate animație: 100%

Coloana 3 Animație

Și folosim animație și pentru a treia coloană.

• Stil de animație: Zoom
• Regia de animație: Centru
• Întârziere animație: 500 ms
• Intensitate animație: 100%

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

Încărcați imaginea Spatter

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați imaginea de împrăștiere pe care o puteți găsi în folderul de descărcare pe care l-ați putut descărca la începutul acestui tutorial.

Dimensionare

Treceți la fila de proiectare a modulului și forțați lățimea completă în setările de dimensionare.

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

Filtre

Apoi, schimbați culorile modulului folosind setările filtrelor.

• Nuanță: 303 grade
• Saturație: 200%

Scară de transformare

Scalăm imaginea și în setările de transformare.

• Partea de jos: 150%
• Dreapta: 150%

Efect de derulare a mișcării verticale

Apoi, treceți la fila avansată și activați o mișcare verticală.

• Activați mișcarea verticală: da
• Offset de pornire: 0
• Decalaj mediu:
  • Desktop: 0 (la 50%)
  • Tabletă: 0 (la 70%)
  • Telefon: 0 (la 85%)
• Offset final: 2
• Declanșatorul efectului de mișcare: partea inferioară a elementului

Efect de derulare a mișcării orizontale

Folosim și niște mișcări orizontale.

• Activați mișcarea orizontală: Da
• Offset de pornire:
  • Desktop: -10
  • Tabletă și telefon: 0
• Decalaj mediu: 0
• Offset final: 4
• Declanșatorul efectului de mișcare: partea inferioară a elementului

Efect de defilare în sus și în jos

Împreună cu un efect de redimensionare în sus și în jos.

• Activați scalarea în sus și în jos: da
• Scara de start: 100%
• Scară medie: 150%
• Scara de încheiere: 200%
• Declanșatorul efectului de mișcare: partea inferioară a elementului

Clonați modulul de imagine de două ori și plasați duplicatele în coloanele rămase ale rândului

Odată finalizat primul modul de imagine, puteți clona întregul modul de două ori și puteți plasa duplicatele în coloanele rămase ale rândului.

Schimbați modulul de imagine în coloana 2

Spațiere

Deschideți modulul de imagine din coloana 2 și adăugați o margine superioară pe tabletă și telefon.

• Marja superioară: 50% (numai tabletă și telefon)

Filtre

Modificați nuanța și în setările filtrelor.

• Nuanță: 55 grade

Schimbați modulul de imagine în coloana 3

Filtre

Apoi, deschideți modulul de imagine din a treia coloană și modificați setările filtrelor în consecință:

• Nuanță: 309 grade
• Luminozitate: 0%

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor. Utilizați următoarea structură de coloane:

Poziţie

Deschideți setările rândului și modificați setările poziției rândului în fila avansată.

• Poziție: Absolută
• Locație: centru

Adăugați modulul de text nr. 1 în coloană

Adăugați conținut H1

E timpul să adăugați module, începând cu un modul text care conține un conținut H1 la alegere.

Setări text H1

Modificați setările de text H1 ale modulului după cum urmează:

• Font de titlu: Rubik
• Culoare text antet: #ffffff
• Dimensiune text antet: 80 px (desktop), 50 px (tabletă), 35 px (telefon)

• Textul antetului Umbra Lungime verticală: 0,08em
• Textul antetului Forța de estompare a umbrelor: 0em
• Culoare umbră text antet: # 1a005b

Adăugați modulul de text nr. 2 în coloană

Adauga continut

Apoi, adăugați un alt modul de text cu un conținut de descriere.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Muli
• Culoarea textului: #dddddd
• Dimensiune text: 15 px (desktop), 14 px (tabletă și telefon)
• Înălțimea liniei textului: 2.1em

• Culoare umbră text: # 1a005b

Dimensionare

Modificați lățimea modulului în continuare.

• Lățime: 60% (desktop), 100% (tabletă și telefon)

Spațiere

Și completați setările modulului prin adăugarea unor margini superioare și inferioare pe diferite dimensiuni ale ecranului.

• Marja superioară: 6% (desktop), 10% (tabletă), 14% (telefon)
• Marja inferioară: 6% (desktop), 10% (tabletă), 14% (telefon)

Adăugați un modul buton în coloană

Adăugați o copie

Ultimul modul de care avem nevoie în coloana noastră este un modul buton. Adăugați o copie la alegere.

Setări buton

Apoi, treceți la fila de proiectare și stilizați butonul după cum urmează:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 17 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # ea01a6
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px

• Buton Font: Rubik
• Buton Font Greutate: Bold
• Stilul fontului butonului: majuscule

Spațiere

Adăugați și câteva valori de umplere personalizate în setările de spațiere.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Garnitura stânga: 60 px
• Căptușeală dreaptă: 60 px

Box Shadow

Și completați setările modulului adăugând o umbră de casetă.

• Poziție orizontală a umbrei cutiei: 5 px
• Box Shadow Vertical Position: 5 px
• Culoare umbră: # 30005b

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, ți-am arătat cum să devii creativ cu animația încorporată și efectele de derulare. Mai exact, v-am arătat cum să creați o secțiune colorată a eroilor de animație pentru o pagină de destinație pe care o configurați pentru o ocazie specială. Această ocazie ar putea fi, dar nu se limitează la, aniversarea companiei dvs. sau o vânzare specială. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.