Cum să creați o mască de fundal lipicios cu Divi

Opțiunile lipicioase ale lui Divi vă permit să creați o mulțime de modele diferite pentru site-urile dvs. web. Postarea de astăzi adaugă un alt tutorial la lista de lucruri pe care le puteți realiza și, sperăm, va ajuta la stimularea creativității. Vă vom arăta cum să creați o mască de fundal lipicioasă și să îi solicităm acestei măști să urmărească vizitatorul în derulare până la sfârșitul secțiunii. Acest tutorial combină opțiunile lipicioase ale lui Divi cu modurile de amestecare a filtrelor. 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. Creați design în Divi

Adăugați o secțiune nouă

Imagine de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Încărcați o imagine de fundal la alegere.

• Dimensiunea imaginii de fundal: copertă

Spațiere

Treceți la fila de proiectare a secțiunii și eliminați toate umpluturile implicite de sus și de jos din setările de spațiere.

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

Revărsări

Ascundeți revărsările secțiunii în fila avansată următoare.

• Overflow orizontal: Ascuns
• Vertical Overflow: Ascuns

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 module, deschideți setările rândului și modificați setările de dimensionare în consecință:

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

Spațiere

Eliminați și toate căptușelile implicite, de sus și de jos.

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

Filtre

De asemenea, adăugăm un mod de amestecare la acest rând. Acest mod de amestecare ne va ajuta să creăm o mască mai târziu în tutorial.

• Blend Mode: ecran

Indicele Z

Pentru a ne asigura că acest rând rămâne sub al doilea rând pe care îl vom adăuga la secțiune, modificăm indexul z din fila avansată.

• Indicele Z: 9

Setări coloană

Apoi, vom deschide setările coloanei.

Culoare de fundal

Folosim o culoare de fundal complet albă. Orice altă culoare pe care o utilizați aici se va afișa prin imaginea de fundal a secțiunii, deci este important să rămâneți cu o culoare complet albă.

• Culoare fundal: #ffffff

Element principal CSS

De asemenea, adăugăm o valoare a înălțimii la elementul principal din fila avansată. Odată ce întoarcem rândul lipicios, această înălțime se va asigura că coloana acoperă tot timpul imaginea de fundal a secțiunii.

height: 100vh;

Adăugați un modul de text la rând

Lăsați caseta de conținut goală

După ce ați completat setările rândului, adăugați un modul de text în coloana sa. Lăsați caseta de conținut goală. În schimb, folosim acest modul pentru a crea o formă care dezvăluie o parte a imaginii de fundal a secțiunii.

Culoare de fundal

Pentru a permite modului de amestecare să afișeze o parte din imaginea de fundal a secțiunii, folosim o culoare de fundal mai închisă pentru acest modul.

• Culoare fundal: # 0b3835

Dimensionare

Apoi, vom naviga la fila de proiectare și vom modifica setările de dimensionare după cum urmează:

• Lăţime:
  • Desktop: 20vw
  • Tabletă și telefon: 70vw
• Înălţime:
  • Desktop: 30vh
  • Tabletă și telefon: 10vh

Spațiere

Adăugăm și câteva marje superioare.

• Marja superioară: 3vh

Frontieră

Și vom include câteva colțuri rotunjite.

• Toate colțurile: 15 px

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un alt rând la secțiune folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și efectuați următoarele modificări la setările de dimensionare:

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

Indicele Z

Măriți și indicele z al rândului. Acest lucru vă va asigura că conținutul rândului rămâne în partea de sus a rândului anterior.

• Indicele Z: 12

Adăugați un modul de text la rând

Adăugați conținut H2

Este timpul să adăugați module, începând cu un prim modul de text care conține un conținut H2 la alegere.

Setări text H2

Stilizați setările de text H2 după cum urmează:

• Titlul 2 Font: Playfair Display
• Titlul 2 Aliniere text: centru
• Rubrica 2 Culoare text: # 0b3835
• Rubrica 2 Dimensiune text:
  • Desktop: 150 px
  • Tabletă și telefon: 45 px
• Titlul 2 Înălțimea liniei: 1.2em

Dimensionare

Apoi, navigați la setările de dimensionare și aplicați următoarele setări:

• Lățime maximă: 980 px
• Alinierea modulului: centru

Spațiere

Includeți și câteva marje superioare negative.

Adăugați modulul buton la rând

Adăugați o copie

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

Aliniere buton

Treceți la fila de proiectare a modulului și schimbați alinierea butoanelor.

• Aliniere buton: centru

Setări buton

Apoi, accesați setările butonului și aplicați următoarele stiluri:

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 15 px
• Culoarea textului butonului: #ffffff
• Culoarea fundalului butonului: # 000000
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 100 px

• Buton Font: Montserrat
• Buton Font Greutate: Semi Bold
• Stilul fontului butonului: majuscule

Spațiere

Adăugăm și câteva valori de marjă și umplere personalizate la setările de spațiere.

• Marja inferioară: 60vh
• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px
• Garnitura stânga: 40 px
• Căptușeală dreaptă: 40 px

2. Aplicați Efecte lipicioase

Deschideți rândul # 1

Acum că am construit fundamentul designului nostru, este timpul să aplicăm stilurile lipicioase. Deschideți setările primului rând.

Aplicați Opțiuni lipicioase

Navigați la fila avansată și aplicați următoarele setări lipicioase:

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

Opțiuni lipicioase pentru modulul text

Acum că rândul a fost transformat lipicios, putem aplica stiluri lipicioase Modulului de text din interiorul rândului. Deschideți setările modulului.

Dimensionare lipicioasă

Apoi, navigați la setările de dimensionare și aplicați următoarele valori de dimensionare lipicioase:

• Lățime lipicioasă: 80vw
• Înălțime lipicioasă: 90vh

Durata tranziției

Nu în ultimul rând, navigați la fila avansată și măriți durata tranziției. Asta e!

• Durata tranziției: 500 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 încă o dată cum să devii creativ cu opțiunile lipicioase ale lui Divi. Mai precis, v-am arătat cum să combinați setările filtrelor Divi și opțiunile lipicioase pentru a crea o mască de fundal lipicioasă. 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.