Gestire siti WordPress Gutenberg Plugin WordPress WordPress

Block Visibility: il plugin per gestire la visibilità dei contenuti su WordPress

Block Visibility è un plugin che permette di controllare in maniera chirurgica la visibilità dei blocchi all’interno dell’editor a blocchi di WordPress.

Grazie ad esso puoi rendere visibile, oppure nascondere, ogni singolo blocco inserito in una pagina o articolo, ma anche del tema, se utilizzi un tema come GeneratePress che permette di creare elementi come il footer o la sidebar con l’editor a blocchi.

In questo video ti mostro un’applicazione pratica di questo plugin:

Landing Page dinamiche su WordPress con Block Visibility
play-rounded-fill

Landing Page dinamiche su WordPress con Block Visibility

Block Visibility può gestire la visibilità in base a diversi criteri:

  • il ruolo dell’utente che sta visualizzando la pagina;
  • la data e l’ora attuali;
  • il fatto che il visitatore sia un utente loggato sul sito oppure no;
  • il tipo di dispositito utilizzato per visualizzare la pagina;
  • eventuali query string, ossia parametri presenti nell’url della pagina.

Proprio quest’ultimo punto è molto interessante soprattutto per la creazione di landing page e tra poco ti mostrerò un esempio.

Ma non basta, Block Visibility si integra anche con plugin come Advanced Custom Fields, ne avevo parlato qui, e WP Fusion, un plugin che permette di integrare WordPress con vari servizi di Email Marketing e CRM.

Inoltre, la versione 3 del plugin, rilasciata a marzo 2023, ha aggiunto alla versione gratuita tutte le funzionalità che prima erano riservate alla versione a pagamento di Block Visibility.

La nuove versione ha aggiunto ulteriori criteri per decidere la visibilità di ogni blocco, in base:

  • al browser e al dispositivo del visitatore;
  • alla presenza o meno di un determinato cookie;
  • al tipo di pagina, archivio o post type che si sta visualizzando;
  • ai metadata a livello di utente o di post;
  • alla sorgente referral;
  • all’URL della pagina.

In pratica, sono disponibili una massiccia quantità di criteri per stabilire dove, quando e a chi far comparire un blocco.

Come configurare il plugin Block Visibility

Questo plugin gratuito, una volta installato mette a disposizione una grande quantità di opzioni di configurazione. Opzioni che lo rendono modulare. Non si è quindi obbligati a vedere sempre tutte le funzionalità del plugin, ma puoi decidere di attivare solo quelle che ti servono.

Se non ti interessa avere accesso a tutte le condizioni di visualizzazioni, puoi decidere di vedere solo quelle che usi più spesso tra: data e ora, dimensione dello schermo, query string e ruoli utente.

Inoltre è anche possibile limitare le funzioni del plugin solo a determinati utenti del sito.

La pagina principale delle impostazioni del plugin Block Visibility

Ma non solo, se vuoi, puoi disattivare completamente alcune delle opzioni del plugin. C’è inoltre la possibilità di attivare delle impostazioni avanzate per quel che riguarda il controllo della visibilità basato sulle dimensioni dello schermo. Oltre a definire i breakpoint, ossia i punti nei quali far scattare la modalità desktop o tablet, puoi anche gestire la modalità di visualizzazione con orientamento verticale (portrait) e quella orizzontale (landscape).

Insomma, il livello di controllo è davvero elevato.

Altra pagina delle impostazioni del plugin Block Visibility

È anche possibile disattivare i controlli di visibilità su vari blocchi disponibili all’interno dell’editor. Questo sempre per ridurre la complessità e rimuovere le opzioni aggiuntive dove non ti servono.

Come si utilizza il plugin Block Visibility

Dopo averlo configurato, passiamo a vedere cosa ci offre questo plugin quando siamo alle prese con la creazione di una pagina o di un articolo su WordPress.

In pratica, per ogni blocco presente nella pagina, è possibile impostare dei criteri di visibilità, come ad esempio la data e l’orario a partire dal quale quel blocco deve essere visibile. Così come la data e l’orario dopo il quale deve sparire.
È anche possibile selezionare più periodi e invertire la logica di funzionamento, ossia definire un periodo nel quale il blocco deve essere nascosto.

I controlli sulla visibilità dei blocchi permessi dal plugin Block Visibility

La stessa cosa è possibile farla anche per decidere se il blocco deve essere visibile solo su deaktop, oppure su tablet oppure su mobile e tutte le varie combinazioni tra queste 3 categorie di dispositivo.

Utile per le landing page (e non solo)

È però il controllo della visibilità basato sulle query string a essere una vera chicca di questo plugin. In pratica possiamo fare in modo che alcuni blocchi siano visibili (oppure nascosti) se l’url della pagina contiene o meno certi parametri.

Ecco un semplice esempio.

In questo caso ho impostato la visibilità di un blocco in modo che venga nascosto se nell’URL della pagina è presente il parametro ad=qwerty (parametro inventato sul momento).

Gestire la visibilità dei blocchi di Gutenberg in base alle query string

In modo analogo ho creato un blocco simile, ma con un’altra immagine di sfondo e un altro testo e ho impostato la visibilità in modo che appaia se l’URL contiene il parametro ad=qwerty.

Ecco cosa succede quando viene visualizzata la pagina senza il parametro:

Come appare la pagina senza query string

ed ecco invece come appare se nell’URL è presente il parametro:

In pratica la pagina è la stessa, ma la presenza o meno di quel parametro stabilisce quale dei due blocchi debba essere visibile. Vedi che oltre all’immagine di sfondo e al testo principale, cambia anche l’intestazione che precede il form di opt-in. Puoi in pratica variare il comportamento di tutti gli elementi della pagina.

Inoltre, l’aspetto interessante è che il blocco che non è visibile non viene nemmeno caricato a livello di codice HTML della pagina. Quindi non è nascosto usando il CSS, non viene proprio inserito. Questo significa che la pagina non viene appesantita dalla presenza dei blocchi che non devono essere visualizzati.

Se però la visibilità dei blocchi è gestita a livello di dispositivo (desktop, tablet e mobile) allora i blocchi vengono nascosti utilizzando il CSS, per ovvie ragioni che non sto nemmeno a spiegare.

Questa funzionalità, che permette di gestire la visibilità dei blocchi in base ai parametri presenti nell’URL, può tornare molto utile nelle landing page usate nelle campagne pubblicitarie. Puoi ad esempio variare il contenuto della pagina in base al parametro che inserisci nell’URL della landing page di un annuncio. Questa cosa funziona anche usando i parametri UTM, che ho già trattato in passato su questo sito.

Ancora più potente con WP Fusion e Advanced Custom Fields

Se Block Visibility rileva la presenza sul tuo sito dei plugin WP Fusion e Advanced Custom Fields, rende disponibili nuove possibilità per gestire la visibilità dei blocchi.

È infatti possibile sfruttare i valori inseriti in campi personalizzati creati con Advanced Custom Fields per definire se un blocco debba essere visibile o meno. Questo, potrà essere molto utile soprattutto per quei blocchi usati a livello di tema. Immagino ad esempio le potenzialità con il Full Site Editing con i temi che supporteranno questa funzionalità.

Per chi utilizza WP Fusion, è possibile definire la visibilità o meno di un blocco in base ai criteri di profilazione degli utenti presenti nel proprio CRM. Una funzione di questo tipo permette di rendere estremamente personalizzata l’esperienza degli utenti all’interno di un sito membership.

Gli iscritti con determinati interessi possono essere classificati con un determinato tag all’interno di un CRM come ActiveCampaign e, sempre grazie a quel tag, possono visualizzare determinati contenuti sul sito.

Lascia un commento