Cum să dezvăluie o coloană CTA într-o stare lipicioasă cu Divi

La un moment dat, atunci când creați un design de pagină, este posibil să ajungeți la o listă de servicii, cursuri sau ceva similar pe care doriți să îl partajați într-un mod interactiv. Designul pe care îl folosiți pentru conținutul listei dvs. joacă un rol foarte important în modul în care vizitatorii dvs. digeră conținutul. Și cu majoritatea listelor, veți dori, de asemenea, să includeți un apel la acțiune care conectează punctele. Dacă sunteți în căutarea unui mod creativ de a face acest lucru, vă va plăcea acest tutorial.

Astăzi, vă vom arăta cum să dezvăluiți o coloană CTA într-o stare lipicioasă cu Divi. De îndată ce CTA atinge capătul coloanei, efectul lipicios se oprește, ceea ce oferă o experiență fără efort în care oamenii pot continua să citească elementele listei și să decidă să acționeze ori de câte ori doresc, fără a fi nevoie să derulați în sus sau în jos pentru a găsi CTA. . Vom distribui 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 aspectul secțiunii CTA Sticky Column GRATUIT

Pentru a pune mâinile pe aspectul secțiunii CTA a coloanei lipicioase gratuite, 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!

Să începem să recreăm!

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. Deschideți setările secțiunii și aplicați o culoare de fundal alb.

• Culoare fundal: #ffffff

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Spațiere

Fără a adăuga încă module, deschideți setările rândului și aplicați o marjă inferioară.

• Marja inferioară: 5%

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

Adăugați conținut H2

Adăugați un modul text cu un conținut H2 la alegere.

Setări text H2

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

• Rubrica 2 Font: Alata
• Titlul 2 Greutate font: îndrăzneț
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Dimensiune text:
  • Desktop: 55 px
  • Tabletă: 40 px
  • Telefon: 30 px

Adăugați modulul divizor în coloană

Vizibilitate

Chiar sub modulul text, adăugați un modul divizor și asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Linia

Treceți la fila de proiectare a modulului și modificați setările liniei după cum urmează:

• Culoare linie: # 3a7a84
• Stilul liniei: dublu

Dimensionare

Completați setările modulului modificând setările de dimensionare în consecință:

• Greutatea divizorului: 10 px
• Lățime: 8%
• Alinierea modulului: centru
• Înălțime: 10 px

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un alt rând chiar sub cel precedent folosind următoarea structură de coloane:

Dimensionare

Deschideți setările rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 2
• Egalizați înălțimile coloanei: Da
• Lățime: 95%
• Lățime maximă: 2580 px

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

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

Setări coloana 1

Imagine de fundal

Apoi, deschideți setările coloanei 1 și aplicați o imagine de fundal.

• Dimensiunea imaginii de fundal: copertă

Frontieră

Treceți la fila de proiectare a coloanei și aplicați câteva colțuri rotunjite.

• Toate colțurile: 20 px

Adăugați Blurb Module în coloana 2

Adauga continut

Este timpul să adăugați module, începând cu un modul Blurb în coloana 2. Adăugați un conținut la alegere.

Selectați pictograma

Selectați o pictogramă în continuare.

Culoare de fundal

Apoi, aplicați o culoare de fundal alb.

• Culoare fundal: #FFFFFF

Setări pictograme

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

• Culoare pictogramă: # 3a7a84
• Plasare imagine / pictogramă: stânga

Setări text titlu

Apoi, stilizați setările pentru textul titlului.

• Titlu Nivel antet: H3
• Titlu Font: Alata
• Greutatea fontului titlului: Bold
• Culoare text titlu: # 000000
• Dimensiune text titlu:
  • Desktop: 35 px
  • Tabletă: 30 px
  • Telefon: 20 px

Setări text corp

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

• Font corp: Karla
• Dimensiunea textului corpului:
  • Desktop: 17 px
  • Tabletă: 15 px
  • Telefon: 14 px
• Înălțimea liniei corpului: 2,5em

Dimensionare

Modificați setările de dimensionare în continuare.

• Lățimea conținutului: 100%

Spațiere

Și aplicați câteva valori de umplere personalizate la setările de spațiere.

• Căptușeală superioară: 20%
• Căptușeală inferioară: 20%
• Căptușeală stângă: 10%
• Căptușeală dreaptă: 10%

Frontieră

Apoi, vom adăuga câteva colțuri rotunjite la setările de margine.

• Toate colțurile: 20 px

Box Shadow

Și vom include o umbră de cutie subtilă.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (59,120,130,0,14)

Animaţie

Continuați prin eliminarea animației implicite a modulului Blurb din setările de animație următoare.

• Animație imagine / pictogramă: fără animație

Blurb Title CSS

Și finalizați setările modulului adăugând o linie de cod CSS în caseta CSS titlu blurb din fila avansată.

margin-bottom: 20px;

Clonează modulul Blurb de două ori

După ce ați finalizat primul modul Blurb, clonați modulul Blurb de câte ori aveți nevoie.

Schimbați conținutul

Schimbați conținutul din fiecare modul duplicat.

Adăugați modulul CTA în coloana 1

Adauga continut

În coloana 1, singurul modul de care avem nevoie este un modul Call to Action. Adăugați un conținut la alegere.

Adăugați link buton

Adăugați un link de buton în continuare.

Fundal de gradient

Apoi, aplicați un fundal de gradient.

• Culoare 1: rgba (59,120,130,0,53)
• Culoare 2: # 112730
• Tipul gradientului: liniar
• Direcția gradientului: 161 grade

Setări text titlu

Treceți la fila de proiectare a modulului și efectuați următoarele modificări la setările textului titlului:

• Titlu Nivel antet: H3
• Titlu Font: Alata
• Greutatea fontului titlului: Bold
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu:
  • Desktop: 50 px
  • Tabletă și telefon: 30 px

Setări buton

Stilează butonul în continuare.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton:
  • Desktop: 20 px
  • Tabletă: 17 px
  • Telefon: 15 px
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px

• Buton Font: Alata
• Buton Font Greutate: Bold

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 20 px
• Căptușeală dreaptă: 20 px
• Poziție orizontală a umbrei cutiei: 0 px
• Box Shadow Vertical Position: 3 px
• Culoare umbră: #ffffff

Dimensionare

Treceți la setările de dimensionare ale modulului și aplicați următoarele modificări:

• Lăţime:
  • Desktop: 95%
  • Tabletă și telefon: 100%
• Alinierea modulului: centru

Spațiere

Adăugați și câteva căptușeli personalizate de sus și de jos.

• Căptușeală superioară: 150 px
• Căptușeală inferioară: 150 px

Frontieră

Includeți și câteva colțuri rotunjite.

• Toate colțurile: 20 px

Transformă Traducere

Completați setările modulului aplicând următoarele setări de traducere de transformare:

• Dreapta:
  • Desktop: -25px
  • Tabletă și telefon: 0 px

Aplicați efectul Sticky la modulul CTA

Setări lipicioase

Acum, că toate elementele sunt la locul lor, este timpul să aplicăm efectul lipicios. Deschideți modulul CTA și aplicați următoarele setări lipicioase:

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

Opacitate

Acum, când modulul este transformat lipicios, putem aplica stiluri lipicioase. Accesați setările filtrelor și aplicați următoarele setări de filtrare a opacității:

• Opacitate implicită:
  • Desktop: 0%
  • Tabletă și telefon: 100%
• Opacitate lipicioasă: 100%

Tranziție

Nu în ultimul rând, vom modifica setările de tranziție în fila avansată. Asta e!

• Durata tranziției: 800 ms
• Curba vitezei de tranziție: ușurință

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, ți-am arătat cum să devii creativ cu opțiunile lipicioase ale lui Divi. Mai precis, v-am arătat cum să afișați frumos elementele din listă cu o coloană CTA lipicioasă. Această abordare vă permite să afișați vizual toate elementele și să aveți un apel la acțiune în timp ce vizitatorii dvs. sunt pregătiți prin serviciile, cursurile sau alte tipuri de liste. Ați putut descărca gratuit fișierul JSON! Dacă aveți întrebări, 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.