GUIDA CSS

Personalizzare un sito
WordPress con CSS

Il tema fa quasi tutto quello che ti serve, ma non proprio tutto? Con poche righe di CSS si sistemano colori, caratteri, versione mobile e dettagli che le impostazioni non permettono di cambiare.

Di Stefano Menconi, web designer a Lucca. Personalizzo ogni giorno siti WordPress ed Elementor, realizzati da me o da altri.

Parlami del tuo progetto Parlami del tuo progetto

6 min

Tempo di lettura

In breve

Un sito WordPress esistente si può modificare e personalizzare con CSS, HTML, JavaScript e PHP senza rifarlo da zero, se tema e plugin sono aggiornati e la struttura funziona. Il codice va messo in un child theme o in snippet dedicati, mai nei file del tema, e ogni intervento parte da un backup e da una prova su una copia del sito.

Aggiornato il 5 ottobre 2026

Capita spesso: hai scelto un buon tema, il sito funziona, ma qualcosa non torna. Il pulsante ha il colore sbagliato, il titolo su smartphone va a capo male, il menu non segue la grafica dell’azienda. Personalizzare un sito WordPress con CSS è il modo più rapido e pulito per sistemare questi dettagli senza cambiare tema e senza rifare il sito. In questa guida ti mostro dove si scrive il CSS, gli esempi di modifiche che faccio più spesso e gli errori da evitare.

Perché personalizzare un sito WordPress con CSS

Il CSS è il linguaggio che decide l’aspetto delle pagine: colori, caratteri, spaziature, dimensioni, comportamento su schermi diversi. Ogni tema WordPress ha già il suo CSS e offre alcune impostazioni per cambiarlo, ma le opzioni del pannello sono sempre limitate a quello che l’autore del tema ha previsto.

Con un CSS personalizzato puoi andare oltre quei limiti senza toccare i file del tema. È un intervento leggero: non aggiunge plugin, non rallenta il sito se scritto bene e si può togliere in qualsiasi momento.

Dove scrivere il CSS personalizzato in WordPress

Ci sono tre posti adatti, a seconda di quanto è esteso l’intervento:

CSS aggiuntivo: nel pannello di WordPress, da Aspetto → Personalizza, per le piccole modifiche. Con alcuni temi a blocchi la voce si trova nell’editor del sito.
Tema child: un tema “figlio” che eredita tutto dal tema principale e contiene le tue modifiche. È la scelta giusta quando il CSS cresce o servono anche modifiche ai template.
Il builder: se usi un page builder come Elementor, alcune versioni permettono di aggiungere CSS a una singola sezione o all’intero sito.

Il posto da evitare è il file style.css del tema principale: al primo aggiornamento del tema le modifiche andrebbero perse.

Esempio 1: colori e caratteri coerenti con il brand

La modifica che faccio più spesso è allineare il sito all’identità visiva del cliente. Invece di ripetere lo stesso colore in decine di regole, conviene definirlo una volta sola come variabile, per esempio :root { --colore-brand: #2b45c9; }, e richiamarlo dove serve con color: var(--colore-brand);.

Lo stesso vale per i caratteri: se il tema non permette di scegliere il font del logo o dei titoli, si può caricare il carattere giusto e assegnarlo ai titoli con una regola sola. Così, se un giorno cambi colore aziendale, lo aggiorni in un punto e cambia tutto il sito.

Esempio 2: sistemare la versione mobile

Molti temi sono pensati prima per il computer e poi adattati allo smartphone, e si vede: titoli troppo grandi, immagini tagliate, colonne strette, pulsanti difficili da toccare. Con le media query, cioè regole che valgono solo sotto una certa larghezza dello schermo, si correggono questi punti senza toccare la versione desktop.

Una regola come @media (max-width: 767px) { h1 { font-size: 34px; } } riduce il titolo solo sugli smartphone. Quando lavoro sulla versione mobile controllo sempre le pagine su un telefono vero, non solo nel simulatore del browser.

Esempio 3: pulsanti, link e piccoli dettagli

Sono i dettagli a far sembrare un sito curato o fatto in fretta. Con il CSS puoi decidere come appare un pulsante quando ci passi sopra con il mouse, dare ai link un colore riconoscibile, arrotondare o squadrare gli angoli delle immagini, sistemare lo spazio tra i paragrafi.

Una cosa a cui tengo particolarmente è lo stato di focus: il bordo che compare su link e pulsanti quando si naviga con la tastiera. Molti temi lo eliminano perché “sporca” la grafica, ma serve a chi non usa il mouse. Meglio ridisegnarlo in modo coerente con il brand che toglierlo.

Esempio 4: nascondere o spostare elementi del tema

A volte il tema mostra qualcosa che non ti serve: la data sotto i titoli, l’autore, un’icona, un riquadro nel piè di pagina. Se il pannello non offre l’opzione per toglierlo, il CSS può nasconderlo con display: none;.

Qui serve un po’ di misura. Nascondere un elemento con il CSS non lo elimina dalla pagina: resta nel codice e viene comunque caricato. Per piccole cose va benissimo; se invece vuoi togliere parti importanti o contenuti che non devono esistere, la soluzione corretta è intervenire sul template con un tema child.

Gli errori da evitare quando modifichi il CSS

Usare !important ovunque: risolve il problema subito, ma rende le modifiche successive sempre più difficili.
Scrivere regole troppo generiche: cambiare tutti i paragrafi del sito per sistemarne uno solo crea problemi in pagine che non hai controllato.
Non controllare tutte le pagine: una regola pensata per la home può cambiare anche il blog o il carrello.
Dimenticare la cache: se usi un plugin di cache, dopo una modifica va svuotata, altrimenti sembra che nulla sia cambiato.
Non tenere traccia: un breve commento sopra ogni blocco di CSS ti farà risparmiare tempo quando dovrai rimetterci mano.

Quando il CSS non basta

Il CSS cambia l’aspetto, non il funzionamento. Se ti serve un comportamento nuovo, come un filtro, un calcolo, un modulo diverso o un contenuto che cambia in base alla pagina, entrano in gioco JavaScript e PHP. Ne parlo nella guida su come modificare un sito WordPress senza rifarlo.

Se invece preferisci che sia qualcuno a occuparsene, trovi qui il mio servizio di modifiche e personalizzazioni WordPress: analizzo il sito, ti dico cosa si può ottenere e intervengo senza stravolgere quello che funziona già.

SCRIVIMI

Vuoi personalizzare il tuo sito WordPress?

Raccontami cosa vorresti cambiare: analizzo il sito e ti propongo la soluzione più semplice, senza rifarlo da zero. Compila il brief, bastano pochi minuti.