Come riparare il piè di pagina Divi

Nel tutorial Divi di oggi, ti mostreremo come creare un piè di pagina fisso per il tuo sito Web invece di uno normale. In un post precedente, ti abbiamo mostrato come renderlo appiccicoso, il che in realtà differisce dal ripararlo, anche se all'inizio potrebbero sembrare uguali. Se non stavi cercando di renderlo appiccicoso ma invece risolto, questo post ti aiuterà.

L'aggiunta di un piè di pagina fisso al tuo sito web potrebbe essere una richiesta che hai avuto da uno dei tuoi clienti o un'esigenza che hai per il tuo sito web. Sebbene non sia usato così spesso come un'intestazione fissa, potrebbe essere una di quelle cose con cui stai lottando. Ti mostreremo due modi per rendere il tuo piè di pagina appiccicoso sul tuo sito web Divi. Il primo utilizzerà alcune righe CSS e il secondo utilizzerà il codice jQuery. Entrambi i modi apporteranno modifiche al foglio di stile CSS del piè di pagina del tuo sito web.

Ecco un esempio di come appare il piè di pagina fisso durante lo scorrimento:

Quando usare un piè di pagina fisso

Ci sono diversi motivi per cui vorresti avere un piè di pagina fisso sul tuo sito web. Uno di questi motivi potrebbe essere la pertinenza delle informazioni che contiene il tuo piè di pagina. Potresti, ad esempio, inserire le tue icone social nel piè di pagina e perché vuoi incoraggiare i visitatori che sono sul tuo sito Web a esplorare i tuoi canali di social media. Un altro motivo potrebbe essere che ti piace semplicemente l'effetto che dà al tuo sito web.

Se utilizzi un piè di pagina fisso, tieni presente che una parte della finestra del visitatore verrà sempre occupata. Ciò significa che dovranno scorrere di più per vedere lo stesso contenuto che vedrebbero se non ci fosse un piè di pagina fisso. Questa è una sfida perché ai visitatori piace impegnarsi il meno possibile.

Tuttavia, se il tuo piè di pagina non è così grande, potrebbe aumentare il numero di azioni intraprese nel tuo piè di pagina. Sconsigliamo di utilizzare contemporaneamente un'intestazione fissa, un menu principale e un piè di pagina. Rendendo corretti tutti e tre, il contenuto visualizzato verrà ridotto drasticamente, il che può portare a una frequenza di rimbalzo più elevata.

Differenza tra piè di pagina fisso e appiccicoso

Prima di iniziare, spiegheremo la differenza tra un piè di pagina fisso e uno appiccicoso.

Un piè di pagina appiccicoso è di solito un po' più complesso. È fatto per comportarsi come un piè di pagina fisso se una pagina non ha abbastanza contenuto per spingere il piè di pagina nella parte inferiore dello schermo. Nei casi in cui le pagine sono sufficientemente lunghe, il piè di pagina si comporterà come un normale e verrà spinto verso il basso fino alla fine della pagina, quindi non sullo schermo.

Iniziamo

Iscriviti al nostro canale Youtube

Inizieremo subito mostrandoti come aggiungere il piè di pagina fisso al tuo sito web in due modi; tramite codice CSS e tramite codice jQuery. Entrambi i metodi funzionano, ma tutto dipende da quale preferisci utilizzare per il sito Web per cui ti serve.

Aggiungi piè di pagina fisso tramite CSS

Il primo e più semplice modo per creare un piè di pagina fisso è aggiungere alcune righe CSS. Con Divi Builder e WordPress, possiamo aggiungere queste linee in luoghi diversi. Diamo un'occhiata a loro.

Aggiungi codice CSS tramite CSS personalizzato per una pagina

Il primo modo per aggiungere il codice CSS è aggiungerlo a una pagina in particolare. Sebbene sia meglio rendere uguale un piè di pagina fisso per ogni pagina del tuo sito web (per avere quella coerenza sul tuo sito web), puoi scegliere di applicarlo anche a una pagina in particolare.

Apri la pagina a cui vuoi aggiungere le righe di codice CSS e fai clic sul seguente pulsante di Divi Builder.

Scorri verso il basso e aggiungi il seguente codice al campo CSS personalizzato:

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

Aggiungi codice CSS tramite la personalizzazione del tema

Un altro modo per aggiungere il codice è tramite Theme Customizer. Usando Theme Customizer, vedrai i risultati accadere in tempo reale sul tuo sito web. Il codice che aggiungi tramite il Personalizzatore di temi si applica a tutte le pagine del tuo sito web.

Vai a Theme Optimizer sul tuo sito web > CSS aggiuntivo > Incolla le seguenti righe di codice CSS:

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

Aggiungi codice CSS tramite le opzioni del tema

L'ultimo modo per aggiungere il codice CSS al tuo sito Web è tramite le Opzioni del tema. Quando aggiungi il tuo codice nel campo CSS personalizzato delle Opzioni del tema, il codice verrà applicato anche all'intero sito web. Questo è il modo più utilizzato per aggiungere codice CSS personalizzato all'intero sito Divi.

Vai su Divi > Opzioni tema > Generale > Scorri verso il basso e aggiungi il seguente codice al campo CSS personalizzato:

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

Aggiungi piè di pagina fisso tramite jQuery

Un'altra possibilità che abbiamo è apportare le modifiche CSS attraverso alcune righe di codice jQuery. Quando utilizzi un piè di pagina fisso, di solito vuoi assicurarti che si applichi a tutte le pagine del tuo sito web. Questo tipo di coerenza rende più facile per i tuoi visitatori navigare nel tuo sito Web senza confondersi.

Aggiungi codice jQuery tramite modulo codice per una pagina in particolare

Apri la pagina in cui desideri applicare il piè di pagina fisso e aggiungi una nuova sezione standard nella parte superiore della pagina. Quindi, scegli una riga a larghezza intera e aggiungi un modulo di codice ad essa. Apri il modulo Codice e incolla il seguente codice jQuery nella casella del contenuto:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Aggiungendo il codice jQuery tramite il Modulo codice su una particolare pagina, il codice si applicherà solo a quella pagina. Il resto del tuo sito web avrà un piè di pagina normale, mentre quello in cui hai utilizzato il modulo di codice avrà un piè di pagina fisso.

Aggiungi codice jQuery tramite le opzioni del tema

L'ultima opzione per aggiungere il codice jQuery che rende corretto il piè di pagina è tramite le Opzioni del tema. Le righe di codice si applicheranno immediatamente a tutto il tuo sito web e offriranno quella coerenza di cui il tuo sito web ha bisogno.

Vai su Divi > Opzioni tema > Integrazione > E incolla le seguenti righe di codici nella <head> del tuo sito web:

<script text="text/javascript">
jQuery(function($) {
$("#main-footer").css("position","fixed").css("bottom",0).css("width",'100%');
});
</script>

Pensieri finali

Ti abbiamo mostrato come creare un piè di pagina appiccicoso in uno dei post precedenti. Questo post trattava in particolare di come creare un piè di pagina fisso per il tuo sito web. Il piè di pagina fisso rimarrà sempre nella parte inferiore dello schermo del visitatore mentre visita il tuo sito web. Se hai domande o suggerimenti, 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 primo piano di Zeeker2526 / shutterstock.com