{"id":128611,"date":"2025-09-04T09:00:00","date_gmt":"2025-09-04T07:00:00","guid":{"rendered":"https:\/\/supporthost.com\/it\/?p=128611"},"modified":"2025-10-20T21:56:11","modified_gmt":"2025-10-20T19:56:11","slug":"visibilita-blocchi-wordpress","status":"publish","type":"post","link":"https:\/\/supporthost.com\/it\/visibilita-blocchi-wordpress\/","title":{"rendered":"Come gestire la visibilit\u00e0 dei blocchi di WordPress"},"content":{"rendered":"\n<p>Vuoi poter controllare la visibilit\u00e0 dei blocchi di WordPress in modo che alcuni elementi (ad esempio un banner) appaiano solo in certe condizioni? <\/p>\n\n\n\n<p>In questa guida ti mostreremo passo passo come fare a modificare la visibilit\u00e0 dei blocchi aggiunti nelle tue pagine o nei tuoi articoli. <\/p>\n\n\n\n<p>Iniziamo!<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Indice<\/h2><nav><ul><li><a href=\"#come-gestire-la-visibilita-dei-blocchi-su-word-press\">Come gestire la visibilit\u00e0 dei blocchi su WordPress<\/a><\/li><li><a href=\"#come-modificare-le-condizioni-di-visibilita-dei-blocchi-con-block-visibility\">Come modificare le condizioni di visibilit\u00e0 dei blocchi con Block Visibility<\/a><ul><li><a href=\"#installazione-e-configurazione-del-plugin-block-visibility\">Installazione e configurazione del plugin Block Visibility<\/a><\/li><li><a href=\"#controllare-la-visibilita-dei-blocchi\">Controllare la visibilit\u00e0 dei blocchi<\/a><\/li><\/ul><\/li><li><a href=\"#altri-plugin-per-gestire-la-visibilita-dei-blocchi\">Altri plugin per gestire la visibilit\u00e0 dei blocchi<\/a><ul><li><a href=\"#gestire-la-visibilita-dei-blocchi-con-conditional-blocks\">Gestire la visibilit\u00e0 dei blocchi con Conditional Blocks<\/a><\/li><li><a href=\"#cambiare-la-visibilita-dei-blocchi-con-otter-blocks\">Cambiare la visibilit\u00e0 dei blocchi con Otter Blocks<\/a><\/li><li><a href=\"#controllare-la-visibilita-dei-blocchi-con-kadence\">Controllare la visibilit\u00e0 dei blocchi con Kadence<\/a><\/li><\/ul><\/li><li><a href=\"#conclusioni\">Conclusioni<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-gestire-la-visibilita-dei-blocchi-su-word-press\">Come gestire la visibilit\u00e0 dei blocchi su WordPress<\/h2>\n\n\n\n<p>Di default WordPress non offre funzioni che ci permettono di rendere alcuni blocchi <strong>nascosti <\/strong>o <strong>visibili <\/strong>solo <strong>in certe condizioni<\/strong>.<\/p>\n\n\n\n<p>Pensiamo per esempio di voler inserire un form di iscrizione a un webinar sul nostro sito e mostrarlo solo in determinate condizioni, ad esempio <strong>in certe date<\/strong>. Per farlo bisogner\u00e0 creare il form e poi renderlo &#8220;nascosto&#8221; finch\u00e9 non arriva il periodo da noi definito.<\/p>\n\n\n\n<p>Visto che non c&#8217;\u00e8 una funzione integrata, per riuscire ad aggiungere delle <em>regole di visibilit\u00e0<\/em> ai nostri blocchi di WordPress, dobbiamo ricorrere quindi a soluzioni alternative.<\/p>\n\n\n\n<p>Come vedremo in questa guida, uno dei metodi che possiamo usare \u00e8 installare un <strong>plugin <\/strong>pensato proprio per questo scopo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"come-modificare-le-condizioni-di-visibilita-dei-blocchi-con-block-visibility\">Come modificare le condizioni di visibilit\u00e0 dei blocchi con Block Visibility<\/h2>\n\n\n\n<p><strong>Block Visibility<\/strong> di Nick Diego \u00e8 un plugin che ci permette di applicare delle condizioni di visibilit\u00e0 ai singoli blocchi.<\/p>\n\n\n\n<p>Il plugin funziona con tutti i tipi di blocchi e questo include, oltre ai blocchi gi\u00e0 integrati su WordPress, anche quelli aggiunti da<strong> plugin o temi di terze parti<\/strong> o i <a href=\"https:\/\/supporthost.com\/it\/blocchi-gutenberg\/\">blocchi custom<\/a> che possiamo creare. Questo \u00e8 un vantaggio perch\u00e9 se stiamo utilizzando un tema a blocchi come <a href=\"https:\/\/supporthost.com\/it\/generatepress\/\" data-type=\"post\" data-id=\"68792\">GeneratePress<\/a>, possiamo anche sfruttare questo plugin per i blocchi specifici.<\/p>\n\n\n\n<p>In questo esempio \u00e8 mostrato come cambiare la visibilit\u00e0 di un blocco &#8220;<em>Button<\/em>&#8221; aggiunto dal plugin <a href=\"https:\/\/supporthost.com\/it\/generateblocks\/\" data-type=\"post\" data-id=\"69890\">GenerateBlocks<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"444\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-blocchi-terze-parti-1024x444.png\" alt=\"Block Visibility Blocchi Terze Parti\" class=\"wp-image-128616\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-blocchi-terze-parti-1024x444.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-blocchi-terze-parti-300x130.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-blocchi-terze-parti-768x333.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-blocchi-terze-parti-120x52.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-blocchi-terze-parti-1536x665.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-blocchi-terze-parti.png 1909w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"installazione-e-configurazione-del-plugin-block-visibility\">Installazione e configurazione del plugin Block Visibility<\/h3>\n\n\n\n<p>Come sempre per poter utilizzare un plugin su WordPress, bisogna installarlo e attivarlo. Dalla bacheca del tuo sito WordPress vai su <em>Plugin &gt; Aggiungi plugin<\/em> e cerca &#8220;<em>Block visibility<\/em>&#8220;, poi clicca su &#8220;<strong>Installa ora<\/strong>&#8221; e successivamente su &#8220;<strong>Attiva<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/installare-plugin-block-visibility-1024x494.png\" alt=\"Installare Plugin Block Visibility\" class=\"wp-image-128612\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/installare-plugin-block-visibility-1024x494.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/installare-plugin-block-visibility-300x145.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/installare-plugin-block-visibility-768x370.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/installare-plugin-block-visibility-120x58.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/installare-plugin-block-visibility-1536x741.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/installare-plugin-block-visibility.png 1901w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Dopo che il plugin \u00e8 attivo, possiamo andare a modificare le impostazioni andando su <em>Impostazioni &gt; Block Visibility<\/em>.<\/p>\n\n\n\n<p>Nella scheda &#8220;<strong>General Settings<\/strong>&#8221; troviamo diverse opzioni che possono esserci utili.<\/p>\n\n\n\n<p><strong>User permissions<\/strong>: da questa opzione possiamo scegliere se rendere le opzioni del plugin (e quindi la possibilit\u00e0 di controllare la visibilit\u00e0 dei blocchi) accessibili solo ad alcuni tipi di utente. Possiamo spuntare i diversi ruoli dopo aver attivato l&#8217;opzione. Se hai dubbi su come funzionano, leggi la nostra guida ai <a href=\"https:\/\/supporthost.com\/it\/ruoli-wordpress\/\">ruoli utente su WordPress<\/a>.<\/p>\n\n\n\n<p>Ad esempio in questo caso, ho attivato i controlli di visibilit\u00e0 solo agli utenti con ruolo <em>Editore<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"980\" height=\"348\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-user-permissions.png\" alt=\"Block Visibility Impostazioni User Permissions\" class=\"wp-image-128613\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-user-permissions.png 980w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-user-permissions-300x107.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-user-permissions-768x273.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-user-permissions-120x43.png 120w\" sizes=\"auto, (max-width: 980px) 100vw, 980px\" \/><\/figure>\n\n\n\n<p>Dalla scheda &#8220;<strong>Visibility Controls<\/strong>&#8221; possiamo scegliere quali opzioni del plugin utilizzare. Questa possibilit\u00e0 \u00e8 molto utile perch\u00e9, come vedremo tra poco, il plugin mette a disposizione tanti controlli sulla visibilit\u00e0.<\/p>\n\n\n\n<p>Infatti, quando andremo a modificare la visibilit\u00e0 dei blocchi vedremo una <strong>lunga serie di opzioni<\/strong> disponibili ed \u00e8 pi\u00f9 utile rimuovere le opzioni che effettivamente <strong>non ci servono<\/strong> in modo da avere una visione pi\u00f9 <em>snella<\/em> poi nell&#8217;editor di WordPress.<\/p>\n\n\n\n<p>In questa schermata ti mostro parte delle opzioni che puoi scegliere di disattivare. Tieni presente che se non cambi nessuna impostazione, <strong>vedrai tutte le opzioni disponibili<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"556\" height=\"867\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-visibility-controls.png\" alt=\"Block Visibility Impostazioni Visibility Controls\" class=\"wp-image-128614\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-visibility-controls.png 556w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-visibility-controls-192x300.png 192w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-visibility-controls-40x63.png 40w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/figure>\n\n\n\n<p>Spostandoci sulla scheda &#8220;<strong>Block Manager<\/strong>&#8221; possiamo andare ad agire in maniera ancora pi\u00f9 <em>granulare<\/em> e scegliere per quali <strong>blocchi <\/strong>rendere disponibili i controlli di visibilit\u00e0.<\/p>\n\n\n\n<p>In questo esempio puoi vedere che sono stati esclusi alcuni tipi di blocchi.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"994\" height=\"893\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-block-manager.png\" alt=\"Block Visibility Impostazioni Block Manager\" class=\"wp-image-128615\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-block-manager.png 994w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-block-manager-300x270.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-block-manager-768x690.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-impostazioni-block-manager-70x63.png 70w\" sizes=\"auto, (max-width: 994px) 100vw, 994px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"controllare-la-visibilita-dei-blocchi\">Controllare la visibilit\u00e0 dei blocchi<\/h3>\n\n\n\n<p>Ora che abbiamo visto le varie impostazioni di Block Visibility, vediamo come si usa nella pratica.<\/p>\n\n\n\n<p>Dopo averlo attivato, il plugin sar\u00e0 disponibile su tutto il sito: questo significa che andando a modificare pagine o articoli dall&#8217;editor di WordPress (<a href=\"https:\/\/supporthost.com\/it\/gutenberg\/\" data-type=\"post\" data-id=\"22269\">Gutenberg<\/a>), vedremo una nuova sezione di impostazioni nelle <strong>opzioni del blocco<\/strong>.<\/p>\n\n\n\n<p>Ci basta:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>selezionare il blocco che vogliamo modificare;<\/li>\n\n\n\n<li>cliccare su &#8220;Visibility&#8221; dalle opzioni del blocco;<\/li>\n\n\n\n<li>dovremo quindi aggiungere il tipo di controllo che vogliamo attivare.<\/li>\n<\/ul>\n\n\n\n<p>I <em>tipi di controllo<\/em> si possono anche combinare tra loro, adesso ti spiegher\u00f2 brevemente come funzionano e poi vedremo un esempio in dettaglio.<\/p>\n\n\n\n<p><strong>Browser &amp; Device<\/strong>: la visibilit\u00e0 del blocco pu\u00f2 essere limitata a uno o pi\u00f9 browser (es. Chrome), alla piattaforma (intesa come sistema operativo) o al tipo di dispositivo (mobile, desktop o robot). In questo esempio ho applicato la regola per mostrare il blocco solo da dispositivi mobili.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"922\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/blocco-visibile-solo-da-mobile-block-visibility.gif\" alt=\"Blocco Visibile Solo Da Mobile Block Visibility\" class=\"wp-image-128617\" \/><\/figure>\n\n\n\n<p><strong>Cookie<\/strong>: possiamo indicare un cookie in base al quale mostrare o nascondere il blocco.<\/p>\n\n\n\n<p><strong>Date &amp; Time<\/strong>: possiamo impostare una pianificazione in base a delle date specifiche in cui il blocco sar\u00e0 reso visibile (o al contrario, sar\u00e0 nascosto).<\/p>\n\n\n\n<p><strong>Hide block<\/strong>: \u00e8 un&#8217;opzione rapida che permette di nascondere quel blocco specifico (senza andare a specificare nessuna condizione).<\/p>\n\n\n\n<p><strong>Location<\/strong>: impostiamo la visibilit\u00e0 in base alla <strong>posizione del blocco<\/strong>. Ad esempio possiamo scegliere mostrare il blocco solo nei <em>post type<\/em> &#8220;articolo&#8221; oppure nei <a href=\"https:\/\/supporthost.com\/it\/custom-post-type\/\" data-type=\"post\" data-id=\"44303\">custom post type<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"340\" height=\"370\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-location.png\" alt=\"Block Visibility Visibilit\u00e0 Location\" class=\"wp-image-128618\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-location.png 340w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-location-276x300.png 276w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-location-58x63.png 58w\" sizes=\"auto, (max-width: 340px) 100vw, 340px\" \/><\/figure>\n\n\n\n<p><strong>Metadata<\/strong>: possiamo definire una regola in base ai metadati dell&#8217;articolo o dell&#8217;utente. Pu\u00f2 essere utile da combinare con i campi custom.<\/p>\n\n\n\n<p><strong>Query string<\/strong>: qui possiamo aggiungere una regola in base ai parametri nell&#8217;URL.<\/p>\n\n\n\n<p><strong>Referral Source<\/strong>: possiamo indicare l&#8217;URL (o parte di esso) di <strong>provenienza <\/strong>del visitatore cos\u00ec da mostrare un blocco differente (o nasconderlo).<\/p>\n\n\n\n<p><strong>Screen size<\/strong>: da qui possiamo modificare la visibilit\u00e0 in base alla dimensione dello schermo e quindi scegliere se rendere un blocco nascosto da desktop, tablet o mobile.<\/p>\n\n\n\n<p><strong>URL path<\/strong>: indichiamo l&#8217;URL della pagina per definire in quali casi mostrare il blocco. Per esempio se volessi mostrare un blocco solo in articoli di una certa categoria, potrei inserire &#8220;<code>\/categoria\/sport\/<\/code>&#8221; nel campo &#8220;URL Path (Contains)&#8221;.<\/p>\n\n\n\n<p><strong>User Role<\/strong>: usiamo questa opzione per rendere visibile il blocco in base al ruolo utente (da pubblico &#8211; per tutti; fino a utenti loggati oppure in base al ruolo di WordPress, ad esempio solo a editor e amministratori).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"343\" height=\"331\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-user-role.png\" alt=\"Block Visibility Visibilit\u00e0 User Role\" class=\"wp-image-128619\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-user-role.png 343w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-user-role-300x290.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/block-visibility-visibilita-user-role-65x63.png 65w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/figure>\n\n\n\n<p>Visto che le diverse impostazioni si possono combinare, \u00e8 utile sfruttare anche l&#8217;opzione &#8220;<strong>Visibility presets<\/strong>&#8221; che ci permette di salvare delle pre-impostazioni e applicarle poi a vari blocchi. Per farlo ci verr\u00e0 chiesto di creare un preset.<\/p>\n\n\n\n<p>Questa opzione pu\u00f2 essere utile se vogliamo applicare le <strong>stesse condizioni di visibilit\u00e0 a diversi blocchi<\/strong> in maniera pi\u00f9 rapida. Nell&#8217;esempio qui sotto ho creato un preset con due <em>controlli<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>il primo con &#8220;<em>Date &amp; time<\/em>&#8221; per rendere il blocco visibile solo di luned\u00ec;<\/li>\n\n\n\n<li>il secondo con &#8220;<em>Browser &amp; device<\/em>&#8221; per renderlo visibile solo per chi visita il sito da <em>mobile<\/em>.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/esempio-preset-block-visibility-1024x590.png\" alt=\"Esempio Preset Block Visibility\" class=\"wp-image-128620\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/esempio-preset-block-visibility-1024x590.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/esempio-preset-block-visibility-300x173.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/esempio-preset-block-visibility-768x443.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/esempio-preset-block-visibility-109x63.png 109w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/esempio-preset-block-visibility.png 1364w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"altri-plugin-per-gestire-la-visibilita-dei-blocchi\">Altri plugin per gestire la visibilit\u00e0 dei blocchi<\/h2>\n\n\n\n<p>Oltre a Block Visibility, ci sono anche altri plugin che ci permettono di controllare la visibilit\u00e0 dei blocchi sul nostro sito.<\/p>\n\n\n\n<p>Ci sono due tipologie principali di plugin che ci permettono di gestire le condizioni in cui mostrare i blocchi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>i plugin <strong>specifici <\/strong>che aggiungono solo questa funzione: in questa categoria rientra Block Visibility, che abbiamo gi\u00e0 visto, e un altro esempio \u00e8 dato da Conditional Blocks (che vedremo pi\u00f9 avanti in questa guida);<\/li>\n\n\n\n<li>i plugin che estendono le funzionalit\u00e0 di <strong>Gutenberg<\/strong>: in questa categoria ci sono plugin che vanno ad aggiungere blocchi e impostazioni aggiuntivi tra cui Otter Blocks e Kadence Blocks.<\/li>\n<\/ul>\n\n\n\n<p>Andiamo a vedere brevemente come usarli.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"gestire-la-visibilita-dei-blocchi-con-conditional-blocks\">Gestire la visibilit\u00e0 dei blocchi con Conditional Blocks<\/h3>\n\n\n\n<p><strong>Conditional Blocks<\/strong> \u00e8 un plugin che \u00e8 disponibile in una versione gratuita, <em>leggermente limitata<\/em>, e in versione Pro a partire da 49$ all&#8217;anno (per una licenza valida per singolo sito web).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"823\" height=\"345\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-plugin-dashboard-wordpress.png\" alt=\"Conditional Blocks Plugin Dashboard WordPress\" class=\"wp-image-128621\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-plugin-dashboard-wordpress.png 823w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-plugin-dashboard-wordpress-300x126.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-plugin-dashboard-wordpress-768x322.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-plugin-dashboard-wordpress-120x50.png 120w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><\/figure>\n\n\n\n<p>La versione gratuita del plugin ha delle funzionalit\u00e0 <strong>limitate <\/strong>per quanto riguarda le condizioni di visibilit\u00e0 disponibili. Per sbloccare tutte e 36 le condizioni, bisogna passare alla versione a pagamento.<\/p>\n\n\n\n<p>Nel nostro caso abbiamo testato solo la versione gratuita. Dopo aver installato e attivato il plugin, nella scheda <em>Blocco<\/em> vedremo una nuova voce &#8220;<em>Conditional Blocks<\/em>&#8220;, da qui potremo cliccare sul pulsante &#8220;<strong>Edit visibility<\/strong>&#8221; per andare a impostare le condizioni di visibilit\u00e0 di quel determinato blocco.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"493\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-pulsante-edit-visibility-1024x493.png\" alt=\"Conditional Blocks Pulsante Edit Visibility\" class=\"wp-image-128622\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-pulsante-edit-visibility-1024x493.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-pulsante-edit-visibility-300x144.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-pulsante-edit-visibility-768x369.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-pulsante-edit-visibility-120x58.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-pulsante-edit-visibility-1536x739.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/conditional-blocks-pulsante-edit-visibility.png 1894w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Si aprir\u00e0 quindi una finestra da cui potremo creare un nuovo Set di condizioni. Le condizioni disponibili nella versione gratuita sono:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>lockdown<\/strong>: nasconde il blocco per tutti gli utenti;<\/li>\n\n\n\n<li><strong>responsive<\/strong>: ci permette di gestire la visibilit\u00e0 in base alla dimensione dello schermo;<\/li>\n\n\n\n<li><strong>user logged in<\/strong>: il blocco sar\u00e0 visibile solo agli utenti che hanno effettuato l&#8217;accesso;<\/li>\n\n\n\n<li><strong>user logged out<\/strong>: il blocco sar\u00e0 visibile solo agli utenti che <strong>non hanno<\/strong> effettuato l&#8217;accesso.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"766\" height=\"854\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-responsive-conditional-blocks.png\" alt=\"Condizioni Responsive Conditional Blocks\" class=\"wp-image-128623\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-responsive-conditional-blocks.png 766w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-responsive-conditional-blocks-269x300.png 269w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-responsive-conditional-blocks-57x63.png 57w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/figure>\n\n\n\n<p>Rispetto a Block Visibility, che abbiamo visto prima, Conditional Blocks ha meno funzioni nella versione gratuita. Tieni presente che anche la possibilit\u00e0 di salvare i preset per applicarli rapidamente a pi\u00f9 blocchi \u00e8 riservata solo alla versione Pro.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"cambiare-la-visibilita-dei-blocchi-con-otter-blocks\">Cambiare la visibilit\u00e0 dei blocchi con Otter Blocks<\/h3>\n\n\n\n<p>Finora ci siamo concentrati su plugin creati appositamente per applicare condizioni ai blocchi di Gutenberg e renderli <strong>visibili in certe condizioni<\/strong>.<\/p>\n\n\n\n<p>Adesso, invece, ti mostrer\u00f2 un plugin che aggiunge delle funzionalit\u00e0 ai blocchi Gutenberg di base.<\/p>\n\n\n\n<p>Si tratta di Otter Blocks creato da Themeisle. Il plugin aggiunge <strong>20 nuovi blocchi<\/strong> oltre ad altre funzioni (come pattern e template aggiuntivi).<\/p>\n\n\n\n<p>Se vogliamo applicare delle condizioni di visibilit\u00e0 ai blocchi e stiamo gi\u00e0 usando Otter Blocks o vogliamo anche aggiungere blocchi extra, possiamo prendere <em>due piccioni con una fava<\/em> scegliendo di utilizzare questo plugin.<\/p>\n\n\n\n<p>Otter Blocks \u00e8 disponibile in versione gratuita, installabile direttamente dal backend di WordPress e in versione Premium. La versione premium, Otter Pro, \u00e8 disponibile a partire da 69\u20ac all&#8217;anno (per una licenza valida per singolo sito). In questo caso andremo a vedere le funzioni della versione gratuita del plugin.<\/p>\n\n\n\n<p>Una volta installato e attivato, Otter Blocks va ad aggiungere in automatico sia i blocchi extra (che troveremo nel selettore dei blocchi di Gutenberg), sia le <strong>funzioni aggiuntive<\/strong>.<\/p>\n\n\n\n<p>Tra queste, quella che ci interessa \u00e8 &#8220;<strong>Visibility Conditions<\/strong>&#8220;, accessibile sempre dalle opzioni del blocco. Cliccando su &#8220;<strong>Add Rule Group<\/strong>&#8221; possiamo definire le regole di visibilit\u00e0 del blocco.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-plugin-visibility-conditions-1024x494.png\" alt=\"Otter Blocks Plugin Visibility Conditions\" class=\"wp-image-128624\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-plugin-visibility-conditions-1024x494.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-plugin-visibility-conditions-300x145.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-plugin-visibility-conditions-768x371.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-plugin-visibility-conditions-120x58.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-plugin-visibility-conditions-1536x741.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-plugin-visibility-conditions.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Anche in questo caso alcune condizioni sono disponibili solo con la versione Pro del plugin.<\/p>\n\n\n\n<p>Con la versione gratuita possiamo usare queste condizioni:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>logged in users<\/strong>: visibile solo a chi ha eseguito il login;<\/li>\n\n\n\n<li><strong>logged out users<\/strong>: visibile solo a chi non ha fatto accesso;<\/li>\n\n\n\n<li><strong>user roles<\/strong>: selezioniamo i ruoli utente che vogliamo possano vedere il blocco;<\/li>\n\n\n\n<li><strong>condizioni in base al tipo di post<\/strong> (post type, categoria, tag o autore)<\/li>\n\n\n\n<li><strong>screen size<\/strong>: possiamo impostare delle regole in base alle dimensioni dello schermo, ad esempio per rendere il blocco visibile solo per chi visita il sito da mobile.<\/li>\n<\/ul>\n\n\n\n<p>In questo esempio puoi vedere una regola che fa s\u00ec che il blocco sia visibile solo agli utenti con ruolo <em>amministratore<\/em> o <em>editore<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-visibilita-blocco-ruolo-utente-1024x483.png\" alt=\"Otter Blocks Visibilita Blocco Ruolo Utente\" class=\"wp-image-128625\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-visibilita-blocco-ruolo-utente-1024x483.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-visibilita-blocco-ruolo-utente-300x142.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-visibilita-blocco-ruolo-utente-768x362.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-visibilita-blocco-ruolo-utente-120x57.png 120w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-visibilita-blocco-ruolo-utente-1536x725.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/otter-blocks-visibilita-blocco-ruolo-utente.png 1893w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Tieni presente che puoi impostare sia che il blocco sia visibile o nascosto, selezionando rispettivamente &#8220;<strong>visible<\/strong>&#8221; o &#8220;<strong>hidden<\/strong>&#8221; dalla sezione &#8220;<em>If condition is true, the block should be<\/em>&#8220;.<\/p>\n\n\n\n<p>Puoi anche combinare pi\u00f9 impostazioni seguendo la logica <em>And<\/em> e <em>Or<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>aggiungendo una nuova condizione (<em>Add a new condition<\/em>)<strong> entrambe le condizioni<\/strong> dovranno verificarsi. Ad esempio potresti rendere visibile il blocco solo agli utenti loggati che visitano il sito da mobile.<\/li>\n\n\n\n<li>Aggiungendo un nuovo gruppo di regole (<em>Add rule group<\/em>), <strong>uno o l&#8217;altro gruppo<\/strong> deve verificarsi, affinch\u00e9 la regola sia applicata. In questo caso se una delle due regole si verifica, allora il blocco viene mostrato.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"312\" height=\"844\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-gruppo-regole-otter-blocks.png\" alt=\"Condizioni Gruppo Regole Otter Blocks\" class=\"wp-image-128627\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-gruppo-regole-otter-blocks.png 312w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-gruppo-regole-otter-blocks-111x300.png 111w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/condizioni-gruppo-regole-otter-blocks-23x63.png 23w\" sizes=\"auto, (max-width: 312px) 100vw, 312px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"controllare-la-visibilita-dei-blocchi-con-kadence\">Controllare la visibilit\u00e0 dei blocchi con Kadence<\/h3>\n\n\n\n<p><strong>Kadence Blocks<\/strong> \u00e8 un plugin che ci permette di aggiungere nuovi tipi di blocchi, pattern e altre <strong>funzioni <\/strong>per estendere l&#8217;editor di WordPress. Dispone, tra l&#8217;altro, di un tema abbinato e costruito a misura del suo builder: se vuoi approfondire abbiamo scritto un <a href=\"https:\/\/supporthost.com\/it\/kadence-tema\/\">articolo specifico su Kadence Theme<\/a> e un <a href=\"https:\/\/supporthost.com\/it\/kadence-blocks\/\">tutorial su Kadence Blocks<\/a>, di cui ti consigliamo la lettura.<\/p>\n\n\n\n<p>Utilizzando questo plugin possiamo impostare per i blocchi solo le condizioni di visibilit\u00e0 in base al <strong>tipo di dispositivo<\/strong>.<\/p>\n\n\n\n<p>Dopo aver selezionato il blocco, nella scheda &#8220;Blocco&#8221; scorriamo fino a &#8220;<strong>Impostazioni di visibilit\u00e0<\/strong>&#8221; e possiamo scegliere una delle opzioni:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nascondi nei desktop;<\/li>\n\n\n\n<li>nascondi nei tablet;<\/li>\n\n\n\n<li>nascondi nei dispositivi mobili.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"572\" src=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/impostazioni-visibilita-blocco-kadence-1024x572.png\" alt=\"Impostazioni Visibilita Blocco Kadence\" class=\"wp-image-128626\" srcset=\"https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/impostazioni-visibilita-blocco-kadence-1024x572.png 1024w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/impostazioni-visibilita-blocco-kadence-300x168.png 300w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/impostazioni-visibilita-blocco-kadence-768x429.png 768w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/impostazioni-visibilita-blocco-kadence-113x63.png 113w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/impostazioni-visibilita-blocco-kadence-1536x859.png 1536w, https:\/\/supporthost.com\/it\/wp-content\/uploads\/sites\/2\/2025\/07\/impostazioni-visibilita-blocco-kadence.png 1644w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Tieni presente che queste impostazioni sono disponibili <strong>solo per i blocchi Kadence<\/strong> e non per i blocchi di base di Gutenberg.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusioni\">Conclusioni<\/h2>\n\n\n\n<p>Gestire la visibilit\u00e0 dei blocchi su WordPress \u00e8 molto utile perch\u00e9 ci permette di mostrare elementi in certe condizioni, ad esempio un banner che viene mostrato solo agli utenti che visitano il sito da <em>mobile<\/em> o solo in certe date. <\/p>\n\n\n\n<p>Per farlo puoi utilizzare delle funzioni custom, \u00e8 il metodo che usiamo su SupportHost per mostrare i banner in determinate date usando gli <a href=\"https:\/\/supporthost.com\/it\/hook-wordpress\/\" data-type=\"post\" data-id=\"84714\">hook di WordPress<\/a>. Un sistema ancora pi\u00f9 semplice, invece, \u00e8 usare uno dei <strong>plugin <\/strong>che abbiamo visto in questa guida.<\/p>\n\n\n\n<p>Hai mai pensato di usare questa funzionalit\u00e0? E per fare cosa? Parlacene nei commenti.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vuoi poter controllare la visibilit\u00e0 dei blocchi di WordPress in modo che alcuni elementi (ad esempio un banner) appaiano solo in certe condizioni? In questa guida ti mostreremo passo passo come fare a modificare la visibilit\u00e0 dei blocchi aggiunti nelle tue pagine o nei tuoi articoli. Iniziamo! Come gestire la visibilit\u00e0 dei blocchi su WordPress [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":128920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-128611","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/128611","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/comments?post=128611"}],"version-history":[{"count":10,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/128611\/revisions"}],"predecessor-version":[{"id":133344,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/posts\/128611\/revisions\/133344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media\/128920"}],"wp:attachment":[{"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/media?parent=128611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/categories?post=128611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/supporthost.com\/it\/wp-json\/wp\/v2\/tags?post=128611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}