Utilizarea animațiilor Divi pentru a vă afișa conținutul în vizualizare

Bine ați venit la partea 5 din această serie 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 am construit secțiunea 6 a paginii noastre demo de animație. V-am arătat cum să proiectați un aspect pentru afișarea descărcărilor de produse cu culori luminoase, umbre strălucitoare și animație precisă.

Astăzi, vom construi Secțiunea 7 a paginii noastre de demonstrație de animație, care este un exemplu perfect pentru cum să utilizați efectul de animație de rulare pentru a adăuga mișcare de viață la conținutul dvs. Produsul final va da impresia că textul și telefoanele mobile alunecă și se rotesc în vizualizare din unghiuri diferite în timp ce derulați pagina.

Aceasta este una dintre animațiile mele preferate. Să începem.

Iată o scurtă privire asupra designului și animației pe care o vom construi în postarea de astăzi

Pregătirea elementelor de proiectare

Veți avea nevoie de trei imagini pentru acest tutorial. Primele două imagini imaginile verticale ar trebui să fie în jur de 580 × 950 rotite la un unghi de 10% în sens invers acelor de ceasornic. Imaginea orizontală ar trebui să fie de 1250 × 608 (de asemenea, rotită la un unghi de 10% în sens invers acelor de ceasornic) cu aproximativ 300 px de spațiu de fundal extra transparent în dreapta imaginii, astfel încât să se potrivească frumos în coloana furnizată. Asigurați-vă că imaginile telefonului sunt în format png cu un fundal transparent. Iată imaginile pe care le-am folosit pentru postarea de astăzi.

Imagine telefonică verticală # 1

Imagine telefonică verticală # 2

Imagine telefonică verticală # 3

Utilizarea animațiilor Divi pentru a vă afișa conținutul în vizualizare

Abonați-vă la canalul nostru Youtube

Construirea secțiunii 7 a demonstrației

Înainte de a începe procesul de construcție, iată o privire asupra vederii wireframe a aspectului secțiunii pe care îl vom crea folosind constructorul vizual.

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 (un sfert un sfert pe jumătate) în secțiunea dvs.

Actualizați setările rândului

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

Sub fila Proiectare ...

Utilizați lățimea personalizată: DA
Lățime personalizată: 91%
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1

Coloana 2 Căptușeală personalizată: 5% sus
Coloana 3 Căptușeală personalizată: 24% în partea de sus

Adăugarea imaginii # 1

În prima coloană (extrema din stânga) a aspectului nostru, adăugați un modul de imagine și actualizați setările imaginii după cum urmează:

Sub fila Conținut ...

Adresa URL a imaginii: [încărcați imaginea nr. 1]

Sub fila Proiectare ...

Forțează lățimea completă: DA

Stil de animație: Roll
Direcția animației: Corect
Intensitate animație: 16%
Animație Opacitate de pornire: 100%

Salvează setările

Adăugarea textului animat cu modulele Divider și Call to Action

Acum treceți la coloana din mijloc (un sfert) unde modulul divizor va fi folosit pentru a adăuga o linie scurtă deasupra textului.

Adăugați un modul divizor în coloană.

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

Sub fila Conținut ...

Afișați divizorul: DA

Sub fila Proiectare ...

Culoare: # e0c48f
Greutatea divizorului: 3 px
Lățime: 60 px (trebuie să introduceți această valoare, deoarece valoarea implicită este procentuală)
Alinierea modulului: implicit (stânga)
Căptușeală personalizată: 80 px în partea de sus, 80 px în stânga

Stil de animație: Fold
Direcția animației: Corect
Durata animației: 1200 ms
Întârziere animație: 50 ms
Intensitatea animației: 70%
Animație Opacitate de pornire: 0%

Salvează setările

Sub modulul divizor adăugați un modul de apel la acțiune cu următoarele setări:

Sub fila Conținut ...

Titlu: „1000 de cuvinte”
Textul butonului: „Aflați mai multe”
Conținut: „Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id. ”
Link: #
Folosiți culoarea de fundal: NU

Sub fila Proiectare ...

Culoarea textului: Întunecat
Orientare text: stânga
Font antet: Lato, Bold (B) majuscule (TT)
Dimensiune font antet: 38 px
Culoarea textului antetului: # 33454f
Distanța între litere antet: 0.2em
Înălțimea liniei antetului: 1.4em

Font corp: Lato
Dimensiunea fontului corpului: 18 px
Culoarea textului corpului: # 9b9b9b
Înălțimea liniei corpului: 1,8em

Utilizați stiluri personalizate pentru buton: DA
Dimensiune text buton: 15 px
Culoarea textului butonului: # f2733c
Culoarea fundalului butonului: rgba (225,225,225,0)
Lățimea chenarului butonului: 0 px
Distanța dintre litere și butoane: 2 px
Buton Font: Lato, Bold (B), majuscule (TT)
Pictogramă buton: săgeată dreapta
Afișați numai pictograma în cursă pentru butonul: NU
Distanța între litere și trecerea butonului: 0 px

Stil de animație: Fold
Direcția animației: Corect
Durata animației: 1200 ms
Întârziere animație: 50 ms
Intensitatea animației: 70%
Animație Opacitate de pornire: 0%

Salvează setările

Adăugarea imaginii # 2

Apoi adăugați un modul Image sub modulul Call to Action pe care tocmai l-ați creat. Actualizați setările imaginii după cum urmează:

Sub fila Conținut ...

Adresa URL a imaginii: [încărcați imaginea nr. 2]

Sub fila Proiectare ...

Forțează lățimea completă: DA

Stil de animație: Roll
Direcția animației: Stânga
Intensitatea animației: 13%
Animație Opacitate de pornire: 100%

Adăugați imaginea nr. 3

Asta este pentru a doua noastră coloană (din mijloc). Acum să adăugăm imaginea # 3 în a treia coloană (extremă dreapta). Pentru a face acest lucru, putem copia / copia modulul de imagine pe care tocmai l-ați adăugat în partea de jos a celei de-a doua coloane și îl putem lipi în a treia coloană. Deoarece stilurile de animație sunt aceleași, tot ce trebuie să actualizați pentru noul modul de imagine este adresa URL a imaginii reale.

Duplicați și personalizați modulul Divider și Call To Action

După ce adăugați noua adresă URL a imaginii la imaginea duplicată din coloana a treia, continuați un duplicat / copiați atât modulul divizor, cât și modulul Apel la acțiune pe care le-ați creat în partea de sus a celei de-a doua coloane și trageți / lipiți cele două module sub imagine # 3 în a treia coloană.

Pentru modulul Divider, schimbați setarea Direcție animație din fila Design la „Stânga”.

Pentru noul nostru modul de îndemn, continuați și actualizați următoarele setări:

Sub fila Conținut ...

Titlu: Un nou mod de construire

Sub fila Proiectare ...

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

Direcția animației: Stânga

Acum să verificăm rezultatul nostru final ...

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 zip numit Animation_Effects_Part_5.zip în folderul nostru de descărcări. Dezarhivați-l pentru a dezvălui următoarele importuri.

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

Animation Effects Partea 5 (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

Acest aspect este puțin dificil de realizat. Dar, odată ce obțineți imaginile potrivite și spațiul potrivit, animația reunește frumos întregul aspect. Rularea realistă a imaginilor telefonului aproape pare că cineva le alunecă pe o masă albă în vizualizarea noastră în timp ce derulăm pagina. Acest exemplu de animație cu rol este cu siguranță unul care iese în evidență.

Venind

În următoarea postare, voi încheia seria noastră cu partea 6. Vă voi arăta cum să utilizați animația de diapozitive cu câteva imagini și css personalizate pentru a crea un aspect uimitor pentru prezentarea rețetelor de gătit. Cu toate acestea, același aspect ar putea fi modificat și utilizat pentru multe elemente prezentate diferite.

Aștept cu nerăbdare să aud de la dvs. în comentarii.