Ai vrea să-i dai o altă dimensiune site-ul web cu o mască de fundal Divi Lipicios?
Opțiunile lipicioase ale Divi vă permit să creați o mulțime de modele diferite pentru site-urile dvs. web. Tutorialul de astăzi adaugă lista de lucruri pe care le puteți face. Sperăm că acest lucru vă va ajuta să vă stimulați creativitatea.
Vă vom arăta cum să creați o mască de fundal lipicioasă.
Acest tutorial combină opțiunile lipicioase ale Divi cu moduri de amestecare a filtrului.
studiu
Înainte de a explora acest tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.
Birou
Mobil
Creați un 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: Coperta
spaţierea
Comutați la fila Design secțiune și eliminați setările implicite de spațiere de mai jos:
- Umplutură (sus și jos): 0px
Debordări
Apoi ascundeți depășirile secțiunii din filă Avansat.
- Overflow orizontal: Ascuns
- Overflow vertical: Ascuns
Adăugați linia #1
Structura coloanei
Continuați prin adăugarea unui nou rând folosind următoarea structură de coloane:
dimensionarea
Fără a adăuga module, deschideți setările liniei și modificați setările de dimensionare în consecință:
- Latime: 100%
- Latime maxima: 100%
spaţierea
De asemenea, eliminați toate marginile implicite.
- Umplutură (sus și jos): 0px
Filtre
Adăugăm, de asemenea, un mod de amestecare la această linie. Acest mod de amestecare ne va ajuta să creăm o mască mai târziu în tutorial.
- Mod de amestecare: 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, schimbăm indexul z din filă Avansat.
- Index Z: 9
Parametrii coloanei
În continuare, vom deschide setările coloanei.
Culoare de fundal
Folosim o culoare de fundal complet albă.
- Culoare de fundal: #ffffff
Element principal CSS
De asemenea, adăugăm o valoare a înălțimii elementului principal din filă Avansat.
height: 100vh;
Adăugați un modul „Text” la linie
Lăsați zona de conținut goală
După ce ați terminat cu setările de rând, adăugați un modul Text în coloana sa.
Părăsi zona cuprins gol. În schimb, folosim acest modul pentru a crea o formă care dezvăluie o parte din imaginea de fundal a secțiunii.
Culoare de fundal
Vom folosi o culoare de fundal mai închisă pentru acest modul.
- Culoare de fundal: #0b3835
dimensionarea
În continuare vom accesa fila Amenajări și modificați parametrii de dimensionare după cum urmează:
- Lățime:
- Desktop: 20vw
- Tabletă și telefon: 70 vw
- Înălțime:
- Desktop: 30vh
- Tabletă și telefon: 10vh
spaţierea
Adăugăm și o marjă de sus.
- Marja (sus): 3vh
Frontieră
Și vom include colțuri rotunjite.
- Colțuri rotunjite: 15px
Adăugați linia 2
Structura coloanei
Continuați prin adăugarea unui alt rând la secțiune folosind următoarea structură de coloană:
dimensionarea
Deschideți setările liniei și efectuați următoarele modificări în opțiuni dimensionarea ca urmare a:
- Latime: 100%
- Latime maxima: 100%
indicele Z
De asemenea, creșteți indicele z al rândului. Acest lucru va ajuta să vă asigurați că cuprins a liniei rămâne deasupra liniei anterioare.
- Indicele Z: 12
Adăugați un modul „Text” la linie
Adăugați conținut H2
Este timpul să adăugați module, începând cu un prim modul Text care conține cuprins H2 la alegere.
Setări text H2
Personalizați setările de text H2 după cum urmează:
- Font: Playfair Display
- Alinierea textului: centrat
- Culoare text: #0b3835
- Mărimea :
- Desktop: 150px
- Tabletă și telefon: 45px
- Înălțimea liniei: 1,2 em
dimensionarea
Apoi, navigați la setările de dimensionare și aplicați următoarele setări:
- Lățimea maximă: 980 px
- Modul de aliniere: Centru
spaţierea
Includeți, de asemenea, o marjă superioară negativă.
Adăugați un modul „Button” la rând
Adăugați conținut la butonul
Următorul și ultimul modul de care avem nevoie în acest rând este un modul Button. Adăugați conținut la alegere.
Alinierea butoanelor
Comutați la filă Amenajări a modulului și modificați alinierea butonului.
- Alinierea butoanelor: Centru
Setări buton
Apoi, accesați setările butonului și aplicați următoarele stiluri:
- Utilizați stiluri personalizate pentru butonul: Da
- Dimensiunea textului butonului: 15px
- Culoarea textului butonului: #ffffff
- Culoare de fundal pentru buton: #000000
- Lățimea marginii butonului: 0 pixeli
- Raza chenarului butonului: 100px
- Font pentru buton: Montserrat
- Greutatea fontului butonului: semi-aldine
- Stil font: TT
spaţierea
Adăugăm, de asemenea, marje personalizate și valori de umplutură la setările de spațiere.
- Marja (jos): 60vh
- Umplutură (sus și jos): 15px
- Umplutură (stânga și dreapta): 40px
Aplicați efecte lipicioase
Deschideți linia #1
Acum că am construit baza designului nostru, este timpul să aplicăm stilurile lipicioase. Deschideți setările primei linii.
Aplicați opțiuni lipicioase
Accesați fila Avansat și aplicați următoarele setări persistente:
- Poziție lipicioasă: lipiți de sus
- Limită inferioară lipicioasă: secțiune
- Decalaj față de elementele lipicioase din jur: DA
- Stiluri implicite de tranziție și lipicioase: DA
Opțiuni lipicioase pentru modulul de text
Acum că linia este Sticky, putem aplica stiluri la modulul Text din interiorul liniei. Deschideți setările modulului.
Dimensiune lipicioasă
Apoi, accesați setările de dimensionare și aplicați următoarele valori de dimensionare:
- Latime (lipicios): 80 vw
- Înălțime (lipicios): 90vh
Timp de tranziție
În cele din urmă, navigați la fila Avansat și crește durata tranziției.
- Durata tranziției: 500 ms
studiu
Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra modului în care arată pe diferite dimensiuni de ecran.
Birou
Descărcați DIVI acum!!!
Mobil
Descărcați DIVI acum!!!
Concluzie
În acest articol, ți-am arătat încă o dată cum să devii creativ cu opțiunile lipicioase ale Divi.
Mai exact, v-am arătat cum să combinați setările de filtru ale Divi și opțiunile sticky.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
