Come rendere appiccicoso il piè di pagina Divi

In questo tutorial, ti mostreremo esattamente come rendere appiccicoso il piè di pagina del tuo sito web Divi. L'utilizzo di un piè di pagina appiccicoso può essere una delle richieste che ricevi quando stai progettando un sito web per un cliente o un'esigenza che hai quando crei un sito web tutto tuo. Ti mostreremo due possibilità che renderanno il tuo piè di pagina appiccicoso. Il primo modo è tramite il codice CSS e il secondo tramite il codice jQuery. Entrambi i modi funzionano, ma tutto dipende da quale preferisci utilizzare per creare quell'effetto appiccicoso per il tuo sito web.

L'aggiunta di un piè di pagina appiccicoso al tuo sito Web non è attualmente qualcosa che puoi fare automaticamente all'interno del Divi builder. Ecco perché ti mostreremo come raggiungere il risultato esatto che desideri senza dover fare molti sforzi. L'unica cosa che devi fare è seguire questo post passo dopo passo, copiare e incollare alcune righe di codice e metterle nel posto giusto.

Perché usare un piè di pagina appiccicoso?

Un piè di pagina appiccicoso viene solitamente utilizzato per una ragione principale; se hai una o più pagine sul tuo sito web che non hanno abbastanza contenuti disponibili per riempire un intero schermo. Potresti, ovviamente, assicurarti di avere abbastanza contenuto su una pagina, ma se non porta un valore aggiunto alla pagina; non c'è bisogno di farlo.

Ora, nel caso in cui non ci sia abbastanza contenuto per riempire l'intero schermo, la pagina avrà un piè di pagina mobile subito dopo la fine del contenuto. Di solito non sembra buono e non è il risultato che vuoi ottenere. Fortunatamente, puoi utilizzare un piè di pagina appiccicoso per eliminare il piè di pagina mobile. Il piè di pagina adesivo assicura che il piè di pagina rimanga nella parte inferiore della pagina senza creare spazio non necessario. La lunghezza della pagina rimarrà quindi la stessa e ogni volta che modificherai la dimensione della tua finestra, il piè di pagina si modificherà allo schermo.

Qui hai l'immagine di una pagina corta che non ha un piè di pagina appiccicoso:

Ed ecco la stessa immagine di quella pagina dopo che è stato aggiunto un piè di pagina adesivo:

Differenza tra piè di pagina fisso e fisso

Non tutti decidono di utilizzare un piè di pagina sul proprio sito web ma quando lo fanno; ci sono molti modi per modellarlo. Tutto dipende da come è la struttura del tuo sito web e se vuoi includere un piè di pagina "manuale" e con uno stile diverso realizzato con il Divi builder.

Ma se stai usando un piè di pagina standard, puoi scegliere come ti piace lo stile e come vuoi che sia posizionato sul tuo sito web. Le tre posizioni principali che un piè di pagina può avere su un sito Web sono fluttuante, fissa e fissa.

Quando si confrontano l'uno con l'altro il piè di pagina fisso e quello fisso; potrebbero sembrare uguali a prima vista ma non lo sono. Il piè di pagina fisso è sempre visibile quando si scorre una pagina sul tuo sito Web, mentre il piè di pagina fisso gestisce specificamente le pagine in cui il contenuto non è abbastanza lungo da raggiungere la parte inferiore dello schermo. In quel caso specifico in cui il contenuto non è abbastanza lungo; si comporterà come un piè di pagina fisso e rimarrà bloccato in fondo alla pagina; creando quell'"effetto piè di pagina fisso".

Tuttavia, se il contenuto è sufficientemente lungo, il piè di pagina appiccicoso si comporterà come al solito e la pagina spingerà il piè di pagina in fondo alla pagina per assicurarsi che non appaia continuamente sullo schermo. Nella maggior parte dei casi, questo metodo è preferibile rispetto all'avere un piè di pagina fisso in tutto il sito Web perché offre più spazio nella finestra per la visualizzazione del contenuto.

Crea un piè di pagina appiccicoso sul tuo sito Web Divi tramite CSS

Senza ulteriori indugi, iniziamo a creare un piè di pagina appiccicoso per il tuo sito web. Il codice che useremo è davvero semplice ma fa il lavoro. Passerai rapidamente da un piè di pagina mobile sulla tua pagina a una pagina in cui il piè di pagina viene spostato in basso se il contenuto non è abbastanza lungo.

Aggiungi codice CSS tramite le impostazioni della pagina (per una pagina in particolare)

In alcuni casi, si vuole fare l'appiccicoso piè di pagina su una sola pagina particolare. In questa parte del post, ti mostreremo come farlo esattamente aggiungendo il codice CSS al campo CSS personalizzato di una pagina. In questo modo, ti assicuri che il codice CSS si applichi solo a quella pagina del tuo sito web. Ciò significa anche che il codice CSS verrà caricato solo quando qualcuno apre quella particolare pagina. Questo metodo di solito viene utilizzato nei casi in cui ci sono solo poche pagine più corte sul sito Web a cui si desidera dare il piè di pagina appiccicoso.

Inizia aprendo la pagina in cui desideri che il piè di pagina sia attivo o creando una nuova pagina in cui desideri che venga applicato. Quindi, apri le impostazioni della pagina facendo clic sulla seguente icona nel tuo Divi builder:

Andando avanti, aggiungi il seguente codice al campo CSS personalizzato nella finestra che hai appena aperto:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Dal momento in cui visualizzi l'anteprima della tua pagina, il codice CSS dovrebbe applicarsi e rendere permanente il piè di pagina.

Aggiungi codice CSS tramite la personalizzazione del tema (visualizzazione in tempo reale)

Un altro modo per aggiungere il codice è tramite Theme Customizer. Se aggiungi il codice CSS in questo modo, verrà applicato automaticamente all'intero sito web. Ogni pagina avrà questo codice CSS applicato. Aggiungendo il codice tramite il Personalizzatore di temi, puoi anche vedere direttamente le modifiche apportate al tuo sito web.

Per aggiungere il codice CSS a Theme Customizer, fai clic su "Theme Customizer" nel back-end del tuo sito Web WordPress. Quindi, scorri verso il basso la pagina e apri l'opzione CSS aggiuntivo. Vedrai apparire tutto il codice CSS personalizzato che hai usato finora. Vai avanti e aggiungi il seguente codice ad esso:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Aggiungi codice CSS tramite le opzioni del tema Divi

Ultimo ma non meno importante, puoi anche aggiungere il codice tramite le Opzioni del tema Divi. Questo è il modo più utilizzato per aggiungere codice a un sito Web in cui si desidera che l'intero sito Web tragga vantaggio dal codice.

Vai a Divi > Opzioni tema > Scorri la pagina verso il basso > Aggiungi il seguente codice CSS alla casella CSS personalizzato:

#main-footer {
position: absolute;
bottom: 0;
width: 100%;
}

Crea un piè di pagina appiccicoso sul tuo sito Web Divi tramite JQuery

Aggiungi codice jQuery tramite modulo codice (per una pagina in particolare)

Puoi aggiungere il codice jQuery utilizzando il Modulo codice all'interno del Divi builder. Questo, ancora una volta, viene utilizzato principalmente quando non ci sono molte pagine con contenuti brevi e se non si desidera caricare il codice jQuery per l'intero sito Web.

Aggiungi una sezione con una riga a larghezza intera alla pagina su cui stai lavorando.

Continua aggiungendo un modulo di codice a quella riga a larghezza intera e incollaci il seguente codice:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Aggiungi codice jQuery tramite le opzioni del tema Divi

Un'altra possibilità per aggiungere il codice jQuery è tramite le Divi Theme Options. Quando aggiungi il codice jQuery per l'intero sito Web, c'è un posto specifico nelle Opzioni del tema Divi in ​​cui possiamo farlo; nella <head&gt; campo della scheda Integrazione. È esattamente dove aggiungeremo il codice in questo momento.

Apri il tuo sito Web WordPress > Vai a Divi > Apri le Opzioni del tema > Vai alla scheda Integrazione e aggiungi il seguente codice jQuery all'<head> del tuo sito Web:

<script text= "text/javascript">
jQuery(function($){
function stickyFooter(){
var footer = $("#main-footer");
var position = footer.position();
var height = $(window).height();
height = height - position.top;
height = height - footer.outerHeight();
if (height > 0) {
footer.css({'margin-top' : height+'px'});
}
}
stickyFooter();
$(window).resize(function(){
stickyFooter();
});
});
</script>

Pensieri finali

L'aggiunta di un piè di pagina appiccicoso è solitamente necessaria nei casi in cui si dispone di una pagina con pochi contenuti. Vuoi eliminare il piè di pagina mobile per rendere la struttura della pagina più naturale. Se hai commenti o suggerimenti per post futuri sulla nostra sezione blog; assicurati di lasciare un commento nella sezione commenti qui sotto in modo che possiamo metterci in contatto!

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 evidenza di Vintagio / shutterstock.com