Cum să adăugați animații Lottie în WordPress (4 pași simpli)

Folosirea animațiilor Lottie în WordPress poate fi o modalitate excelentă de a vă înfrumuseța paginile. Sunt de obicei ușoare și personalizabile și, prin urmare, vă pot ajuta să creați conținut captivant fără a vă afecta experiența utilizatorului (UX). Cu toate acestea, este posibil să căutați o modalitate fără stres de a le adăuga pe site-ul dvs.

Din fericire, procesul este mai ușor decât ați crede. Folosind un plugin precum Otter Blocks, puteți adăuga și personaliza animațiile Lottie cu doar câteva clicuri. De asemenea, veți putea seta condiții de vizibilitate, astfel încât să se joace la momentul potrivit.

O introducere în animațiile Lottie

Lottie este un format de fișier open-source pentru animații web. Vă permite să creați animații personalizate pentru marca dvs. și să le utilizați pe site-ul dvs. web:

Desigur, puteți opta oricând pentru GIF-uri, dar aceste fișiere vă pot îngreuna site-ul. Animațiile Lottie sunt mult mai mici decât GIF-urile. Prin urmare, vă pot ajuta să vă faceți site-ul mai interesant, păstrând în același timp UX și oferind timpi de încărcare rapid.

În plus, animațiile Lottie vin cu o mulțime de opțiuni de personalizare. Biblioteca în sine este extinsă, oferind acces la mii de elemente, personaje și ilustrații. Cu toate acestea, puteți, de asemenea, să schimbați culorile, să schimbați setările de afișare și să adăugați condiții de vizibilitate.

Animațiile personalizate vă pot ajuta să vă impresionați vizitatorii. În plus, vă pot face site-ul să arate proaspăt și unic.

Cum să adăugați animații Lottie la WordPress (în 4 pași)

Acum că știți mai multe despre Lottie Animations, să vedem cum să le adăugați pe site-ul dvs. WordPress:

Pasul 1: Instalați și activați Otter Blocks

Există multe modalități de a adăuga animații Lottie în WordPress. De exemplu, puteți utiliza HTML și JavaScript. Cu toate acestea, această metodă poate fi destul de complexă.

Alternativ, puteți utiliza pluginul de animații Lottie, deși este posibil să nu fie compatibil cu toți generatorii de pagini. În plus, nu oferă multe opțiuni stilistice.

Cel mai simplu mod de a adăuga Lottie Animations pe site-ul tău este cu un plugin precum Otter Blocks:

Acest plugin adaugă noi blocuri de conținut și șabloane site-ului dvs., inclusiv un bloc pentru animațiile Lottie. De asemenea, extinde funcționalitatea Editorului de blocuri cu CSS personalizat, animații, condiții de vizibilitate și multe altele. Prin urmare, vă ajută să vă proiectați paginile mai eficient și reduce nevoia de constructori de pagini.

Dacă faceți upgrade la Otter Blocks Pro, veți avea acces la funcții avansate, cum ar fi blocuri speciale WooCommerce și setări stilistice suplimentare. Cu toate acestea, nu aveți nevoie de versiunea Pro pentru a utiliza funcția de animații Lottie.

Dacă doriți să utilizați versiunea gratuită, mergeți la Plugin-uri > Adăugați nou în tabloul de bord WordPress și căutați „Otter Blocks:”

Apoi, faceți clic pe Instalare > Activare . Ar trebui să vedeți acum o selecție de blocuri noi în Editorul de blocuri.

Pasul 2: Alegeți o animație din biblioteca Lottie

Acum că ați configurat Otter Blocks pe site-ul dvs. web, puteți merge la biblioteca Lottie pentru a alege o animație. Pentru a accesa modelele, va trebui să creați un cont gratuit.

După ce v-ați creat profilul, navigați la Descoperiți și selectați Animații gratuite gata de utilizare :

Aici, puteți naviga printr-o bibliotecă de elemente Lottie care pot fi utilizate pe site-uri web, aplicații și rețele sociale:

Când găsiți o animație pe care doriți să o utilizați, faceți clic pe design. Va apărea o fereastră pop-up în care puteți face câteva modificări la aspectul animației:

De exemplu, puteți regla viteza animației și puteți schimba culoarea de fundal. Dacă faceți clic pe Editați culorile stratului , veți fi dus la Editorul Lottie:

Aici, puteți personaliza culoarea oricărei părți a designului. Pur și simplu faceți clic pe o secțiune a elementului pe care doriți să o modificați, accesați Toate culorile și utilizați selectorul de culori pentru a aplica un nou ton:

Dacă faceți o modificare care nu vă place, faceți clic pe săgeata Anulare din stânga sus a ecranului.

Pasul 3: Lipiți adresa URL a animației Lottie în Otter Block sau încărcați fișierul Lottie

Odată ce sunteți mulțumit de designul dvs., aveți două opțiuni pentru a-l adăuga la WordPress:

1. Puteți copia adresa URL a animației Lottie pentru a adăuga versiunea de pe serverul LottieFiles pe site-ul dvs. Veți găsi acest lucru în fereastra pop-up de animație, chiar sub design.
2. Puteți descărca fișierul LottieFile finalizat pe computer făcând clic pe butonul Descărcare din colțul din dreapta sus și selectând formatul dotLottie . Acest lucru vă va permite să găzduiți fișierul pe serverul dvs.

Apoi, reveniți pe site-ul dvs. WordPress și deschideți pagina sau postarea în care doriți să inserați animația.

Faceți clic pentru a adăuga un nou bloc și căutați „Lottie Animations:”

Adăugați blocul pe pagina dvs. Apoi, alegeți una dintre aceste opțiuni:

• Inserați de la URL – utilizați acest lucru dacă doriți să introduceți linkul către fișierul Lottie de pe serverele LottieFiles. Tot ce trebuie să faceți este să inserați linkul URL Lottie Animation pe care l-ați copiat de pe site-ul LottieFiles.
• Încărcare – utilizați acest lucru dacă ați descărcat fișierul dotLottie real din LottieFiles. Apoi puteți încărca acel fișier pe site-ul dvs. WordPress.

Apoi, apăsați Enter și animația va apărea pe pagină:

Acum puteți salva modificările și trece la pasul final.

Pasul 4: Personalizați-vă animația cu Otter Blocks

Acum că ați adăugat animațiile Lottie în WordPress, sunteți gata să personalizați designul și aspectul. În setările Blocare, veți vedea o selecție de opțiuni de afișare.

Sub TRIGGER , puteți alege între redare automată , derulare , trecere cu mouse - ul sau faceți clic . Animația nu va fi redată până când una dintre aceste acțiuni nu este finalizată pe pagină:

De asemenea, aveți opțiunea de a comuta animația pentru a reda în buclă. În plus, puteți ajusta viteza animației folosind glisorul, puteți inversa direcția și puteți modifica lățimea designului.

Dacă doriți să schimbați culoarea de fundal, faceți clic pe fila Fundal . Aici, puteți selecta una dintre opțiunile implicite Solid , puteți utiliza selectorul de culori sau puteți alege un fundal gradient:

Dacă accesați Condițiile de vizibilitate , veți putea configura animația să apară numai în anumite circumstanțe:

De exemplu, este posibil să doriți ca blocul să fie vizibil numai pentru utilizatorii conectați sau să fie afișat la o anumită dată. Pentru a face acest lucru, faceți clic pe Adăugare grup de reguli . Apoi, selectați săgeata pentru a deschide setările:

În CONDIȚIE , utilizați meniul drop-down pentru a configura setările de vizibilitate. Puteți adăuga mai multe condiții și puteți crea grupuri de reguli suplimentare.

Începeți cu animațiile Lottie în WordPress

Pentru a recapitula, iată patru pași pentru a adăuga animații Lottie în WordPress:

Pentru și mai multe modalități de a îmbunătăți editorul nativ WordPress, puteți consulta colecția noastră completă de cele mai bune plugin-uri pentru blocuri WordPress.

Aveți întrebări despre adăugarea de animații Lottie în WordPress? Anunțați-ne în secțiunea de comentarii de mai jos!