Cum să vă faceți titlul să apară cu setările de animație ale lui Divi

Titlul dvs. este de obicei primul lucru pe care îl citesc oamenii atunci când vă vizitează site-ul web. În afară de a avea un titlu foarte bun, este de asemenea important să îi faci pe oameni să observe și să citească de fapt orice le arăți. Titlurile nu trec de obicei neobservate din cauza dimensiunii și poziției lor centrale în secțiunea erou, dar dacă doriți să faceți un pas mai departe și să faceți literalmente titlul să apară, acest tutorial este pentru dvs.

Vom combina setările de animație Divi pentru a crea un titlu care să iasă în evidență și să atragă atenția vizitatorilor dvs. Vom împărți titlul în 5 bucăți și vom crea un efect de bliț care îi va face pe vizitatorii dvs. să dorească să urmeze mișcarea și să citească ceea ce este partajat.

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

Să începem să recreăm!

Adăugați o secțiune nouă

Culoare de fundal

Să începem să creăm! Creați o pagină nouă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și schimbați culoarea de fundal.

• Culoarea fundalului: #ededed

Spațiere

Apoi, accesați setările de spațiere ale secțiunii și adăugați câteva umpluturi de fund personalizate.

• Căptușeală inferioară: 10vw

Adăugați rândul # 1

Structura coloanei

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

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și schimbați culoarea de fundal a rândului.

• Culoare fundal: # c9c9c9

Dimensionare

Accesați setările de dimensionare următoare și permiteți rândului să ocupe întreaga lățime a ecranului.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Eliminați și umplutura implicită de sus și de jos a rândului.

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

Adăugați modulul de text nr. 1

Adauga continut

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este un modul de text. Introduceți prima parte a titlului în caseta de conținut utilizând stilul de text al paragrafului.

Culoare de fundal

Apoi, accesați setările de fundal ale modulului și adăugați o culoare de fundal.

• Culoare fundal: # c9c9c9

Setări text

Modificați și setările de text din fila design.

• Font de text: Didact Gothic
• Greutatea fontului textului: Bold
• Culoarea textului: # 000000
• Dimensiune text: 10vw
• Înălțimea liniei textului: 0.9em
• Orientare text: centru

Spațiere

Și creați forma pe care o doriți folosind umpluturile personalizate de sus și de jos.

• Căptușeală superioară: 10vw
• Căptușeală inferioară: 3vw

Animaţie

Nu în ultimul rând, vom adăuga o animație. Este important să vă asigurați că durata animației și opacitatea de pornire sunt zero. Acest lucru va permite modulului text să apară cu un efect de bliț.

• Stil de animație: Fade
• Repetați animația: o dată
• Durata animației: 0 ms
• Întârziere animație: 1000 ms

Clonați modulul de text x4

După ce ați terminat modificarea primului modul de text, puteți continua și clona modulul de câte ori doriți, în funcție de lungimea titlului. Pentru fiecare parte a titlului pe care doriți să îl afișați cu un efect de bliț, veți avea nevoie de un modul de text separat. Pentru acest exemplu, vom avea nevoie de 4 module suplimentare.

Schimbați duplicatul # 1

Conţinut

Schimbați copia primului duplicat.

Culoare de fundal

Împreună cu culoarea de fundal.

• Culoare fundal: # 5900ff

Culoarea textului

Schimbați culoarea textului în alb.

• Culoarea textului: #ffffff

Animaţie

Și creșteți întârzierea animației în setările animației. Acest lucru va permite vizitatorilor dvs. să aibă suficient timp pentru a citi modulul text anterior înainte ca acesta să apară.

• Întârziere animație: 1500 ms

Schimbați duplicatul # 2

Conţinut

Schimbați conținutul celui de-al doilea duplicat în continuare.

Culoare de fundal

Împreună cu culoarea de fundal.

• Culoare fundal: # ffb200

Culoarea textului

Și culoarea textului.

• Culoarea textului: #ffffff

Animaţie

Din nou, ne vom asigura că întârzierea animației este mai mare decât întârzierea animației care a fost utilizată pentru cele două module anterioare. Lăsăm 500 ms între fiecare dintre ei pentru a le oferi oamenilor suficient timp să citească.

• Întârziere animație: 2000 ms

Schimbați duplicatul nr. 3

Conţinut

Continuați schimbând conținutul celui de-al treilea duplicat.

Animaţie

Împreună cu întârzierea animației.

• Întârziere animație: 2500 ms

Schimbați duplicatul # 4

Conţinut

Treceți la următorul și ultimul duplicat. Schimbați conținutul.

Culoare de fundal

Împreună cu culoarea de fundal.

• Culoare fundal: # 000000

Culoarea textului

Modificați și culoarea textului.

• Culoarea textului: # 3a3a3a

Animaţie

Și creșteți întârzierea animației în setările animației.

• Întârziere animație: 3000 ms

Adăugați marjă negativă la fiecare modul de text, cu excepția primului

După ce ați terminat de personalizat toate modulele de text, puteți merge mai departe și puteți crea o suprapunere. Pentru a crea această suprapunere, vom adăuga o marjă superioară negativă la fiecare dintre modulele de text duplicat. Cu alte cuvinte, ne asigurăm că toate modulele care vin după primul modul apar deasupra primului modul de text.

• Marja superioară: -21.98vw

Transform Row

Transformă Traducere

Continuați prin transformarea întregului rând, începând cu setările de traducere a transformării.

• Jos: -35vw

Transformare Rotire

Modificați și valorile de rotație a transformării.

• Stânga: 320 grade

Adăugați rândul # 2

Structura coloanei

Pe al doilea rând! Acum că avem efectul de titlu, putem începe să adăugăm modulele rămase. Adăugați 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 ecranului în setările de dimensionare:

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Eliminați căptușeala implicită de sus a rândului următor.

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

Adăugați modulul de text al titlului în coloana 2

Adăugați conținut H1

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este un titlu Modul text. Adăugați conținut H1 la alegere.

Setări text H1

Apoi, accesați fila de proiectare și modificați setările de text H1.

• Font de titlu: Didact Gothic
• Greutatea fontului de titlu: Bold
• Dimensiune text antet: 1,8vw (desktop), 3,8vw (tabletă), 4vw (telefon)

Spațiere

Adăugați câteva valori de marjă personalizate la setările de spațiere.

• Marja superioară: -4vw
• Marja inferioară: 2vw
• Marja stângă: 30vw
• Marja dreaptă: 30vw (desktop), 15vw (tabletă și telefon)

Adăugați modulul divizor în coloana 2

Vizibilitate

Următorul modul de care avem nevoie este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, accesați fila de proiectare și schimbați culoarea separatorului.

• Culoare: # 000000

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 8 px
• Lățime: 7%

Spațiere

Împreună cu setările de spațiere.

• Marja inferioară: 1vw
• Marja stângă: 30vw

Adăugați modulul de descriere a textului în coloana 2

Adauga continut

Următorul modul de care avem nevoie este un alt modul de text. Introduceți un conținut la alegere.

Setări text

Apoi, modificați setările de text din fila de proiectare.

• Dimensiune text: 0,8vw (desktop), 1,3vw (tabletă), 1,6vw (telefon)
• Înălțimea liniei textului: 2.2em

Spațiere

Adăugați și câteva valori de marjă personalizate în setările de spațiere.

• Marja inferioară: 3vw
• Marja stângă: 30vw
• Marja dreaptă: 30vw (desktop), 15vw (tabletă și telefon)

Adăugați un modul buton la coloana 2

Setări buton

Treceți la următorul și ultimul modul, care este un modul buton. Adăugați o copie la alegere și modificați setările butonului în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 1,5vw (tabletă), 2vw (telefon)
• Lățimea chenarului butonului: 0 px
• Buton Font: Poppins
• Greutatea fontului: Bold
• Stilul fontului: majuscule

Spațiere

Accesați setările de spațiere și adăugați câteva valori de marjă și umplere personalizate și ați terminat!

• Marja stângă: 30vw
• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw
• Garnitura stânga: 3vw
• Garnitura dreapta: 3vw

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ă faceți titlul să apară numai folosind opțiunile încorporate ale Divi. Aceasta este o tehnică excelentă pentru a atrage atenția vizitatorilor dvs. și pentru a vă comunica mesajul într-un mod original. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!