Il footer è quella zona che molti costruiscono quando ormai sono stanchi, hanno finito le idee e vogliono soltanto chiudere il sito. Risultato: quattro link, un logo minuscolo, copyright del 2021 e via. Peccato che il footer compaia praticamente ovunque e sia spesso l’ultima possibilità per orientare chi è arrivato fino in fondo.

In questa parte realizziamo un footer personalizzato in Divi 5 con tre colonne, una fascia finale e contenuti riutilizzabili. Useremo il Theme Builder, le variabili e i preset già preparati. Insomma, niente caccia al codice colore o al font usato tre pagine fa.

Se devi ancora procurarti il tema, nella pagina trovi anche il collegamento per acquistare Divi. Se invece è già installato, apri il Theme Builder e iniziamo.

Creare il footer globale e la struttura principale

Dalla bacheca vai in Divi → Theme Builder. Nel template predefinito scegli “Aggiungi footer globale” e poi “Costruisci footer globale”. Salva subito l’assegnazione del template, quindi apri il layout nel Visual Builder.

Nella sezione vuota applica una variabile di sfondo chiaro. Nelle impostazioni di layout usa una variabile di spaziatura media per il gap verticale. Questa distanza separerà la riga principale dalla fascia del copyright senza costringerti a inserire margini casuali sui singoli moduli.

Aggiungi una riga Flex con tre colonne uguali. Attiva il wrapping e assegna una spaziatura piccola sia al gap orizzontale sia a quello verticale. Il wrapping è importante: quando lo spazio diminuisce, le colonne devono potersi spostare su una nuova riga invece di diventare tre striscioline illeggibili.

Adesso riempiamo la struttura.

Nella prima colonna inserisci un modulo Immagine per il logo e un modulo Testo con una breve descrizione. Nella seconda aggiungi un Titolo e il modulo Social Media Follow. Nella terza usa due Titoli e un Pulsante: un piccolo richiamo, il messaggio principale e la CTA.

Sotto la riga a tre colonne aggiungi una seconda riga a colonna singola con un modulo Testo. Qui inseriremo copyright e anno dinamico. La struttura è volutamente semplice: il footer deve raccogliere informazioni utili, non diventare una homepage alternativa.

Applica i preset di Divi 5 ai titoli, al testo, alle icone social e al pulsante, mantenendoli collegati alle variabili del sistema di design. Se hai organizzato bene i preset, gran parte dell’aspetto viene fuori quasi da sola. Se ogni modulo richiede dieci correzioni manuali, fermati: probabilmente il problema non è il footer, ma il sistema che lo precede.

Rendere le colonne responsive senza duplicare moduli

Su desktop le tre colonne possono stare affiancate. Su tablet conviene spesso far occupare alla prima colonna tutta la larghezza e lasciare le altre due sotto, affiancate. Su telefono, invece, è più leggibile impilare tutto.

Puoi gestire questo comportamento assegnando classi amministrative chiare alle colonne e impostando le dimensioni per breakpoint. Prima verifica la logica con la guida alle colonne responsive con Flexbox. L’obiettivo non è trovare percentuali decorative, ma definire una gerarchia: identità prima, informazioni e contatto dopo.

Controlla anche l’allineamento. Un footer centrato può funzionare su mobile, mentre su desktop potresti preferire testi allineati a sinistra. Usa i valori responsive nei preset o nei singoli gruppi di opzioni, ma evita di duplicare l’intero footer soltanto per cambiare un allineamento.

Chiudiamo con i contenuti dinamici.

Nel testo del copyright inserisci l’anno tramite contenuto dinamico, così si aggiornerà automaticamente. Aggiungi nome dell’attività e informazioni legali realmente necessarie. Verifica inoltre indirizzo, email, telefono e profili social: un link sbagliato nel footer viene replicato su tutto il sito con notevole efficienza. Non proprio il tipo di automazione che vogliamo.

Apri l’Editor Responsive di Divi 5 e controlla larghezze, wrapping, spaziature e dimensioni del logo. Prova pagine corte e lunghe, perché il footer deve funzionare sia subito sotto il contenuto sia dopo articoli molto estesi.

Salva il footer, torna al Theme Builder e salva nuovamente le modifiche. Esporta poi il template come backup. Nella parte 8 useremo lo stesso Theme Builder per costruire template globali dedicati ad articoli, archivi, risultati di ricerca e pagina 404.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.