Crearea de titluri animate folosind opțiunile Hover ale lui Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor. În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați titluri animate folosind opțiunile de plimbare Divi și pachetul de amenajare a școlii de conducere. Aceasta este o abordare excelentă pentru a pune diferite părți ale copiei dvs. în centrul atenției și a declanșa acțiuni.

Să ajungem la asta!

previzualizare

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

Încărcați pagina de destinație a școlii de șoferi

Pentru a crea acest tutorial, vom folosi pagina de destinație a Driver School Layout Pack. Deci, mergeți mai departe și adăugați o pagină nouă, activați Visual Builder și alegeți pagina de destinație din aspectele premade.

Creați titlul animat nr. 1

Schimbați fundalul gradientului secțiunii

Să începem să construim primul exemplu! Adăugăm acest titlu animat la secțiunea erou a paginii noastre. Dar, înainte de a ajunge acolo, deschideți setările secțiunii eroului și schimbați culorile suprapunerii de fundal de gradient.

• Culoare 1: rgba (0,0,0,0,94)
• Culoare 2: rgba (12,12,12,0,63)

Eliminați ultimele două rânduri din secțiunea Hero

Continuați eliminând ultimele două rânduri din secțiune.

Schimbați alinierea divizorului

Ținem rândul care este încă acolo. Singurul lucru pe care trebuie să îl schimbăm este alinierea modulului modulului divizor.

• Alinierea modulului: centru

Adăugați un rând nou

Structura coloanei

Chiar sub rândul anterior, continuați și adăugați un rând nou folosind următoarea structură de coloane:

Spațiere

Eliminați căptușirea personalizată implicită a rândului următor.

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

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

Adauga continut

Singurul modul de care avem nevoie este un modul de text. Folosim două tipuri de text diferite: un antet și un link de paragraf. Continuați și adăugați copia la alegere și asigurați-vă că copia apare în două rânduri apăsând tasta + enter în mijlocul fiecărei propoziții.

Culoare de fundal implicită

Apoi, accesați setările de fundal și adăugați o culoare de fundal implicită la modulul de text.

• Culoare fundal: rgba (255,255,255,0)

Plasați cursorul pe culoarea de fundal

Schimbați culoarea de fundal la cursor.

• Culoare fundal: # ffa53b

Setări implicite pentru text

Apoi, modificați orientarea textului în setările generale de text.

• Orientare text: centru

Setări implicite pentru textul legăturii

Treceți la fila link și faceți câteva modificări la aspectul copiei linkului.

• Link Greutate font: Ultra Bold
• Stilul fontului de link: italic, majuscule, subliniat
• Culoare subliniere link: rgba (255,255,255,0,3)
• Dimensiune text link: 0 px
• Înălțimea liniei de legătură: 0em

Treceți cu mouse-ul pe Setări link

Apoi, faceți câteva modificări la cursorul mouse-ului.

• Dimensiune text link: 40 px
• Înălțimea liniei de legătură: 1,8em

Setări implicite pentru textul antetului

Efectuați și câteva modificări la setările pentru textul antetului.

• Greutatea fontului de titlu: Ultra Bold
• Stilul fontului de titlu: majuscule
• Culoare text antet: #ffffff
• Dimensiune text antet: 70 px (desktop), 40 px (tabletă), 30 px (telefon)
• Înălțimea liniei de direcție: 1.4em

Plasați cursorul pe setările textului antet

Cu câteva mici modificări în plan.

• Culoare text antet: rgba (255,255,255,0)
• Dimensiune text antet: 0 px

Spațiere implicită

Continuați accesând setările de spațiere și adăugând câteva valori de umplere personalizate.

• Căptușeală superioară: 40 px
• Căptușeală inferioară: 0 px
• Căptușeală stângă: 20 px
• Căptușeală dreaptă: 20 px

Distanța cu mouse-ul

Valorile de umplere personalizate diferă puțin în timpul deplasării.

• Căptușeală superioară: 40 px
• Căptușeală inferioară: 40 px
• Căptușeală stângă: 20 px
• Căptușeală dreaptă: 20 px

Frontieră

Folosim și o margine.

• Lățimea chenarului: 10 px
• Culoare margine: # ffa53b

Tranziții

Și adăugați o tranziție rapidă modificând durata tranziției în fila avansată.

• Durata tranziției: 0 ms

Creați titlul animat nr. 2

Adăugați o secțiune nouă

Culoare de fundal

Trecem la următorul exemplu! Adăugați o nouă secțiune chiar sub secțiunea erou și adăugați o culoare de fundal.

• Culoare fundal: #efefef

Spațiere

Apoi, accesați setările de spațiere și jucați-vă cu diferitele valori ale marginii și umplerii.

• Marja inferioară: 100 px
• Marja dreaptă: 200 px (desktop), 100 px (tabletă), 50 px (telefon)
• Căptușeală superioară: 54 px
• Căptușeală inferioară: 54 px

Box Shadow

Pentru a potrivi această secțiune cu pachetul de aspect, adăugăm și o umbră de casetă subtilă.

• Poziție orizontală a umbrei cutiei: 30 px
• Box Shadow Vertical Position: 30 px
• Puterea răspândirii umbrei cutiei: -10px
• Culoare umbră: # ffa53b

Adăugați un rând nou

Structura coloanei

Rândul pe care îl adăugăm la această secțiune are nevoie de următoarea structură de coloane:

Adăugați un modul de text

Adauga continut

Adăugați din nou conținutul la alegere folosind o legătură cu antet și paragraf. De asemenea, folosim o listă care îi va ajuta pe vizitatori să navigheze cu ușurință prin diferite părți ale site-ului web.

Setări implicite pentru textul legăturii

Accesați setările pentru textul linkului și efectuați câteva modificări la aspectul copiei linkului.

• Stil Font Link: Subliniat
• Culoare text link: # 000000
• Dimensiune text link: 0 px (desktop), 20 px (tabletă), 13 px (telefon)
• Înălțimea liniei de legătură: 0 px (desktop), 1,8 em (tabletă și telefon)

Plasați cursorul pe setările textului linkului

Efectuați câteva mici modificări pe plan.

• Dimensiune text link: 30 px
• Înălțimea liniei de legătură: 2.8em

Setări implicite pentru textul antetului

Titlul pe care l-ați ales trebuie să fie modificat, de asemenea.

• Titlul 2 Greutate font: Ultra Bold
• Titlul 2 Stil font: majuscule
• Titlul 2 Dimensiune text: 30 px (desktop și tabletă), 20 px (telefon)
• Rubrica 2 Spațierea literelor: 1 px

Plasați cursorul pe setările textului antet

Schimbați dimensiunea textului la cursor.

• Rubrica 2 Dimensiune text: 0 px

Spațiere implicită

Continuați accesând setările de spațiere și adăugând niște valori de marjă și umplere personalizate.

• Marja stângă: 0 px (desktop, tabletă și telefon)
• Căptușeală superioară: 40 px
• Căptușeală stângă: 50 px

Distanța cu mouse-ul

Schimbați marginea din stânga la trecerea cu mouse-ul.

• Marja stângă: 200 px

Bordură implicită

Apoi, adăugați o margine stângă la modulul de text.

• Lățimea marginii stânga: 5 px
• Culoare margine stângă: # ffa53b

Plasați mouse-ul peste frontieră

Eliminați toată lățimea chenarului la cursor.

• Lățimea marginii stânga: 0 px

Tranziții

Nu în ultimul rând, creați o tranziție lină utilizând o durată de tranziție puțin mai mare.

• Durata tranziției: 500 ms

previzualizare

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

Gânduri finale

În acest caz de utilizare, v-am arătat cum să creați titluri animate pe hover folosind doar opțiunile încorporate ale Divi. Acesta este un mod minunat de a pune anumite părți ale copiei dvs. în centrul atenției și de a declanșa acțiuni de la vizitatori într-un mod creativ. Dacă aveți întrebări, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!