Cum să păstrați modulele fixate în containerul lor de coloane cu Divi

Publicat: 2019-10-08

Când afișați mai multe îndemnuri pe pagina dvs., vă poate ajuta să creați un efect de derulare interactiv care unește diferite elemente. O modalitate de a aborda acest lucru este transformând modulele în elemente fixe în timp ce se deplasează în containerul lor de coloane. În tutorialul de astăzi, vă vom arăta cum să creați un design frumos care să gestioneze această tehnică și 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 finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

container coloană

Tabletă și mobil

container coloană

Descărcați designul containerului Sticky Column GRATUIT

Pentru a pune mâinile pe designul containerului cu coloană lipicioasă gratuită, 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.

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!

Abonați-vă la canalul nostru Youtube

Să începem să recreăm!

Adăugați o secțiune nouă

Începeți prin adăugarea unei noi secțiuni obișnuite la pagina la care lucrați.

container coloană

Spațiere

Deschideți setările secțiunii și modificați căptușeala superioară și inferioară pe diferite dimensiuni ale ecranului.

Căptușeală superioară: 7vw (desktop), 10vw (tabletă), 15vw (telefon)
Căptușeală inferioară: 20vw (desktop), 7vw (tabletă), 10vw (telefon)

container coloană

Adăugați un rând nou

Structura coloanei

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

container coloană

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a secțiunii. De asemenea, este foarte important să activați opțiunea „Egalizați înălțimile coloanei”. Procedând astfel, veți crea un spațiu gol în coloane care va permite modulelor fixe să se deplaseze liber în timp ce derulați pagina în jos.

Utilizați lățimea personalizată a jgheabului: da
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: Da
Lățime: 100%
Lățime maximă: 100%

container coloană

Coloana 2 Căptușeală superioară

Deschideți următoarea setare a coloanei 2 și adăugați câteva umpluturi de top pe desktop.

Căptușeală superioară: 20vw (desktop), 0vw (tabletă și telefon)

container coloană

Coloana 3 Căptușeală superioară

Adăugați și o valoare de umplere personalizată de top la a treia coloană.

Căptușeală superioară: 40vw (desktop), 0vw (tabletă și telefon)

container coloană

Coloana 4 Căptușeală superioară

Și completați setările rândului adăugând și o valoare de umplere de top la coloana 4.

Căptușeală superioară: 60vw (desktop), 0vw (tabletă și telefon)

container coloană

Adăugați CTA în coloana 1

Adauga continut

E timpul să începeți să adăugați module! Primul modul de care avem nevoie în coloana 1 este un modul CTA. Introduceți un conținut la alegere.

container coloană

Legătură

Adăugați și un link la buton. Dacă faceți acest lucru, butonul va putea apărea în design.

Adresă URL a butonului: #

container coloană

Culoare de fundal

Schimbați apoi culoarea de fundal a modulului.

Culoare fundal: #ffffff

container coloană

Setări text

Treceți la fila de proiectare și modificați setările generale de text.

Aliniere text: centru
Culoarea textului: Întunecat

container coloană

Setări text titlu

Modificați și setările pentru textul titlului.

Titlu Nivel antet: H3
Titlu Font: Spectral
Culoare text titlu: # 000000
Dimensiune text titlu: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

container coloană

Setări text corp

Împreună cu setările pentru textul corpului.

Font corp: Fira Sans
Greutatea fontului corpului: ușoară
Culoarea textului corpului: # 000000
Dimensiunea textului corpului: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
Înălțimea liniei corpului: 1,8em

container coloană

Setări buton

Nu uitați să stilizați și butonul modulului CTA.

Utilizați stiluri personalizate pentru buton: Da
Dimensiune text buton: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
Culoarea textului butonului: #ffffff
Culoarea fundalului butonului: # 444eff
Lățimea chenarului butonului: 0 px

container coloană

Raza chenarului butonului: 50vw
Buton Font: Fira Sans

container coloană

Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
Căptușeală stângă: 3vw (desktop), 7vw (tabletă), 13vw (telefon)
Căptușeală dreaptă: 3vw (desktop), 7vw (tabletă), 13vw (telefon)

container coloană

Spațiere

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

Căptușeală superioară: 8vw
Căptușeală inferioară: 8vw

container coloană

Frontieră

Adăugați și câteva colțuri rotunjite la modul.

Colțuri rotunjite: 1vw (Toate colțurile)

container coloană

Box Shadow

Completați designul modulului adăugând o umbră de casetă subtilă.

Poziție orizontală a umbrei cutiei: 10 px
Puterea neclarității umbrei cutiei: 50 px
Culoare umbră: rgba (0,0,0,0.08)

container coloană

Clasa CSS

Acum, pentru a face ca efectul derulant să funcționeze, va trebui să adăugăm câteva linii de cod CSS la sfârșitul acestui tutorial. În pregătirea pentru aceasta, vom adăuga o clasă CSS la modulul CTA.

Clasa CSS: sticky-cta

container coloană

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

Incarca imaginea

La următorul și ultimul modul avem nevoie în coloana 1, care este un modul de imagine. Încărcați o imagine PNG la alegere.

container coloană

Aliniere

Schimbați alinierea imaginii în continuare.

Aliniere imagine: centru

container coloană

Dimensionare

Asigurați-vă că forțați lățimea completă și pe modul.

Forțează lățimea completă: Da

container coloană

Spațiere

Completați setările modulului accesând setările de spațiere și adăugând câteva valori de spațiere personalizate pe diferite dimensiuni de ecran.

Marja superioară: -5vw (tabletă și telefon)
Marja inferioară: -12vw (desktop), 5vw (tabletă și telefon)
Căptușeală stângă: 3vw (desktop), 10vw (tabletă), 25vw (telefon)
Căptușeală dreaptă: 3vw (desktop), 10vw (tabletă), 25vw (telefon)

container coloană

Clonați ambele module de trei ori și plasați-le în coloanele rămase

După ce ați finalizat ambele module din coloana 1, le puteți clona pe ambele de trei ori și puteți plasa duplicatele în coloanele rămase ale rândului.

container coloană

Schimbați imaginile

Asigurați-vă că schimbați imaginea din fiecare modul de imagine duplicat.

container coloană

Schimbați conținutul CTA și culorile de fundal ale butoanelor

Schimbați și conținutul CTA împreună cu culorile de fundal ale butonului.

CTA Module # 2: # 89ffb4
CTA Module # 3: # ff89f1
Modulul CTA # 4: # ffd389

container coloană

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: imagine lipicioasă

container coloană

Adăugați rândul # 2

Structura coloanei

Singurul lucru rămas de făcut este adăugarea codului CSS. Pentru a face acest lucru, adăugați un rând nou.

container coloană

Adăugați un modul de cod cu codul CSS

Adăugați un modul de cod pe rând, introduceți codul CSS mai jos și ați terminat!

<style>
@media only screen and (min-width: 980px) {
.sticky-cta {
position: sticky;
position: -webkit-sticky;
top: 8vw !important;
}

.sticky-image {
position: sticky;
position: -webkit-sticky;
top: 28vw !important;
}
}</style>

container coloană

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

container coloană

Tabletă și mobil

container coloană

Gânduri finale

În această postare, v-am arătat cum să păstrați modulele fixe în containerul lor de coloane. Utilizarea tehnicii poate avea ca rezultat câteva efecte de derulare uimitoare, care vă permit să subliniați diferitele îndemnuri la acțiune de pe pagina 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.