Când afișați mai multe îndemnuri pe pagina dvs., poate fi util să creați un efect de derulare interactiv care să combine elemente diferite. O soluție este transformarea modulelor în elemente fixe în timp ce acestea se deplasează în containerul coloanei lor. În tutorialul de astăzi, vă vom arăta cum să creați un design frumos care să gestioneze această tehnică. De asemenea, veți putea descărca gratuit fișierul JSON!
Să mergem.
studiu
Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire finală asupra modului în care a funcționat cu diferite dimensiuni de ecran.
Să începem să recreăm!
Adăugați o secțiune nouă
Începeți prin a adăuga o nouă secțiune regulată la pagina pe care lucrați.
spaţierea
Deschideți setările secțiunii și modificați marginile de jos și de sus pentru diferite dimensiuni de ecran.
- Top tapițerie: 7vw (desktop), 10vw (tabletă), 15vw (telefon)
- Tapițerie în partea de jos: 20vw (desktop), 7vw (tabletă), 10vw (telefon)
Adăugați o linie nouă
Structura coloanei
Continuați să adăugați un rând nou folosind următoarea structură a coloanelor:
dimensionarea
Fără a adăuga încă module, deschideți setările rândului și lăsați-l să ocupe întreaga lățime a secțiunii. el este de asemenea foarte important activați opțiunea „Egalizați înălțimile coloanei”. Procedând astfel, veți crea spațiu gol în coloane, care va permite modulelor staționare să se deplaseze liber în timp ce derulați pagina.
- Utilizați o lățime personalizată de jgheab: Da
- Lățimea jgheabului: 1
- Egalizați înălțimile coloanei: Da
- Lățime: 100%
- Lățimea maximă: 100%
Înveliș superior coloană 2
Apoi, deschideți setările pentru coloana 2 și adăugați niște umpluturi de top pe desktop.
- Înveliș superior: 20vw (desktop), 0vw (tabletă și telefon)
Înveliș superior coloană 3
Adăugați de asemenea o valoare de umplere personalizată la a treia coloană.
- Cea mai bună umplere: 40vw (desktop), 0vw (tabletă și telefon)
Înveliș superior coloană 4
Și completați parametrii liniei adăugând și o valoare de umplere mai mare coloanei 4.
- Înveliș superior: 60vw (desktop), 0vw (tabletă și telefon)
Adăugați CTA în coloana 1
Adăugați conținut
Este timpul să începeți să adăugați module! Primul modul de care avem nevoie în coloana 1 este un modul CTA (Call to Action). Introduce cuprins de votre choix.
Legătură
Adăugați și un link la buton. Acest lucru va permite butonului să se afișeze în design.
- URL-ul linkului butonului: #
Culoare de fundal
Schimbați ulterior culoarea de fundal a modulului.
- Culoarea fundalului: #ffffff
Setări text
Comutați la fila Proiectare și modificați setările generale de text.
- Alinierea textului: centru
- Culoarea textului: întunecat
Setări text de titlu
Modificați, de asemenea, setările textului titlului.
- Titlu Titlu Nivel: H3
- Titlul textului: Spectral
- Denumirea textului color: # 000000
- Mărimea titlului textului: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
Setări text corp
Cu parametrii corpului textului.
- Font pentru corp: Fira Sans
- Greutatea fontului: Light
- Culoarea caroseriei textului: # 000000
- Dimensiunea textului corpului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Înălțimea corpului: 1.8em
Setări buton
Nu uitați să stilizați și butonul modulului CTA.
- Utilizați stiluri personalizate pentru buton: Da
- Mărimea textului butonului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Culoarea textului butonului: #ffffff
- Culoarea fundalului butonului: #444eff
- Lățimea marginii butonului: 0px
- Raza marginii butonului: 50vw
- Font de buton: Fira Sans
- Înveliș superior: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Tapițerie în partea de jos: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
- Căptușire stânga: 3vw (desktop), 7vw (tabletă), 13vw (telefon)
- Tapițerie din dreapta: 3vw (desktop), 7vw (tabletă), 13vw (telefon)
spaţierea
Apoi accesați setările de spațiere și adăugați margini interioare și inferioare personalizate.
- Padding Top: 8vw
- Garnitura de jos: 8vw
frontieră
Adăugați de asemenea unghiuri rotunjite la modul.
- Colțuri rotunde: 1vw (toate colțurile)
Cutie de umbră
Finalizați designul modulului adăugând o umbră de casetă subtilă.
- Umbra cutiei Poziție orizontală: 10px
- Cutie Blur Force Blur: 50px
- Culoare umbră: rgba (0,0,0,0,08)
CSS
Acum, pentru ca efectul de derulare lipicioasă să funcționeze, va trebui să adăugăm câteva linii de cod CSS la sfârșitul acestui tutorial. Ca pregătire, vom adăuga o clasă CSS la modulul CTA.
- Clasa CSS: sticky-cta
Adăugați un modul de imagine în coloana 1
Incarca imaginea
Să trecem la următorul și ultimul mod de care avem nevoie în coloana 1, care este un mod imagine. Încărcați o imagine PNG la alegere.
aliniere
Schimbați alinierea imaginii în continuare.
- Aliniere imagine: centru
dimensionarea
Asigurați-vă că forțați și lățimea completă pe modul.
- Lățime completă de forță: Da
spaţierea
Completați setările modulului accesând setările de spațiere și adăugând valori de spațiere personalizate pentru diferite dimensiuni de ecran.
- Marja superioară: -5vw (tabletă și telefon)
- Marja de jos: -12vw (desktop), 5vw (tabletă și telefon)
- Căptușire stânga: 3vw (desktop), 10vw (tabletă), 25vw (telefon)
- Tapițerie din dreapta: 3vw (desktop), 10vw (tabletă), 25vw (telefon)
Clonați cele două module de trei ori și așezați coloanele rămase
După ce ați completat ambele module în coloana 1, puteți să le dublați de trei ori și să plasați duplicatele în coloanele rămase ale rândului.
Schimbă imagini
Asigurați-vă că modificați imaginea din fiecare modul de imagine duplicat.
Modificați conținutul CTA și culorile de fundal ale butoanelor
De asemenea, schimbați cuprins CTA cu culori de fundal pentru butoane.
- Modul CTA #2: #89ffb4
- Modul CTA #3: #ff89f1
- Modul CTA #4: #ffd389
Adăugați clasa CSS la modulele de imagine din coloanele 1, 2 și 3
Acum, pentru a ne asigura că efectul lipicios funcționează și asupra imaginilor, va trebui să adăugăm o clasă CSS la modulele de imagine din coloanele 1, 2 și 3.
- Clasa CSS: sticky-image
Adăugați linia 2
Structura coloanei
Rămâne doar să adăugați codul CSS. Pentru a face acest lucru, adăugați o nouă linie.
Adăugați un modul cu cod CSS
Adăugați un modul de cod la linie, introduceți codul CSS de mai jos și ați terminat!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
studiu
Acum, după ce s-au făcut toți pașii, să aruncăm o privire finală asupra a ceea ce s-a întâmplat cu diferite dimensiuni de ecran.
Ultimele gânduri
În acest articol, v-am arătat cum să păstrați modulele fixate în containerul lor de coloane. Utilizarea acestei tehnici poate genera efecte de derulare uimitoare care vă permit să evidențiați diferitele îndemnuri la acțiune pe pagina dvs. De asemenea, puteți 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.
