{"id":1157,"date":"2026-01-03T09:19:57","date_gmt":"2026-01-03T09:19:57","guid":{"rendered":"https:\/\/studioimmens.com\/personalizzare-blocchi-gutenberg-css\/"},"modified":"2026-07-16T19:58:48","modified_gmt":"2026-07-16T17:58:48","slug":"personalizzare-blocchi-gutenberg-css","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/personalizzare-blocchi-gutenberg-css\/","title":{"rendered":"Come personalizzare i blocchi Gutenberg con CSS avanzato"},"content":{"rendered":"<p>Gutenberg offre ottime possibilit&agrave; 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&#8217;aspetto di qualsiasi blocco Gutenberg usando CSS, dalle basi fino a tecniche avanzate per creare design unici e professionali.<\/p>\n<h2>I selettori CSS dei blocchi Gutenberg<\/h2>\n<p>Ogni blocco Gutenberg ha uno o pi&ugrave; selettori CSS predefiniti che puoi usare per personalizzarlo. Conoscere questi selettori &egrave; il primo passo per un controllo totale sullo stile.<\/p>\n<h3>Selettori base dei blocchi principali<\/h3>\n<ul>\n<li><strong>.wp-block-paragraph<\/strong> &#8211; blocco paragrafo<\/li>\n<li><strong>.wp-block-heading<\/strong> &#8211; blocco titolo (h1-h6)<\/li>\n<li><strong>.wp-block-image<\/strong> &#8211; blocco immagine<\/li>\n<li><strong>.wp-block-columns<\/strong> &#8211; contenitore colonne<\/li>\n<li><strong>.wp-block-column<\/strong> &#8211; singola colonna<\/li>\n<li><strong>.wp-block-group<\/strong> &#8211; blocco gruppo<\/li>\n<li><strong>.wp-block-buttons<\/strong> &#8211; contenitore pulsanti<\/li>\n<li><strong>.wp-block-button<\/strong> &#8211; singolo pulsante<\/li>\n<li><strong>.wp-block-cover<\/strong> &#8211; blocco copertina<\/li>\n<li><strong>.wp-block-media-text<\/strong> &#8211; blocco media e testo<\/li>\n<li><strong>.wp-block-list<\/strong> &#8211; blocco elenco<\/li>\n<li><strong>.wp-block-quote<\/strong> &#8211; blocco citazione<\/li>\n<li><strong>.wp-block-code<\/strong> &#8211; blocco codice<\/li>\n<li><strong>.wp-block-separator<\/strong> &#8211; linea separatrice<\/li>\n<li><strong>.wp-block-spacer<\/strong> &#8211; blocco spaziatore<\/li>\n<li><strong>.wp-block-embed<\/strong> &#8211; blocco incorporamento<\/li>\n<\/ul>\n<h2>Tecniche di personalizzazione avanzata<\/h2>\n<h3>1. Combinare selettori con classi personalizzate<\/h3>\n<p>Il vero potere arriva quando combini i selettori di blocco con le tue classi personalizzate:<\/p>\n<pre><code>\/* Solo gli heading con classe \"titolo-hero\" *\/\n.wp-block-heading.titolo-hero {\n    font-size: clamp(2.5rem, 6vw, 4.5rem);\n    font-weight: 800;\n    line-height: 1.05;\n    letter-spacing: -0.03em;\n    background: linear-gradient(135deg, #0f172a 0%, #00c7b1 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\n\/* Solo i paragrafi all'interno di una card *\/\n.wp-block-paragraph.testo-card {\n    font-size: 1.05rem;\n    line-height: 1.7;\n    color: #4b5563;\n    max-width: 65ch;\n}<\/code><\/pre>\n<h3>2. Personalizzare colonne e layout<\/h3>\n<pre><code>\/* Colonne con gap personalizzato *\/\n.wp-block-columns.colonne-spaziose {\n    gap: 40px;\n}\n\n\/* Singola colonna con sfondo *\/\n.wp-block-column.colonna-in-evidenza {\n    background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);\n    padding: 32px;\n    border-radius: 16px;\n    box-shadow: 0 4px 20px rgba(0, 199, 177, 0.08);\n}\n\n\/* Layout responsive personalizzato *\/\n@media (max-width: 768px) {\n    .wp-block-columns.colonne-impilate-mobile {\n        flex-direction: column;\n    }\n}<\/code><\/pre>\n<h3>3. Effetti hover su gruppi e colonne<\/h3>\n<pre><code>\/* Gruppo con effetto hover *\/\n.wp-block-group.card-interattiva {\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    cursor: pointer;\n}\n\n.wp-block-group.card-interattiva:hover {\n    transform: translateY(-8px);\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);\n}\n\n\/* Cambio colore di tutti gli elementi figlio all'hover *\/\n.wp-block-group.card-interattiva:hover .wp-block-heading {\n    color: #00c7b1;\n}<\/code><\/pre>\n<h3>4. Personalizzare le immagini con CSS avanzato<\/h3>\n<pre><code>\/* Immagine con effetto rivelazione *\/\n.wp-block-image.img-rivelazione img {\n    mask-image: linear-gradient(to bottom, transparent 0%, black 30%);\n    transition: mask-image 0.6s ease;\n}\n\n.wp-block-image.img-rivelazione:hover img {\n    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);\n}\n\n\/* Galleria a mosaico personalizzata *\/\n.wp-block-gallery.galleria-mosaico {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n    gap: 16px;\n}\n\n.wp-block-gallery.galleria-mosaico .wp-block-image {\n    margin: 0;\n    height: 250px;\n    overflow: hidden;\n    border-radius: 12px;\n}\n\n.wp-block-gallery.galleria-mosaico .wp-block-image img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.4s ease;\n}\n\n.wp-block-gallery.galleria-mosaico .wp-block-image:hover img {\n    transform: scale(1.08);\n}<\/code><\/pre>\n<h3>5. Stilizzare i pulsanti Gutenberg<\/h3>\n<pre><code>\/* Pulsante con effetto vetro *\/\n.wp-block-button.btn-vetro .wp-block-button__link {\n    background: rgba(255, 255, 255, 0.1) !important;\n    backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    color: white !important;\n    font-weight: 600;\n}\n\n.wp-block-button.btn-vetro .wp-block-button__link:hover {\n    background: rgba(255, 255, 255, 0.2) !important;\n    transform: scale(1.02);\n}\n\n\/* Pulsante con bordo animato *\/\n.wp-block-button.btn-bordo-animato .wp-block-button__link {\n    position: relative;\n    overflow: hidden;\n}\n\n.wp-block-button.btn-bordo-animato .wp-block-button__link::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 50%;\n    width: 0;\n    height: 2px;\n    background: currentColor;\n    transition: all 0.3s ease;\n    transform: translateX(-50%);\n}\n\n.wp-block-button.btn-bordo-animato .wp-block-button__link:hover::after {\n    width: 80%;\n}<\/code><\/pre>\n<h2>Personalizzare l&#8217;editor Gutenberg<\/h2>\n<p>Per vedere le tue personalizzazioni anche nell&#8217;editor (non solo nel frontend), devi caricare i CSS anche per l&#8217;editor:<\/p>\n<pre><code>\/\/ functions.php\nadd_action('enqueue_block_editor_assets', function() {\n    wp_add_inline_style('wp-blocks', '\n        .wp-block-heading.titolo-editor-personalizzato {\n            font-size: 2rem;\n            color: #00c7b1;\n            border-left: 4px solid #00c7b1;\n            padding-left: 16px;\n        }\n    ');\n});<\/code><\/pre>\n<h2>Debug: perch&eacute; il tuo CSS non funziona<\/h2>\n<p>Se le tue personalizzazioni non vengono applicate, ecco i controlli da fare:<\/p>\n<ol>\n<li><strong>Specificit&agrave;:<\/strong> I CSS del tema potrebbero sovrascrivere i tuoi. Usa selettori pi&ugrave; specifici o aggiungi <code>!important<\/code> (con moderazione)<\/li>\n<li><strong>Cache:<\/strong> Il browser potrebbe servire una versione cache del CSS. Prova a svuotare la cache o aggiungi un parametro versione<\/li>\n<li><strong>Enqueue:<\/strong> Verifica che i tuoi CSS siano effettivamente caricati nella pagina (usa gli strumenti sviluppatore &gt; Network &gt; CSS)<\/li>\n<li><strong>Nomi blocco:<\/strong> Alcuni blocchi di plugin potrebbero avere nomi diversi. Controlla il selettore effettivo con l&#8217;ispeziona elemento<\/li>\n<\/ol>\n<h2>Dalla personalizzazione manuale all&#8217;automazione<\/h2>\n<p>Se tutte queste personalizzazioni manuali ti sembrano complesse da gestire, esiste un&#8217;alternativa. <strong>Classy Blocks<\/strong> &egrave; un plugin gratuito per WordPress che ti permette di creare classi CSS personalizzate da un&#8217;interfaccia visuale, applicarle ai blocchi Gutenberg con un click, e gestire una libreria completa di stili pronti all&#8217;uso. Inoltre integra 8 framework CSS (Bootstrap, Bulma, UIkit, ecc.) attivabili con un click, senza dover scrivere codice CSS manualmente.<\/p>","protected":false},"excerpt":{"rendered":"<p>Gutenberg offre ottime possibilit&agrave; 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&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2291,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_gspb_post_css":"","ai_primary_source":"0","visibility_scope":"both","ai_summary":"","ai_intent":"informative","ai_related_resources":"","ai_priority":5,"ai_entity_type":"","ai_is_based_on":"","ai_citations":"","ai_mentions":"","ai_speakable_selector":"","ai_chunk_hints":"","footnotes":""},"categories":[40],"tags":[111,109,110,53],"ai_visibility":[55],"class_list":["post-1157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-classi-css","tag-gutenberg-css","tag-sviluppo-wordpress","tag-user-experience"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/comments?post=1157"}],"version-history":[{"count":2,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1157\/revisions"}],"predecessor-version":[{"id":2144,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1157\/revisions\/2144"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/2291"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1157"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}