Cum să subliniezi butonul lipicios într-o secțiune superbă CTA cu Divi

Când a fost lansată funcția de opțiuni lipicioase Divi, postarea de lansare de pe blogul nostru a fost însoțită de demonstrații live care vă arată versatilitatea acestei noi funcții. Pentru a vă ajuta să înțelegeți mai bine opțiunile lipicioase și să începeți să le utilizați în designul dvs., vă vom arăta cum să recreați unul dintre modelele de demonstrații live din acest tutorial. Designul pe care îl recreăm se concentrează pe accentuarea butonului lipicios. Este o secțiune CTA bazată pe text care vă permite să evidențiați îndemnul la acțiune într-un mod frumos. Veți putea descărca gratuit fișierul JSON!

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

Descărcați GRATUIT aspectul secțiunii CTA

Pentru a pune mâna pe aspectul gratuit al secțiunii CTA, 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!

1. Construiți structura elementului

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Aceasta poate fi o pagină nouă sau una existentă, dar vă recomandăm să o adăugați la o pagină care are deja conținut, deci există suficient spațiu de derulare pentru a vedea efectele prind viață. Deschideți setările secțiunii și aplicați o culoare de fundal la alegere.

• Culoare fundal: # 00965a

Dimensionare

Treceți la fila de proiectare a secțiunii și aplicați o înălțime maximă. Această înălțime maximă ne va ajuta să ne asigurăm că înălțimea secțiunii este limitată.

• Înălțime maximă: 100vh

Revărsări

Deoarece vom aplica câteva efecte de derulare mai târziu la tutorial, va trebui, de asemenea, să ascundem revărsările secțiunii pentru a ne asigura că nimic nu depășește containerul secțiunii.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

Adăugați un rând nou

Structura coloanei

Odată ce setările secțiunii sunt la locul lor, 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 aplicați câteva setări de dimensionare personalizate. Aceste setări de dimensionare vor permite containerului rândului să ocupe lățimea întregului rând, ceea ce conferă designului nostru un efect de ecran complet.

• Lățime: 100%
• Lățime maximă: niciuna

Setări coloana 2

Spațiere

Deschideți apoi setările coloanei 2 și aplicați câteva valori de umplere personalizate pe diferite dimensiuni de ecran.

• Căptușeală inferioară: 60 px
• Căptușeală stângă:
  • Tabletă și telefon: 5%
• Garnitura dreapta:
  • Desktop: 10vw
  • Tabletă și telefon: 5%

Adăugați un modul de text în coloana 1

Adauga continut

Este timpul să adăugați module, începând cu un modul de text în coloana 1. Adăugați un conținut la alegere. Pentru a crea exact același design ca și în previzualizarea acestei postări, introduceți câteva cuvinte relevante care ajută la împuternicirea CTA pe care o vom plasa în coloana 2 mai târziu în tutorial. Asigurați-vă că plasați fiecare cuvânt și în propria linie.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text. Veți observa că folosim lățimea ecranului ca unitate de dimensiune a textului. Utilizarea unității de lățime a ecranului ne va ajuta să păstrăm textul receptiv pe toate dimensiunile ecranului.

• Font text: Work Sans
• Greutatea fontului textului: Bold
• Culoarea textului: # 000000
• Dimensiune text: 10vw
• Înălțimea liniei de text: 0,2em

Adăugați un modul de text în coloana 2

Adauga continut

La a doua coloană. Acolo, adăugați un modul de text cu o copie de îndemn la alegere.

Setări text

Treceți la fila de proiectare a modulului și modificați setările de text în consecință:

• Font text: Work Sans
• Culoarea textului: #ffffff
• Dimensiune text: 56 px
• Înălțimea liniei textului: 1.2em

Dimensionare

Alocați o lățime maximă și modulului de text.

• Lățime maximă: 400 px

Adăugați un modul buton la coloana 2

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în proiectarea noastră este un modul buton din coloana 2. Adăugați o copie la alegere.

Setări buton

Treceți la fila de proiectare a modulului și stilizați butonul în consecință:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 16 px
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului:
  • Implicit: #ffffff
  • Plasați cursorul: rgba (255,255,255,0,7)
• Lățimea chenarului butonului: 5 px
• Culoare margine buton: rgba (0,0,0,0)

• Raza chenarului butonului: 5 px
• Buton Font: Work Sans
• Afișează pictograma butonului: Nu

2. Aplicați Efecte Scroll & Sticky

Adăugați mișcare verticală la modulul de text din coloana 1

Acum că a fost stabilită baza designului nostru, este timpul să aplicăm defilarea și efectele lipicioase! Deschideți modulul de text din coloana 1 și aplicați o mișcare verticală receptivă.

• Activați mișcarea verticală: da
• Offset de pornire:
  • Desktop: 10
  • Tabletă și telefon: 0
• Decalaj mediu: 0
• Offset final:
  • Desktop: -10
  • Tabletă și telefon: 0
• Declanșatorul efectului de mișcare: partea de sus a elementului

Adăugați Efect adeziv în coloana 2

Apoi, vom deschide setările coloanei 2 și vom aplica un efect lipicios pe desktop. Deoarece coloanele și modulele de pe dimensiuni mai mici ale ecranului sunt plasate unul sub altul, în loc unul lângă celălalt, vom readuce setările lipicioase la „Nu lipiți” pe dimensiuni mai mici de ecran.

• Poziție lipicioasă:
  • Desktop: Stick to Top
  • Tabletă și telefon: Nu lipiți
• Decalaj superior lipicios: 80 px
• Limita lipicioasă inferioară: secțiunea
• Decalaj de la elementele lipicioase înconjurătoare: Da
• Stiluri implicite de tranziție și lipicioase: Da

Adăugați stilul lipicios la butonul din coloana 2

Acum că coloana 2 a fost transformată lipicioasă, vom putea aplica un stil lipicios coloanei în sine și modulelor din interiorul coloanei. Singurele modificări lipicioase pe care le vom face, totuși, sunt axate pe buton. Deschideți modulul, accesați setările butonului și inversați textul și culorile butonului. Asta e! Odată ce salvați aspectul și ieșiți din constructorul vizual, puteți urmări live designul frumos pe site-ul dvs. web.

• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000

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ă recreați unul dintre desenele care au fost utilizate ca demonstrație în postarea de actualizare a caracteristicilor opțiunilor lipicioase. Acest design se concentrează pe evidențierea butonului lipicios prin schimbarea stilului după activarea stării lipicioase. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.