Il piè di pagina WordPress CSS può diventare una sezione ordinata, leggibile e coerente con il design del sito usando una griglia responsive e separatori decorativi. La personalizzazione richiede soltanto una struttura con blocchi o widget e alcune regole CSS aggiuntive. Il layout si adatta automaticamente a desktop, tablet e smartphone senza ricorrere a plugin specifici. I separatori verticali aiutano a distinguere le colonne, mentre spaziature e colori possono essere modificati in base al tema. Le istruzioni funzionano soprattutto con i temi a blocchi e con i temi classici che offrono un campo per il CSS personalizzato.

Come preparare la struttura del piè di pagina WordPress

Prima di scrivere il CSS è necessario creare una struttura riconoscibile. Nei temi a blocchi, apri Aspetto > Editor, entra nell’area Design o Parti del modello, quindi modifica la parte del modello relativa al piè di pagina. Il nome può variare in base alla versione di WordPress e al tema installato.

Inserisci un blocco Colonne con tre colonne, oppure utilizza una struttura equivalente già presente nel footer. Nella barra laterale delle impostazioni del blocco, individua il campo Classe CSS aggiuntiva e assegna alla struttura delle colonne la classe:

footer-columns

All’interno delle colonne puoi inserire blocchi Titolo, Paragrafo, Elenco, Navigazione o Social Icons. La classe footer-columns deve essere applicata al blocco Colonne che contiene direttamente le sezioni del piè di pagina, non a ogni singolo testo.

Per distinguere visivamente le singole aree, assegna eventualmente la classe footer-col ai blocchi Gruppo contenuti nelle colonne. Questa classe non è indispensabile per il funzionamento della griglia, ma permette di aggiungere regole specifiche in seguito.

Nei temi classici, la struttura può essere composta da aree widget come Footer 1, Footer 2 e Footer 3. In questo caso, il selettore CSS dipende dal tema: controlla il codice della pagina con gli strumenti per sviluppatori del browser e individua il contenitore comune delle aree widget prima di applicare le regole.

Come aggiungere il CSS per la griglia responsive

Nei temi classici puoi inserire il codice in Aspetto > Personalizza > CSS aggiuntivo. Nei temi a blocchi il percorso normalmente è Aspetto > Editor > Stili > CSS aggiuntivo, se il tema e la versione di WordPress rendono disponibile questa voce. Alcuni temi spostano invece il CSS personalizzato nelle proprie impostazioni.

Incolla il seguente codice nel campo CSS aggiuntivo:

.footer-columns {
--footer-gap: clamp(1.5rem, 4vw, 4rem);
--footer-border: rgba(255, 255, 255, 0.22);

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--footer-gap);
align-items: start;
width: 100%;
}

.footer-columns > .wp-block-column {
position: relative;
min-width: 0;
margin: 0;
}

.footer-columns > .wp-block-column:not(:last-child)::after {
content: "";
position: absolute;
top: 0.25rem;
right: calc(var(--footer-gap) / -2);
width: 1px;
height: calc(100% - 0.5rem);
background: var(--footer-border);
}

.footer-columns h2,
.footer-columns h3,
.footer-columns h4 {
margin-top: 0;
}

.footer-columns a {
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}

@media (max-width: 781px) {
.footer-columns {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-columns > .wp-block-column:nth-child(2)::after {
display: none;
}
}

@media (max-width: 520px) {
.footer-columns {
grid-template-columns: 1fr;
}

.footer-columns > .wp-block-column::after {
display: none;
}

.footer-columns > .wp-block-column:not(:last-child) {
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--footer-border);
}
}

La proprietà display: grid trasforma il contenitore in una griglia CSS. La funzione repeat(3, minmax(0, 1fr)) crea tre colonne della stessa larghezza e impedisce ai contenuti troppo lunghi di allargare il layout oltre il contenitore.

La funzione clamp() mantiene la distanza tra le colonne proporzionata alla larghezza dello schermo. Il valore minimo è 1.5rem, quello massimo è 4rem, mentre 4vw rende lo spazio fluido sui display intermedi.

Il selettore :not(:last-child)::after crea un separatore verticale soltanto tra le colonne. In questo modo non compare una linea inutile sul bordo destro dell’ultima area.

Come creare separatori decorativi più visibili

Il separatore verticale può essere personalizzato modificando la variabile --footer-border. Su un piè di pagina scuro è preferibile usare un colore chiaro con trasparenza; su uno sfondo chiaro è invece più adatto un colore scuro attenuato.

Per aggiungere un piccolo elemento decorativo sopra i titoli delle colonne, puoi utilizzare un pseudo-elemento sul titolo. Il CSS seguente applica l’effetto ai titoli h3 contenuti nel footer:

.footer-columns h3 {
position: relative;
padding-top: 0.9rem;
}

.footer-columns h3::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.75rem;
height: 3px;
border-radius: 999px;
background: currentColor;
opacity: 0.75;
}

Questo separatore orizzontale eredita il colore del titolo grazie a currentColor. La tecnica evita di impostare manualmente un colore diverso per ogni sezione e mantiene il risultato coerente con il tema.

Se il tema assegna ai titoli una classe diversa o utilizza titoli non compresi nei selettori previsti, puoi sostituire h3 con h2, h4 oppure con una classe specifica. È consigliabile non usare selettori generici come .wp-block-heading::before, perché potrebbero modificare anche i titoli presenti nel corpo delle pagine.

Come verificare il risultato su WordPress

Dopo aver salvato il CSS, controlla il piè di pagina su una pagina pubblica e svuota l’eventuale cache del sito. I plugin di caching, le CDN e la cache del browser possono mostrare temporaneamente una versione precedente dello stile.

Verifica che:

le tre colonne siano allineate sui monitor più larghi;
i testi lunghi non provochino uno scorrimento orizzontale;
il layout passi a due colonne sotto i 781 pixel;
il layout diventi a colonna singola sotto i 520 pixel;
i separatori non siano troppo chiari o troppo scuri rispetto allo sfondo;
i collegamenti conservino un contrasto sufficiente e siano riconoscibili anche senza il mouse.

Le soglie 781px e 520px non sono valori obbligatori: rappresentano soltanto punti di passaggio pratici per una griglia a tre colonne. Puoi modificarle in base alla larghezza reale dei contenuti e al tema WordPress utilizzato.

Se la griglia non viene applicata, controlla prima che la classe footer-columns sia stata aggiunta al blocco corretto. Se i separatori non compaiono, verifica con gli strumenti per sviluppatori che le colonne siano davvero elementi .wp-block-column; i temi personalizzati possono usare classi differenti.

Per mantenere il CSS più ordinato, limita le modifiche al contenitore del footer e preferisci variabili come --footer-gap e --footer-border. In questo modo puoi cambiare spaziatura e colore da un unico punto senza duplicare regole in più selettori.

Un piè di pagina WordPress CSS ben strutturato migliora gerarchia visiva, leggibilità e adattamento ai dispositivi mobili senza appesantire il sito con un plugin dedicato.

Potrebbe interessarti anche:

FAQ

Il CSS funziona quando il footer usa un blocco Colonne con elementi .wp-block-column. Nei temi personalizzati può essere necessario sostituire i selettori con le classi usate dal tema.

Nei temi a blocchi il percorso può essere Aspetto > Editor > Stili > CSS aggiuntivo. La voce dipende dalla versione di WordPress e dalle funzioni rese disponibili dal tema.

Aggiungi questa regola al CSS:

Sì. Sostituisci repeat(3, minmax(0, 1fr)) con repeat(4, minmax(0, 1fr)) e adatta le regole responsive per tablet e smartphone.

Svuota la cache del browser, del plugin di caching e della CDN, poi verifica che la classe footer-columns sia assegnata al blocco Colonne corretto.

Altri articoli di questa serie: