Cum se combină suprapunerile cu opțiunile lipicioase ale lui Divi pentru a crea tranziții fără efort

Pe măsură ce tehnologia continuă să evolueze, și designul evoluează. Mai mult ca oricând, puteți întâlni site-uri web care vă lasă uimiți și vă întrebați cum au fost creați. Deși site-urile web care au interacțiuni de defilare nu sunt pentru fiecare tip de afacere, știind cum să depășească mila este deosebit de util pentru a lăsa o impresie bună. Cu Divi, multe lucruri sunt deja posibile fără a fi nevoie să atingeți o singură linie de cod. Tutorialul de astăzi vă ajută să înțelegeți Divi dintr-o altă perspectivă. Vă vom arăta cum să combinați opțiunile lipicioase ale lui Divi cu alte setări încorporate pentru a crea tranziții fără efort. 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 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!

1. Recreați structura de proiectare

Adăugați o secțiune nouă

Spațiere

În prima parte a acestui tutorial, ne vom concentra pe recrearea structurii de proiectare din interiorul Divi. Apoi, în partea a doua, vom petrece timp parcurgând toate opțiunile lipicioase pentru a obține efectul pe care îl puteți observa în previzualizarea acestui post. Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii, accesați fila de design și adăugați niște umplutură de jos.

• Căptușeală inferioară: 100vh

Adăugați rândul # 1

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 rândurilor, accesați fila de proiectare și modificați setările de dimensionare în consecință:

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

Indicele Z

Atribuiți și indexului az acestui rând.

• Indicele Z: 1

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

Lăsați caseta de imagine goală

Este timpul să adăugați module, începând cu un modul de imagine. Lăsați caseta de conținut goală.

Folosiți în schimb imaginea de fundal

Și folosiți în schimb o imagine de fundal la alegere.

• Dimensiunea imaginii de fundal: copertă

Dimensionare

Schimbați lățimea modulului în continuare.

• Lățime: 100%

Spațiere

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

• Căptușeală superioară: 40vh
• Căptușeală inferioară: 40vh

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

Adăugați conținut H2

Treceți la modulul următor, care este un modul text care conține un conținut H2 la alegere.

Setări text H2

Modificați setările de text H2 ale modulului în consecință:

• Rubrica 2 Font: Montserrat
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoarea textului: #ffffff
• Rubrica 2 Dimensiune text:
  • Desktop: 10vw
  • Tabletă: 14vw
  • Telefon: 15vw
• Rubrica 2 Spațierea literelor: -0,5vw

Dimensionare

Asigurați-vă că și modulul este „100%”.

• Lățime: 100%

Poziţie

Și repoziționați modulul în fila avansată.

• Poziție: Absolută
• Locație: centru

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor. Utilizați următoarea structură de coloane:

Dimensionare

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

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

Indicele Z

Atribuiți și indexului az acestui rând.

• Indicele Z: 2

Coloana 1 Spațierea

Completați setările rândului deschizând setările primei coloane și atribuind câteva umpluturi la stânga și la dreapta.

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

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

Adăugați conținut H3

Acum că setările rândurilor sunt la locul lor, este timpul să adăugați module. Adăugați un modul de text în coloana 1 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 în consecință:

• Rubrica 3 Font: Montserrat
• Titlul 3 Stil font: Subliniat
• Titlul 3 Culoare subliniere: #ffffff
• Titlul 3 Stil subliniat: solid
• Rubrica 3 Culoarea textului: #ffffff
• Rubrica 3 Dimensiune text:
  • Desktop: 4vw
  • Tabletă și telefon: 10vw
• Rubrica 3 Spațierea literelor: -3px

Spațiere

Adăugați niște umpluturi potrivite pe dimensiuni mai mici ale ecranului.

• Căptușeală dreaptă: 20% (numai tabletă și telefon)

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

Adauga continut

Adăugați un alt modul de text în coloana 2 cu un conținut de descriere la alegere.

Culoare de fundal

Schimbați culoarea de fundal în continuare.

• Culoare fundal: #ffffff

Setări text

Apoi, modificați setările de text după cum urmează:

• Font text: Playfair Display
• Stilul textului fontului: cursiv
• Mărimea textului:
  • Desktop: 1,6vw
  • Tabletă: 3vw
  • Telefon: 4vw
• Înălțimea liniei de text: 1,5em

Spațiere

Aplicați și câteva valori de umplere personalizate.

• Căptușeală superioară: 10vh
• Căptușeală inferioară: 10vh
• Căptușeală stângă: 10%
• Căptușeală dreaptă: 10%

Adăugați un modul buton la coloana 2

Adăugați o copie

Următorul și ultimul modul pe care îl vom adăuga este un modul buton în coloana 2. Adăugați o copie la alegere.

Setări buton

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

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton:
  • Desktop: 1.2vw
  • Tabletă: 2,5vw
  • Telefon: 3.5vw
• Culoarea textului butonului: # 000000
• Culoarea fundalului butonului: #ffffff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 0 px
• Buton Font: Montserrat

• Stil Font Buton: Subliniat
• Culoare subliniere buton: # 000000
• Stil subliniat buton: solid

Spațiere

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

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Poziţie

Și repoziționați modulul în fila avansată.

• Poziție: Absolută
• Locație: în partea dreaptă jos

2. Aplicați Efecte lipicioase

Modulul de imagine în rândul # 1

Setări lipicioase

Acum că am construit fundamentul designului nostru, este timpul să începem să aplicăm efectele personalizate lipicioase. Deschideți modulul de imagine în rândul # 1 și rotiți modulul lipicios după cum urmează:

• Poziție lipicioasă: lipiți-vă de sus
• Limita lipicioasă inferioară: secțiunea
• Decalaj de la elementele lipicioase înconjurătoare: nu

Dimensionare lipicioasă

Odată ce setările lipicioase au fost aplicate, putem schimba și stilurile lipicioase ale modulului nostru. Primul lucru pe care îl vom face este să schimbăm lățimea într-o stare lipicioasă.

• Lățime lipicioasă: 80%

Spațiere lipicioasă

Apoi, vom modifica căptușeala superioară și inferioară lipicioasă.

• Căptușeală superioară lipicioasă: 50vh
• Căptușeală inferioară lipicioasă: 50vh

Fundal de gradient lipicios

Vom aplica un fundal de gradient lipicios și modulului nostru.

• Culoare 1: # 00336b
• Culoare 2: rgba (41.196.169,0)
• Tipul gradientului: liniar
• Direcția gradientului: 90 grade
• Plasați gradientul deasupra imaginii de fundal: Da

Tranziție

Și pentru a asigura o tranziție lină, vom mări durata de tranziție a modulului.

• Durata tranziției: 1500ms

Coloana 2 din rândul # 2

Coloana 2 Setări lipicioase

Apoi, vom întoarce și a doua coloană a celui de-al doilea rând.

• Poziție lipicioasă: lipiți-vă de sus
• Decalaj superior lipicios: 150 px
• Limita lipicioasă inferioară: secțiunea
• Decalaj de la elementele lipicioase înconjurătoare: nu
• Stiluri implicite și lipicioase de tranziție: Nu

Modul text în coloană lipicioasă

Culoare de fundal lipicioasă

Acum că coloana 2 a rândului # 2 a fost transformată lipicioasă, putem aplica câteva stiluri lipicioase Modulului text din această coloană. Începeți prin schimbarea culorii de fundal într-o stare lipicioasă.

• Culoare de fundal lipicioasă: # 333333

Culoare text lipicioasă

Apoi, modificați culoarea textului într-o stare lipicioasă.

• Culoare text lipicios: #ffffff

Tranziție

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

• Durata tranziției: 1000 ms

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ă combinați suprapunerile cu opțiunile lipicioase ale Divi pentru a crea tranziții fără efort. Odată ce veți obține abordarea care a fost utilizată în acest tutorial, veți putea crea variații nesfârșite. 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.