Cum se folosește Divi pentru a ghida oamenii prin diferiți pași lipicioși

Atunci când încercați să convingeți vizitatorii să se adreseze prin intermediul site-ului dvs. web, este esențial să le oferiți stimulentele potrivite. Când vă gândiți la stimulente, vă apar imediat îndemnuri clare și irezistibile la acțiune. Dar CTA sunt de obicei ultima parte a procesului de achiziție. Cel mai probabil vă veți construi drumul până acolo, arătând valoarea companiei dvs. Una dintre cele mai bune modalități de a face acest lucru este împărtășind abordarea dvs. și propunerea de valoare unică. Dacă căutați o modalitate ușoară de a vă proiecta abordarea, vă va plăcea acest tutorial. Astăzi, vă vom arăta cum să includeți diferiți pași lipicioși care se schimbă în timp ce oamenii derulează și citesc. 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 The Sticky Steps Layout GRATUIT

Pentru a pune mâinile pe aspectul gratuit al pașilor lipicioși, 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. Creați proiectarea secțiunii

Adăugați o secțiune regulată

Fundal de gradient

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii respective și aplicați un fundal de gradient:

• Culoare 1: #ffffff
• Culoare 2: # e5e5e5
• Tipul gradientului: liniar
• Direcția gradientului: 150 grade

Imagine de fundal

Încărcați o imagine de fundal în continuare. O puteți găsi pe cea pe care o folosim în acest tutorial în folderul de descărcare pe care îl puteți găsi la începutul acestei postări. Puteți utiliza imaginea de fundal gratuit și fără restricții.

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: stânga sus

Spațiere

Eliminați umplutura de jos implicită a secțiunii adăugând „0px”.

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

Adăugați un rând nou

Structura coloanei

Continuați adăugând primul rând la secțiune folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și schimbați culoarea de fundal.

• Culoare fundal: rgba (130.100.239,0.09)

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare în consecință:

• Egalizați înălțimile coloanei: Da
• Alinierea rândurilor: centru

Spațiere

Aplicați și câteva valori de spațiere personalizate.

• Marja superioară: 5%
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Căptușeală stângă: 5%
• Căptușeală dreaptă: 5%

Frontieră

Apoi, accesați setările de margine și utilizați câteva colțuri rotunjite.

• Toate colțurile: 10 px

Revărsări

Schimbăm și deversările de rânduri la vizibile. Acest lucru vă va asigura că tot ceea ce depășește containerul rând nu va fi ascuns.

• Overflow orizontal: vizibil
• Overflow vertical: vizibil

Setări coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și adăugați câteva umpluturi personalizate în partea de sus și de jos.

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%

Setări coloana 2

Fundal de gradient

Continuând, vom adăuga un fundal de gradient în coloana 2.

• Culoare 1: # 7b47ff
• Culoare 2: # 6929aa
• Tipul gradientului: liniar
• Direcția gradientului: 158 grade

Spațiere

Vom adăuga și niște umpluturi personalizate în coloana respectivă.

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

Frontieră

Împreună cu câteva colțuri rotunjite.

• Toate colțurile: 10 px

Scară de transformare

Și vom crește dimensiunea coloanei în setările de transformare prin aplicarea următoarelor valori ale scalei de transformare:

• Ambele: 107%

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

Adăugați conținut H3

Este timpul să adăugați module, începând cu un modul de text în coloana 1. Introduceți un conținut H3 la alegere.

Setări text H3

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

• Rubrica 3 Font: Poppins
• Rubrica 3 Culoarea textului: # 6929aa
• Rubrica 2 Dimensiune text: 35 px
• Rubrica 3 Spațierea literelor: -1 px

Adăugați un modul divizor în coloana 1

Vizibilitate

Apoi, vom face un modul divizor în coloana 1. Asigurați-vă că este activată opțiunea „Afișați divizorul”.

• Show Divider: Da

Linia

Treceți la fila de proiectare a modulului și schimbați culoarea liniei.

• Culoare linie: # f5ca4e

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 6 px
• Lățime: 20%
• Înălțime: 6 px

Frontieră

Completați setările modulului prin includerea unor colțuri rotunjite în setările de margine.

• Toate colțurile: 20 px

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

Adauga continut

În coloana 2, singurul modul de care avem nevoie este un modul text cu un conținut de descriere.

Setări text

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

• Font text: Playfair Display
• Dimensiune text: 16 px
• Înălțimea liniei textului: 2.1em

Spațiere

Completați setările modulului adăugând câteva valori de umplere personalizate.

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

Clonați întregul rând de câte ori este necesar

După ce ați finalizat primul rând, îl puteți clona de câte ori doriți, în funcție de cât de multe informații doriți să partajați despre primul dvs. pas.

Schimbați toate copiile

Asigurați-vă că modificați toate copiile în rânduri duplicate.

2. Adăugați Bara de rânduri pas în partea de jos a secțiunii

Adăugați un rând nou

Structura coloanei

Acum, că avem toate rândurile explicative la locul lor, putem adăuga bara noastră de rânduri cu pași adezivi. Adăugați un rând nou folosind următoarea structură de coloane:

Fundal de gradient

Deschideți setările rândului și utilizați un fundal de gradient.

• Culoare 1: # ffdf51
• Culoare 2: # e5ac49
• Tipul gradientului: liniar
• Direcția gradientului: 150 grade

Dimensionare

Treceți la fila de proiectare a rândului și modificați setările de dimensionare după cum urmează:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Alinierea rândurilor: centru

Spațiere

Aplicați câteva valori de spațiere personalizate în continuare.

• Marja superioară: 5%
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Apoi, accesați setările de margine și adăugați câteva colțuri rotunjite.

• Toate colțurile: 10 px

Box Shadow

Aplicați și următoarea umbră a casetei:

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.13)

Revărsări

Apoi, navigați la fila avansată și setați revărsările la vizibil.

• Overflow orizontal: vizibil
• Vertical Overflow: Vizibil

Coloana 2 Spațierea

Apoi, deschideți setările coloanei 2 și utilizați câteva umpluturi personalizate de sus și de jos.

• Căptușeală superioară: 1%
• Căptușeală inferioară: 1%

Coloana 3 Spațierea

Adăugăm câteva umpluturi personalizate, de sus și de jos, și la coloana 3.

• Căptușeală superioară: 2%
• Căptușeală inferioară: 2%

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

Adauga continut

Este timpul să adăugați module la bara noastră de rânduri cu pasuri lipicioase. Adăugați un modul de text în coloana 1 și menționați pasul în caseta de conținut.

Fundal de gradient

Apoi, aplicați un fundal de gradient.

• Culoare 1: # 7b47ff
• Culoare 2: # 6929aa
• Tipul gradientului: liniar
• Direcția gradientului: 158 grade

Setări text

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

• Font text: Poppins
• Greutatea fontului textului: Bold
• Culoarea textului: #ffffff
• Dimensiune text: 27 px

Dimensionare

Modificați și setările de dimensionare.

• Lățime: 60%
• Alinierea modulului: centru

Spațiere

Apoi, adăugați câteva umpluturi personalizate în partea de sus și de jos la setările de spațiere.

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

Frontieră

Adăugați câteva colțuri rotunjite la setările de margine următoare.

• Toate colțurile: 10 px

Box Shadow

De asemenea, folosim o umbră de cutie subtilă.

• Culoare umbră: rgba (0,0,0,0,3)

Transformă Traducere

Și vom completa setările modulului prin repoziționarea ușoară a modulului folosind setările de traducere transformate ale Divi.

• Dreapta: -20px

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

Adăugați conținut H2

În coloana 2, adăugăm un modul de text cu un conținut H2 care descrie pasul la care ne aflăm.

Setări text H2

Treceți la fila de proiectare a modulului și stilizați setările de text H2 după cum urmează:

• Rubrica 2 Font: Poppins
• Rubrica 2 Greutate font: Mediu
• Alinierea textului antet 2:
  • Desktop: stânga
  • Tabletă și telefon: Centru
• Rubrica 2 Culoarea textului: # 6d40ed
• Rubrica 2 Spațierea literelor: -1 px

Spațiere

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

• Căptușeală superioară: 5%
• Căptușeală inferioară: 5%

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

Adauga continut

Treceți la următoarea și ultima coloană. Adăugați un modul text cu un conținut de descriere.

Setări text

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

• Font text: Playfair Display
• Greutatea fontului textului: Bold
• Culoare text: rgba (109,64,237,0,46)
• Dimensiune text: 20 px
• Alinierea textului:
  • Desktop: stânga
  • Tabletă și telefon: Centru

3. Aplicați Efecte lipicioase pe bara de rânduri

Setări de rânduri lipicioase

Acum, după ce designul nostru de bare cu rânduri de pași lipicios a fost finalizat, este timpul să-l fixăm în partea de jos. Deschideți setările rândului, accesați fila avansată și aplicați următoarele setări de poziție lipicioasă:

• Poziție lipicioasă: lipiți-vă de partea de jos
• Decalaj inferior lipicios: 1 px
• Limită superioară lipicioasă: secțiune
• Decalaj de la elementele lipicioase înconjurătoare: Da
• Stiluri implicite de tranziție și lipicioase: Da

Filtru Sticky Row

Într-o stare implicită, nu vrem ca bara de rând să fie vizibilă. Cu toate acestea, odată ce a devenit lipicios, vrem să apară. Pentru a face acest lucru, vom modifica filtrul de opacitate din setările filtrelor:

• Implicit: 0%
• Lipicios: 100%

4. Reutilizați întreaga secțiune pentru pașii următori

Clonați secțiunea de câte ori este necesar

Acum că prima noastră secțiune, dedicată pasului # 1, a fost creată, putem reutiliza întreaga secțiune pe baza numărului de pași pe care îi avem.

Schimbați toate copiile în secțiuni duplicate

Asigurați-vă că modificați toate copiile din secțiunile duplicate. Asta e!

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ă deveniți creativi cu designul abordării site-ului dvs. web. Mai precis, v-am arătat cum să utilizați opțiunile lipicioase Divi pentru a crea diferite bare de pași lipicioși care vă vor ajuta vizitatorii să navigheze prin diferite părți ale abordării dvs. 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.