Se utilizzi Gutenberg, il block editor di WordPress, sai bene che ogni blocco ha già un campo “Classe CSS aggiuntiva” nelle impostazioni avanzate. Ma sai davvero come sfruttare al massimo questa funzionalità? In questa guida completa vedremo come aggiungere, gestire e organizzare le classi CSS nei blocchi Gutenberg, partendo dalle basi fino a tecniche avanzate per professionisti.
Il campo “Classe CSS aggiuntiva” di Gutenberg: dove si trova
Ogni blocco Gutenberg ha un pannello laterale di impostazioni che si apre quando selezioni il blocco. Per trovare il campo delle classi CSS:
- Seleziona un blocco nella pagina (paragrafo, heading, immagine, colonna, ecc.)
- Apri il pannello “Impostazioni blocco” nella sidebar destra (icona a forma di ingranaggio)
- Scorri fino in fondo fino alla sezione “Avanzato”
- Troverai il campo “Classe CSS aggiuntiva”: qui puoi inserire una o più classi separate da spazio
Questo campo accetta qualsiasi classe CSS tu abbia definito nel tuo tema o in un plugin. Basta scrivere il nome della classe e il blocco erediterà immediatamente tutti gli stili associati.
Perchè usare classi CSS personalizzate in Gutenberg
Lavorare con classi CSS invece di scrivere codice ogni volta ha numerosi vantaggi:
- Riutilizzo immediato: crei una classe una volta e la applichi a centinaia di blocchi
- Manutenzione semplificata: modifichi la classe in un punto e si aggiorna ovunque
- Coerenza visiva: stesso stile su tutto il sito, senza derive estetiche
- Velocità di sviluppo: non devi scrivere CSS per ogni singolo elemento
- Performance migliori: meno codice CSS significa fogli di stile più leggeri
- Collaborazione facilitata: team e clienti possono applicare classi senza sapere CSS
Come creare le tue prime classi CSS per Gutenberg
Puoi aggiungere classi CSS al tuo tema WordPress in diversi modi. Ecco i più comuni:
Metodo 1: Aggiungere CSS al file style.css del tema
Il metodo più tradizionale. Apri il file style.css del tuo tema (nella cartella /wp-content/themes/nome-tema/) e aggiungi le tue classi:
/* Classe per box con ombra */
.box-elegante {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.box-elegante:hover {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* Classe per titoli decorativi */
.titolo-sezione {
font-size: 2.5rem;
font-weight: 800;
line-height: 1.2;
background: linear-gradient(135deg, #00c7b1, #0d9488);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Classe per immagini con bordo decorativo */
.img-cornice {
border: 4px solid #f8fafc;
border-radius: 16px;
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
}
/* Classe per spaziatura personalizzata */
.sezione-spaziosa {
padding: 60px 20px;
margin: 40px 0;
}
/* Classe per sfondo a griglia */
.sfondo-griglia {
background-image:
linear-gradient(rgba(0, 199, 177, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 199, 177, 0.05) 1px, transparent 1px);
background-size: 40px 40px;
}Metodo 2: Aggiungere CSS via functions.php
Se preferisci mantenere il CSS separato dal tema o lavori con un tema figlio:
// functions.php del tuo tema
add_action('wp_enqueue_scripts', function() {
wp_add_inline_style('global-styles', '
.box-highlight {
background: linear-gradient(135deg, #f0fdfa, #ccfbf1);
border-left: 4px solid #00c7b1;
padding: 20px 24px;
border-radius: 0 8px 8px 0;
}
.testo-attenzione {
color: #dc2626;
font-weight: 600;
padding: 8px 16px;
background: #fef2f2;
border-radius: 6px;
display: inline-block;
}
.flex-centro {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
');
});Metodo 3: Usare un plugin (consigliato per non sviluppatori)
Se non vuoi scrivere codice o gestire file, Classy Blocks è la soluzione ideale. È un plugin WordPress gratuito che ti permette di:
- Creare classi CSS da un’interfaccia visuale nell’admin
- Vedere l’anteprima delle tue classi in tempo reale
- Gestire hover e focus states separatamente
- Organizzare le classi in una libreria riutilizzabile
- Esportare e importare la libreria tra siti diversi
Come applicare le classi ai blocchi Gutenberg
Una volta create le tue classi, applicarle ai blocchi è semplicissimo:
- Seleziona il blocco che vuoi personalizzare
- Nella sidebar destra, apri la sezione “Avanzato”
- Nel campo “Classe CSS aggiuntiva”, scrivi il nome della tua classe (es. “box-elegante”)
- Puoi combinare più classi separandole con uno spazio (es. “box-elegante titolo-sezione”)
- Il blocco si aggiornerà immediatamente con i nuovi stili
Errori comuni e come evitarli
Errore 1: Nome della classe sbagliato
Verifica sempre che il nome della classe nell’editor corrisponda esattamente a quello definito nel CSS (inclusi maiuscole, trattini e underscore).
Errore 2: CSS non caricato
Assicurati che il file CSS (o il codice inline) venga caricato correttamente. Usa gli strumenti di sviluppo del browser per verificare che la classe esista nel DOM.
Errore 3: Specificità troppo bassa
Se la classe non viene applicata, potrebbe essere sovrascritta da altri CSS. Aumenta la specificità o usa !important con parsimonia.
Errore 4: Classe non visibile nell’editor ma visibile nel frontend
Alcuni temi non caricano i CSS personalizzati nell’editor. Verifica che i tuoi CSS siano enqueue anche per l’editor.
Esempi pratici di combinazioni efficaci
Card prodotto
.card-prodotto {
background: white;
border-radius: 16px;
padding: 32px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
text-align: center;
transition: all 0.3s ease;
}
.card-prodotto:hover {
box-shadow: 0 12px 24px rgba(0,0,0,0.12);
transform: translateY(-4px);
}Combinala con class="card-prodotto" su un gruppo colonne in Gutenberg.
Badge personalizzato
.badge-nuovo {
display: inline-block;
background: #00c7b1;
color: white;
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}Applica class="badge-nuovo" a un paragrafo per ottenere un badge professionale.
Conclusioni e migliori pratiche
Gestire le classi CSS in Gutenberg è un’abilità fondamentale per chiunque lavori con WordPress. Che tu scelga di scrivere CSS manualmente o di usare un plugin, l’importante è creare un sistema organizzato e riutilizzabile.
Se vuoi semplificarti la vita e lavorare in modo più visuale, Classy Blocks è un plugin gratuito che ti permette di creare, gestire e applicare classi CSS personalizzate ai blocchi Gutenberg con un’interfaccia intuitiva, senza scrivere una riga di codice.
