Cum să vă îmbunătățiți CTA cu un efect de derulare „Winning Spin”

Este întotdeauna distractiv să câștigi un premiu. De aceea, companiile își comercializează produsele și serviciile online oferind lucruri gratuite. Ar putea fi un cupon pentru un desert gratuit la prima comandă sau o carte electronică gratuită atunci când vă abonați la o listă de e-mail. Dar, uneori, chiar și gratuitățile pot fi ignorate pe web. Adăugarea unui efect elegant de derulare „rotire câștigătoare” ar putea fi o modalitate excelentă de a acorda CTA atenția pe care o merită, creând în același timp o interacțiune captivantă pentru vizitatori.

În acest tutorial, vă vom arăta cum să vă stimulați CTA-urile cu un efect de derulare „rotire câștigătoare” în Divi. Pe măsură ce un utilizator derulează pagina, premiul câștigător se învârte pentru a dezvălui oferta gratuită într-un mod unic. Și puteți folosi acest lucru pentru a promova aproape orice ofertă gratuită la care vă puteți gândi.

Să începem.

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.

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 secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil î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.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Alegeți un aspect premade”.
   
4. Selectați aspectul paginii de start a panificației și faceți clic pentru a utiliza aspectul.
   

După aceea, veți fi gata să începeți crearea CTA cu un efect de derulare „rotire câștigătoare” în Divi.

Partea 1: Crearea efectului de derulare „Winning Spin”

Pentru a începe, implementați vizualizarea straturilor din meniul de setări de jos din Divi Builder. Acest lucru va ajuta la gestionarea mai bună a elementelor noastre de design.

Adăugați secțiunea, rândul și coloanele

Aspectul premade vine cu mai multe secțiuni cu conținut deja. Vom adăuga o nouă secțiune la pagina în care dorim să locuiască CTA. Pentru acest tutorial, adăugați o nouă secțiune obișnuită direct sub secțiunea denumită „Servicii”.

În secțiune, adăugați un rând cu două coloane.

Setări rând

Înainte de a adăuga module, deschideți setările rândului și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 94%
• Căptușeală: 10 px sus, 10 px jos
• Lățimea chenarului: 1 px
• Culoare margine: rgba (0,0,0,0.12)

Sub fila avansată, adăugați următorul CSS personalizat la elementul principal:

display:flex;
align-items: center;

Coloana 1 Border

Odată ce setările Row sunt terminate, deschideți setările pentru coloana 1 și adăugați o margine dreaptă după cum urmează:

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: rgba (0,0,0,0.12)

Crearea săgeții și textului Spinner utilizând un modul de blurb

În continuare vom crea săgeata rotativă și textul care va servi drept săgeată care indică selecția câștigătoare.

Adăugați modul Blurb

Adăugați un nou modul de blurb în coloana din stânga.

Conținut Blurb

Apoi actualizați conținutul blurb cu un nou titlu și pictogramă.

• Titlu: Câștigi un
• Pictogramă: Săgeată dreapta (vezi captura de ecran)

Blurb Design

Sub fila Proiectare, actualizați următoarele:

• Culoare pictogramă: # a06d51
• Plasare imagine / pictogramă: stânga
• Pictogramă Dimensiune font: 80 px (desktop), 50 px (tabletă), 40 px (telefon)
• Titlu Font: Patua One
• Greutatea fontului titlului: Bold
• Dimensiune text titlu: 40 px (desktop), 25 px (tabletă), 20 px (telefon)
• Spațierea literelor de titlu: 1 px
• Înălțimea liniei de titlu: 2em

Blurb CSS personalizat

Apoi, comutați ordinea conținutului blurb astfel încât săgeata să fie în dreapta în loc de stânga adăugând următorul CSS personalizat la elementul principal:

direction: rtl !important;

Apoi eliminați umplutura implicită sub titlul blurb adăugând acest CSS personalizat Titlul Blurb:

padding-bottom: 0px

Crearea selecțiilor de premii cu mai multe blurbs

În coloana din dreapta vom adăuga selecțiile noastre de premii care se vor învârti și, în cele din urmă, vor stabili un câștigător. Pentru a face acest lucru, vom crea și poziționa 4 module blurb cu un titlu și o imagine.

Crearea Blurb 1

Pentru a crea primul nostru text în coloana 2, copiați textul din coloana 1 și trageți-l în coloana 2.

Deschideți setările pentru textul duplicat din coloana 2 și scoateți CSS personalizat pentru elementul principal:

Aceasta va readuce pictograma în stânga.

Actualizați titlul și imaginea

Apoi actualizați titlul și imaginea după cum urmează:

• Titlu: Cookie GRATUIT!
• Imagine: încărcați imaginea (aproximativ 100 px cu 100 px)

Blurb 1 Design

Apoi actualizați setările de proiectare după cum urmează:

• Lățimea imaginii: 80 px (desktop), 50 px (tabletă), 40 px (telefon)
• Lățimea conținutului: 92%
• Lățime: 100%

Transformă originea

Vom roti blur-urile folosind opțiunea de rotație a transformării, deci este important să alegeți o origine de transformare care să aibă sens pentru modul în care ar trebui rotite blur-urile. Nu vom roti primul, dar acest lucru va servi ca un șablon bun în viitor.

Actualizați originea transformării pentru blurb după cum urmează:

• Transformă Originea: centrul drept

Ar trebui să scoateți și animația imagine / pictogramă.

Poziție absolută

Sub fila avansată, dați blurb și poziția absolută după cum urmează:

• Poziție: Absolută
• Locație: centru dreapta

Crearea Blurb 2

Pentru a crea a doua blurb, dublează blurb 1.

Blurb rotativ 2

Apoi adăugați o rotație de transformare după cum urmează:

• Transformarea rotației axa Z: 25 grade

Veți vedea că blurb-ul este acum rotit în afara zonei de vizualizare a rândului.

Crearea și rotirea blurbului 3

Pentru a crea a treia blurb, copiați blurb 2. Apoi actualizați rotația transformării după cum urmează:

• Axa Z a rotației transformate: 50 grade

Crearea și rotirea blurbului 4

Pentru a crea a patra blurb, copiați blurb 3. Apoi actualizați rotația transformării după cum urmează:

• Transformarea rotației axa Z: 75 grade

Actualizați titlul și imaginile Blurb

După ce ați terminat de adăugat cele 4 blurbs, reveniți și actualizați titlul și imaginea pentru fiecare după cum este necesar.

Rotire derulare coloană

Pentru a adăuga efectul de derulare, vom roti întreaga coloană care conține cele 4 blurbs rotite.

Deschideți setările pentru coloana 2 și actualizați următoarele:

• Transformă Originea: centrul drept

Sub fila avansată, deschideți fila efectului de derulare rotativă și actualizați următoarele:

• Activați rotirea: DA
• Rotație de pornire: -75% (la 15%)

Apoi actualizați declanșatorul efectului de mișcare la „Partea de sus a elementului”.

Actualizați rândul cu Overflow ascuns

Acum reveniți la setările de rând și ascundeți depășirea conținutului actualizând următoarea setare de rând:

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Partea 2: Crearea premiului CTA

Pentru această ultimă parte a tutorialului, vom crea un CTA care va afișa informații despre premiu și un buton. Și vom adăuga un efect de derulare pentru a afișa CTA după finalizarea animației „rotire câștigătoare”. Acest lucru va imita un tip suprasolicitat de efect.

Adăugați rândul

Pentru a începe, adăugați un rând cu o coloană direct sub rândul pe care tocmai l-am creat.

Adăugați un modul de text

Pentru a adăuga conținutul CTA-ului nostru, vom copia un modul text din aspectul premade de pe pagină. Găsiți și copiați modulul text cu titlul „Cumpărați online”.

Apoi lipiți-l în rândul pe care tocmai l-ați creat.

Proiectare text

Actualizați designul textului după cum urmează:

• Font text: PT Sans
• Greutatea fontului textului: Bold
• Dimensiune text text: 16 px
• Înălțimea liniei de text: 2em
• Aliniere text: centru

Adăugați butonul CTA

Apoi găsiți butonul din partea de sus a aspectului premade și copiați-l.

Apoi lipiți-l direct sub modulul text.

Efect de derulare pe rând

Pentru a afișa CTA după ce „rotirea câștigătoare” selectează premiul, deschideți setările rândului și actualizați următorul efect de derulare:

Sub fila Fading in and Out ...

• Activați Fading In and Out: DA
• Opacitate de pornire: 0% (la 50%)
• Opacitate medie: 100% (la 55%)

Rezultat final

Gânduri finale

Sperăm că acest efect de derulare „rotire câștigătoare” vă oferă câteva idei noi despre cum să proiectați un CTA mai captivant pe propriul site. Construirea acestuia necesită un pic de finețe folosind opțiunile de transformare și efectele de derulare ale lui Divi. Dar odată finalizat, aspectul este foarte ușor de actualizat cu propriul dvs. conținut unic.

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

Noroc!