Cum să creați un contur animat frumos pentru fiecare container cu Divi

Publicat: 2019-08-22

Opțiunile de animație ale Divi au ajutat la aducerea la viață a numeroase site-uri web fără a fi nevoie de cod personalizat. Setările de animație încorporate sunt extrem de ajustabile și vă permit să creați modele cu adevărat unice. Unul dintre lucrurile pe care le puteți face, de exemplu, este crearea unui contur animat. Exact asta vă vom arăta în această postare. Vom adăuga o margine la fiecare container și vom adăuga setări de animație care corespund fluxului fiecărui element. 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 toate dimensiunile ecranului.

Desktop

contur animat

Mobil

contur animat

Descărcați schema animată GRATUIT

Pentru a pune mâna pe schema animată gratuită, va trebui mai întâi să o 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.

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ă

Culoare de fundal

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina pe care lucrați și utilizați o culoare de fundal alb.

Culoare fundal: #FFFFFF

contur animat

Spațiere

Treceți la fila de proiectare și adăugați câteva valori de marjă și umplere personalizate.

Marja superioară: 3vw
Marja inferioară: 3vw
Marja stângă: 3vw
Marja dreaptă: 3vw
Căptușeală superioară: 3vw
Căptușeală inferioară: 3vw

contur animat

Frontieră

Deschideți apoi setările de margine și adăugați „2vw” la fiecare colț. Folosiți și o margine.

Lățimea chenarului: 1 px
Culoare margine: # 000000

contur animat

Animaţie

Adăugați și o animație personalizată.

Stil de animație: Slide
Direcția animației: Jos
Animație Opacitate de pornire: 100%

contur animat

Vizibilitate

Pentru a ne asigura că nimic nu depășește containerul secțiunii, vom ascunde revărsările în setările de vizibilitate ale secțiunii.

Overflow orizontal: Ascuns
Vertical Overflow: Ascuns

contur animat

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:

contur animat

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și modificați setările de dimensionare în consecință:

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

contur animat