Cum să construiți o listă interactivă pe scroll cu Opțiunile lipicioase ale lui Divi

Opțiunile lipicioase ale lui Divi vă permit să adăugați fără efort interacțiuni la paginile create și proiectate. Dacă sunteți în căutarea unei modalități de a menționa mai multe articole fără a crea doar o listă statică, vă veți bucura de acest tutorial. Astăzi vă arătăm cum să creați o listă interactivă pe scroll folosind opțiunile lipicioase ale lui Divi. Pe măsură ce oamenii derulează secțiunea, diferite elemente sunt adăugate la lista din stânga. Acest lucru vă ajută să păstrați o imagine de ansamblu. Veți putea descărca și fișierul JSON gratuit!

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 GRATUIT

Pentru a pune mâna pe aspectul liber, 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!

Creaț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. Adăugați o culoare de fundal la secțiune.

• Culoare fundal: # f2f2f2

Adăugați rând

Structura coloanei

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

Dimensionare

Fără a adăuga încă module, deschideți setările de rând și modificați setările de dimensionare după cum urmează:

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

Coloana 1 Culoare fundal

Apoi, deschideți setările coloanei 1 și adăugați o culoare de fundal.

• Culoare fundal: # f2f2f2

Coloana 1 Spațierea

Modificați apoi setările de spațiere a coloanei.

• Căptușeală superioară:
  • Tabletă: 20 px
  • Telefon: 20 px
• Căptușeală inferioară:
  • Tabletă: 20 px
  • Telefon: 20 px
• Căptușeală stângă: 3%
• Căptușeală dreaptă: 3%

Coloana 1 Index Z

Și creșteți indexul z al coloanei în fila avansată.

• Indicele Z: 12

Adăugați modulul de text nr. 1 în coloana 1

Adauga continut

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

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
• Greutatea fontului textului: Bold
• Stilul textului fontului: cursiv
• Culoarea textului: #bfbfbf
• Mărimea textului:
  • Desktop: 2vw
  • Tabletă: 5vw
  • Telefon: 8vw
• Înălțimea liniei de text: 1em

Adăugați modulul de text nr. 2 în coloana 2

Adăugați conținut H3

Adăugați un alt modul de text în coloană cu 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 după cum urmează:

• Rubrica 3 Font: Playfair Display
• Titlul 3 Greutate font: îndrăzneț
• Rubrica 3 Culoarea textului: # 000000
• Rubrica 3 Dimensiune text:
  • Desktop: 3vw
  • Tabletă: 10vw
  • Telefon: 12vw

Spațiere

Adăugați câteva margini superioare și inferioare personalizate în continuare.

• Marja superioară: 2vh
• Marja inferioară: 2vh

Scară de transformare

Apoi, aplicați câteva setări personalizate ale scalei de transformare.

• Ambele: 300%

Transformă Traducere

Și completați setările modulului prin aplicarea următoarelor setări de traducere de transformare:

• Jos: 30%

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

Vizibilitate

Ultimul modul de care avem nevoie în coloana 1 este un modul divizor. Asigurați-vă că este activată opțiunea „Show Divider”.

• Show Divider: Da

Linia

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

• Culoare linie: # 000000
• Stilul liniei: solid
• Poziția liniei: sus

Dimensionare

Modificați și setările de dimensionare ale modulului.

• Greutatea divizorului: 4 px
• Înălțimea împărțitorului: 4 px

Adăugați modulul de imagine în coloana 2

Lăsați caseta de imagine goală

În coloana 2, primul modul pe care îl vom adăuga este un modul de imagine. Lăsați caseta de imagine goală.

Imagine de fundal

Folosiți în schimb o imagine de fundal.

• Dimensiunea imaginii de fundal: copertă
• Poziția imaginii de fundal: Centru

Spațiere

Și pentru a permite afișarea imaginii de fundal, vom modifica setările de spațiere după cum urmează:

• Marja superioară:
  • Desktop: 15vh
  • Tabletă și telefon: 0vh
• Căptușeală superioară: 33vh
• Căptușeală inferioară: 33vh

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

Adauga continut

Următorul și ultimul modul de care avem nevoie este un modul de text sub modulul de imagine. Adăugați un conținut de descriere la alegere.

Setări text

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

• Font text: Cabină
• Culoarea textului: # 000000
• Mărimea textului:
  • Desktop: 1.2vw
  • Tabletă: 2.3vw
  • Telefon: 3.4vw
• Înălțimea liniei de text: 1.6em

Spațiere

Completați setările modulului modificând în mod corespunzător setările de spațiere ale modulului:

• Căptușeală stângă:
  • Tabletă și telefon: 5%
• Căptușeală dreaptă: 5%

Aplicați Efecte lipicioase

Întoarceți coloana # 1 lipicioasă

Acum, că toate elementele sunt la locul lor, putem începe să aplicăm setările lipicioase. Deschideți setările coloanei 1 și utilizați următoarele setări lipicioase responsive în fila avansată:

• Poziție lipicioasă: lipiți-vă de sus
• Limita inferioară lipicioasă
  • Desktop: Secțiune
  • Tabletă și telefon: Rând
• Compensare de la elementele lipicioase înconjurătoare:
  • Desktop: Da
  • Tabletă și telefon: Nu
• Stiluri implicite de tranziție și lipicioase: Da

Modulul text nr. 1 din coloana nr. 1: Setări lipicioase

Înălţime

Acum, când coloana 1 a fost transformată lipicioasă, putem începe să aplicăm câteva setări lipicioase elementelor din această coloană. Vom începe cu înălțimea primului modul de text.

• Înălțime: 0px
• Înălțime lipicioasă: Auto

Opacitate

Modificăm și opacitatea.

• Opacitate: 0%
• Opacitate lipicioasă: 100%

Modulul text nr. 2 din coloana nr. 1: Setări lipicioase

Scară de transformare

Apoi, vom deschide al doilea modul de text din coloana 1. Aduceți valorile scalei de transformare la „100%” într-o stare lipicioasă.

• Amândouă lipicioase: 100%

Transformă Traducere

Schimbați și setările de traducere a transformării lipicioase.

• Fund lipicios: 0%

Tranziție

Și finalizați setările modulului mărind durata tranziției în fila avansată.

• Tranziție: 1000ms

Modul divizor: Setări lipicioase

Lățimea maximă

Nu în ultimul rând, vom modifica și lățimea maximă a modulului divizor.

• Lățime maximă: 0 px
• Lățime maximă lipicioasă: 120 px

Clone Row de două ori

Odată ce primul rând a fost finalizat, îl puteți clona de două ori.

Schimbați tot conținutul și imaginile

Asigurați-vă că schimbați tot conținutul și imaginile și ați terminat!

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ă creați o listă interactivă pe scroll. Pe măsură ce oamenii derulează designul secțiunii, diferite elemente din lista dvs. sunt colectate în partea stângă. Aceasta oferă o imagine de ansamblu structurată și vă ajută să creați un design interactiv. Puteți utiliza această abordare pentru orice tip de listă pe care doriți să o distribuiți pe paginile 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.