Treci la conținutul principal

Cum se creează gradiente animate pe Divi

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

Animația de fundal în gradient poate fi o tehnică excelentă de proiectare pentru a da viață culorilor de fundal pe site-ul dvs. Este o soluție perfectă pentru cei care doresc ceva mai realist decât o culoare de fundal statică fără a fi nevoie să recurgă la un fundal video cu încărcare lentă. Ideea de bază din spatele animației de fundal de gradient este de a utiliza CSS pentru a crea mărirea și animarea unui fundal de gradient pentru a crea tranziții de culoare în mișcare.

În acest tutorial, vă vom arăta cum să creați animații de fundal de gradient pe Divi. Această metodă combină un fragment CSS personalizat care animă culorile de gradient alese în setările Divi integrate. Configurarea este de fapt destul de simplă pentru un rezultat atât de frumos.

Să începem!

Rezultat pozitiv

Iată o imagine de ansamblu asupra celor două modalități prin care putem crea o animație de fundal gradient pe Divi.

Evident, condiția necesară pentru acest tutorial este aceea că aveți o temă Divi instalată și actualizată.

Crearea unei animații de fundal de gradient cu extractul CSS și opțiunea de fundal a Divi

Pentru a începe, adăugați un rând al unei coloane la secțiunea implicită din Divi Builder.

Aspect Divi

Setări secțiune

Apoi actualizați setările secțiunii cu o imagine de fundal. Fundalul nostru de gradient va fi adăugat la linia noastră, astfel încât să se suprapună peste această imagine.

Apoi actualizați umplutura după cum urmează:

  • Garnitură: 0px înaltă, 0px mică
Adăugați o imagine divi

Setări pentru rânduri și coloane

Parametrii coloanei

Deschideți setările rândului, apoi actualizați completarea coloanei după cum urmează:

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

  • Căptușeală: peste 12vw

Apoi adăugați următorul CSS personalizat la elementul coloanei principale:

height: 40vw;

Stilul modulului Divi

Setări de linie

Fundal gradient

Acum putem adăuga fundalul de gradient la linie. Asigurați-vă că faceți culorile degradate semi-transparente dacă doriți să vedeți imaginea de fundal a secțiunii.

Actualizați parametrii liniei după cum urmează:

  • Culoarea de fundal a gradientului stâng: rgba (12,113,195,0.8)
  • Culoare de fundal gradient din dreapta: rgba (131,0,233,0.8)
  • Tipul gradientului: liniar
  • Direcția gradientului: 45 de grade
Configurarea culorii Divi
Dimensiune

Apoi actualizați dimensiunea liniei după cum urmează:

  • Lățime: 100%
  • Lățime maximă: 100%
Configurarea lățimii modulului Divi
Clasa CSS personalizată

Acum că fundalul nostru de gradient este la locul său, trebuie să adăugăm animația prin CSS personalizat. Înainte de a adăuga codul CSS, trebuie să adăugăm o clasă CSS personalizată pentru a viza acel rând specific.

Accesați fila avansată și adăugați următoarea clasă CSS:

  • Clasa CSS: animare-gradient
Clasa css linia modulului divi

Adăugați un modul de cod

După ce clasa CSS a fost adăugată la linie, adăugați un modul de cod la linie.

Adăugați un modul de cod Divi

Lipiți CSS în modulul de cod

Apoi lipiți următorul cod CSS în zona Modulului Setări Cod Cod:

.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}

Asigurați-vă că înfășurați codul în <style></style>etichete pentru că îl adăugăm la codul HTML al paginii.

Configurarea stilului modulului Divi

rezultat

Iată rezultatul de până acum. Fundalul de gradient a fost mărit la 400% din dimensiunea originală și este animat prin deplasarea la stânga și la dreapta.

Animație de fundal Divi

Adăugați un îndemn la acțiune

Pentru a finaliza proiectarea, să adăugăm un modul de îndemn pentru a face parte din conținut.

Adăugați apel la acțiune divi

Setări de apel la acțiune

Conținut

Actualizați conținutul după cum urmează:

  • Adăugați un titlu
  • Adăugați textul butonului
  • Adăugați textul corpului
  • URL-ul linkului butonului: #
  • Folosiți culoarea de fundal: NU
Concepție

Accesați fila Proiectare și actualizați următoarele:

  • Titlul fontului: Kaushan Script
  • Dimensiunea textului titlului: 4vw (desktop), 30px (telefon)
  • Înălțimea liniei de titlu: 1,4 em
  • Corpul Poliției: Roboto
  • Dimensiunea textului butonului: 16px
  • Culoarea textului butonului: # 555555
  • Fundal buton: #ffffff
  • Lățimea marginii butonului: 0px
  • Raza de margine a butonului: 30 pixeli
  • Spațiu de litere pentru butoane: 3px
  • Fontul butonului: Roboto condensat
  • Greutatea fontului pentru buton: bold

rezultat

Acum verificați rezultatul pe pagina live cu conținutul îndemnului la locul său. Ar fi un antet excelent pentru site-ul dvs. web!

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Animație de fundal rezultat final

Amintiți-vă, puteți schimba cu ușurință culorile de fundal ale liniei dvs. la orice doriți. Codul va continua să ruleze în fundal pentru a anima fundalul pentru dvs.

Dacă cunoașteți un pic de CSS, puteți regla viteza și direcția animației schimbând valorile proprietăților animației.

Sper că ți s-a părut util acest tutorial. Nu ezitați să ne împărtășiți opiniile cu privire la aceasta.

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
0 acțiuni
acțiune
tweet
Registru