Treci la conținutul principal

Cum să adăugați o animație de blocuri de text în titlurile dvs. de 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]

Titlul dvs. este una dintre cele mai importante părți ale paginii dvs. de pornire. Aceasta este de obicei ceea ce vedeți mai întâi și, prin urmare, ceea ce determină prima impresie. Ca orice altă primă impresie, vrei să fie bună. Acum, dacă sunteți în căutarea unui mod creativ de a vă prezenta titlul, vă veți bucura de acest tutorial, deoarece vă vom arăta cum să adăugați animații de bloc de text CSS la titlu și puteți descărca gratuit fișierul JSON de aspect!

studiu

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire asupra rezultatului pe diferite dimensiuni de ecran.

Tutorial animat pentru previzualizarea titlului animat

Să începem proiectarea

Adăugați secțiunea # 1

Fundal gradient

Începeți prin adăugarea unei secțiuni obișnuite la o pagină nouă sau la pagina la care lucrați. Deschideți setările secțiunii și aplicați următorul fundal de gradient:

  • Culoarea 1: # f0f2b
  • Culoarea 2: # c10b1a
  • Tipul gradientului: liniar
  • Direcția gradientului: 63deg
Configurarea secțiunilor divi

spaţierea

Comutați la fila de proiectare a secțiunii și aplicați următoarele valori personalizate de umplere sus și jos pe diferite dimensiuni de ecran:

  • Înveliș superior: 7vw (desktop), 20vw (tabletă), 25vw (telefon)
  • Garnitură de jos: 7vw (birou), 20vw (tabletă), 25vw (telefon)
Configurarea distanțării secțiunii Divi

frontieră

De asemenea, adăugați un chenar la secțiune.

  • Lățimea marginii: 2vw (sus, stânga, dreapta)
  • Lățimea marginii inferioare: 0vw
  • Culoarea frontierei: #ffffff
Configurarea marginii secțiunii Divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați o nouă linie la secțiune utilizând următoarea structură a coloanei:

Configurarea aspectului coloanei Divi

dimensionarea

Deschideți parametrii liniei și modificați parametrii de dimensionare în consecință:

  • Lățime: 100%
  • Lățime maximă: 100%
Configurarea lățimii coloanei Divi

Adăugați un modul text la coloană

Adăugați conținut H1

Apoi adăugați un modul text cu un titlu H1 la alegere.

Adăugați un modul text în coloana 1 div

Adăugați etichete Div la fiecare cuvânt din titlul H1

Treceți la fila text a copiei titlului și adăugați un div diferit la fiecare cuvânt din titlu. ID-ul CSS trebuie să fie diferit pentru fiecare cuvânt.

Gata
la
Construi
Frumos
Site-uri web?

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]

Adăugați etichete de module de text divi

Setări text H1

Treceți la fila de proiectare a modulului și modificați setările de text H1 în consecință:

  • Titlul fontului: Work Sans
  • Greutatea fontului din titlu: mediu
  • Culoarea textului antetului: #ffffff
  • Dimensiune text antet: 4vw (desktop), 5vw (tabletă), 6vw (telefon)
  • Înălțimea liniei capului: 1,4 em
Titlul parametrului 1 divi

spaţierea

Apoi modificați valorile marginilor pe diferite dimensiuni ale ecranului.

  • Marja stângă: 20vw (birou și tabletă), 15vw (telefon)
  • Marja dreaptă: 35vw (desktop), 20vw (tabletă), 15vw (telefon)
Configurarea spațiului modulului Divi text

Adăugați un modul de cod la coloană

Introduceți cod CSS

Pentru ca animația blocului de text să se aplice titlului nostru, vom avea nevoie de un cod CSS. Vom adăuga acest cod CSS într-un nou modul de cod.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Inserați codul css divi

spaţierea

Comutați la fila de proiectare a modulului și eliminați toate umpluturile implicite de jos.

  • Marja de jos: 0px
Personalizați magii modulului divi

Adăugați un modul buton la coloană

Adăugați o copie

Următorul modul de care avem nevoie este un modul buton. Introduceți o copie la alegere.

Faceți o copie a modulului boton divi

Setări buton

Treceți la fila de proiectare a modulului și modificați setările butonului în mod corespunzător:

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

  • Utilizați stiluri personalizate pentru buton: Da
  • Mărimea textului butonului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
  • Culoarea textului butonului: #ffffff
  • Culoarea fundalului butonului: # 000000
  • Lățimea marginii butonului: 0px
Parametrul modulului butonului Divi
  • Fontul butonului: Work Sans
Schimbați fontul butonului Divi

spaţierea

Apoi accesați setările de spațiere și aplicați marjele personalizate și valorile de umplere pe diferite dimensiuni ale ecranului.

  • Marja de sus: 3vw (birou),
  • Marja stângă: 20vw (birou și tabletă), 15vw (telefon)
  • Înveliș superior: 1.2vw (desktop), 2vw (tabletă), 4vw (telefon)
  • Garnitură de jos: 1.2vw (birou), 2vw (tabletă), 4vw (telefon)
  • Căptușire stânga: 1.8vw (desktop), 3vw (tabletă), 6vw (telefon)
  • Căptușire dreaptă: 1.8vw (birou), 3vw (tabletă), 6vw (telefon)
Configurarea distanțării butoanelor Divi

Animaţie

Personalizați și setările de animație.

  • Stil de animație: Flip
  • Direcția animației: în jos
  • Întârziere animație: 2000 ms
  • Intensitatea animației: 100%
  • Opacitatea de pornire a animației: 100%
  • Curba vitezei animației: ușurință în intrare
  • Repetați animația: o dată
Personalizare animatie modul modul text Divi

Adăugați secțiunea # 2

Continuați adăugând o nouă secțiune obișnuită chiar sub cea anterioară.

Adăugați o nouă secțiune divi

spaţierea

Deschideți setările secțiunii și îndepărtați captusea superioară implicită.

  • Garnitură superioară: 0px
Configurați distanța dintre secțiunile Divi

Adăugați o linie nouă

Structura coloanei

Continuați să adăugați un nou rând utilizând următoarea structură a coloanei:

Adăugați o nouă coloană divi secțiune

dimensionarea

Fără a adăuga mai multe module, deschideți parametrii liniei și lăsați linia să ocupe întreaga lățime a containerului de secțiune.

  • Lățime: 100%
  • Lățime maximă: 100%
Secțiunea de dimensionare divi

Adăugați un modul text la coloană

Adăugați conținut

Apoi adăugați un modul text cu conținutul de descriere la alegere.

Setări text modul Divi

Culoare de fundal

Adăugați o culoare albă de fundal.

  • Culoare fundal: #ffffff
Conifurarea culorii fontului Divi

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

  • Font text: Work Sans
  • Culoarea textului: # 9b9b9b
  • Dimensiunea textului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
  • Înălțimea liniei de text: 2.6em
Configurarea fontului titlului Divi

spaţierea

Adăugați, de asemenea, valori de spațiere personalizate pe diferite dimensiuni de ecran.

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]

  • Marja de sus: -5vw (desktop), -20vw (tabletă), -27vw (telefon)
  • Marja stângă: 20vw (birou), 13vw (tabletă), 8vw (telefon)
  • Marja dreaptă: 20vw (desktop), 13vw (tabletă), 8vw (telefon)
  • Înveliș superior: 5vw (desktop), 7vw (tabletă și telefon)
  • Garnitură de jos: 5vw (birou), 7vw (tabletă și telefon)
  • Căptușire stânga: 3vw (desktop), 5vw (tabletă), 6vw (telefon)
  • Căptușire dreaptă: 3vw (birou), 5vw (tabletă), 6vw (telefon)
Configurarea spațiului secțiunii modulului Divi

Cutie de umbră

Și finalizați setările modulului aplicând o umbră de casetă subtilă. Asta e!

  • Cutie de umbră Box Box: 50px
  • Culoare umbră: rgba (0,0,0,0,1)
Modul de configurare Shadow divi text

studiu

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.

Rezultatul final tutorial divi

Ultimele gânduri

În acest articol, v-am arătat cum să adăugați animații cu blocuri de text CSS la titlu. Este important să vă asigurați că titlul dvs. este vizibil și citit de la început, adăugând animație la titlu vă poate ajuta cu siguranță! De asemenea, ați putut descărca gratuit fișierul JSON cu aspect. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Tradus din: ElegantThemes

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
2 acțiuni
acțiune2
tweet
Registru