Cum să adăugați animații CSS Text Block la titlul dvs. cu Divi

Titlul dvs. este una dintre cele mai importante părți ale paginii dvs. de pornire. De obicei, este prima copie pe care o citesc oamenii, ceea ce o face prima impresie. Ca orice altă primă impresie, vrei să fie una bună. Acum, dacă sunteți în căutarea unui mod creativ de a vă prezenta titlul, vă veți bucura de această postare. În acest tutorial, vă vom arăta cum să adăugați animații cu blocuri de text CSS la titlul dvs. și veți putea descărca gratuit fișierul JSON al aspectului!

Să ajungem la asta.

previzualizare

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

Desktop

Mobil

Descărcați aspectul animației blocului de text GRATUIT

Pentru a pune mâna pe aspectul gratuit al animației blocului de text, 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!

Să începem să recreăm!

Adăugați secțiunea nr. 1

Fundal de 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:

• Culoare 1: # ff0f2b
• Culoare 2: # c10b1a
• Tipul gradientului: liniar
• Direcția gradientului: 63 grade

Spațiere

Treceț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:

• Căptușeală superioară: 7vw (desktop), 20vw (tabletă), 25vw (telefon)
• Căptușeală inferioară: 7vw (desktop), 20vw (tabletă), 25vw (telefon)

Frontieră

Adăugați și un chenar la secțiune.

• Lățimea chenarului: 2vw (sus, stânga, dreapta)
• Lățimea marginii inferioare: 0vw
• Culoare margine: #ffffff

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare în consecință:

• Lățime: 100%
• Lățime maximă: 100%

Adăugați un modul de text în coloană

Adăugați conținut H1

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

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 al titlului. ID-ul CSS trebuie să fie diferit pentru fiecare cuvânt.

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

Setări text H1

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

• Font de antet: Work Sans
• Greutate font antet: mediu
• Culoare text antet: #ffffff
• Dimensiune text antet: 4vw (desktop), 5vw (tabletă), 6vw (telefon)
• Înălțimea liniei de direcție: 1.4em

Spațiere

Apoi, modificați valorile marginilor pentru diferite dimensiuni ale ecranului.

• Marja stângă: 20vw (desktop și tabletă), 15vw (telefon)
• Marja dreaptă: 35vw (desktop), 20vw (tabletă), 15vw (telefon)

Adăugați un modul de cod în coloană

Introduceți codul CSS

Pentru ca animația blocului de text să se aplice titlului nostru, vom avea nevoie de un cod CSS. Vom adăuga acel 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>

Spațiere

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

• Marja inferioară: 0 px

Adăugați un modul buton în coloană

Adăugați o copie

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

Setări buton

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

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px

• Buton Font: Work Sans

Spațiere

Apoi, accesați setările de spațiere și aplicați câteva valori de marjă și umplere personalizate pe diferite dimensiuni ale ecranului.

• Marja superioară: 3vw (Desktop),
• Marja stângă: 20vw (desktop și tabletă), 15vw (telefon)
• Căptușeală superioară: 1,2vw (desktop), 2vw (tabletă), 4vw (telefon)
• Căptușeală inferioară: 1,2vw (desktop), 2vw (tabletă), 4vw (telefon)
• Căptușire stângă: 1,8vw (desktop), 3vw (tabletă), 6vw (telefon)
• Căptușeală dreaptă: 1,8vw (desktop), 3vw (tabletă), 6vw (telefon)

Animaţie

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

• Stil de animație: Flip
• Direcția animației: Jos
• Întârziere animație: 2000 ms
• Intensitate animație: 100%
• Animație Opacitate de pornire: 100%
• Curba de viteză a animației: ușurință-intrare-ieșire
• Repetați animația: o dată

Adăugați secțiunea 2

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

Spațiere

Deschideți setările secțiunii și eliminați umplutura de sus implicită.

• Căptușeală de sus: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a containerului secțiunii.

• Lățime: 100%
• Lățime maximă: 100%

Adăugați un modul de text în coloană

Adauga continut

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

Culoare de fundal

Adăugați o culoare de fundal alb.

• Culoare fundal: #ffffff

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
• Dimensiune text: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Înălțimea liniei de text: 2.6em

Spațiere

Adăugați și câteva valori de spațiere personalizate pe diferite dimensiuni de ecran.

• Marja superioară: -5vw (desktop), -20vw (tabletă), -27vw (telefon)
• Marja stângă: 20vw (desktop), 13vw (tabletă), 8vw (telefon)
• Marja dreaptă: 20vw (desktop), 13vw (tabletă), 8vw (telefon)
• Căptușeală superioară: 5vw (desktop), 7vw (tabletă și telefon)
• Căptușeală inferioară: 5vw (desktop), 7vw (tabletă și telefon)
• Căptușeală stângă: 3vw (desktop), 5vw (tabletă), 6vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 5vw (tabletă), 6vw (telefon)

Box Shadow

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

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0,1)

previzualizare

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

Desktop

Mobil

Gânduri finale

În această postare, 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 o animație la titlu, care vă poate ajuta cu siguranță! Ați putut descărca gratuit și fișierul JSON al machetei. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.