Come progettare layout di pagina a schermo intero personalizzati in Divi

I layout di pagina a schermo intero possono davvero tornare utili nel mondo del web design. Uno dei principali vantaggi di un layout di pagina a schermo intero è la visibilità. Con le pagine a schermo intero, tutto il contenuto della pagina rimane all'interno della finestra del browser. In un mondo in cui gli utenti scorrono velocemente, avere tutti i tuoi contenuti contenuti nella finestra del browser dall'inizio può essere rinfrescante per lo spettatore e potrebbe anche aiutare con le conversioni.

Se hai familiarità con Divi, dovresti già conoscere il modulo di intestazione a larghezza intera con funzionalità a schermo intero integrate. Questa è una soluzione meravigliosa per creare pagine a schermo intero con contenuto minimo. Ma se vuoi sfruttare la creazione di un layout di pagina a schermo intero utilizzando una sezione normale con più righe e moduli, questo è il post che fa per te. Ti mostrerò alcuni semplici trucchi per assicurarti che il contenuto della tua pagina (anche la barra dell'intestazione e del piè di pagina) si adatti alla finestra del browser e quindi si adatti bene alle diverse dimensioni del browser.

Iniziamo.

Sbirciata

Ecco un'anteprima del layout finale della pagina a schermo intero che creeremo in questo tutorial.

Nota come l'altezza della pagina si adatta all'altezza della finestra del browser in modo che tutto rimanga al suo posto.

Quello di cui hai bisogno

Per questo tutorial, tutto ciò di cui hai veramente bisogno è Divi. Userò anche il pacchetto Fitness Gym Layout accessibile da Divi Builder.

Iscriviti al nostro canale Youtube

Come creare una pagina a schermo intero personalizzata in Divi

Prima di passare al design principale di questo tutorial, ho pensato di mostrarti l'idea di base alla base della creazione di una pagina a schermo intero in Divi. Dopotutto, potresti essere sorpreso di quanto possa essere semplice.

L'idea di base spiegata

In una nuova pagina, scegli il modello di pagina vuota. Questo fermerà l'intestazione principale e la barra del piè di pagina in basso dalla visualizzazione sulla pagina (ti mostrerò come includerli in seguito).

Ora distribuisci Divi Builder sul front-end per creare la tua pagina da zero. Quindi aggiungi una sezione normale con una riga di una colonna.

Quindi, aggiungi un modulo timer per il conto alla rovescia (o qualsiasi modulo) alla riga di una colonna.

Per rendere le cose più facili agli occhi, elimina il colore di sfondo nel timer per il conto alla rovescia e aggiungi un colore di sfondo alla sezione in modo che possiamo riconoscere meglio l'altezza della sezione sulla pagina. Attualmente l'altezza della sezione è relativa all'altezza del contenuto che contiene. In questo caso l'unico contenuto che abbiamo è una singola riga con un modulo sing.

Ora apri le impostazioni della sezione e vai alla scheda avanzate e aggiungi il seguente CSS personalizzato all'elemento principale:

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

Impostando l'altezza minima della tua sezione su 100vh (100% dell'altezza per viewport) assicurerai che la tua sezione occupi l'intera finestra del browser (o viewport). La proprietà "display:flex" è un modo semplice e veloce per centrare verticalmente il contenuto della tua sezione.

Dai un'occhiata a questa guida utile per maggiori informazioni sull'unità di lunghezza vh.

Visualizza la tua pagina live in un browser in incognito per vedere il risultato perché se hai effettuato l'accesso a WordPress, la barra di amministrazione in alto eliminerà leggermente l'altezza del browser.

Bene, ecco qua. Questa è l'idea di base di come creare un layout di pagina a schermo intero personalizzato in Divi.

Incorporando l'intestazione e il piè di pagina nella tua pagina a schermo intero.

Se vuoi che l'intestazione e la barra del piè di pagina inferiore siano incluse nella pagina a schermo intero, dovrai apportare una piccola regolazione. Innanzitutto, modifica il modello di pagina sul modello predefinito nel backend del tuo editor di pagine.

Includere l'intestazione e il piè di pagina in basso aggiungerà ulteriore altezza alla finestra del browser in modo che la sezione non si adatti più perfettamente come una volta. Questo perché la tua pagina è ora composta da un'altezza della sezione che è il 100% dell'altezza della finestra PI l'altezza dell'intestazione e della barra del piè di pagina inferiore. È troppo. Per risolvere questo problema, dobbiamo regolare il CSS personalizzato nella nostra sezione come segue:

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

L'unica differenza è il valore dell'altezza minima. Ora c'è un calcolo che tiene conto dell'altezza aggiuntiva (in pixel) dell'intestazione e della barra del piè di pagina in basso collettivamente.

Il 132 px si basa sul totale dell'altezza predefinita dell'intestazione (80 px) e l'altezza predefinita della barra inferiore del piè di pagina (53 px).

Ora che abbiamo una conoscenza di base di come creare una pagina a schermo intero personalizzata in Divi, tuffiamoci in un design più complesso.

Costruire un design di pagina a schermo intero completo

Per iniziare con questo design, crea una nuova pagina, dai un titolo alla tua pagina e distribuisci Divi Builder. Seleziona l'opzione Scegli un layout predefinito e dal popup Carica dalla libreria, seleziona la pagina Layout palestra fitness. Quindi fare clic per utilizzare la pagina dei prezzi.

Una volta caricato il layout nel builder, fai clic sul pulsante per costruire sul front-end (The Visual Builder) e sei pronto per iniziare.

Creazione di una nuova sezione

Il layout predefinito è lì per aiutare a dare il via al design. Utilizzeremo questi elementi di progettazione del layout lungo il percorso ed elimineremo il resto del layout al termine. Per creare la sezione principale per il nostro layout a schermo intero, vai avanti e crea una nuova sezione normale e trascinala nella parte superiore della pagina. Quindi aggiungere un quarto, un quarto, metà della struttura della colonna alla riga. Questa sarà la base della nostra pagina a schermo intero.

Aggiungere moduli alle tue colonne

Utilizzando Multiselect (tieni premuto ctrl/cmd e fai clic), seleziona tutti i moduli nelle prime due righe nella prima sezione del layout e trascinali nella prima colonna della nuova sezione nella parte superiore della pagina.

Quindi, usa la selezione multipla per copiare tutti i moduli nella terza riga della stessa prima sezione del layout e incollarli nella seconda colonna della nuova sezione nella parte superiore della pagina.

Il testo sarà nascosto a causa dello sfondo bianco, ma in seguito cambieremo il colore dello sfondo.

Nella terza colonna, aggiungi un modulo slider. Questo cursore alla fine si estenderà per l'intera altezza dello schermo, ma per ora impostiamo solo il contenuto. Nelle impostazioni del dispositivo di scorrimento, elimina una delle due diapositive predefinite presenti per impostazione predefinita e quindi fai clic per aprire le impostazioni della singola diapositiva.

Nelle impostazioni della diapositiva, aggiungi un'immagine di sfondo assicurandoti che sia abbastanza grande da coprire l'intera altezza del browser.

Questo si prende cura di tutti i nostri moduli di cui abbiamo bisogno per ora. Rivisiteremo le impostazioni di progettazione in seguito, ma per ora personalizziamo la nostra riga.

Personalizzazione delle impostazioni della riga

Apri le impostazioni della riga e inizia aggiungendo il colore di sfondo alla colonna 2:

Colore di sfondo della colonna 2: #2a2e40

Passa alla scheda Progettazione e aggiorna quanto segue:

Rendi questa riga a larghezza intera: S
Larghezza grondaia: 1
Equalizza le altezze delle colonne: S
Imbottitura personalizzata: 0px in alto, 0px in basso

Personalizzazione delle impostazioni della sezione

L'unica cosa necessaria a questo punto per le nostre impostazioni di sezione è eliminare qualsiasi imbottitura predefinita, ma ho pensato che sarebbe stato carino aggiungere un divisore di sezione che inquadra la parte superiore della prima colonna. Apri le impostazioni della sezione e aggiorna quanto segue:

Stile divisore superiore: vedi screenshot
Colore divisore superiore: # 2a2e40
Altezza divisore superiore: 8vw
Ripetizione orizzontale divisore superiore: 0.8x
Flip divisore superiore: verticale e orizzontale

Imbottitura personalizzata: 0px in alto, 0px in basso

Poiché il divisore è impostato per mostrare sotto il contenuto della sezione, si nasconderà dietro il cursore nella colonna 3 e non verrà mostrato nella colonna 2 perché corrisponde al colore dello sfondo delle colonne. Questo crea un bel elemento di design dell'inquadratura per la colonna 1.

Elimina il resto del layout predefinito

A questo punto la nostra sezione superiore ha tutto a posto per il nostro layout di pagina a schermo intero in modo da poter eliminare tutte le sezioni rimanenti fornite con il layout predefinito. Questo è l'aspetto che dovrebbe avere la tua pagina finora.

Ora siamo pronti per iniziare a personalizzare la nostra pagina in modo che diventi a schermo intero.

Aggiunta di CSS personalizzati per rendere la pagina a schermo intero

Nell'esempio di base all'inizio di questo articolo, ho aggiunto il CSS personalizzato direttamente alla sezione. Tuttavia, per assicurarmi che la nostra funzionalità a schermo intero si applichi solo al desktop (e ricorra allo stile predefinito sui dispositivi mobili), lo aggiungerò al CSS nelle impostazioni della pagina. Ciò mi consentirà di aggiungere CSS esterni che si applicano solo a questa pagina, ma mi dà anche la possibilità di aggiungere una query multimediale che limita lo stile solo al desktop.

Dal menu delle impostazioni nella parte inferiore del generatore di front-end, apri le impostazioni della pagina. Nella scheda Avanzate, inserisci il seguente CSS personalizzato:

@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;
  }
}

Per quelli di voi che non hanno familiarità con i CSS, notate che il codice è avvolto da una media query che applica lo stile quando il browser ha una larghezza minima di 980 px. Con le parentesi, il primo frammento include un ID CSS denominato "fullsection" seguito da un ID CSS denominato "fullslide". Questi due ID CSS sono importanti da ricordare perché dovremo aggiungerli alla nostra sezione e al nostro slider. Una volta fatto, verrà applicato il css “height: calce(100vh – 133px)” rendendoli entrambi a schermo intero (che coprono l'intera altezza della finestra del browser).

Il secondo frammento applicherà la proprietà display flex alla sezione, centrando verticalmente tutto il contenuto della sezione. Per maggiori informazioni su questo, controlla il nostro post su come allineare verticalmente i contenuti in Divi.

Il terzo frammento è completamente facoltativo. Questo rende semplicemente la barra del piè di pagina inferiore a larghezza intera per adattarsi un po' meglio al design e anche per abbinare lo stile dell'intestazione a larghezza intera che aggiungeremo.

Ora che hai installato il CSS esterno, possiamo aggiungere i nostri ID CSS alla nostra sezione e al nostro dispositivo di scorrimento. Vai alle impostazioni della sezione e aggiungi il seguente ID CSS:

ID CSS: fullsection

Ora apri le impostazioni del modulo di scorrimento per lo slider nella colonna 3 e aggiungi il seguente ID CSS:

ID CSS: fullslide

Tocchi finali

A questo punto, la funzionalità della pagina a schermo intero è attiva e dovrebbe funzionare. Puoi controllarlo in un browser in incognito per essere sicuro. Non resta che qualche tocco finale.

Aggiungi distanziamento alle nostre colonne

Apri le impostazioni della riga per aggiungere un po' di riempimento nella parte superiore della colonna 1 e della colonna 2 come segue:

Imbottitura personalizzata colonna 1: 12vh in alto, 1vw a sinistra, 1vw a destra
Imbottitura personalizzata colonna 2: 12vh in alto, 1vw a sinistra, 1vw a destra

Nota che ho usato l'unità di lunghezza vh per i miei valori di padding superiori. Ciò consentirà al padding di ridimensionarsi con l'altezza della finestra, creando più padding man mano che la finestra del browser diventa più alta e creando meno padding man mano che il browser si accorcia. Ho usato l'unità di lunghezza vw (larghezza della finestra) per i miei valori di riempimento sinistro e destro in modo che il riempimento venga ridimensionato in base alla larghezza del browser.

Aggiungi unità di lunghezza vh al testo grande per massimizzare lo spazio di visualizzazione

Come puoi vedere, ci sono alcuni moduli con un testo molto grande che non si adatta affatto alla finestra del browser. Per risolvere questo problema, possiamo impostare la dimensione del testo su un'unità di lunghezza vh. Ciò consentirà al testo di ridimensionarsi su schermate del browser più brevi.

Apri le impostazioni del modulo di testo nella parte superiore della colonna 1 e aggiorna la dimensione del testo dell'intestazione h1 a 7vh (non vw).

Quindi, apri le impostazioni del modulo di testo nella parte superiore della colonna 2 e aggiorna la dimensione del testo dell'intestazione 2 a 6vh.

Aggiorna il design del dispositivo di scorrimento

Per completare il design, puoi copiare il design del pulsante del pulsante nella colonna 2 e incollarlo negli stili del pulsante del dispositivo di scorrimento. Per fare ciò, apri le impostazioni del pulsante per il pulsante nella colonna 2 e fai clic con il pulsante destro del mouse sulla categoria di opzioni del pulsante e fai clic su "copia stili pulsante".

Successivamente, apri le impostazioni del dispositivo di scorrimento e incolla gli stili dei pulsanti nella categoria delle opzioni dei pulsanti del dispositivo di scorrimento.

Puoi anche aggiungere una sovrapposizione di sfondo alle singole diapositive.

Regolazioni della barra dell'intestazione e del piè di pagina inferiore

Potresti ricordare che abbiamo già aggiunto un piccolo frammento di CSS personalizzato che ha ampliato il nostro piè di pagina a tutta larghezza. Questo era in previsione di rendere anche la nostra barra dei menu principale a tutta larghezza. Per rendere la tua barra dei menu principale a tutta larghezza, vai alla dashboard di WordPress e vai a Divi > Personalizzazione del tema > Intestazione e navigazione > Barra dei menu principale. Quindi controlla l'opzione Crea larghezza intera.

Poiché stiamo visualizzando la nostra barra inferiore sulla nostra pagina a schermo intero, possiamo aggiornare il colore di sfondo della barra inferiore in modo che corrisponda al design. Rimani nel personalizzatore del tema e vai a Piè di pagina > Barra in basso. Quindi imposta il colore di sfondo su # 2a2e40.

Quindi pubblica le modifiche.

Il risultato finale

Ecco il disegno definitivo. Nota come tutto si adatta bene alla finestra del browser.

E controlla come appare quando si regola il browser su dimensioni diverse.

E non dimenticare, poiché abbiamo applicato il nostro CSS personalizzato solo a larghezze del browser superiori a 980 px, il design tornerà alla normalità sui dispositivi mobili.

Eccolo su tablet e smartphone.

Pensieri finali

Creare un layout di pagina a schermo intero personalizzato in Divi non è così travolgente una volta capito come regolare correttamente l'altezza della tua sezione all'altezza del tuo browser con alcuni frammenti di CSS. Ma una volta che hai finito, puoi creare innumerevoli design di pagine a schermo intero all'interno di Divi Builder. Fai solo attenzione a ridurre al minimo il contenuto se prevedi di mantenere tutto visibile all'interno della finestra del browser.

Questo tipo di design funziona bene per siti personali, offerte promozionali e tutti i tipi di pagine di destinazione. È anche un'ottima soluzione per le pagine che hanno pochi contenuti e si desidera evitare che la barra del piè di pagina in basso venga visualizzata a metà pagina.

E non dimenticare l'opzione per utilizzare il modulo di intestazione a larghezza intera di Divi. Sebbene non avrai la stessa flessibilità del metodo utilizzato in questo post, è perfetto per le pagine con contenuto minimo.

Ecco un altro paio di post che potrebbero piacerti sull'argomento delle pagine a schermo intero.

• Come creare sezioni a schermo intero con collegamenti di scorrimento superiore e inferiore con Divi
• Progetta un layout Divi unico a schermo intero con un pulsante di scorrimento animato
• e altro ancora

Non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!