Riquadri informativi WordPress CSS: tutorial pratico

I riquadri informativi WordPress CSS permettono di evidenziare citazioni, avvisi, suggerimenti e comunicazioni importanti senza installare un page builder. La soluzione più flessibile consiste nell’assegnare una classe CSS a un blocco Gutenberg o a un elemento HTML e definirne l’aspetto nel pannello CSS aggiuntivo di WordPress. Il metodo funziona con molti temi classici e, con alcune differenze, anche con i temi a blocchi. In questo tutorial vengono create tre varianti riutilizzabili: citazione, avviso e informazione.

Quale metodo usare per creare riquadri informativi in WordPress

Il metodo più semplice consiste nell’utilizzare l’editor a blocchi Gutenberg, aggiungere un blocco Paragrafo, Citazione o Gruppo e assegnargli una classe CSS personalizzata. Il contenuto rimane modificabile dall’editor, mentre colori, bordi, spaziature e icone vengono gestiti dal foglio di stile.

I riquadri informativi WordPress CSS sono utili per:

Evidenziare una citazione senza inserirla come semplice testo.
Mostrare avvisi importanti all’interno di un tutorial.
Separare suggerimenti, note tecniche e informazioni aggiuntive.
Riutilizzare lo stesso stile in articoli e pagine diverse.
Mantenere separati contenuto e presentazione grafica.

Prima di iniziare è consigliabile verificare che il tema supporti il campo per il CSS personalizzato. Nei temi classici il percorso più comune è Aspetto > Personalizza > CSS aggiuntivo. Nei temi a blocchi, come quelli compatibili con il Site Editor, il percorso è generalmente Aspetto > Editor > Stili, quindi il menu con i tre punti e la voce relativa al CSS aggiuntivo, se disponibile nella versione installata.

Il nome dei menu può cambiare in base al tema e alla versione di WordPress. Se il pannello CSS aggiuntivo non è presente, il codice può essere inserito nel foglio di stile del tema child oppure tramite un plugin dedicato al CSS personalizzato.

Come aggiungere le classi CSS ai blocchi Gutenberg

Passo 1: creare il contenuto del riquadro

Apri una pagina o un articolo in WordPress e inserisci un blocco Gruppo. All’interno del Gruppo aggiungi un titolo breve e un paragrafo. Il blocco Gruppo è preferibile perché consente di applicare lo sfondo e la spaziatura all’intero riquadro, non solo a una riga di testo.

Per una citazione puoi usare anche il blocco Citazione. Per un messaggio informativo, invece, il blocco Gruppo offre maggiore controllo sul markup e permette di inserire più paragrafi o un collegamento.

Passo 2: assegnare una classe CSS

Seleziona il blocco Gruppo e apri la scheda Blocco nella barra laterale destra. Espandi la sezione Avanzate e inserisci nel campo Classe CSS aggiuntiva uno dei seguenti nomi:

riquadro-citazione
riquadro-avviso
riquadro-info

Non inserire il punto iniziale: nel campo di WordPress va scritto riquadro-avviso, mentre nel CSS la stessa classe diventa .riquadro-avviso.

Passo 3: salvare temporaneamente la pagina

Salva la bozza o aggiorna la pagina per controllare il risultato. Il riquadro può apparire ancora senza stile fino a quando il CSS non viene aggiunto. Le classi CSS assegnate ai blocchi Gutenberg vengono normalmente mantenute anche cambiando il testo interno.

CSS pronto per citazioni, avvisi e informazioni

Apri Aspetto > Personalizza > CSS aggiuntivo nei temi classici e incolla il codice seguente. Nei temi a blocchi utilizza l’area CSS aggiuntivo disponibile nell’Editor del sito oppure il foglio di stile del tema child.

.riquadro-citazione,
.riquadro-avviso,
.riquadro-info {
box-sizing: border-box;
margin: 1.5rem 0;
padding: 1.25rem 1.5rem;
border-left: 5px solid;
border-radius: 8px;
background: #f5f7fa;
color: #1f2933;
}

.riquadro-citazione {
border-color: #6b46c1;
background: #f3efff;
font-style: italic;
}

.riquadro-avviso {
border-color: #c05621;
background: #fff4e8;
}

.riquadro-info {
border-color: #1769aa;
background: #edf7ff;
}

.riquadro-citazione p:last-child,
.riquadro-avviso p:last-child,
.riquadro-info p:last-child {
margin-bottom: 0;
}

.riquadro-citazione p:first-child,
.riquadro-avviso p:first-child,
.riquadro-info p:first-child {
margin-top: 0;
}

Il selettore comune definisce struttura, margini, padding e forma dei tre riquadri. Le singole classi cambiano il colore del bordo e dello sfondo, consentendo di distinguere visivamente citazioni, avvisi e informazioni senza duplicare tutto il codice.

Il valore box-sizing: border-box evita che bordi e spaziature alterino in modo inatteso la larghezza del contenitore. Le regole sui paragrafi impediscono la comparsa di spazio eccessivo sopra o sotto il testo.

Come aggiungere un’icona o un titolo riconoscibile

Un titolo rende il riquadro più leggibile, soprattutto nei contenuti lunghi. Nel blocco Gruppo inserisci un blocco Titolo, per esempio “Attenzione”, “Nota” o “Citazione”, quindi assegna al titolo la classe riquadro-titolo.

.riquadro-titolo {
display: block;
margin: 0 0 0.5rem;
color: inherit;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}

.riquadro-titolo::before {
margin-right: 0.45rem;
}

.riquadro-avviso .riquadro-titolo::before {
content: "⚠";
}

.riquadro-info .riquadro-titolo::before {
content: "ℹ";
}

.riquadro-citazione .riquadro-titolo::before {
content: "“";
}

Le icone Unicode non richiedono immagini esterne e funzionano nella maggior parte dei browser moderni. Per contenuti rivolti a utenti con tecnologie assistive, l’icona deve rimanere decorativa: il significato principale deve essere espresso anche dal titolo testuale.

Come rendere accessibili i riquadri informativi WordPress CSS

Il colore non deve essere l’unico elemento usato per distinguere un avviso da una nota informativa. Un titolo esplicito, un bordo laterale e un testo comprensibile rendono il messaggio più chiaro anche per chi non percepisce correttamente i colori.

Usa colori con contrasto sufficiente tra testo e sfondo e verifica il risultato su smartphone. Evita testo troppo piccolo, sfondi molto saturi e combinazioni come rosso e verde prive di etichette testuali.

Per controllare il contrasto puoi utilizzare strumenti riconosciuti come il Contrast Checker del WebAIM. Il controllo deve riguardare sia il testo normale sia eventuali titoli o collegamenti presenti nel riquadro.

Se il riquadro contiene un messaggio veramente urgente, non affidarti soltanto allo stile grafico. Scrivi chiaramente l’azione richiesta, la causa del problema o la conseguenza prevista. Per esempio, “Esegui un backup prima di modificare il database” è più utile di un semplice titolo “Attenzione”.

Come verificare il risultato su desktop e smartphone

Dopo aver pubblicato la pagina, controlla il riquadro informativo su una finestra larga e su uno schermo mobile. Il padding deve lasciare spazio sufficiente al testo, ma non deve restringere eccessivamente la colonna di lettura.

Verifica anche questi aspetti:

Il testo non esce dai bordi quando contiene un collegamento lungo.
Il riquadro mantiene una larghezza corretta nel tema scelto.
I margini non creano spazi vuoti eccessivi tra due blocchi.
I collegamenti restano riconoscibili e utilizzabili.
Il contrasto rimane leggibile nella modalità scura, se il tema la supporta.

Se il tema applica già stili molto specifici ai blocchi Gruppo o Citazione, potrebbe essere necessario aumentare la specificità dei selettori. Prima di usare !important, controlla gli strumenti per sviluppatori del browser e individua quale regola sta sovrascrivendo il CSS personalizzato.

I riquadri informativi WordPress CSS diventano più facili da gestire quando ogni variante usa una classe distinta e un testo esplicativo.

FAQ

Sì. È sufficiente assegnare una classe CSS a un blocco Gutenberg e inserire le regole in Aspetto > Personalizza > CSS aggiuntivo, quando il tema rende disponibile questa funzione.

Seleziona il blocco, apri la scheda Blocco, espandi Avanzate e compila il campo Classe CSS aggiuntiva senza il punto iniziale.

Le classi CSS funzionano in generale, ma il tema può applicare regole che modificano margini, colori o larghezze. Nei temi a blocchi e nei temi child il percorso per inserire il CSS può essere diverso.

Sì. Dopo aver definito le classi nel CSS, puoi riutilizzare riquadro-citazione, riquadro-avviso e riquadro-info in qualsiasi pagina o articolo del sito.

No. Le icone sono facoltative e il testo del titolo deve spiegare comunque il significato del riquadro, anche quando l’icona non viene visualizzata.

Altri articoli di questa serie:

Altro per te

Wordpress

Evidenziare codice WordPress CSS durante lo scroll

Per evidenziare codice WordPress CSS durante lo scorrimento serve una combinazione di CSS e JavaScript: il CSS definisce l’aspetto del blocco attivo, mentre JavaScript…