Cum să creați o machetă de galerie Scroll cu noile opțiuni de depășire ale Divi

Căutați o modalitate creativă de a afișa imagini pe site-ul dvs. web? Asigurați-vă că continuați să citiți, deoarece, în această postare, vă vom arăta cum să creați o machetă de galerie de defilare folosind numai opțiunile încorporate ale Divi. Concret, vom transforma o secțiune într-o machetă și vom face ca toate rândurile din secțiune să facă parte din machetă. Odată ce obțineți tehnica, veți putea să prezentați orice tip de conținut doriți într-o machetă mobilă și să adăugați interacțiune paginilor dvs. în cel mai scurt timp.

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 gratuit Scroll Gallery Mockup Design

Pentru a pune mâna pe designul gratuit al machetei galeriei de defilare, 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!

Abonați-vă la canalul nostru Youtube

Adăugați o secțiune nouă

Dimensionare

Începeți prin a crea o pagină nouă sau a deschide una existentă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și modificați lățimea și lățimea maximă în setările de dimensionare.

• Lățime: 25vw (desktop), 60vw (tabletă), 80vw (telefon)
• Lățime maximă: 25vw (desktop), 60vw (tabletă), 80vw (telefon)

Spațiere

Apoi, accesați setările de spațiere, eliminați toate umpluturile implicite de sus și de jos și adăugați niște margini de sus și de jos pentru a crea spațiu.

• Marja superioară: 9vw
• Jos: 9vw
• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Frontieră

Continuați accesând setările de margine ale secțiunii și creați forma unei machete mobile adăugând „30 px” la fiecare colț.

Box Shadow

Adăugați o umbră de cutie subtilă pentru a permite formei să treacă.

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

Adăugați rândul # 1

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ândurilor și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Dimensionare

Apoi, accesați setările de dimensionare și permiteți rândului să ocupe întreaga lățime a secțiunii.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați umplutura implicită de sus și de jos în continuare.

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

Box Shadow

Și adăugați și o umbră de cutie.

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

Indicele Z

Nu în ultimul rând, ne vom asigura că rândul (și mai ales umbra casetei sale) se suprapune rândului care urmează, mărind indicele Z în setările de vizibilitate.

• Indicele Z: 99

Adăugați un modul de text în coloană

Adăugați conținut H2

Singurul modul de care avem nevoie în acest rând este un modul de text cu conținut H2.

Setări text H2

După ce ați adăugat copia H2, accesați setările de text H2 și faceți câteva modificări.

• Titlul 2 Font: Abril Fatface
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: # 000000
• Rubrica 2 Dimensiune text: 1,5vw (desktop), 3,5vw (tabletă), 5vw (telefon)

Spațiere

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

• Marja superioară: 1,5vw (desktop și tabletă), 3,5vw (telefon)
• Marja inferioară: 1,5vw (desktop și tabletă), 3,5vw (telefon)

Adăugați rândul # 2

Structura coloanei

Pe al doilea rând! Aici, folosim următoarea structură de coloane:

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, modificăm înălțimea și înălțimea maximă pentru a crea un efect de derulare verticală în pașii următori.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%
• Înălțime: 38vw (desktop), 100vw (tabletă), 120vw (telefon)
• Înălțime maximă: 38vw (desktop), 100vw (tabletă), 120vw (telefon)

Spațiere

Apoi, accesați setările de spațiere și eliminați toate umpluturile implicite de sus și de jos.

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

Overflow vertical

Așa cum am menționat anterior, facem acest rând să fie derulabil pe verticală. Pentru a face acest lucru, va trebui să schimbăm depășirea verticală din setările de vizibilitate ale rândului.

• Vertical Overflow: Derulați

Adăugați modulul de imagine în coloană

Incarca imaginea

Continuați și adăugați un prim modul de imagine pe rând și încărcați o imagine la alegere. Puteți descărca imaginile pe care le folosim de-a lungul acestui tutorial accesând postarea Wedding Planner Layout Pack.

Dimensionare

Asigurați-vă că activați opțiunea „Forțează lățimea completă” din modulul de imagine pentru a asigura un rezultat receptiv.

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

Spațiere

Mergeți la setările de spațiere următoare și creați un spațiu între acest și oricare dintre module care urmează adăugând o marjă inferioară.

• Marja inferioară: 1vw

Clonați modulul de imagine de câte ori doriți

După ce ați terminat modificarea primului modul de imagine, îl puteți clona de câte ori doriți.

Încărcați imagini diferite

Desigur, veți dori să modificați imaginea din fiecare dintre duplicate.

Adăugați rândul # 3

Structura coloanei

Pe al treilea și ultimul rând! Folosim următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și adăugați o culoare de fundal albă.

• Culoare fundal: #ffffff

Dimensionare

Apoi, accesați setările de dimensionare și permiteți rândului să ocupe întreaga lățime a secțiunii.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Adăugați câteva valori de umplere personalizate, sus și jos.

• Căptușeală superioară: 2.1vw (desktop), 3.5vw (tabletă), 5vw (telefon)
• Căptușeală inferioară: 2.1vw (desktop), 3.5vw (tabletă), 5vw (telefon)

Box Shadow

Și adăugați o umbră de cutie pentru a crea adâncime.

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

Indicele Z

Pentru a ne asigura că acest rând (și în special umbra casetei sale) se suprapune rândului anterior, vom crește indicele Z.

• Indicele Z: 99

Adăugați un modul buton în coloană

Adăugați o copie

Singurul modul de care avem nevoie în acest rând este un modul buton. Adăugați o copie la alegere.

Aliniere

Apoi, accesați fila de proiectare și schimbați alinierea butonului.

• Aliniere buton: centru

Setări buton

Modificați și setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 2,5vw (tabletă), 3,5vw (telefon)
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 1 px
• Buton Font: Abril Fatface

Spațiere

Și creați forma dorită folosind valori de umplere personalizate.

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

Bara de derulare a stilului

Adăugați ID CSS la rândul 2

Depinde de dvs. dacă doriți sau nu să stilizați bara de derulare. Dacă da, deschideți al doilea rând și adăugați o clasă CSS la acesta.

• Clasa CSS: imagine-scrollbar

Deschideți Setări pagină

Apoi, deschideți setările rândului.

Bara de derulare a stilului folosind CSS

Și adăugați următoarele linii de cod CSS în caseta CSS personalizată din fila avansată:

.image-scrollbar::-webkit-scrollbar {
width: 10px;
}
.image-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.image-scrollbar::-webkit-scrollbar-thumb {
background: #000000;
}

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 o frumoasă machetă de galerie de defilare numai cu opțiunile încorporate ale Divi. La începutul acestei postări, ați reușit să descărcați gratuit aspectul JSON și să îl utilizați pe orice site web la care lucrați. 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.