Gutenberg offre ottime possibilità di personalizzazione via CSS, ma molti utenti si fermano alla superficie senza sfruttare appieno il potenziale del block editor. In questa guida completa vedremo come personalizzare l’aspetto di qualsiasi blocco Gutenberg usando CSS, dalle basi fino a tecniche avanzate per creare design unici e professionali.
I selettori CSS dei blocchi Gutenberg
Ogni blocco Gutenberg ha uno o più selettori CSS predefiniti che puoi usare per personalizzarlo. Conoscere questi selettori è il primo passo per un controllo totale sullo stile.
Selettori base dei blocchi principali
- .wp-block-paragraph – blocco paragrafo
- .wp-block-heading – blocco titolo (h1-h6)
- .wp-block-image – blocco immagine
- .wp-block-columns – contenitore colonne
- .wp-block-column – singola colonna
- .wp-block-group – blocco gruppo
- .wp-block-buttons – contenitore pulsanti
- .wp-block-button – singolo pulsante
- .wp-block-cover – blocco copertina
- .wp-block-media-text – blocco media e testo
- .wp-block-list – blocco elenco
- .wp-block-quote – blocco citazione
- .wp-block-code – blocco codice
- .wp-block-separator – linea separatrice
- .wp-block-spacer – blocco spaziatore
- .wp-block-embed – blocco incorporamento
Tecniche di personalizzazione avanzata
1. Combinare selettori con classi personalizzate
Il vero potere arriva quando combini i selettori di blocco con le tue classi personalizzate:
/* Solo gli heading con classe "titolo-hero" */
.wp-block-heading.titolo-hero {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.03em;
background: linear-gradient(135deg, #0f172a 0%, #00c7b1 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Solo i paragrafi all'interno di una card */
.wp-block-paragraph.testo-card {
font-size: 1.05rem;
line-height: 1.7;
color: #4b5563;
max-width: 65ch;
}2. Personalizzare colonne e layout
/* Colonne con gap personalizzato */
.wp-block-columns.colonne-spaziose {
gap: 40px;
}
/* Singola colonna con sfondo */
.wp-block-column.colonna-in-evidenza {
background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
padding: 32px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 199, 177, 0.08);
}
/* Layout responsive personalizzato */
@media (max-width: 768px) {
.wp-block-columns.colonne-impilate-mobile {
flex-direction: column;
}
}3. Effetti hover su gruppi e colonne
/* Gruppo con effetto hover */
.wp-block-group.card-interattiva {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.wp-block-group.card-interattiva:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
/* Cambio colore di tutti gli elementi figlio all'hover */
.wp-block-group.card-interattiva:hover .wp-block-heading {
color: #00c7b1;
}4. Personalizzare le immagini con CSS avanzato
/* Immagine con effetto rivelazione */
.wp-block-image.img-rivelazione img {
mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
transition: mask-image 0.6s ease;
}
.wp-block-image.img-rivelazione:hover img {
mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
/* Galleria a mosaico personalizzata */
.wp-block-gallery.galleria-mosaico {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.wp-block-gallery.galleria-mosaico .wp-block-image {
margin: 0;
height: 250px;
overflow: hidden;
border-radius: 12px;
}
.wp-block-gallery.galleria-mosaico .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.wp-block-gallery.galleria-mosaico .wp-block-image:hover img {
transform: scale(1.08);
}5. Stilizzare i pulsanti Gutenberg
/* Pulsante con effetto vetro */
.wp-block-button.btn-vetro .wp-block-button__link {
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white !important;
font-weight: 600;
}
.wp-block-button.btn-vetro .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.2) !important;
transform: scale(1.02);
}
/* Pulsante con bordo animato */
.wp-block-button.btn-bordo-animato .wp-block-button__link {
position: relative;
overflow: hidden;
}
.wp-block-button.btn-bordo-animato .wp-block-button__link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: currentColor;
transition: all 0.3s ease;
transform: translateX(-50%);
}
.wp-block-button.btn-bordo-animato .wp-block-button__link:hover::after {
width: 80%;
}Personalizzare l’editor Gutenberg
Per vedere le tue personalizzazioni anche nell’editor (non solo nel frontend), devi caricare i CSS anche per l’editor:
// functions.php
add_action('enqueue_block_editor_assets', function() {
wp_add_inline_style('wp-blocks', '
.wp-block-heading.titolo-editor-personalizzato {
font-size: 2rem;
color: #00c7b1;
border-left: 4px solid #00c7b1;
padding-left: 16px;
}
');
});Debug: perché il tuo CSS non funziona
Se le tue personalizzazioni non vengono applicate, ecco i controlli da fare:
- Specificità: I CSS del tema potrebbero sovrascrivere i tuoi. Usa selettori più specifici o aggiungi
!important(con moderazione) - Cache: Il browser potrebbe servire una versione cache del CSS. Prova a svuotare la cache o aggiungi un parametro versione
- Enqueue: Verifica che i tuoi CSS siano effettivamente caricati nella pagina (usa gli strumenti sviluppatore > Network > CSS)
- Nomi blocco: Alcuni blocchi di plugin potrebbero avere nomi diversi. Controlla il selettore effettivo con l’ispeziona elemento
Dalla personalizzazione manuale all’automazione
Se tutte queste personalizzazioni manuali ti sembrano complesse da gestire, esiste un’alternativa. Classy Blocks è un plugin gratuito per WordPress che ti permette di creare classi CSS personalizzate da un’interfaccia visuale, applicarle ai blocchi Gutenberg con un click, e gestire una libreria completa di stili pronti all’uso. Inoltre integra 8 framework CSS (Bootstrap, Bulma, UIkit, ecc.) attivabili con un click, senza dover scrivere codice CSS manualmente.
