Cum să proiectați machete de pagină personalizate pe ecran complet în Divi

Aspectele paginii cu ecran complet pot fi foarte utile în lumea designului web. Unul dintre principalele avantaje ale aspectului paginii pe ecran complet este vizibilitatea. Cu pagini cu ecran complet, tot conținutul paginii dvs. rămâne în fereastra browserului. Într-o lume în care utilizatorii se derulează rapid, dacă conține tot conținutul dvs. în fereastra de vizualizare a browserului de la început, poate fi revigorant pentru vizualizator și ar putea ajuta, de asemenea, la conversii.

Dacă sunteți familiarizat cu Divi, ar trebui să știți deja despre modulul de antet cu lățime completă, care are funcționalitatea ecranului complet încorporat. Aceasta este o soluție minunată pentru crearea de pagini pe ecran complet cu conținut minim. Dar dacă doriți să profitați de crearea unui aspect de pagină pe ecran complet folosind o secțiune obișnuită cu mai multe rânduri și module, aceasta este postarea pentru dvs. Vă voi arăta câteva trucuri simple pentru a vă asigura că conținutul paginii dvs. (chiar și bara de antet și de subsol) se încadrează în fereastra browserului dvs. și apoi scalați frumos pe diferite dimensiuni ale browserului.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra aspectului final al paginii pe ecran complet pe care îl vom crea în acest tutorial.

Observați modul în care înălțimea paginii se ajustează la înălțimea ferestrei browserului, astfel încât totul să rămână la locul său.

De ce ai nevoie

Pentru acest tutorial, tot ce ai nevoie este Divi. De asemenea, voi folosi pachetul Fitness Gym Layout, accesibil din Divi Builder.

Abonați-vă la canalul nostru Youtube

Cum se realizează o pagină personalizată pe ecran complet în Divi

Înainte de a intra în designul principal al acestui tutorial, m-am gândit să vă arăt ideea de bază din spatele creării unei pagini cu ecran complet în Divi. La urma urmei, ați putea fi surprins de cât de simplu poate fi.

Ideea de bază a fost explicată

Într-o pagină nouă, alegeți șablonul de pagină goală. Acest lucru va opri afișarea pe pagină a antetului principal și a barei de subsol de jos (vă voi arăta cum să le includeți mai târziu).

Acum implementați Divi Builder pe partea frontală pentru a vă crea pagina de la zero. Apoi adăugați o secțiune obișnuită cu un rând de o coloană.

Apoi, adăugați un modul cu temporizator invers (sau orice modul) la rândul cu o singură coloană.

Pentru a face lucrurile mai ușoare la ochi, scoateți culoarea de fundal în temporizatorul de numărătoare inversă și adăugați o culoare de fundal secțiunii, astfel încât să putem recunoaște mai bine înălțimea secțiunii de pe pagină. În prezent, înălțimea secțiunii este relativă la înălțimea conținutului pe care îl conține. În acest caz, singurul conținut pe care îl avem este un singur rând cu un modul Sing.

Acum deschideți setările secțiunii și accesați fila avansată și adăugați următorul CSS personalizat la elementul principal:

min-height: 100vh;
display: flex;
flex-direction: column;

Setarea înălțimii minime a secțiunii la 100vh (100% din înălțimea pentru fereastra de vizualizare) vă va asigura că secțiunea dvs. se întinde pe întreaga fereastră a browserului (sau fereastră). Proprietatea „display: flex” este o modalitate rapidă și ușoară de a centra vertical conținutul secțiunii dvs.

Consultați acest ghid util pentru mai multe informații despre unitatea de lungime vh.

Vizualizați pagina dvs. live într-un browser incognito pentru a vedea rezultatul, deoarece dacă sunteți conectat la WordPress, bara de administrator de sus va arunca ușor înălțimea browserului.

Ei bine, tu te duci. Aceasta este ideea de bază a modului de creare a unui aspect personalizat al paginii pe ecran complet în Divi.

Incorporarea antetului și subsolului în pagina dvs. de ecran complet.

Dacă doriți să aveți bara antetului și a subsolului jos în pagina ecran complet, va trebui să faceți o mică ajustare. Mai întâi, schimbați șablonul de pagină înapoi la șablonul implicit de pe backend-ul editorului de pagină.

Includerea antetului și a subsolului de jos vor adăuga înălțime suplimentară la fereastra de vizualizare a browserului, astfel încât secțiunea să nu se mai potrivească perfect așa cum a fost odată. Acest lucru se datorează faptului că pagina dvs. este acum alcătuită dintr-o înălțime a secțiunii care este 100% din înălțimea ferestrei PLUS înălțimea antetului și a barei de subsol inferioare. E prea mult. Pentru a remedia acest lucru, trebuie să ajustăm CSS-ul personalizat din secțiunea noastră la următoarele:

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

Singura diferență este valoarea înălțimii minime. Acum există un calcul care ține cont de înălțimea suplimentară (în pixeli) a barei antetului și a subsolului inferior.

132 px se bazează pe totalul înălțimii implicite a antetului (80 px) și înălțimea implicită a barei de subsol de jos (53 px).

Acum, că avem o înțelegere de bază despre cum să creăm o pagină personalizată pe ecran complet în Divi, să ne scufundăm într-un design mai complex.

Construirea unui design complet al paginii pe ecran complet

Pentru a începe lucrurile pentru acest design, creați o pagină nouă, dați-i paginii un titlu și implementați Divi Builder. Selectați opțiunea Alegeți un aspect premade și din fereastra pop-up Încărcare din bibliotecă, selectați pagina Layout Fitness Gym. Apoi faceți clic pentru a utiliza pagina de prețuri.

După ce aspectul se încarcă în constructor, faceți clic pe butonul pentru a construi pe partea frontală (The Visual Builder) și sunteți gata să începeți.

Crearea unei noi secțiuni

Aspectul premade este acolo pentru a ajuta la lansarea proiectului. Vom folosi aceste elemente de proiectare de-a lungul drumului și vom șterge restul aspectului după ce vom termina. Pentru a crea secțiunea principală pentru aspectul nostru pe ecran complet, continuați și creați o nouă secțiune obișnuită și trageți-o până în partea de sus a paginii. Apoi adăugați la rând o structură de pătrime o pătrime o jumătate de coloană. Aceasta va fi fundamentul paginii noastre pe ecran complet.

Adăugarea de module la coloane

Folosind Multiselect (țineți apăsat ctrl / cmd și faceți clic), selectați toate modulele din primele două rânduri din prima secțiune a aspectului și trageți-le în prima coloană a noii secțiuni din partea de sus a paginii.

Apoi, utilizați multiselect pentru a copia toate modulele din al treilea rând din aceeași primă secțiune a aspectului și lipiți-le în a doua coloană a noii secțiuni din partea de sus a paginii.

Textul va fi ascuns din cauza fundalului alb, dar vom schimba culoarea de fundal mai târziu.

În a treia coloană, adăugați un modul glisant. Acest glisor va acoperi în cele din urmă întreaga înălțime a ecranului, dar deocamdată să configurăm conținutul. În setările glisorului, ștergeți unul dintre cele două diapozitive implicite care există în mod implicit și apoi faceți clic pentru a deschide setările glisării unice.

În setările de diapozitive, adăugați o imagine de fundal asigurându-vă că este suficient de mare pentru a acoperi întreaga înălțime a browserului.

Aceasta are grijă de toate modulele noastre de care avem nevoie pentru moment. Vom revizui mai târziu setările de proiectare, dar pentru moment, să ne personalizăm rândul.

Personalizarea setărilor rândului

Deschideți setările rândului și începeți prin adăugarea culorii de fundal în coloana 2:

Coloana 2 Culoare fundal: # 2a2e40

Treceți la fila de proiectare și actualizați următoarele:

Faceți acest rând lățime completă: DA
Lățimea jgheabului: 1
Egalizați înălțimile coloanei: DA
Căptușeală personalizată: 0 px sus, 0 px jos

Personalizarea setărilor secțiunii

Singurul lucru necesar în acest moment pentru setările secțiunii noastre este să eliminăm orice umplutură implicită, dar m-am gândit că ar fi bine să adăugăm un divizor de secțiune care încadrează partea de sus a primei coloane. Deschideți setările secțiunii și actualizați următoarele:

Stilul divizorului superior: vezi captura de ecran
Culoarea separatorului superior: # 2a2e40
Înălțimea separatorului superior: 8vw
Reparare orizontală a separatorului superior: 0,8x
Flip divizor superior: vertical și orizontal

Împletire personalizată: 0 px sus, 0 px jos

Deoarece divizorul este setat să afișeze sub conținutul secțiunii, acesta se va ascunde în spatele glisorului din coloana 3 și nu se va afișa în coloana 2, deoarece se potrivește cu culoarea fundalului coloanelor. Acest lucru creează un element de proiectare încadrare frumos pentru coloana 1.

Ștergeți restul aspectului premade

În acest moment, secțiunea noastră de sus are totul la dispoziție pentru aspectul paginii pe ecran complet, astfel încât să putem șterge toate secțiunile rămase care au venit cu aspectul premade. Așa ar trebui să arate pagina dvs. până acum.

Acum suntem gata să începem să ne personalizăm pagina pentru a deveni ecran complet.

Adăugarea CSS personalizat pentru a face pagina pe ecran complet

În exemplul de bază de la începutul acestui articol, am adăugat css-ul personalizat direct în secțiune. Cu toate acestea, pentru a vă asigura că funcționalitatea noastră pe ecran complet se aplică doar desktopului (și recurge la stilul implicit de pe mobil), îl voi adăuga la CSS în setările paginii. Acest lucru îmi va permite să adaug CSS extern care se aplică numai acestei pagini, dar îmi oferă și opțiunea de a adăuga o interogare media care limitează stilul doar la desktop.

Din meniul de setări din partea de jos a constructorului frontal, deschideți setările paginii. Sub fila avansată, introduceți următorul CSS personalizat:

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

Pentru cei dintre voi care nu sunt familiarizați cu CSS, observați că codul este înfășurat de o interogare media care aplică stilul atunci când browserul are o lățime de minimum 980 px. Cu parantezele, primul fragment include un ID CSS numit „fullsection” urmat de un CSS ID numit „fullslide”. Aceste două ID-uri CSS sunt importante de reținut, deoarece va trebui să le adăugăm în secțiunea și glisorul nostru. După ce o vom face, se va aplica CSS „înălțime: calce (100vh - 133px)”, făcându-le pe amândouă pe ecran complet (acoperind înălțimea completă a ferestrei browserului).

Al doilea fragment va aplica proprietatea flexului de afișare secțiunii, făcând tot conținutul secțiunii centrat vertical. Pentru mai multe informații despre acest lucru, consultați postarea noastră despre cum să aliniați vertical conținutul în Divi.

Al treilea fragment este complet opțional. Acest lucru simplifică lățimea completă a barei de subsol de jos pentru a se potrivi cu designul un pic mai bine și, de asemenea, pentru a se potrivi cu stilul de antet de lățime completă pe care îl vom adăuga.

Acum, că aveți la dispoziție CSS-ul extern, putem adăuga ID-urile noastre CSS în secțiunea și glisorul nostru. Accesați setările secțiunii și adăugați următorul ID CSS:

ID CSS: secțiune completă

Acum deschideți setările modulului glisor pentru glisorul din coloana 3 și adăugați următorul ID CSS:

CSS ID: fullslide

Atingeri finale

În acest moment, funcționalitatea paginii cu ecran complet este la locul său și ar trebui să funcționeze. Puteți să o verificați într-un browser incognito pentru a fi sigur. Mai rămâne doar câteva atingeri finale.

Adăugați spațiu la coloanele noastre

Deschideți setările de rând pentru a adăuga câteva umpluturi în partea de sus a coloanei 1 și a coloanei 2 după cum urmează:

Coloana 1 Căptușeală personalizată: 12vh sus, 1vw stânga, 1vw dreapta
Coloana 2 Căptușeală personalizată: 12vh sus, 1vw stânga, 1vw dreapta

Observați că am folosit unitatea de lungime vh pentru valorile mele de umplere de top. Acest lucru va permite umplerea să se extindă cu înălțimea ecranului, creând mai multe umpluturi pe măsură ce fereastra browserului devine mai înaltă și creând mai puțină umplere pe măsură ce browserul se scurtează. Am folosit unitatea de lungime vw (viewport width) pentru valorile mele de umplere la stânga și la dreapta, astfel încât umplutura se va scala în funcție de lățimea browserului.

Adăugați unități de lungime vh la textul mare pentru a maximiza spațiul de vizualizare

După cum puteți vedea, există câteva module cu un text foarte mare, care nu se potrivește deloc cu fereastra browserului. Pentru a remedia acest lucru, putem seta dimensiunea textului la o unitate de lungime vh. Acest lucru va permite reducerea textului pe ecranele mai scurte ale browserului.

Deschideți setările modulului de text din partea de sus a coloanei 1 și actualizați dimensiunea textului antetului h1 la 7vh (nu vw).

Apoi, deschideți setările modulului text din partea de sus a coloanei 2 și actualizați dimensiunea textului antet 2 la 6vh.

Actualizați designul glisorului

Pentru a finaliza designul, puteți copia designul butonului butonului din coloana 2 și lipiți-l în stilurile de buton ale glisorului. Pentru a face acest lucru, deschideți setările butonului pentru butonul din coloana 2 și faceți clic dreapta pe categoria de opțiuni buton și faceți clic pe „copiați stilurile butoanelor”.

După aceea, deschideți setările glisorului și lipiți stilurile de butoane în categoria de opțiuni de buton din glisor.

De asemenea, puteți adăuga o suprapunere de fundal la diapozitivele individuale.

Ajustări ale barei antetului și a subsolului de jos

Vă puteți aminti că am adăugat deja un mic fragment de CSS personalizat care ne-a extins subsolul la lățime completă. Acest lucru a fost în așteptarea de a face bara de meniu principală, de asemenea, lățime completă. Pentru ca bara de meniu principală să aibă lățimea completă, accesați tabloul de bord WordPress și navigați la Divi> Personalizator temă> Antet și navigare> Bara meniului principal. Apoi bifați opțiunea Faceți lățimea completă.

Deoarece afișăm bara de subsol de jos pe pagina noastră de ecran complet, putem actualiza culoarea de fundal a barei de jos pentru a se potrivi cu designul. Rămâneți în Customizerul tematic și navigați la subsol> Bara de jos. Apoi setați culoarea de fundal la # 2a2e40.

Apoi publicați modificările.

Rezultatul final

Iată designul final. Observați cum totul se potrivește frumos în fereastra browserului.

Și verificați cum arată atunci când reglați browserul la diferite dimensiuni.

Și nu uitați, deoarece am aplicat CSS-ul nostru personalizat numai la lățimi ale browserului mai mari de 980 px, designul va reveni la normal pe dispozitivele mobile.

Iată-l pe tabletă și smartphone.

Gânduri finale

Crearea unui aspect personalizat al ecranului complet în Divi nu este atât de copleșitoare odată ce ați înțeles cum să reglați corect înălțimea secțiunii la o înălțime a browserului dvs. cu câteva fragmente de CSS. Dar, odată ce ai în jos, poți crea nenumărate modele de pagini pe ecran complet în cadrul Divi Builder. Doar aveți grijă să mențineți conținutul la minimum dacă intenționați să păstrați totul vizibil în fereastra browserului.

Acest tip de design funcționează bine pentru site-urile personale, ofertele promoționale și tot felul de pagini de destinație. Este, de asemenea, o soluție excelentă pentru paginile care au conținut redus și doriți să evitați afișarea barei de subsol din partea de jos a paginii la jumătatea paginii.

Și nu uitați de opțiunea de a utiliza modulul antet Fullwidth Divi. Deși nu veți avea aceeași flexibilitate ca metoda utilizată în această postare, este perfectă pentru paginile cu conținut minim.

Iată câteva alte postări de care s-ar putea să vă bucurați pe subiectul paginilor cu ecran complet.

• Cum se creează secțiuni pe ecran complet cu legături de derulare de sus și de jos cu Divi
• Proiectați un aspect unic Divi pe ecran complet cu un buton de derulare animat
• și altele

Aștept cu nerăbdare să aud de la dvs. în comentariile de mai jos.

Noroc!