Cum să schimbați conținutul pe hover pentru a crea CTA-uri unice în Divi (3 moduri)

Opțiunile de hover încorporate ale Divi facilitează schimbarea conținutului oricărui modul aflat pe hover. Putem schimba imaginile de fundal, culorile și chiar textul pe hover. Acest lucru deschide ușa către modalități creative de a atrage atenția utilizatorilor și de a stimula acele îndemnuri pentru conversii mai bune.

Astăzi, vă vom arăta cum să schimbați conținutul pe hover în Divi pentru câteva îndemnuri unice la acțiune. Vom arăta moduri inteligente de a schimba textul butonului (și pictogramele) pe hover. Vom arăta cum să schimbați elegant titlul și textul butonului în cadrul unui modul de îndemn la cursor. Și vom arunca chiar și câteva CSS personalizate pentru a adăuga și câteva efecte de tranziție unice (cum ar fi comutarea și răsucirea pictogramei unui buton).

Verifică!

Trage cu ochiul

Iată o privire rapidă asupra celor trei modele pe care le vom crea astăzi.

# 1 Cum să schimbați conținutul pe hover pentru butoane

# 2 Cum se schimbă fundalurile și conținutul corpului pe modulele de text

# 3 Cum să schimbați conținutul pe hover pentru mai multe elemente cu modulul de îndemn

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, 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!

Pentru a importa aspectul în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi instalată (sau pluginul Divi Builder dacă nu utilizați tema Divi).
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Încărcați aspectul premade al paginii de destinație Cake Maker în pagină. Vom folosi acest aspect pentru proiectele noastre. Puteți încărca aspectul selectând „Alegeți un aspect premade” când vi se solicită implementarea Divi Builder. Sau puteți selecta pictograma „Încărcare din bibliotecă” plus din meniul de setări din Divi Builder. Pentru mai multe informații despre cum să încărcați aspectul premade pe pagina dvs., urmăriți videoclipul nostru.

După aceea, sunteți gata să începeți proiectarea în Divi.

# 1 Cum să schimbați conținutul pe hover pentru butoane

După ce aveți aspectul premade al paginii de destinație Cake Maker încărcat pe pagina dvs., găsiți butonul principal CTA în antetul superior al paginii și deschideți setările de proiectare a modulului de butoane.

Schimbarea textului butonului pe Hover

Sub fila conținut, actualizați textul butonului după cum urmează:

Textul butonului: „Cumpărați acum”

Apoi implementați opțiunea de deplasare pentru textul butonului și introduceți textul butonului de înlocuire sub fila de deplasare, după cum urmează:

Text buton (plasați cursorul): „Să mergem”

Textul de sub textul butonului de deplasare va înlocui textul implicit al butonului când treceți peste buton.

Lățimea butonului

Cu toate acestea, butonul este inline-block astfel încât lățimea butonului / linkului se va modifica în funcție de cantitatea de conținut (litere sau spații) pe care le conține butonul. Acest lucru nu funcționează bine pentru acest efect de deplasare, deoarece cu un text de înlocuire mai mic, butonul va crește în lățime și va crea sărituri sau glitch-uri atunci când treceți peste marginea butonului. Pentru a remedia acest lucru, trebuie să aplicăm o lățime setată butonului. Acest lucru este ușor cu un singur fragment de CSS. Adăugați următorul CSS la Elementul principal al modulului buton.

width: 200px;

Iată rezultatul.

Modificări suplimentare și efecte de plutire

În plus față de schimbarea conținutului de pe hover, putem, de asemenea, să condimentăm butonul cu diferite combinații de efecte de hover.

În acest moment, pictograma butonului este o săgeată dreaptă, care este implementată în timpul deplasării. Acest lucru funcționează foarte bine cu textul butonului cu mouse-ul „Să mergem”.

Răsucirea pictogramei buton pe Hover

Dar puteți adăuga un efect frumos de flip hover pentru pictograma butonului. Pentru a face acest lucru, mai întâi faceți ca pictograma să apară întotdeauna (nu doar pe cursor), actualizând următoarele:

Afișați pictograma doar pe Hover pentru buton: NU

Apoi adăugați o clasă CSS la modulul buton după cum urmează:

Clasa CSS: flip-button-icon

Apoi deschideți setările paginii și adăugați următoarele CSS personalizate.

.flip-button-icon:after {
  transition: transform 500ms;
}
.flip-button-icon:hover:after {
  transform: rotateX(360deg);
}

Iată rezultatul.

Schimbarea pictogramei butonului pe Hover

De asemenea, puteți schimba complet pictograma butonului de pe mouse. Tot ce aveți nevoie este un mic fragment de CSS pentru a înlocui conținutul: după pseudo-element în care se află pictograma.

Înainte de a adăuga css-ul, mai întâi să alegem o altă pictogramă de buton pe care să o afișăm inițial, apoi o putem schimba la săgeata dreaptă cu CSS.

Actualizați pictograma Buton cu pictograma coș, deoarece CTA-ul nostru este „Arată acum”.

Apoi accesați fila avansată și actualizați proprietatea curentă de transformare CSS cu o rotație de 180 de grade în loc de 360 ​​de grade. Și adăugați un unicode nou pentru conținutul care afișează săgeata la stânga („\ 23”).

Noul fragment va arăta astfel:

.flip-button-icon:hover:after {
  transform: rotateY(180deg);
  content: "\23"; 
}

Deoarece vom roti pictograma și la 180 de grade, aceasta va afișa o săgeată dreapta ca înlocuire a pictogramei coșului atunci când treceți peste buton.

Rezultat final

Acesta este rezultatul final.

# 2 Cum se schimbă fundalurile și conținutul corpului pe modulele de text

Pentru următorul design, mergeți în jos pe aspectul paginii până la secțiunea „Serviciile mele”. Acolo deschideți setările de rând pentru rândul de sus cu cele două module de text.

Actualizați setările coloanei

Sub setările de rând, deschideți setările pentru Coloana 1 și adăugați o imagine de fundal în coloană.

Aceasta va înlocui fundalul alb care există în mod implicit.

De asemenea, adăugați un gradient deasupra imaginii de fundal și pe cursor.

Culoarea stânga a gradientului de fundal: rgba (255,255,255,0)
Culoarea dreaptă a gradientului de fundal: rgba (46,41,142,0.75)
Poziția inițială: 30%
Plasați gradientul deasupra imaginii de fundal: DA

Acest lucru va oferi o suprapunere frumoasă care va face textul de înlocuire de pe hover mai ușor de citit.

După aceea, eliminați umplutura personalizată pentru coloană restaurând-o la setarea implicită.

Personalizați modulul de text din coloana 1

Odată ce coloana este actualizată, salvați setările și deschideți setările modulului de text pentru modulul de text din coloana 1. Apoi actualizați conținutul corpului modulului de text pe hover cu următoarele:

<h3>Custom Cakes</h3>
<a href="#">Order Now</a>

Acesta este un mod frumos de a adăuga un îndemn la acțiune cu un link la plecare.

Apoi, actualizați fundalul după cum urmează:

Culoare fundal: #ffffff;
Culoarea fundalului (hover): rgba (255.255.255,0);

Acest lucru adaugă un element de tranziție frumos pentru a dezvălui imaginea de fundal în coloană treptat.

Actualizați următoarele setări de proiectare:

Înălțime: 260 px

Căptușeală: 30 px sus, 30 px stânga, 30 px dreapta
Căptușeală (hover): 90px în partea de sus

Acest lucru va crea un efect de tranziție frumos, care reduce textul treptat atunci când treceți peste modulul de text.

Apoi, actualizați culorile textului în alb, după cum urmează:

Culoare text link: #ffffff
Titlul 3 Culoarea textului (hover): #ffffff

Pentru a încetini tranziția efectelor de hover, actualizați durata tranziției după cum urmează:

Durata tranziției: 500 ms

Rezultat final

Acum verificați rezultatul final.

# 3 Cum să schimbați conținutul pe hover pentru mai multe elemente cu modulul de îndemn

Pentru următoarea proiectare, vom folosi un modul de îndemn care modifică mai multe elemente de conținut în cursa. Pentru a face acest lucru, coborâți pagina în secțiunea Colecții populare.

Adăugați un nou modul de apelare la acțiune

Apoi adăugați un nou modul call to action sub butonul „Cumpărați acum” din rândul de sus al secțiunii de specialitate.

Actualizați CTA cu modificarea conținutului pe Hover

Apoi, actualizați conținutul îndemnului după cum urmează:

Titlu: „Ofertă specială”
Titlu (plasați cursorul): „10% reducere”
Textul butonului: „Cumpărați acum”
Textul butonului (plasați cursorul): „Obțineți ofertă”
Corp: „Cupcakes personalizate”
Adresă URL a butonului: #

Salvați setarea pentru moment.

Copiați și lipiți stilurile butoanelor de aspect

Vom face un salt pe proiectarea butonului pentru CTA-ul nostru. Pentru a face acest lucru, deschideți setările butonului pentru modulul de butoane de deasupra modulului CTA care a venit cu aspectul premade. Apoi faceți clic pe pictograma cu punct triplu din grupul de opțiuni al butonului și selectați „copiere stiluri de butoane”.

Apoi deschideți celelalte meniuri de opțiuni din modulul de îndemn pe care îl proiectăm și selectați „Lipiți stiluri de butoane”.

Apoi deschideți setările modulului de apel la acțiune și actualizați umplerea butonului:

Garnitura de butoane: 15 px sus, 15 px jos, 40 px stânga, 40 px dreapta

Actualizați stilurile de text

După aceea, actualizați titlul și designul textului corpului.

Titlu Nivel antet: H4
Titlu Font: Pacifico
Dimensiune text titlu: 9vw
Înălțimea liniei de titlu: 1.3em
Font corp: Open Sans
Greutatea fontului corpului: îndrăzneț
Dimensiunea textului corpului: 18 px
Spațierea literelor corporale: 1 px

Setări finale

Apoi, actualizați umplutura.

Umplutură: 0 px stânga, 0 px dreapta

Apoi acordați modulului o clasă CSS personalizată.

Clasa CSS: fade-cta-title

Faceți butonul cta pe toată lățimea adăugând următorul CSS personalizat în caseta de intrare CSS Buton Promo.

Și actualizați durata tranziției.

Durata tranziției: 800 ms

În cele din urmă, actualizați culoarea de fundal astfel încât să fie transparentă în mod implicit și să schimbe culoarea la trecerea cu mouse-ul.

Culoare fundal: niciunul (ștergeți)
Culoarea fundalului (hover): rgba (247,78,72,0.86)

Apoi, ștergeți cele două module din rândul de deasupra modulului nostru Call to Action, astfel încât să înlocuiască cta originală din aspect.

Rezultatul Până acum

Iată rezultatul de până acum. Observați cum se modifică textul titlului și textul butonului când treceți cu mouse-ul peste modulul de îndemn.

Îmbunătățirea modificării conținutului cu animație

Dacă dorim să atenuăm tranziția marelui titlu în CTA, putem adăuga o animație simplă cu CSS. Deoarece am adăugat deja modulul CSS Class, tot ce trebuie să facem este să deschidem setările modale ale paginii și să adăugăm următoarele CSS personalizate:

.fade-cta-title:hover .et_pb_module_header {
  animation-name: fadeinout;
  animation-duration: 800ms;
}

@keyframes fadeinout {
  from {opacity: 0;}
  to {opacity: 1;}
}

Rezultat final

Acum, să verificăm rezultatul final.

Și iată-l pe mobil.

Gânduri finale

În acest tutorial, am arătat 3 exemple despre cum să schimbați în mod eficient conținutul pe hover în Divi. Opțiunile de hover încorporate pentru conținut fac din acest lucru un proces ușor. Și cu câteva fragmente de CSS puteți adăuga câteva tranziții unice pentru a distinge designul. Sperăm că acest lucru vă va permite să stimulați apelurile la acțiune pe propriul dvs. site pentru mai multe conversii și implicare.

Vreau mai mult? Avem o mulțime de postări grozave care vă vor ajuta să vă duceți CTA-urile la nivelul următor.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!