Folosind animația Divi's Fold pentru a face Blurbs să înflorească

Publicat: 2017-10-16

Bine ați venit la partea 4 a acestei serii din 6 părți care vă va învăța cum utilizați noile opțiuni de animație Divi pentru a proiecta secțiuni de pagină minunate. Vă voi prezenta cum să construiți diferitele secțiuni ale paginii noastre demo live pentru a vă arăta tehnici pentru adăugarea de animații pe site-ul dvs. web. Funcțiile de animație sunt cu adevărat distractive și ușor de utilizat. Și cu Visual Builder, puteți vedea creația dvs. prind viață în fiecare etapă a drumului. Vino și alătură-te mie în timp ce explorăm puterea animațiilor Divi.

În ultima noastră postare, v-am arătat câteva moduri creative de a proiecta și anima 4 module blurb organizate pentru un proces pas cu pas.

Astăzi, vom construi Secțiunea 6 a paginii noastre demo de animație. Această secțiune prezintă un design și animație minunate pentru afișarea produselor prezentate sau a descărcărilor. Folosirea culorii și efectul de înflorire al animației pe acele module de blurb face ca secțiunea să iasă în evidență.

Hai să ne scufundăm!

Iată o scurtă privire asupra a ceea ce vom construi în Postarea de astăzi

animaţie

Folosind animația Divi's Fold pentru a face Blurbs să înflorească

Abonați-vă la canalul nostru Youtube

Secțiunea 6 a clădirii

Adăugați și personalizați secțiunea

Folosind Visual Builder, Să începem prin a adăuga o altă secțiune regulată la aspectul nostru. Apoi adăugați un rând cu trei coloane (o jumătate un sfert un sfert) în secțiunea dvs.

animaţie

Înainte de a adăuga primul nostru modul, accesați setările secțiunii și actualizați următoarele:

Sub fila Conținut ...

Culoare fundal: # 00252d

animaţie

Sub fila Proiectare ...

Căptușeală personalizată: 80 px sus, 80 px jos

Salvează setările

Adăugați un antet folosind modulul text

Acum să revenim la rândul nostru de trei coloane și să adăugăm un modul de text în coloana din stânga. Actualizați setările pentru text după cum urmează:

Sub fila Conținut ...

Adăugați următorul antet h1 în fila text a casetei de conținut: 

<h1>Build Like You Mean It</h1>

animaţie

Sub fila Proiectare ...

Font antet: Lato, Bold (B)
Dimensiune font antet: 38 px
Culoarea textului antetului: #ffffff
Înălțimea liniei antetului: 1.3em

NOTĂ: Deoarece conținutul nostru are un antet h1, doar opțiunile de text ale antetului vor funcționa pentru a-l stiliza.

Marjă personalizată: 20 px jos

Stil de animație: Slide
Direcția animației: Stânga
Intensitate animație: 16%

animaţie

NOTĂ: Această animație oferă antetului o ușoară alunecare spre stânga. Cheia aici este să îi oferiți o intensitate mai mică, astfel încât diapozitivul să nu acopere atât de mult teren sau să dureze prea mult până la finalizare.

Salvează setările

Adăugați text utilizând un alt modul de text

În mod normal, ați continua să adăugați restul textului sub antetul h1 din același modul de text. Dar, din moment ce dorim să adăugăm un efect de animație diferit la antetul h1 și textul de sub acesta, va trebui să creăm un alt modul de text. Continuați și adăugați un modul text sub cel pe care tocmai l-ați creat și actualizați setările după cum urmează:

Sub fila Conținut ...

Conținut: „Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl. ”

Sub fila Proiectare ...

Culoarea textului: deschis
Dimensiunea fontului textului: 18 px
Culoarea textului textului: rgba (255,255,255,0,66)
Înălțimea liniei textului: 1.9em
Marjă personalizată: 40 px jos

Stil de animație: Slide
Direcția animației: Stânga
Intensitatea animației: 8%

NOTĂ: Observați cum setările de animație pentru acest text au o intensitate ușor mai mică (8%) decât textul antet de deasupra acestuia (16%). Asta înseamnă că se va mișca mai repede, deoarece parcurge distanțe mai mici la aceeași durată. Chiar dacă ambele module text necesită aceeași perioadă de timp (durată) pentru a finaliza animația, deoarece încep la niveluri de intensitate diferite, se vor deplasa la viteze diferite. Este ca și cum doi cursanți încep și se termină cursa în același timp, unul dintre ei având un avans semnificativ.

animaţie

Salvează setările

Adăugați un buton

Acum să adăugăm un modul buton sub cele două module de text din coloana din stânga. Apoi actualizați setările după cum urmează:

Sub fila Conținut ...

Buttom Text: Descarcă toate
Adresa URL a butonului [introduceți adresa URL]

Sub fila Proiectare ...

Utilizați stiluri personalizate pentru buton: DA

Dimensiune text buton: 15 px
Culoarea textului butonului: # 01254c
Culoarea fundalului butonului: # ffcd1c
Lățimea chenarului butonului: 0 px
Raza chenarului butonului: 65 px
Distanța dintre litere și butoane: 1 px
Buton Font: Bold (B), majuscule (TT)

animaţie

Căptușeală personalizată: 10 px sus, 30 px dreapta, 10 px jos, 30 px stânga

Stil de animație: Slide
Direcția animației: Stânga
Intensitate animație: 16%

NOTĂ: Acest efect de animație se potrivește cu prima animație a modulului de text.

animaţie

Să nu uităm să adăugăm acel minunat efect de strălucire folosind proprietatea box shadow css. Găsiți caseta Element principal sub CSS personalizat și adăugați următoarele:

box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);

Salvează setările

Add You First Blurb Module

Asta este pentru coloana noastră din stânga. Acum să adăugăm un modul Blurb la coloana din mijloc (care este prima coloană de un sfert).

animaţie

Actualizați setările după cum urmează:

Sub fila Conținut ...

Titlu: Divi
Utilizați pictograma: DA
Pictogramă: [selectați pictograma]

Culori de gradient de fundal: # 8b56ff, # 5d3dff
Tipul gradientului: liniar
Direcția gradientului: 140 grade

Sub fila Proiectare ...

Culoare pictogramă: #ffffff
Culoarea textului: deschis
Orientare text: centru
Font antet: Bold (B), majuscule (TT)
Distanța între litere antet: 10 px

Marjă personalizată: 12% jos
Căptușeală personalizată: 40 px sus, 30 px dreapta, 30 px jos, 30 px stânga

Stil de animație: Fold
Direcția animației: Stânga
Întârziere animație: 200 ms

NOTĂ: Direcția de animație a fiecărui modul de blurb va fi diferită. Primul se desfășoară spre stânga.

Sub fila Avansat ...

Aici putem adăuga acel efect de strălucire în modulul nostru și indentați antetul doar un pic.

Adăugați următorul CSS în caseta Element principal: 

border-radius: 6px;
box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);

Adăugați următorul CSS în caseta Titlu Blurb: 

text-indent: 10px;

animaţie

Salvează setările

Duplicați modulul Blurb pentru a construi următoarele trei Blurbs

Acum că avem primul nostru modul Blurb proiectat și animat, putem duplica modulul pentru a crea resturile blurbs.

Plasați cursorul peste modulul Blurb și faceți clic pe pictograma modulului duplicat. În noul modul duplicat care apare mai jos actualizați setările după cum urmează:

Sub fila Conținut ...

Titlu: Bloom
Pictogramă: [selectați pictograma nouă]
Culori de gradient de fundal: # ff56f9, # c43dff

animaţie

Sub fila Proiectare ...

Direcția animației: Jos

NOTĂ: Animația de pliere are o direcție în jos pe acest blurb.

animaţie

Sub fila Avansat ...

Înlocuiți CSS în caseta Element principal cu următoarele: 

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);

Salvează setările

Faceți un alt duplicat al modulului de blurb și trageți duplicatul în coloana din dreapta. Apoi actualizați modulul Blurb cu următoarele setări:

Sub fila Conținut ...

Titlu: Extra
Pictogramă: [selectați pictograma nouă]
Culori de gradient de fundal: # 56ffda, # 38d5ea

Sub fila Proiectare ...

Direcția animației: sus

NOTĂ: animația de pliere are o direcție în sus pe acest blurb.

animaţie

Sub fila Avansat ...

Înlocuiți CSS în caseta Element principal cu următoarele: 

border-radius: 6px;
box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);

Faceți un alt duplicat al modulului de blurb pe care tocmai l-ați actualizat în coloana din dreapta, astfel încât să apară direct dedesubt. Apoi actualizați modulul Blurb cu următoarele setări:

Sub fila Conținut ...

Titlu: Monarh
Pictogramă: [selectați pictograma nouă]
Culori de gradient de fundal: # f2743a, # ff5656

Sub fila Proiectare ...

Direcția animației: Corect

NOTĂ: Pe acest blurb animația se desfășoară spre dreapta.

Sub fila Avansat ...

Înlocuiți CSS în caseta Element principal cu următoarele: 

border-radius: 6px;
box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
NOTĂ: Deoarece aceste 4 blurbs vor avea același stil și întârziere, acest lucru creează un efect invers de înflorire a florii, deoarece toate cele 4 module se vor plia în direcții diferite.

animaţie

Salvează setările

Acum, să corectăm spațiul actualizând setările de rând după cum urmează:

Sub fila Proiectare ...

Utilizați lățimea personalizată: DA
Lățime personalizată: 1366 px
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 2

Căptușeală personalizată: 80 px sus, 0 px dreapta, 160 px jos, 0 px stânga
Căptușeală personalizată Coumn 1: 140px Top

Construiți al doilea rând

Acum suntem gata să creăm următorul rând pentru secțiunea noastră. Pentru a accelera lucrurile, vom copia și copia elemente de design din rândul și modulele noastre proiectate anterior.

Mai întâi să adăugăm un nou rând cu o coloană la secțiunea noastră. Apoi actualizați setările rândului cu următoarele:

Utilizați lățimea personalizată: DA
Lățime personalizată: 1366 px
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 2

Salvează setările

Apoi copiați primul modul de text din primul rând pe care l-ați creat, care conține titlul h1. Apoi actualizați setările după cum urmează:

Sub fila Conținut ...

Înlocuiți eticheta h1 curentă cu următoarele: 

<h1>Don't Settle for Less</h1>

Sub fila Proiectare ...

Orientare text: centru
Stil de animație: Flip
Intensitatea animației: 70%

Salvează setările

Apoi copiați modulul buton din rândul anterior și lipiți-l sub modulul text pe care tocmai ați terminat de actualizat în al doilea rând. Apoi actualizați modulul buton după cum urmează:

Sub fila Conținut ...

Text buton: Alăturați-vă astăzi

Sub fila Proiectare ...

Aliniere buton: centru

Stil de animație: Flip
Intensitatea animației: 70%

NOTĂ: Butonul și antetul de deasupra acestuia au ambele aceeași animație.

animaţie

Salvează setările

Acum pentru ultimul nostru rând. Creați un rând nou cu o structură de coloană jumătate jumătate. Înainte de a adăuga modulele dvs., actualizați setările rândului după cum urmează:

Sub fila Proiectare ...

Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 2

Salvează setările

Apoi, copiați modulul violet „Divi” Blurb din rândul anterior și lipiți-l în coloana din stânga a noului rând. Apoi actualizați următoarele setări:

Sub fila Conținut ...

Titlu: Constructor
Pictogramă: [selectați pictograma nouă]
Culori de gradient de fundal: # ff568e, # ff3d5d

NOTĂ: Direcția animației ar trebui să fie deja „la stânga” dacă ați copiat modulul de blurb corect. Dacă nu, asigurați-vă că este.

Sub fila Avansat ...

Înlocuiți CSS în caseta Element principal cu următoarele: 

border-radius: 6px;
box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);

Salvează setările

Apoi copiați modulul de albire „Extra” bluegreen din partea de sus a coloanei din dreapta din primul rând pe care l-ați creat. Apoi lipiți-l în coloana din dreapta a noului al treilea rând.

Apoi actualizați setările de blurb după cum urmează:

Sub fila Conținut ...

Titlu: Senin
Pictogramă: [selectați pictograma nouă]
Culori de gradient de fundal: # 3da4ff, # 385eea

NOTĂ: Direcția animației ar trebui să fie deja „sus” dacă ați copiat modulul de blurb corect. Dacă nu, asigurați-vă că este.

Sub fila Avansat ...

Înlocuiți CSS în caseta Element principal cu următoarele: 

border-radius: 6px;
box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);

Salvează setările

Asta e.

Bonus: Descărcați aceste secțiuni pentru import ușor

Ca un bonus bonus, am împachetat secțiunile incluse în tutorialul de astăzi într-o descărcare gratuită pe care o puteți obține utilizând formularul de înscriere prin e-mail de mai jos. Pur și simplu introduceți adresa de e-mail și va apărea butonul de descărcare. Nu vă faceți griji cu privire la „re-abonare” dacă faceți deja parte din buletinul nostru informativ Divi. Reintroduceți adresa de e-mail nu va avea ca rezultat mai multe e-mailuri sau duplicate. Va dezvălui pur și simplu descărcarea.

Bucurați-vă!


Descărcați pachetul de aspect
Descarcă gratis

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!

Pentru a utiliza aceste descărcări, începeți prin localizarea fișierului zip numit Animation_Effects_Part_4.zip în folderul nostru de descărcări. Dezarhivați-l pentru a dezvălui următoarele importuri.

Animation Effects Part 4 (secțiunea 1) .json

Animation Effects Part 4 (secțiunea 2) .json

Navigați în administratorul dvs. WordPress la Divi> Biblioteca Divi> Import & Export. Când apare modul de portabilitate, faceți clic pe fila Import și pe butonul etichetat alegeți fișierul.

Selectați fișierul json pe care îl preferați și faceți clic pe „Importați machete Divi Builder”. Odată ce importul este finalizat, navigați la postare sau la pagina în care doriți să adăugați una dintre secțiunile de mai sus.

Activați constructorul vizual. Navigați la partea de pagină la care doriți să adăugați una dintre secțiunile de mai sus. Când faceți clic pe pictograma Adăugați o secțiune nouă, vi se va prezenta opțiunea „Adăugați din bibliotecă”. Alegeți această opțiune și selectați aspectul dorit.

add-section-from-library

Încheierea

Sper că v-a plăcut să construiți împreună această secțiune uimitoare. Combinația de culori, umbre strălucitoare și animație creativă fac din acesta un aspect remarcabil pentru prezentarea propriilor descărcări sau produse.

Venind

În partea 5, vă voi arăta cum să încorporați cu succes stilul de animație Roll pe telefoanele mobile în secțiunile dvs.

animaţie

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!