Doriți să creați un glisor pe ecran complet cu Divi ?
Un glisor pe ecran complet poate funcționa foarte bine ca antet al paginii dvs. de pornire. site-ul web.
Aspectul de ecran complet menține sistematic cuprins important deasupra pliului. Și funcționalitatea glisor permite utilizatorilor să vadă cuprins suplimentar fără a fi nevoie să derulați pagina.
Creați un glisor pe ecran complet cu Divi este surprinzător de ușor de făcut. Cheia este să acordați cursorului o înălțime relativă la înălțimea browserului, apoi să scăpați de orice restricție suplimentară de marjă și lățime pe rândul sau secțiunea părinte.
În doar câteva minute, puteți crea un glisor pe ecran complet care se extinde pentru a umple întregul ecran la încărcarea paginii și care arată grozav pe toate dispozitivele.
Să începem.
studiu
Iată o scurtă prezentare generală a glisorului pe care îl vom crea în acest tutorial.
Creați o pagină nouă cu Divi Builder
În tabloul de bord WordPress, accesați Pagini> Adăugare nouă
Dați un titlu relevant pentru dvs. și faceți clic pe „Utilizare Divi Constructor"
În cele din urmă, faceți clic pe „Începe să construiești”
După aceea, veți avea o pagină goală pentru a începe să proiectați în Divi.
Creați un glisor pe ecran complet în Divi
Configurația secțiunii și a liniei
Pentru a începe, adăugați un rând cu o singură coloană la secțiune.
marginea secțiunii
Înainte de a adăuga un modul, deschideți setările secțiunii, accesați fila Amenajări, trageți în jos opțiunea spațiere și modificați setările după cum urmează:
- Umplutură (sus și jos): 0px
Setări de linie
Apoi, deschideți setările liniei și actualizați următoarele în filă Amenajări :
- Latime: 100%
- Latime maxima: 100%
- Umplutură (sus și jos): 0px
Cu toate aceste setări la loc, acum putem trece la crearea Slider-ului propriu-zis.
Crearea glisorului pe ecran complet
Pentru a crea glisorul pe ecran complet, adăugați un nou modul Slider la rând.
Adăugați imagini la fiecare diapozitiv
Înainte de a actualiza setările generale pentru diapozitive, deschideți setările implicite ale primului diapozitiv
Adăugați o imagine și o imagine de fundal la diapozitiv. Pentru acest exemplu, folosim aceeași imagine pentru imaginea diapozitivului și imaginea de fundal (aproximativ 1920 px pe 1500 px).
Apoi deschideți setările pentru al doilea slide
Adăugați o imagine și o imagine de fundal diferite față de cea anterioară în diapozitiv.
Rețineți că puteți adăuga oricâte diapozitive doriți.
Actualizați setările glisorului
Acum că fiecare diapozitiv are o imagine unică și o imagine de fundal, suntem gata să actualizăm setările glisorului în general.
Reveniți la setările glisorului și actualizați următoarele sub filă Amenajări :
Acoperire
- Utilizați suprapunerea de fundal: DA
- Culoare suprapunere fundal: rgba(27,18,38,0.74)
Box Shadow
- Stilul umbrelor casetei: vezi captura (1)
- Umbra casetei (orizontală și verticală) Poziție: -8vw
- Forța de răspândire a umbrei cutiei: -6,5 vw
- Culoare umbră: #cf1259
Textul titlului
Editați setările titlului
- Font titlu: Montserrat
- Greutatea fontului titlului: Ultra Bold
- Dimensiune text: 5vw (desktop), 40px (tabletă și telefon)
corpul textului
Editați setările textului de descriere după cum urmează:
- Greutatea fontului corpului: semi-aldine
- Dimensiunea textului corpului: 16 px
- Înălțimea liniei: 1.8 em
Stiluri de butoane
- Utilizați stiluri personalizate pentru buton: DA
- Dimensiunea textului butonului: 16px
- Fundal: #cf1259
- Lățimea chenarului: 0px
- Raza chenarului: 0px
- Greutatea fontului: aldine
- Stil font: TT
- Umplutură (sus și jos): 15px
- Umplutură (stânga și dreapta): 30px
Înălțimea cursorului și lățimea conținutului
- Lățimea maximă a conținutului: 90%
- Înălțime minimă: 100vh
Acordarea cursorului la o înălțime minimă de 100vh va asigura că glisorul se întinde pe toată înălțimea ferestrei browserului. Aceasta este cheia pentru crearea unui glisor pe ecran complet.
Glisorul se va întinde deja pe toată lățimea ferestrei browserului, deoarece lățimea liniei este de 100%.
Săgeți de glisare
Sub fila Avansat, actualizați dimensiunea și poziția săgeților Slider adăugând următorul CSS personalizat în zona CSS Slide Săgeți :
font-size: 8vw !important;
margin-top: -4vw;
Acest lucru va mări săgețile Slider pe ecrane de dimensiuni mari și le va micșora la o dimensiune mai mică pe mobil.
Scădeți înălțimea antetului din înălțimea cursorului
Dacă aveți un antet pe pagină, glisorul pe ecran complet se va extinde de fapt puțin sub fereastra browserului.
Acest lucru se datorează faptului că înălțimea antetului coboară Slider-ul care are în prezent o înălțime de 100vh (100% din înălțimea ferestrei/browserului). Pentru a preveni trecerea Slider-ului sub fereastra de vizualizare a browserului, puteți adăuga o funcție CSS calc() pentru a scădea înălțimea antetului din înălțimea cursorului.
Va trebui să știți înălțimea antetului (desktop și mobil) pentru ca acest lucru să funcționeze. Dacă utilizați antetul Divi implicit, înălțimea antetului va fi de 80 px. Astfel, înălțimea glisorului trebuie să fie 100vh – 80px.
Pentru a adăuga înălțimea personalizată, deschideți setările Slider și adăugați următorul CSS personalizat la elementul Slider principal și, de asemenea, pentru fiecare diapozitiv:
min-height: calc(100vh - 80px)!important;
Rezultat final
Iată rezultatul final.
Descărcați DIVI acum!!!
Și așa arată designul pe tabletă și telefon.
Concluzie
Pașii cheie pentru a crea un glisor pe ecran complet în Divi sunt să configurați secțiunea și rândul pentru a se întinde pe toată lățimea browserului, apoi dați glisorului o înălțime minimă de 100vh.
Dacă utilizați un antet, puteți adăuga un fragment CSS personalizat care va scădea înălțimea antetului pentru a vă asigura că glisorul pe ecran complet nu depășește partea de jos a browserului.
Cu acești pași cheie așezați, puteți personaliza în continuare glisorul (și diapozitivele) așa cum doriți, folosind toate funcțiile puternice incluse în Divi Builder.
Folosiți-l pentru a crea glisoare frumoase și eficiente care umple orice ecran de pe orice dispozitiv.
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.
...
