Come creare un footer Reveal con Divi

Nel tutorial Divi di oggi, ti mostreremo come ottenere un certo effetto che probabilmente non avresti mai pensato di integrare nel tuo sito web o in quello di un cliente. Più precisamente; ti mostreremo come creare una rivelazione del piè di pagina. La rivelazione del piè di pagina sostanzialmente attende fino a quando non sei alla fine della pagina e rivela il piè di pagina in base al modo in cui stai scorrendo. Dopo aver fatto scorrere tutta la pagina, il piè di pagina verrà mostrato nella sua forma originale.

L'aggiunta di un piè di pagina al tuo sito web può portare quel piccolo tocco in più che stavi cercando di dare al piè di pagina del tuo sito web. È anche l'ultima cosa che le persone vedranno quando scorrono una qualsiasi pagina del tuo sito web. Per mostrarti cosa intendiamo esattamente per rivelazione del piè di pagina, diamo un'occhiata al risultato finale:

Puoi vedere che, oltre a rivelare il piè di pagina, abbiamo anche aggiunto qualche sottile ombra al contenuto principale del nostro sito web. In questo modo, abbiamo creato una sorta di prospettiva tra il contenuto principale e il piè di pagina.

Come creare un footer Reveal con Divi

Iscriviti al nostro canale Youtube

Aggiungi il codice CSS necessario

Per ottenere il risultato della rivelazione del piè di pagina, avremo bisogno prima di tutto di alcune righe di codice CSS. Poiché ci sono diversi modi per aggiungere il codice CSS al tuo sito Divi, te li mostreremo tutti e tre. Innanzitutto, ti mostreremo come aggiungere il codice alle Opzioni del tema. In secondo luogo, aggiungeremo il codice tramite Theme Customizer. Aggiungendo il codice tramite uno dei due metodi, la rivelazione del piè di pagina si applicherà immediatamente all'intero sito web. D'altra parte, se vuoi che il codice si applichi a una pagina in particolare, puoi farlo anche tu. Mostrandoti come aggiungere il codice alla pagina su cui stai lavorando, puoi creare quell'effetto esclusivamente per una pagina.

Le due cose principali di cui avremo bisogno nel nostro codice sono lo z-index e un margine inferiore per il contenuto principale. Per assicurarci che il piè di pagina si adatti perfettamente, dobbiamo conoscere l'altezza del piè di pagina. Normalmente, il piè di pagina utilizzato ha un valore di 53 px. Ma potrebbe essere che tu abbia cambiato l'altezza in base alle tue esigenze. Dopo averti mostrato come aggiungere il piè di pagina in modo standard, ti mostreremo anche come adattarlo all'altezza di qualsiasi piè di pagina.

Aggiungi il codice CSS necessario tramite le opzioni del tema

Il primo modo in cui ti mostreremo come aggiungere il codice CSS è tramite le Opzioni del tema Divi. Questo è il metodo più utilizzato per aggiungere codice CSS aggiuntivo al tuo sito web. Aggiungendo il codice CSS in quest'area, lo farai applicare immediatamente all'intero sito web.

Per aggiungere il codice, vai alla dashboard di WordPress > Divi > Opzioni del tema > E copia incolla le seguenti righe di codice CSS nel campo CSS personalizzato nella parte inferiore della scheda:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Dopo aver aggiunto il codice, vai al tuo sito web e guarda il piè di pagina che rivela fare il suo lavoro.

Aggiungi il codice CSS necessario tramite la personalizzazione del tema

Un altro modo per aggiungere il codice CSS al tuo sito web Divi è tramite Theme Customizer. L'aggiunta del codice tramite la personalizzazione del tema o le opzioni del tema è la stessa. Una volta rimosso il codice all'interno delle Opzioni del tema, verrà rimosso anche nel Personalizzatore di temi e viceversa. Uno dei vantaggi dell'aggiunta di codice tramite il Personalizzatore di temi è che puoi vedere tutto ciò che accade in tempo reale. Le ulteriori modifiche che apporterai al codice ti daranno quindi immediatamente un quadro chiaro del risultato finale che otterrai.

Per aggiungere il codice a Theme Customizer, vai alla dashboard di WordPress > Aspetto > Personalizza > Scorri verso il basso fino a "CSS aggiuntivo" > E aggiungi le seguenti righe di codice CSS:

#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

Aggiungi il codice CSS necessario a una sola pagina

L'ultimo modo per aggiungere il piè di pagina che rivela le righe di codice CSS è aggiungerlo a una pagina in particolare. Questo può essere interessante se vuoi dare un valore aggiunto alle pagine che hanno meno contenuti interagenti, ad esempio. Aggiungendo una rivelazione a piè di pagina, renderai in qualche modo ancora la pagina un po' più interattiva e ti concentrerai sul contenuto che viene fornito nel piè di pagina, come le icone dei social media.

Per aggiungere il codice CSS a una pagina in particolare, apri quella pagina specifica. Nell'angolo in alto a destra del Divi Builder in quella pagina, vedrai la seguente icona.

Fare clic sull'icona e incollare le seguenti righe di codice nel campo CSS personalizzato:

#main-content { 
margin-bottom: 53px;
z-index: 2;
} 
#main-footer { 
width: 100%; 
position: fixed; 
left: 0; 
bottom: 0; 
z-index: -1; 
}

Una volta salvate le impostazioni, vedrai apparire il piè di pagina in particolare su quella pagina.

Modifica altezza piè di pagina

Ora, il metodo che abbiamo spiegato sopra, conta solo per il piè di pagina standard fornito. Una volta che hai a che fare con un'altra altezza, il codice non funzionerà correttamente. Lo abbiamo preso in considerazione e ti mostreremo come rendere visibile il piè di pagina anche per altre altezze.

In qualsiasi momento, puoi scegliere l'altezza che desideri assegnare al tuo piè di pagina. Dobbiamo impostare l'altezza per due ID CSS: il piè di pagina principale e il piè di pagina inferiore. Regolando l'altezza in questi due punti, il piè di pagina si adatterà al suo posto. Ovviamente, una volta fatto, devi anche cambiare il margine inferiore del tuo contenuto principale. Se desideri un piè di pagina con un'altezza di 60 px, ad esempio, avrai bisogno delle seguenti righe di codice:

#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Puoi vedere che ci sono tre punti in cui abbiamo bisogno del valore "60px". Se hai un altro valore di altezza che vorresti assegnare al tuo piè di pagina, assicurati di cambiarlo in tutti e tre i posti; il contenuto principale, il piè di pagina principale e il fondo del piè di pagina.

Aggiungi ombra riquadro CSS

Un'altra cosa che puoi fare per aggiungere quel po' di prospettiva e interazione al tuo sito web è aggiungere un po' di box shadow al contenuto principale. Il piè di pagina mostra già che si trova "sotto" il contenuto principale. Una volta aggiunta l'ombra della scatola, lo enfatizzerai. Avendo un'ombra, la distanza illusoria in altezza tra il contenuto principale e il piè di pagina sembrerà più grande.

Per aggiungere l'ombra della casella alla rivelazione del piè di pagina, usa le seguenti righe di codice:

#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}

Questo è tutto! La rivelazione del piè di pagina ora dovrebbe funzionare correttamente.

Pensieri finali

Nel post di oggi, ti abbiamo mostrato come creare un effetto di rivelazione del piè di pagina sul tuo sito web. Assicurati di utilizzare il codice CSS personalizzato fornito per creare l'effetto e assicurati che si adatti all'altezza del tuo piè di pagina. Se vuoi dargli quella prospettiva aggiuntiva, ti consigliamo di aggiungere l'ombra della scatola al contenuto principale come mostrato nel passaggio precedente. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di Demja / shutterstock.com