Cum să creați un meniu CTA lipicios în timp ce derulați pagina în jos

În mod tradițional, meniurile lipicioase sunt vizibile în partea de sus (sau de jos) a unei pagini în momentul încărcării paginii. Cu toate acestea, crearea unui meniu CTA lipit pe măsură ce utilizatorul derulează pagina poate fi o modalitate creativă și eficientă de a menține acele CTA importante făcând clic în orice moment. În unele privințe, este cel mai bun din ambele lumi. Permite CTA să își păstreze poziția primordială în designul original. Și, păstrează o versiune minimizată a CTA (butonul) vizibilă într-o structură de meniu lipicioasă cu care utilizatorii sunt familiarizați.

În acest tutorial, vă vom arăta cum să creați un meniu CTA lipicios în timp ce derulați pagina în Divi. Acest lucru va funcționa excelent pentru utilizatorii de desktop și mobil, adăugând un mod intuitiv, dar unic, de a atrage vizitatorii să acționeze.

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!

https://youtu.be/kpjbG8frPTQ

Abonați-vă la canalul nostru Youtube

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 „Build From Scratch”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Cum să creați un meniu CTA lipicios în timp ce parcurgeți o pagină din Divi

Clădirea CTA # 1

Pentru a începe să construim primul nostru CTA, vom folosi un modul de blurbare cu un buton CTA personalizat care se va lipi în partea de sus și de jos a paginii pe măsură ce utilizatorul se derulează.

Pentru a începe, creați un nou rând cu o coloană în secțiunea obișnuită.

Adăugați Blurb

În coloana rândului, adăugați un modul blurb.

Deschideți setările de blurb și adăugați o imagine la alegere în locul pictogramei implicite. Folosesc o imagine din pachetul de aspect Cryptocurrency.

Sub fila Design, actualizați stilurile de text după cum urmează:

• Titlu Nivel antet: H2
• Titlu Font: Titillium Web
• Titlu Greutate font: Semi Bold
• Alinierea textului titlului: centru
• Dimensiune text titlu: 36 px (desktop), 28 px (telefon)
• Înălțimea liniei de titlu: 1,5em
• Înălțimea liniei corpului: 2em

Adăugați butonul Rând pentru CTA

Sub rândul care conține textul pe care tocmai l-am creat, adăugați un nou rând cu o singură coloană.

Este important să obțineți setările de rând corecte pentru ca funcționalitatea butoanelor lipicioase să se alinieze corect.

Deschideți setările rândului și actualizați următoarele:

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 1400 px (desktop), 100% (tabletă)

Adăugați butonul Apel la acțiune

În interiorul noului rând, adăugați un modul de apelare la acțiune. Actualizați următoarele:

• Vom avea nevoie doar de elementul buton din acest modul, astfel încât să putem scăpa de titlu și textul corpului.
• Asigurați-vă că adăugați un buton Link URL („#” va face deocamdată), astfel încât butonul să fie vizibil la proiectarea aspectului. Puteți actualiza întotdeauna acest lucru mai târziu.
• Dezactivați opțiunea „Utilizați culoarea de fundal”.

(NOTĂ: Nu veți putea vedea încă butonul alb pe un fundal alb, dar acest lucru se va schimba în pasul următor)

Sub fila Design, actualizați următoarele stiluri de butoane:

• Dimensiune text buton: 14 px (desktop), 11 px (telefon)
• Culoarea textului butonului: # 1b1f50
• Culoarea fundalului butonului: # 09d5fe
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 2 px
• Buton Font: Titillium Web
• Buton Font Greutate: Bold
• Stil Font Buton: TT
• Căptușirea butonului: 1em sus, 1em jos

Continuați să actualizați designul după cum urmează:

• Lățime: 33,33%
• Alinierea modulului: centru
• Căptușeală: 0 px sus, 0 px jos

Lățimea de 33,33% a butonului va permite butonului să ocupe exact 1/3 din fereastra browserului atunci când este în poziție lipicioasă. Combinând acest lucru cu alte două butoane (fiecare cu aceeași lățime de 33,33%), veți obține o bară completă de butoane CTA.

Sub fila Advanced, adăugați următorul fragment CSS personalizat în Descrierea promoției (are spațiu inutil de care nu avem nevoie):

display:none;

Apoi adăugați un alt fragment Butonul promoțional:

display:block;

Făcând butonul lipicios

Pentru a face butonul lipicios, vom folosi opțiunea de poziție lipicioasă pentru a lipi butonul și partea de sus și de jos a ferestrei browserului. De asemenea, vom adăuga un offset pentru antetul fix Divi implicit.

Actualizați următoarele:

• Poziție lipicioasă: lipiți-vă de sus și de jos
• Decalaj superior lipicios: 54 px (desktop), 0 px (tabletă)
• Offset de elemente lipicioase înconjurătoare: NU

Cu poziția noastră lipicioasă în poziție, putem viza acum stilul butonului în stare lipicioasă. În acest caz, vrem să mutăm butonul spre stânga pentru a face loc mai târziu butoanelor lipicioase suplimentare.

Actualizați următorul stil de transformare în stare lipicioasă:

• Transformă axa X tradusă (lipicios): -100%

Acest lucru va muta butonul pe o distanță egală cu lățimea exactă a butonului (care este de 33,33%) odată ce se lipeste de partea de sus sau de jos a paginii.

Clădirea CTA # 2

Acum că avem o secțiune completă cu un buton CTA lipicios, putem duplica secțiunea anterioară și putem face modificări minore la buton.

Mai întâi, copiați secțiunea.

Deschideți setările pentru modulul Apel la acțiune din noua secțiune și actualizați opțiunile de transformare după cum urmează:

• Transformă axa X tradusă (lipicios): 0 px

De fapt, este doar readucerea la starea implicită, deoarece nu vrem să mutăm acest buton, deoarece trebuie să rămână în centru.

Clădirea CTA # 3

Pentru a construi a treia secțiune CTA, copiați secțiunea anterioară.

Apoi deschideți setările pentru modulul Apel la acțiune din noua secțiune și actualizați opțiunile de transformare după cum urmează:

• Transformă axa X tradusă (lipicios): 100%

Aceasta va muta butonul spre dreapta o distanță egală cu lățimea exactă a butonului (care este de 33,33%) odată ce se lipeste de partea de sus sau de jos a paginii.

Actualizați textul și culorile butonului

Pentru a lustrui designul, actualizați textul și culorile butonului CTA pentru a se potrivi cu designul site-ului dvs. Iată setările pentru acest exemplu:

Pentru CTA # 2 ...

• Text buton: Vizualizați planurile noastre
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 1b1f50

Pentru CTA # 3 ...

• Text buton: Discutați cu noi
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 4328b7

Adăugați margine temporară la secțiunea de sus și de jos pentru funcționalitatea de testare

Pe un site normal, aceste CTA-uri ar locui în mijlocul paginii undeva, astfel încât să existe spațiu suplimentar pentru a derula pagina în sus și în jos. Deocamdată, putem adăuga niște margini temporare în secțiunile de sus și de jos de pe pagină.

În secțiunea superioară adăugați o marjă superioară de 90vh.

În secțiunea de jos, adăugați o marjă de jos de 90vh.

Rezultat final

Acum, să verificăm rezultatul final.

Gânduri finale

Acest tutorial vă arată o modalitate creativă de a menține acele CTA importante în prim-plan, astfel încât utilizatorii să poată face clic pe ele oricând doresc. De asemenea, adaugă o micro-interacțiune subtilă care atrage și mai multă atenție asupra lor, fără a distrage atenția de la conținutul principal al paginii. Sperăm că acest lucru va ajuta la obținerea acelor sucuri creative, astfel încât să puteți experimenta mai multe modele pentru a le face și mai bune.

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

Noroc!