Cum să creați animații suprapuse în întârziere cu Divi

O mare parte a succesului site-ului dvs. web depinde de posibilitatea sau nu de a vă impresiona vizitatorii. Nu numai cu produsele sau serviciile dvs., ci și cu modul în care comunicați și cât de bine proiectat este site-ul dvs. web. Pentru că să recunoaștem, site-urile web sunt adesea primele impresii. Și asemănător oricărui alt tip de primă impresie, doriți să lase un postgust bun.

Acum, dacă sunteți în căutarea unui mod unic de a pune o parte din conținutul dvs. în centrul atenției, crearea de animații subtile suprapuse ar putea fi exact ceea ce căutați. Aceste animații subtile suprapuse sunt un fel de prezentare de diapozitive pentru vizitatorii dvs. Nu trebuie să deruleze sau să facă clic pe nimic, conținutul apare doar într-un mod elegant.

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

Abordare

• Vom începe prin adăugarea tuturor elementelor de design de care avem nevoie într-o ordine verticală, fără suprapunere
• Pe măsură ce adăugăm toate elementele de design, vom adăuga și animații personalizate cu o anumită întârziere a animației
• Aceste întârzieri ale animației vor avea sens numai după ce ați parcurs ultima parte a tutorialului care se concentrează pe suprapuneri
• O parte importantă a acestui tutorial este utilizarea modulelor Divider în formă cu aceeași culoare de fundal ca și secțiunea pentru a face ca conținutul rândului să dispară în întârziere.
• Puteți aplica această tehnică oricărui tip de design la care lucrați după ce înțelegeți diferiții pași care sunt necesari pentru ca abordarea să funcționeze

Să începem să creăm!

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin a crea o pagină nouă sau a deschide una existentă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și adăugați un fundal.

• Culoare fundal: # f3f3ec

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou în secțiunea dvs. utilizând 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ă ocupe întreaga lățime a ecranului. Motivul pentru care facem acest lucru este să scăpăm de toate spațiile implicite de pixeli. În următorii pași, vom adăuga tot spațiul de care avem nevoie folosind o unitate de vizualizare.

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

Adăugați un modul de text în coloană

Adăugați conținut H2

Să începem să adăugăm module! Primul modul de care avem nevoie este un modul de text cu conținut H2. Amintiți-vă că acest modul va „dispărea” după câteva secunde, așa că doriți să îl păstrați scurt, relevant și memorabil.

Setări text H2

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

• Rubrica 2 Font: Poppins
• Rubrica 2 Culoarea textului: # 333333
• Rubrica 2 Dimensiune text: 5vw

Spațiere

Creați spațiul pe care îl doriți folosind unele umpluturi stânga și dreapta în setările de spațiere.

• Garnitura stânga: 15vw
• Garnitura dreapta: 39vw

Adăugați modulul divizor în coloană

Vizibilitate

Treceți la modulul următor, care este un modul divizor. Folosim acest modul pentru a face modulul de text „să dispară”. Există patru lucruri de care vom avea nevoie pentru asta; o culoare de fundal (care are aceeași culoare cu secțiunea, astfel încât să nu o puteți observa), suficientă umplutură (pentru a vă asigura că puteți suprapune tot conținutul din modulul anterior), o suprapunere verticală (pentru a acoperi întregul modul zone) și o întârziere a animației (pentru a da timp primului modul să aibă strălucire înainte de a prelua). După ce adăugați modulul divizor, asigurați-vă că dezactivați opțiunea „Afișați divizorul”.

• Show Divider: Nu

Culoare de fundal

Apoi, accesați setările de fundal și adăugați o culoare de fundal. Asigurați-vă că utilizați aceeași culoare de fundal ca și secțiunea pentru a crea un efect neted.

• Culoare fundal: # f3f3ec

Spațiere

Continuați oferind modulului divizor o dimensiune mai mare prin adăugarea unor umpluturi de sus și de jos în setările de spațiere.

• Căptușeală superioară: 9vw
• Căptușeală inferioară: 9vw

Animaţie

Și completați setările divizorului adăugând o animație întârziată.

• Stil de animație: Slide
• Direcția animației: sus
• Durata animației: 1200 ms
• Întârziere animație: 1500 ms
• Intensitatea animației: 50%
• Animație Opacitate de pornire: 50%

Adăugați rândul # 2

Structura coloanei

Pe al doilea rând! Selectați 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ă ocupe întreaga lățime a ecranului.

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

Spațiere

Apoi, adăugați niște umpluturi în partea stângă și dreaptă a rândului în setările de spațiere.

• Căptușeală stângă: 10vw (desktop), 2vw (tabletă și telefon)
• Căptușeală dreaptă: 10vw (desktop), 2vw (tabletă și telefon)

Afişa

De asemenea, ne asigurăm că coloanele apar una lângă cealaltă pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați Blurb Module la coloana 1

Adauga continut

E timpul să începeți să adăugați module! Adăugați un modul Blurb în coloana 1 și introduceți un conținut la alegere.

Selectați pictograma

Continuați selectând o pictogramă la alegere.

Setări pictograme

Modificați în continuare aspectul pictogramei.

• Culoare pictogramă: # dbd6bd
• Pictogramă cerc: Da
• Pictogramă cerc: #ffffff
• Plasare imagine / pictogramă: sus
• Utilizați pictograma Dimensiune font: Da
• Pictogramă Dimensiune font: 2,5vw (desktop), 1,7vw (tabletă), 1,9vw (telefon)

Setări text titlu

Modificați și setările pentru textul titlului.

• Titlu Font: Source Serif Pro
• Alinierea textului titlului: centru
• Dimensiune text titlu: 1,7vw (desktop), 2,1vw (tabletă), 2,5vw (telefon)
• Înălțimea liniei de titlu: 1.9em

Setări text corp

Împreună cu setările pentru textul corpului.

• Font corp: Open Sans
• Alinierea textului corpului: centru
• Dimensiunea textului corpului: 0,8vw (desktop), 1,2vw (tabletă), 1,6vw (telefon)
• Înălțimea liniei corpului: 2,5em

Dimensionare

Reducem ușor dimensiunea modulului pentru a ne asigura că există suficient spațiu între acest modul și modulele pe care le vom adăuga în a doua și a treia coloană.

• Lățime: 91,7%
• Alinierea modulului: centru

Spațiere

De asemenea, vom adăuga spațiu suplimentar modulului folosind valori de umplere personalizate.

• Căptușeală superioară: 2vw
• Căptușeală inferioară: 2vw
• Căptușeală stângă: 1vw
• Garnitura dreapta: 1vw

Frontieră

Apoi, accesați setările de margine și adăugați o margine subtilă pentru a defini modulul.

• Lățimea chenarului: 1 px
• Culoare margine: # 333333

Animaţie

Completați designul Blurb Module adăugând o animație întârziată. După cum puteți observa, cu cât adăugăm mai multe elemente de design, cu atât este mai mare întârzierea animației.

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: sus
• Durata animației: 1000 ms
• Întârziere animație: 2000 ms
• Intensitate animație: 16%
• Animație Opacitate de pornire: 0%

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

După ce ați finalizat designul Blurb Module, puteți continua și clona de două ori. Plasați duplicatele în cele două coloane rămase ale rândului.

Schimbați animația duplicatului nr. 1

Modificați întârzierea animației primului duplicat.

• Întârziere animație: 2200 ms

Schimbați animația duplicatului nr. 2

Apoi, deschideți al doilea duplicat și modificați și întârzierea animației.

• Întârziere animație: 2400 ms

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

Vizibilitate

Următorul și ultimul modul de care avem nevoie în acest rând este un modul divizor. Din nou, folosim acest modul pentru a crea suprapunerea întârziată, care va ajuta la „dispariția” modulelor Blurb. După ce ați adăugat modulul divizor în coloana 3, asigurați-vă că opțiunea „Afișează divizorul” este dezactivată.

• Show Divider: Nu

Culoare de fundal

Continuați adăugând o culoare de fundal la divizor. Asigurați-vă că utilizați aceeași culoare ca și pentru fundalul secțiunii.

• Culoare fundal: # f3f3ec

Spațiere

Apoi, vom merge la setările de spațiere și vom crește dimensiunea modulului divizor, astfel încât să poată, mai târziu în acest post, să se suprapună pe toate cele trei module Blurb.

• Marja stângă: -60vw (desktop), -64vw (tabletă și telefon)
• Căptușeală superioară: 17vw (desktop), 27vw (tabletă), 30vw (telefon)
• Căptușeală inferioară: 17vw (desktop), 27vw (tabletă), 34vw (telefon)

Animaţie

Nu în ultimul rând, adăugați o animație întârziată.

• Stil de animație: Slide
• Repetați animația: o dată
• Direcția animației: Corect
• Durata animației: 650 ms
• Întârziere animație: 4500 ms
• Intensitatea animației: 24%
• Animație Opacitate de pornire: 0%

Clona rândul # 2

După ce ați finalizat al doilea rând și toate modulele sale, puteți continua și clona.

Eliminați modulul divizor în rândul nou

Eliminați modulul divizor din rândul duplicat.

Modificați întârzierea de animație a modulului Blurb # 1

Apoi, deschideți primul modul Blurb și modificați întârzierea animației.

• Întârziere animație: 5200 ms

Modificați întârzierea animației a modulului Blurb # 2

Faceți același lucru și pentru modulul Blurb din coloana 2.

• Întârziere animație: 5400 ms

Modificați întârzierea animației a modulului Blurb # 3

Și modificați întârzierea animației pentru modulul Blurb și în coloana 3.

• Întârziere animație: 5600 ms

Adăugați suprapuneri

Adăugați Suprapunere la modulul divizor # 1

Acum, că avem toate elementele de design de care avem nevoie, putem începe să creăm suprapuneri! Aceste suprapuneri vor da sens întârzierilor de animație pe care le-am adăugat de-a lungul tutorialului. Începeți cu modulul divizor din primul rând pe care l-ați creat.

• Marja superioară: -15vw

Adăugați Suprapunere la rândul 2

Apoi, deschideți al doilea rând și adăugați o marjă de sus negativă.

• Marja superioară: -10vw

Adăugați Suprapunere la modulele Blurb din rândul # 2

Deschideți fiecare dintre modulele Blurb din al doilea rând și adăugați-le câteva valori de marjă personalizate.

• Marja superioară: -10vw
• Marja inferioară: 7vw

Adăugați Suprapunere la modulul divizor nr. 2

Treceți la modulul divizor pe care îl puteți găsi în a treia coloană a celui de-al doilea rând și creați suprapunerea.

• Marja superioară: -35vw (desktop), -47vw (tabletă), -72vw (telefon)

Adăugați Suprapunere la rândul # 3

Continuați deschizând setările celui de-al treilea rând și adăugați o marjă superioară negativă.

• Marja superioară: -10vw

Adăugați Suprapunere la modulele Blurb din rândul # 3

Nu în ultimul rând, adăugați câteva valori de marjă personalizate la fiecare dintre modulele Blurb din al treilea rând. Odată ce ieși din Visual Builder, vei putea vedea animația care se desfășoară în timp real!

• Marja superioară: -22vw (desktop), -46vw (tabletă), -70vw (telefon)
• Marja inferioară: 7vw

Gânduri finale

În această postare, v-am arătat cum să creați animații subtile suprapuse. Acesta este un mod excelent de a ghida vizitatorii prin conținutul pe care îl partajați și de a oferi site-ului dvs. un aspect și o senzație ridicată. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!