{"id":1156,"date":"2026-01-02T19:17:36","date_gmt":"2026-01-02T19:17:36","guid":{"rendered":"https:\/\/studioimmens.com\/aggiungere-classi-css-blocchi-gutenberg\/"},"modified":"2026-07-16T19:58:17","modified_gmt":"2026-07-16T17:58:17","slug":"aggiungere-classi-css-blocchi-gutenberg","status":"publish","type":"post","link":"https:\/\/studioimmens.com\/en\/aggiungere-classi-css-blocchi-gutenberg\/","title":{"rendered":"Come aggiungere classi CSS ai blocchi Gutenberg"},"content":{"rendered":"<p>Se utilizzi Gutenberg, il block editor di WordPress, sai bene che ogni blocco ha gi&agrave; un campo &#8220;Classe CSS aggiuntiva&#8221; nelle impostazioni avanzate. Ma sai davvero come sfruttare al massimo questa funzionalit&agrave;? 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.<\/p>\n<h2>Il campo &#8220;Classe CSS aggiuntiva&#8221; di Gutenberg: dove si trova<\/h2>\n<p>Ogni blocco Gutenberg ha un pannello laterale di impostazioni che si apre quando selezioni il blocco. Per trovare il campo delle classi CSS:<\/p>\n<ol>\n<li><strong>Seleziona un blocco<\/strong> nella pagina (paragrafo, heading, immagine, colonna, ecc.)<\/li>\n<li><strong>Apri il pannello &#8220;Impostazioni blocco&#8221;<\/strong> nella sidebar destra (icona a forma di ingranaggio)<\/li>\n<li><strong>Scorri fino in fondo<\/strong> fino alla sezione &#8220;Avanzato&#8221;<\/li>\n<li><strong>Troverai il campo &#8220;Classe CSS aggiuntiva&#8221;<\/strong>: qui puoi inserire una o pi&ugrave; classi separate da spazio<\/li>\n<\/ol>\n<p>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&agrave; immediatamente tutti gli stili associati.<\/p>\n<h2>Perch&egrave; usare classi CSS personalizzate in Gutenberg<\/h2>\n<p>Lavorare con classi CSS invece di scrivere codice ogni volta ha numerosi vantaggi:<\/p>\n<ul>\n<li><strong>Riutilizzo immediato<\/strong>: crei una classe una volta e la applichi a centinaia di blocchi<\/li>\n<li><strong>Manutenzione semplificata<\/strong>: modifichi la classe in un punto e si aggiorna ovunque<\/li>\n<li><strong>Coerenza visiva<\/strong>: stesso stile su tutto il sito, senza derive estetiche<\/li>\n<li><strong>Velocit&agrave; di sviluppo<\/strong>: non devi scrivere CSS per ogni singolo elemento<\/li>\n<li><strong>Performance migliori<\/strong>: meno codice CSS significa fogli di stile pi&ugrave; leggeri<\/li>\n<li><strong>Collaborazione facilitata<\/strong>: team e clienti possono applicare classi senza sapere CSS<\/li>\n<\/ul>\n<h2>Come creare le tue prime classi CSS per Gutenberg<\/h2>\n<p>Puoi aggiungere classi CSS al tuo tema WordPress in diversi modi. Ecco i pi&ugrave; comuni:<\/p>\n<h3>Metodo 1: Aggiungere CSS al file style.css del tema<\/h3>\n<p>Il metodo pi&ugrave; tradizionale. Apri il file style.css del tuo tema (nella cartella \/wp-content\/themes\/nome-tema\/) e aggiungi le tue classi:<\/p>\n<pre><code>\/* Classe per box con ombra *\/\n.box-elegante {\n    background: #ffffff;\n    border: 1px solid #e5e7eb;\n    border-radius: 12px;\n    padding: 24px;\n    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    transition: box-shadow 0.3s ease, transform 0.3s ease;\n}\n\n.box-elegante:hover {\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n}\n\n\/* Classe per titoli decorativi *\/\n.titolo-sezione {\n    font-size: 2.5rem;\n    font-weight: 800;\n    line-height: 1.2;\n    background: linear-gradient(135deg, #00c7b1, #0d9488);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n\/* Classe per immagini con bordo decorativo *\/\n.img-cornice {\n    border: 4px solid #f8fafc;\n    border-radius: 16px;\n    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);\n}\n\n\/* Classe per spaziatura personalizzata *\/\n.sezione-spaziosa {\n    padding: 60px 20px;\n    margin: 40px 0;\n}\n\n\/* Classe per sfondo a griglia *\/\n.sfondo-griglia {\n    background-image: \n        linear-gradient(rgba(0, 199, 177, 0.05) 1px, transparent 1px),\n        linear-gradient(90deg, rgba(0, 199, 177, 0.05) 1px, transparent 1px);\n    background-size: 40px 40px;\n}<\/code><\/pre>\n<h3>Metodo 2: Aggiungere CSS via functions.php<\/h3>\n<p>Se preferisci mantenere il CSS separato dal tema o lavori con un tema figlio:<\/p>\n<pre><code>\/\/ functions.php del tuo tema\nadd_action('wp_enqueue_scripts', function() {\n    wp_add_inline_style('global-styles', '\n        .box-highlight {\n            background: linear-gradient(135deg, #f0fdfa, #ccfbf1);\n            border-left: 4px solid #00c7b1;\n            padding: 20px 24px;\n            border-radius: 0 8px 8px 0;\n        }\n        \n        .testo-attenzione {\n            color: #dc2626;\n            font-weight: 600;\n            padding: 8px 16px;\n            background: #fef2f2;\n            border-radius: 6px;\n            display: inline-block;\n        }\n        \n        .flex-centro {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 16px;\n        }\n    ');\n});<\/code><\/pre>\n<h3>Metodo 3: Usare un plugin (consigliato per non sviluppatori)<\/h3>\n<p>Se non vuoi scrivere codice o gestire file, <strong>Classy Blocks<\/strong> &egrave; la soluzione ideale. &Egrave; un plugin WordPress gratuito che ti permette di:<\/p>\n<ul>\n<li>Creare classi CSS da un&#8217;interfaccia visuale nell&#8217;admin<\/li>\n<li>Vedere l&#8217;anteprima delle tue classi in tempo reale<\/li>\n<li>Gestire hover e focus states separatamente<\/li>\n<li>Organizzare le classi in una libreria riutilizzabile<\/li>\n<li>Esportare e importare la libreria tra siti diversi<\/li>\n<\/ul>\n<h2>Come applicare le classi ai blocchi Gutenberg<\/h2>\n<p>Una volta create le tue classi, applicarle ai blocchi &egrave; semplicissimo:<\/p>\n<ol>\n<li>Seleziona il blocco che vuoi personalizzare<\/li>\n<li>Nella sidebar destra, apri la sezione &#8220;Avanzato&#8221;<\/li>\n<li>Nel campo &#8220;Classe CSS aggiuntiva&#8221;, scrivi il nome della tua classe (es. &#8220;box-elegante&#8221;)<\/li>\n<li>Puoi combinare pi&ugrave; classi separandole con uno spazio (es. &#8220;box-elegante titolo-sezione&#8221;)<\/li>\n<li>Il blocco si aggiorner&agrave; immediatamente con i nuovi stili<\/li>\n<\/ol>\n<h2>Errori comuni e come evitarli<\/h2>\n<p><strong>Errore 1: Nome della classe sbagliato<\/strong><br \/>Verifica sempre che il nome della classe nell&#8217;editor corrisponda esattamente a quello definito nel CSS (inclusi maiuscole, trattini e underscore).<\/p>\n<p><strong>Errore 2: CSS non caricato<\/strong><br \/>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.<\/p>\n<p><strong>Errore 3: Specificit&agrave; troppo bassa<\/strong><br \/>Se la classe non viene applicata, potrebbe essere sovrascritta da altri CSS. Aumenta la specificit&agrave; o usa <code>!important<\/code> con parsimonia.<\/p>\n<p><strong>Errore 4: Classe non visibile nell&#8217;editor ma visibile nel frontend<\/strong><br \/>Alcuni temi non caricano i CSS personalizzati nell&#8217;editor. Verifica che i tuoi CSS siano enqueue anche per l&#8217;editor.<\/p>\n<h2>Esempi pratici di combinazioni efficaci<\/h2>\n<h3>Card prodotto<\/h3>\n<pre><code>.card-prodotto {\n    background: white;\n    border-radius: 16px;\n    padding: 32px;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    text-align: center;\n    transition: all 0.3s ease;\n}\n.card-prodotto:hover {\n    box-shadow: 0 12px 24px rgba(0,0,0,0.12);\n    transform: translateY(-4px);\n}<\/code><\/pre>\n<p>Combinala con <code>class=\"card-prodotto\"<\/code> su un gruppo colonne in Gutenberg.<\/p>\n<h3>Badge personalizzato<\/h3>\n<pre><code>.badge-nuovo {\n    display: inline-block;\n    background: #00c7b1;\n    color: white;\n    font-size: 0.75rem;\n    font-weight: 700;\n    padding: 4px 12px;\n    border-radius: 999px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n}<\/code><\/pre>\n<p>Applica <code>class=\"badge-nuovo\"<\/code> a un paragrafo per ottenere un badge professionale.<\/p>\n<h2>Conclusioni e migliori pratiche<\/h2>\n<p>Gestire le classi CSS in Gutenberg &egrave; un&#8217;abilit&agrave; fondamentale per chiunque lavori con WordPress. Che tu scelga di scrivere CSS manualmente o di usare un plugin, l&#8217;importante &egrave; creare un sistema organizzato e riutilizzabile.<\/p>\n<p>Se vuoi semplificarti la vita e lavorare in modo pi&ugrave; visuale, <a href=\"https:\/\/studioimmens.com\/en\/classy-blocks\/\">Classy Blocks<\/a> &egrave; un plugin gratuito che ti permette di creare, gestire e applicare classi CSS personalizzate ai blocchi Gutenberg con un&#8217;interfaccia intuitiva, senza scrivere una riga di codice.<\/p>","protected":false},"excerpt":{"rendered":"<p>Se utilizzi Gutenberg, il block editor di WordPress, sai bene che ogni blocco ha gi&agrave; un campo &#8220;Classe CSS aggiuntiva&#8221; nelle impostazioni avanzate. Ma sai davvero come sfruttare al massimo questa funzionalit&agrave;? In questa guida completa vedremo come aggiungere, gestire e organizzare le classi CSS nei blocchi Gutenberg, partendo dalle basi fino a tecniche avanzate [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2293,"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,49,110],"ai_visibility":[55],"class_list":["post-1156","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo-web","tag-classi-css","tag-gutenberg-css","tag-seo","tag-sviluppo-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1156","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=1156"}],"version-history":[{"count":1,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1156\/revisions"}],"predecessor-version":[{"id":1176,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/posts\/1156\/revisions\/1176"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media\/2293"}],"wp:attachment":[{"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/media?parent=1156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/categories?post=1156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/tags?post=1156"},{"taxonomy":"ai_visibility","embeddable":true,"href":"https:\/\/studioimmens.com\/en\/wp-json\/wp\/v2\/ai_visibility?post=1156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}