Utilizarea animației de diapozitive Divi pentru a arăta progresia unui proces

Bine ați venit la partea 3 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 secțiuni ale site-ului dvs. web pentru afișarea produselor și serviciilor, pe măsură ce am construit secțiunile 3 și 4 din pagina noastră demonstrativă de animație.

Astăzi, vom aborda Secțiunea 5, care folosește animație excelentă pentru a afișa patru module uimitoare Blurb. Timpul pas cu pas al animațiilor blurb completează într-adevăr procesul pas cu pas în care sunt utilizate blurbs.

Hai să ne scufundăm!

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

Pregătirea elementelor de proiectare

Singurul lucru de care aveți nevoie cu adevărat pentru acest tutorial sunt cele 4 207 × 188 pictograme de imagine utilizate pentru modulele Blurb. Iată imaginile pe care le voi folosi.

Utilizarea animației de diapozitive Divi pentru a arăta progresia unui proces

Abonați-vă la canalul nostru Youtube

Secțiunea 5 a clădirii

Folosind Visual Builder, adăugați o secțiune obișnuită (în secțiunea 4 dacă urmăriți seria). Înainte de a face orice altceva, adăugați culoarea de fundal # f5f9fc în secțiunea dvs. și salvați setările.

Adăugați titlul secțiunii dvs. folosind două module de text

Apoi adăugați un rând cu o coloană. În rând, adăugați un modul de text și actualizați setările după cum urmează.

Sub fila Conținut ...

Conținut: „Configurare”

Sub fila Proiectare ...

Font text: Bold (B), majuscule (TT)
Dimensiunea fontului textului: 15 px
Culoarea textului textului: # 6a8091
Spațiere scrisoare text: 5 px
Înălțimea liniei textului: 1.9em
Orientare text: centru

Distanța: 20px jos

Stil de animație: Slide
Direcția animației: sus
Durata animației: 850 ms

Salvează setările

Acum să adăugăm titlul secțiunii adăugând un alt modul de text sub cel pe care tocmai l-ați creat. Actualizați setările pentru text după cum urmează:

Sub fila Conținut ...

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

<h1>Say Hello to DIVI</h1>

Sub fila Proiectare ...

Font antet: Bold (B)
Aliniere text antet: centru
Dimensiune font antet: 39 px
Culoarea textului antetului: # 2f3a54

Notă: Deoarece acesta este un antet h1, trebuie să modificăm setările Textului antetului.

Lățime: 600 px (introduceți această valoare)
Alinierea modulului: centru
Marjă personalizată: 20 px jos

Stil de animație: Slide
Direcția animației: sus
Durata animației: 850 ms
Intensitate animație: 12%
Curba de viteză a animației: ușurință

Salvează setările

Proiectează cele patru Blurbs

Acum suntem gata să adăugăm modulele noastre Blurb. Mai întâi, creați un rând cu o structură cu patru coloane (1/4 1/4 1/4 1/4).

Adăugați un modul Blurb în prima coloană (extrema din stânga).

Apoi actualizați setările Blurb.

Sub fila Conținut ...
Adăugați următorul html în fila text a casetei de conținut:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.</p>
<p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ➔</strong></a></p>

Notă: Am adăugat manual într-un link pentru a oferi utilizatorului o altă opțiune de a face clic. Asigurați-vă că adresa URL pentru linkul manual se potrivește cu linkul pe care îl adăugați la adresa URL a modulului blurb.

Url: [introduceți adresa URL]
Imagine: [introduceți imaginea dvs. de 207 × 188]
Culoare fundal: #ffffff

Sub fila Proiectare ...

Orientare text: centru

Font antet: implicit, cu caractere aldine (B), cu majuscule (TT)
Culoare text antet: # 7969f4
Distanța între litere antet: 3 px
Înălțimea liniei antetului: 3em

Culoarea textului corpului: # 6a8091
Înălțimea liniei corpului: 1.9em

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

Stil de animație: Slide
Direcția animației: sus
Durata animației: 700 ms
Intensitatea animației: 4%
Animație imagine / pictogramă: fără animație

Sub fila Avansat ...

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

border-radius: 6px;
box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);

Salvează setările

Acum că ați finalizat un Blurb, îl putem folosi ca șablon pentru următoarele trei blurbs.

Continuați și faceți clic dreapta pe modul și selectați copiați modulul. Apoi lipiți (ctrl + v) modulul în fiecare dintre cele trei coloane rămase.

Acum tot ce trebuie să facem este să adăugăm câteva actualizări la fiecare dintre cele trei module duplicate.

Pentru modulul Blurb din a doua coloană, actualizați următoarele:

Sub fila Conținut ...

Titlu: Pasul 2
Conținut: [actualizați textul și adresa URL a linkului manual]
Adresă URL: [actualizați adresa URL blurb]
Imagine: [adăugați o imagine nouă de 207 × 188]

Sub fila Proiectare ...
Culoarea textului antetului: # e944ff
Întârziere animație: 50 ms
Intensitate animație: 12%

Pentru modulul Blurb din a treia coloană, actualizați următoarele:

Sub fila Conținut ...

Titlu: Pasul 3
Conținut: [actualizați textul și adresa URL a linkului manual]
Adresă URL: [actualizați adresa URL blurb]
Imagine: [adăugați o imagine nouă de 207 × 188]

Sub fila Proiectare ...

Culoarea textului antetului: # 3ebaef
Întârziere animație: 100 ms
Intensitatea animației: 20%

Pentru modulul Blurb din a patra coloană, actualizați următoarele:

Sub fila Conținut ...

Titlu: Pasul 4
Conținut: [actualizați textul și adresa URL a linkului manual]
Adresă URL: [actualizați adresa URL blurb]
Imagine: [adăugați o imagine nouă de 207 × 188]

Sub fila Proiectare ...
Culoare text antet: # 95d624
Întârziere animație: 150 ms
Intensitatea animației: 30%

După ce ați actualizat toate Blurbs, să actualizăm setările Row 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

Stil de animație: Zoom
Durata animației: 700 ms
Animație Opacitate de pornire: 100%

Salvează setările

Acum ați terminat cu această secțiune. Pagina demo are o altă imagine sub blurbs, dar nu am considerat că este necesar să o includ aici.

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

Î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!

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

Animation Effects Partea 3 (secțiunea 1) .json

Animation Effects Part 3 (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.

Încheierea

Proiectarea și animația secțiunii 5 arată într-adevăr puterea pe care doar câteva setări de animație o pot oferi asupra livrării conținutului. Nu numai că arată grozav dacă fiecare dintre blurbs arată în progresie, dar are și sens având în vedere că oricum afișați pași către un proces.

Venind

În partea 4 a seriei noastre, vă voi arăta un aspect superb pentru afișarea produselor sau a descărcărilor. Și, desigur, voi evidenția utilizarea inteligentă a animației pe tot parcursul.

Pana data viitoare!

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