Crearea derulării în linie se dezvăluie cu Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

În această săptămână, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați revelații de scroll inline frumoase folosind pachetul DJ Layout. Acesta este un mod excelent de a atrage atenția asupra unui anumit container de coloane de pe site-ul dvs. web, fără a fi nevoie să îl adăugați de mai multe ori pe pagina dvs. Vom adăuga un efect de planare / eliberare la tehnica care îi va ajuta pe vizitatori să se țină de containerul coloanei și să-l lase ori de câte ori le place. Veți putea descărca gratuit fișierul JSON!

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 Inline Scroll Reveals Layout GRATUIT

Pentru a vă pune mâna pe defilarea gratuită în linie vă arată aspectul, 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!

Creați o pagină nouă utilizând pagina principală a DJ Layout Pack

Adăugați o pagină nouă

Pentru acest tutorial de caz de utilizare, vom folosi unul dintre aspectele DJ. Începeți prin crearea unei noi pagini, acordând titlului paginii dvs. și trecând la Visual Builder.

Încărcați pagina de pornire DJ

Continuați încărcând aspectul paginii de pornire DJ pe pagina dvs.

Adăugați o valoare a indexului Z mai mare la fiecare secțiune de pe pagină

Adăugați un index Z mai mare la secțiunea Hero

Vom remedia o coloană specifică și îi vom permite să apară oriunde dorim. Opusul este adevărat, de asemenea; vrem să-l ascundem oriunde nu vrem să apară. Pentru a face acest lucru, vom da fiecărei secțiuni de pe pagină (în afară de cea în care se află coloana, care este secțiunea # 2 a paginii), o valoare a indexului z mai mare. Începeți prin deschiderea secțiunii erou și creșteți indexul z în setările de vizibilitate.

• Indicele Z: 2

Copiați indexul Z

După ce ați adăugat indexul z, îl puteți copia.

Lipiți la alte secțiuni din pagină, cu excepția secțiunii nr. 2

Și lipiți-l pe toate celelalte secțiuni de pe pagină, cu excepția secțiunii nr. 2 (secțiunea care conține coloana pe care o vom transforma într-o listă de defilare în linie).

Schimbați secțiunea nr. 2

Plasați conținutul coloanei în rânduri separate

Schimbați structura coloanei rândurilor

Să începem să modificăm a doua secțiune, începând cu structura coloanei rândului.

Rând duplicat

Continuați clonând rândul.

Ștergeți modulele din rânduri

Eliminați modulele de text și butoane din primul rând și modulele audio din al doilea rând.

Modificați rândul # 1 în secțiunea # 2

Eliminați unele module audio (pentru a se potrivi dimensiunilor mai mici ale ecranului)

În pașii următori, vom face corectă coloana care conține modulele audio. Acum, pentru a ne asigura că coloana se potrivește cu înălțimea ecranului de dimensiuni mai mici ale ecranului, va trebui să eliminăm unele module audio.

Adăugați marginea inferioară la rând

Continuați deschizând setările rândului, mergând la fila de proiectare și adăugând niște umplutură de jos. Vom avea nevoie de acest spațiu pentru a permite coloanei să se dezvăluie pe scroll mai târziu în tutorial.

• Marja inferioară: 700 px

Deschideți Setări coloană

Este timpul să începeți să transformați coloana într-o listă de scroll în linie! Deschideți setările coloanei.

Hover Box Shadow

Apoi, accesați fila de proiectare și schimbați unele valori ale umbrelor de casetă pe hover.

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

Scala de transformare a cursorului

Măriți dimensiunea coloanei la cursă, modificând și valorile scalei de transformare.

• Jos: 110%
• Dreapta: 110%

Element principal implicit

Pentru a face coloana fixă, vom adăuga câteva linii de cod CSS la elementul principal al coloanei.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

Plasați cursorul pe elementul principal

Asigurați-vă că adăugați linia CSS cu poziție fixă ​​și la elementul principal al cursorului. Acest lucru va împiedica pâlpâirea coloanei.

position: fixed;

Indice Z implicit

Acum, în circumstanțe normale, dorim ca modulul să apară sub tot conținutul paginii. Pentru a ne asigura că acest lucru se întâmplă, vom schimba indexul z al coloanei.

• Indicele Z: 0

Plasați cursorul Z Index

Cu toate acestea, la trecerea cu mouse-ul dorim ca coloana să se suprapună peste tot conținutul paginii. De îndată ce cineva va elibera coloana, aceasta va reveni la locul său în spatele întregului conținut al paginii. Schimbați indexul z la trecerea cu mouse-ul în consecință:

• Indicele Z: 10

Modificați rândul # 2 în secțiunea # 2

Adăugați căptușeala superioară în coloană

În scopuri estetice, vom deschide coloana din al doilea rând al secțiunii # 2 și vom adăuga câteva umpluturi personalizate de sus.

• Căptușeală superioară: 80 px

Adăugați o marjă inferioară personalizată la secțiunile din toată pagina

Localizați secțiunea

Deschideți Setări secțiune

Acum că am modificat coloana de afișare a defilării în linie, trebuie să creăm un spațiu pentru ca aceasta să apară. Am făcut acest lucru pentru rândul în care se află deja (umplutură de jos de 700 px), dar vom permite coloanei să se dezvăluie și în alte locuri ale paginii. Deschideți setările secțiunii următoarei secțiuni:

Adăugați marja inferioară

Accesați setările de spațiere și adăugați o margine de jos. Adăugarea marginii de jos va crea spațiu gol pe pagină, care va permite afișarea coloanei indexului cu z scăzut.

• Marja inferioară: 700 px

Localizați secțiunea

Deschideți Setări secțiune

Deschideți următoarea secțiune în continuare:

Adăugați marja inferioară

Și adăugați o margine inferioară și aici.

• Marja inferioară: 700 px

Îndepărtați căptușeala secțiunii în exces

Scoateți capitonajul inferior al secțiunii # 2

Acum, singurul lucru care ne-a mai rămas de făcut este să optimizăm modul în care designul nostru se potrivește cu dezvăluirea inline scroll. Deschideți a doua secțiune a paginii și îndepărtați căptușeala inferioară.

• Partea de jos: 0 px

Localizați secțiunea

Deschideți Setări secțiune

Deschideți următoarele setări ale secțiunii în continuare:

Îndepărtați căptușeala inferioară și adăugați căptușeala superioară

Adăugați niște căptușeală superioară și îndepărtați căptușeala inferioară.

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

Localizați secțiunea

Deschideți Setări secțiune

Până la ultima secțiune. Deschideți setările secțiunii.

Îndepărtați căptușeala superioară

Scoateți căptușeala superioară și ați terminat!

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

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ă creați dezvăluiri inline scroll cu Divi și DJ Layout Pack. Acesta este un mod excelent de a adăuga interacțiune pe site-ul dvs. web. Sperăm că acest tutorial vă va inspira să vă creați propriile revelații de scroll fixe în linie! Dacă aveți întrebări sau sugestii, asigurați-vă că 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.