Adăugarea de efecte 3D la GIF-uri și videoclipuri HTML5 pentru a afișa animații de produs unice în Divi

GIF-urile animate și videoclipurile HTML5 pot fi excelente pentru a anima modul în care funcționează un produs pe site-ul dvs. web. Aceste scurte animații comunică vizitatorului informații valoroase într-un mod care este mai ușor digerat decât un videoclip obișnuit. Adăugarea acestui tip de GIF-uri și videoclipuri HTML5 se poate face destul de ușor cu Divi. Și cu puțină creativitate, puteți adăuga efecte 3D pentru animații unice ale produselor.

În acest tutorial, vă voi arăta cum să adăugați efecte 3D la GIF-uri și videoclipuri HTML5 pentru a afișa animații de produs unice în Divi. Acest design funcționează foarte bine pentru cei care caută un aspect creativ pentru a prezenta un produs sau serviciu prezentat. Pentru a face acest lucru, va trebui mai întâi să înțelegem cum să adăugați GIF-uri și încorporări video HTML5 pe pagina dvs. utilizând Divi. Apoi vom putea folosi opțiunile de transformare ale lui Divi pentru a poziționa și roti GIF (sau video) în spațiul 3d. Pentru a termina lucrurile, vom folosi câteva tehnici de proiectare Divi pentru a crea un aspect frumos al secțiunii pentru a merge cu acele GIF-uri și videoclipuri 3D.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra designului pe care îl vom construi în acest tutorial. Designul arată similar atunci când utilizați un GIF și un videoclip HTML5 pentru a crea animațiile produsului.

Descărcați gratuit Efecte 3D pentru videoclipuri GIF și HTML5

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl 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.

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 importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Abonați-vă la canalul nostru Youtube

Utilizarea GIF-urilor pentru animații scurte de produse

GIF-urile există de mult. Acest lucru se datorează probabil faptului că GIF-urile sunt ușor de realizat și acceptate pe scară largă în toate browserele. Și pot funcționa bine pentru animații de produs foarte scurte. Deoarece un GIF este o imagine, îl puteți utiliza într-un modul Divi Image la fel ca orice alt jpg sau png. Acest lucru vă permite să stilizați GIF cu puterea maximă a setărilor încorporate ale Divi. Atenție însă, GIF-urile cu o durată mai mare și o rată de cadre mai mare pot duce la dimensiuni de fișiere foarte mari. Deci, cel mai bine este să vă păstrați GIF-urile scurte și cât mai mici posibil.

Utilizarea videoclipului HTML5 ca înlocuitor GIF

Videoclipurile HTML5 devin un înlocuitor GIF popular, în special pentru animațiile mai lungi ale produselor. Este posibil să fi observat că sunt folosite pe noul design al site-ului Elegant Themes. Acestea au o dimensiune semnificativ mai mică comparativ cu GIF-urile și, prin urmare, necesită mai puțin timp pentru încărcare. Iar adăugarea unui videoclip HTML5 pe site-ul dvs. Divi este simplă. Tot ce trebuie să faceți este să adăugați elementul video HTML5 pentru a încorpora videoclipul în pagina dvs. (similar cu modul în care ați adăuga un cod scurt video în WordPress). De asemenea, puteți personaliza videoclipul cu controale ascunse, looping și redare automată, ceea ce duce la o animație de înaltă calitate, care funcționează la fel ca un GIF. În plus, atunci când adăugați încorporarea la un modul Divi, puteți utiliza și Divi Builder pentru a stiliza videoclipul în moduri creative.

Consultați această postare pentru mai multe informații despre motivele pentru care ar trebui să luați în considerare utilizarea videoclipurilor HTML5 pe GIF-uri obișnuite.

Acum, că înțelegem un pic mai multe despre utilizarea GIF-urilor și a videoclipurilor HTML5, suntem gata să începem să le folosim în Divi.

De ce aveți nevoie pentru acest tutorial

Pentru a începe, veți avea nevoie de următoarele:

1. O imagine GIF
2. Un fișier video MP4 (și adresa URL a acelui fișier video) pentru a fi utilizat în încorporarea elementului video HTML5. Pentru asistență maximă a browserului, puteți include, de asemenea, același videoclip și în format webm (mai multe despre acest lucru mai târziu).
3. Tema Divi instalată și activă
4. O nouă pagină creată pentru a construi de la zero pe partea frontală (constructor vizual)

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Adăugarea unui efect 3D la un videoclip GIF animat sau HTML5

Înainte de a ajunge prea departe în proiectarea aspectului complet al secțiunii pentru acest tutorial, m-am gândit că ar fi mai bine să vă arăt cum să adăugați efectul 3D atât unui GIF, cât și unui videoclip HTML5. Odată ce am terminat, vom șterge restul aspectului secțiunii cu un design modern frumos.

Deocamdată, să începem cu adăugarea efectului 3D la un GIF în Divi.

Crearea unui GIF

Există o mulțime de moduri de a crea un GIF pe web. Deoarece acest tutorial este despre crearea unui GIF pentru a anima modul în care funcționează un produs, veți dori să înregistrați o secțiune a ecranului (folosind un înregistrator de ecran) și apoi să convertiți fișierul video într-un fișier GIF. Nu uitați să creați GIF cât mai mic posibil pentru a limita dimensiunea fișierului și timpul de încărcare. Odată ce GIF este creat, îl veți putea folosi așa cum ați face orice altă imagine din Divi.

Dacă doriți să aflați cum să creați un GIF utilizând Snagit, consultați postarea noastră despre Cum să schimbați o imagine de fundal cu un Gif animat pe Hover.

Adăugarea unui efect 3D la un GIF în Divi

Acum este timpul să adăugăm GIF la Divi, astfel încât să-l putem stiliza cu un efect 3D cool.

Pentru a începe lucrurile, adăugați o nouă secțiune obișnuită cu un rând din două coloane.

Înainte de a adăuga un modul, trebuie să adăugăm proprietatea perspectivă la coloana care va conține GIF-ul nostru. Pentru a face acest lucru, deschideți setările de rând și adăugați următorul fragment de CSS în elementul principal al coloanei 1:

perspective: 1000px;

Această proprietate de perspectivă este necesară pentru a adăuga perspectivă elementului din coloană. Un element are nevoie de perspectivă, astfel încât să putem obține un efect 3D atunci când folosim opțiunile de transformare ale lui Divi. Pentru o mai bună înțelegere, consultați postarea noastră despre cum să utilizați perspectiva cu opțiuni de transformare pentru a proiecta pereți foto 3D.

Acum adăugați un modul de imagine în coloana 1.

Încărcați GIF în modulul imagine. Pentru acest design, GIF-ul ar trebui să fie de aproximativ 600 x 700 px.

Apoi utilizați opțiunile de transformare pentru a scala, roti și înclina GIF în spațiu 3D.

Transformă rotire axa Y: 8 grade
Transformare Rotire axă X: 28 grade

Transformă axa Y înclinată: 10 grade
Transformă Skew X Axis: -8deg

Scala de transformare (tabletă): 80%

Acum să vedem rezultatul.

Adăugarea unui efect 3D la un videoclip HTML5 în Divi

Înainte de a adăuga efectul 3D, trebuie mai întâi să ne creăm videoclipul HTML5. Vom parcurge pașii de mai jos pentru a face acest lucru. Dar dacă doriți o explicație mai completă, consultați postarea noastră despre Cum se utilizează videoclipuri HTML5 pentru a crea gifuri animate la dimensiuni mai mici de fișiere.

Crearea codului de încorporare video HTML5

Elementul video HTML5 are următoarea structură de bază.

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

Nu trebuie să știți multe despre HTML pentru a vedea ce face acest cod. În interiorul elementului <video> , aveți două elemente <source> care conține calea / adresa URL către fișierele video pe care doriți să le afișați. Fiecare element sursă are un videoclip într-un format de fișier diferit (webm și mp4). Ambele sunt necesare pentru asistență maximă a browserului. Comanda este importantă, de asemenea. Videoclipul webm este plasat deasupra videoclipului mp4 din cod, deoarece este un format video de calitate superioară, dar este mai puțin acceptat de browsere. Deci, dacă un browser acceptă video webm, îl va afișa. Dar dacă browserul nu acceptă video webm, va folosi formatul video mp4 de sub acesta. Nu este necesar să includeți ambele formate video, dar este cea mai bună practică. Și dacă aveți de gând să utilizați doar unul, utilizați formatul mp4, deoarece este mai larg acceptat.

De fapt, ori de câte ori utilizați modulul video Divi pentru a afișa videoclipuri auto-găzduite, Divi creează același element video HTML5 pentru a afișa videoclipuri. Motiv pentru care modulul Video vă permite să adăugați atât un fișier video mp4, cât și un webm.

Pentru a utiliza codul pentru propriul videoclip, trebuie pur și simplu să adăugați URL-ul video în paranteze după atributul src .

Dacă încărcați fișierele video pe site-ul dvs. WordPress, puteți prelua adresele URL din biblioteca media.

Apoi lipiți adresele URL video în paranteze după atributul src .

Ar trebui să arate așa ceva când ați terminat.

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

În continuare, vom adăuga patru atribute pentru a controla afișarea și funcționalitatea videoclipului. Acest tip de control este motivul principal pentru inserarea manuală a videoclipului HTML5 în loc să utilizați modulul video Divi. Aceste atribute includ autoplay (deci videoclipul pornește automat), loop (deci videoclipul se repetă), muted (astfel încât videoclipul să nu redea audio) și playsinline (deci videoclipul se redă în zona de redare a elementului). Pentru a aplica aceste atribute videoclipului, adăugați fiecare dintre atribute în parantezele etichetei <video> de la început.

Acum, codul va arăta astfel.

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

Notă: În mod normal, ați aplica atributul de controls pentru videoclipurile HTML5, dar în acest caz îl vom lăsa, astfel încât videoclipul să funcționeze ca un GIF.

Acum sunteți gata să încorporați codul.

Încorporarea videoclipului HTML5

Pentru a încorpora un videoclip HTML5 în pagina dvs., putem folosi modulul de cod.

Înainte de a înlocui modulul de imagine GIF cu modulul nostru de cod, să mergem mai departe și să duplicăm întreaga secțiune, astfel încât să putem păstra exemplul nostru GIF. În secțiunea duplicată, ștergeți modulul imagine și adăugați un modul text în locul său.

Apoi lipiți codul de încorporare video HTML5 în caseta de introducere a codului.

Apoi copiați stilurile de transformare din modulul de imagine și lipiți stilurile de transformare în modulul de cod. Sau puteți actualiza stilurile de transformare după cum urmează:

Transformă rotire axa Y: 8 grade
Transformare Rotire axă X: 28 grade
Transformă axa Y înclinată: 10 grade
Transformă Skew X Axis: -8deg
Scala de transformare (tabletă): 80%

Deoarece folosesc același videoclip pe care l-am folosit pentru a crea GIF, designul va arăta foarte asemănător. Cu toate acestea, dimensiunea videoclipului este semnificativ mai mică decât dimensiunea GIF. Iată rezultatul.

Finalizarea proiectării aspectului secțiunii

Acum că avem la dispoziție GIF 3D (sau video HTML5). Putem finaliza proiectarea aspectului secțiunii noastre. Pentru acest design, voi folosi secțiunea cu videoclipul HTML5 din coloana 1.

Personalizarea secțiunii și rândului

Deschideți setările secțiunii și actualizați următoarele.

Căptușeală: 15% sus, 15% jos

Apoi deschideți setările rândului și actualizați următoarele:

Culoarea din stânga a gradientului de fundal: # ba7fe8
Culoarea dreaptă a gradientului de fundal: # 4b84ff

Înălțime maximă: 300 px (desktop), niciuna (tabletă și telefon)

Căptușeală: 0 px sus, 0 px jos

În continuare, putem da rândului o umbră de cutie interioară semi-transparentă pentru un element de design unic.

Box Shadow: vezi captura de ecran
Poziție orizontală a umbrei cutiei: 0 px
Box Shadow Vertical Position: 0px
Puterea răspândirii umbrei cutiei: 40 px
Culoare umbră: rgba (255,255,255,0,89)

Poziționarea modulului de cod

Acum, să aducem puțin modulul de cod cu videoclipul, ajustând proprietatea de traducere transformată după cum urmează:

Transformă axa Y tradusă: -20% (desktop), -7% (telefon)

Adăugarea unui modul Call to Action

Pentru a finaliza proiectarea, să adăugăm un modul de apelare la acțiune în coloana 2. Acesta va fi un loc minunat pentru a adăuga o descriere a produsului prezentat cu un buton.

Adăugați o adresă URL de buton pentru a face butonul să apară.

Continuați să actualizați setările după cum urmează:

Culoare fundal: #ffffff
Alinierea textului: stânga
Culoarea textului: Întunecat

Titlu Font: Lato
Greutatea fontului titlului: Bold
Culoare text titlu: # 20292f
Font corp: Lato
Culoarea textului corpului: # 6d7c90
Dimensiunea textului corpului: 17 px
Înălțimea liniei corpului: 1,8em

Dimensiune text buton: 12 px
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # 4b84ff
Lățimea chenarului butonului: 0 px
Raza chenarului butonului: 100 px
Distanța dintre litere și butoane: 2 px
Buton Font: Lato
Buton Font Greutate: greu
Stil Font Buton: TT
Garnitura de butoane: 12 px sus, 12 px jos, 20 px stânga, 20 px dreapta

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 0px
Puterea răspândirii umbrei cutiei: 40 px
Culoare umbră: rgba (103.151.255,0.11)

Marja: 10% corect

Transformă axa Y tradusă: -33% (desktop), -15% (telefon)
Transformă axa X tradusă: -5%

Rezultat final

Desktop

Comprimat

Telefon

Gânduri finale

Adăugarea efectului 3D la GIF-uri și videoclipuri HTML5 oferă într-adevăr un afișaj unic pentru acele animații de produse. Opțiunile de transformare ale lui Divi (combinate cu proprietatea perspectivă) facilitează adăugarea efectelor 3D la GIF-urile și videoclipurile dvs.

Și, sperăm, ați învățat câteva lucruri despre cum să utilizați GIF-uri și videoclipuri HTML5 cu Divi. GIF-urile sunt ușor de utilizat, dar este mai greu să păstrezi dimensiunea fișierului prietenos pe web. Videoclipurile HTML5 necesită utilizarea unui cod de încorporare, dar pot funcționa extrem de bine ca înlocuitor GIF pentru animații mai lungi.

Simțiți-vă liber să explorați modalități noi și interesante de a utiliza acest design pentru a prezenta animații pentru produse și servicii în următorul dvs. proiect.

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

Noroc!