Guida per principianti: Come utilizzare i modelli a blocchi di WordPress

Costruire siti WordPress non è mai stato così facile e i pattern a blocchi ne sono una parte importante. Quando li abbiamo scoperti per la prima volta, abbiamo visto il loro potenziale per accelerare il nostro flusso di lavoro.

Oggi utilizziamo pattern a blocchi come i blocchi riutilizzabili per le CTA e i pulsanti per le offerte di coupon: sono diventati essenziali per il nostro modo di creare contenuti.

I pattern a blocchi consentono di ottenere facilmente design dall’aspetto professionale senza dover ricorrere a competenze di codifica o di web design.

Si tratta di combinazioni precostituite di blocchi che si possono inserire e personalizzare rapidamente, per avere un vantaggio invece di partire da zero ogni volta.

Sia che stiate costruendo il vostro primo sito WordPress o che vogliate lavorare più velocemente, questa guida per principianti vi mostrerà come trovare, utilizzare e creare pattern di blocco che salvino il tempo in ogni progetto.

Ecco gli argomenti in copertina in questa guida:

Cosa sono i modelli a blocchi di WordPress?

Imodelli di blocco di WordPress sono raccolte di blocchi predefiniti che aiutano a creare layout personalizzati in modo rapido ed efficiente. Per noi sono stati una svolta nella creazione di pagine con scadenze strette.

L’editor di blocchi di WordPress è intuitivo e consente agli utenti di progettare bellissimi layout con blocchi di contenuto. Questi includono testo, immagini, pulsanti e altri elementi che possono essere organizzati in base alle proprie esigenze.

Tuttavia, non tutti gli utenti hanno il tempo o le capacità di progettazione per creare layout da zero ogni volta. Noi stessi abbiamo affrontato questa sfida, ed è per questo che i modelli a blocchi si sono rivelati uno strumento prezioso nel nostro flusso di lavoro.

I modelli a blocchi offrono una soluzione semplice. WordPress include una serie di modelli predefiniti, che rendono semplice l’aggiunta di layout dall’aspetto professionale in pochi secondi.

I temi WordPress più diffusi spesso includono i loro modelli personalizzati. Questi modelli consentono di risparmiare ancora più tempo, fornendo disegni già pronti e adattati al tema.

I modelli possono includere layout come design a più colonne, combinazioni di media e testo, sezioni call-to-action, header e pulsanti personalizzati. Questa flessibilità li rende adatti a diversi tipi di contenuti.

Potete trovare altri modelli di blocchi sul sito WordPress.org. Se vi piace disegnare, potete anche creare e condividere i vostri modelli con la comunità di WordPress.

Successivamente, vi mostreremo come utilizzare i modelli a blocchi in WordPress per creare layout straordinari per il vostro sito web.

Come utilizzare gli schemi a blocchi in WordPress

Di default, WordPress è dotato di diversi pattern di blocchi utili che potete utilizzare sul vostro sito web. Anche il tema di WordPress e alcuni plugin possono aggiungere i loro pattern.

Per utilizzare i modelli di blocco, è necessario modificare il post o la pagina di WordPress in cui si desidera utilizzare il modello di blocco.

Nella schermata di modifica del post, fare clic sul pulsante Aggiungi blocco [+] per aprire l’inseritore di blocchi. Da qui, passare alla scheda “Modelli” per visualizzare i modelli di blocco disponibili.

È possibile scorrere verso il basso per vedere i modelli di blocco disponibili.

È inoltre possibile visualizzare i pattern di blocco in diverse categorie, come caratteristiche, pulsanti, colonne, header e altro ancora.

In alternativa, è possibile fare clic sul pulsante “Esplora tutti i modelli” per visualizzare i modelli a blocchi.

Qui è possibile vedere l’anteprima più grande in un popup.

Una volta trovato il pattern che si desidera provare, basta fare clic per inserirlo nell’area del contenuto della pagina o del post.

Il pattern apparirà nell’editor dei contenuti con un contenuto segnaposto che si potrà modificare e sostituire con il proprio.

È sufficiente puntare e cliccare su qualsiasi blocco all’interno del pattern per modificarne il contenuto in base alle proprie esigenze.

Avrete comunque a disposizione tutte le opzioni che normalmente avete per ogni blocco. Ad esempio, se si tratta di un blocco copertina, è possibile modificare il colore della copertina o l’immagine di sfondo.

È possibile aggiungere tutti i pattern necessari per la pagina o la pubblicazione del blog. È anche possibile eliminare un pattern per rimuoverlo da una pagina o da un post, proprio come si eliminerebbe un qualsiasi blocco di WordPress.

Utilizzando i pattern a blocchi, è possibile creare rapidamente bellissimi layout per gli articoli e il sito WordPress.

In definitiva, i pattern di blocco aiutano a salvare il tempo che altrimenti si passerebbe a disporre manualmente i blocchi ogni volta che si devono aggiungere header, galleria, pulsanti e altro.

Come creare pattern nell’editor a blocchi

WordPress rende super facile creare pattern nell’editor a blocchi da riutilizzare in seguito.

Quando si modifica un post o una pagina, è sufficiente selezionare i blocchi che si desidera includere nel modello e fare clic su “Crea modello”.

È possibile selezionare più blocchi premendo il tasto shift sulla tastiera e facendo clic su di essi.

Tuttavia, se i blocchi sono disposti in modo tale da rendere più difficile la loro selezione, è possibile utilizzare la vista Elenco nella scheda Panoramica documento.

Creando un pattern si aprirà una finestra a comparsa.

È necessario fornire un nome al proprio pattern e scegliere una categoria.

Al di sotto di questo punto, è presente un’attiva/disattiva per mantenere il pattern sincronizzato o non sincronizzato.

Pattern sincronizzati: Quando l’utente o altri utenti modificano un pattern, le modifiche vengono salvate al successivo utilizzo del pattern.

Modelli non sincronizzati: Le modifiche apportate a questi modelli dopo averli inseriti in un post o in una pagina non influiscono sul modello originale.

Fare clic sul pulsante “Crea” per salvare il modello.

La prossima volta che si vorrà utilizzare quel pattern, basterà cercarne il nome o la categoria nel pannello di inserimento dei blocchi.

Come creare pattern nell’editor del sito

Se si utilizza un tema a blocchi con supporto completo dell’editor del sito, è possibile creare pattern anche nell’editor del sito.

Aprire l’editor del sito visitando la pagina Aspetto ” Editor.

A questo punto si accede all’interfaccia dell’editor del sito.

Per continuare, fare clic su “Modelli” nella barra laterale sinistra.

Verranno visualizzati tutti i modelli e le categorie disponibili.

Per creare un nuovo modello, fare clic sul pulsante Aggiungi [+] e selezionare “Crea modello”.

Si aprirà una finestra a comparsa in cui si dovrà fornire un nome al pattern, scegliere una categoria e decidere se il pattern deve essere sincronizzato o meno.

Fare clic su “Crea” per continuare.

WordPress creerà una tela bianca per creare il vostro pattern.

Da qui è possibile aggiungere blocchi per creare il proprio pattern.

Una volta terminato, non dimenticate di fare clic sul pulsante “Salva” per memorizzare il modello.

Gestione dei pattern in WordPress

Se si utilizza un tema a blocchi con supporto completo dell’editor del sito, è possibile gestire i pattern nell’editor del sito.

Aprire l’editor del sito visitando la pagina Aspetto ” Editor.

Nella schermata Modelli è possibile fare clic su un modello per modificarlo. È anche possibile fare clic sul menu a tre punti accanto a un pattern per duplicarlo, esportarlo o eliminarlo.

Per gestire tutti i vostri modelli, fate clic sulla scheda “Gestisci tutti i miei modelli” nella barra laterale.

Verrà visualizzato un elenco di tutti i pattern. Ora è possibile modificarli, esportarli o eliminarli.

Se si utilizza un tema classico (temi WordPress che non supportano l’editor completo del sito), è possibile gestire i modelli visitando la pagina Aspetto ” Modelli.

Da qui è possibile aggiungere, eliminare ed esportare i propri pattern di blocco.

Tenete presente che anche alcuni temi classici come Hestia gestiscono ora i pattern in modo simile ai temi Full Site Editing, mentre altri utilizzano ancora la vecchia interfaccia mostrata nello screenshot qui sotto.

La gestione dei pattern a blocchi dipende quindi dal tema che si sta utilizzando.

Trovare altri modelli di blocchi da utilizzare sul vostro sito web

Per impostazione predefinita, WordPress è dotato di alcuni modelli di blocco comunemente utilizzati. I temi di WordPress possono anche aggiungere i propri modelli al sito web.

Tuttavia, sul sito web è possibile trovare molti altri pattern di blocchi oltre a quelli disponibili nel pannello di inserimento.

Per visualizzare molti altri modelli di blocchi, basta visitare il sito web WordPress Patterns Directory.

Qui troverete i modelli di blocco inviati dalla comunità di WordPress.

Per utilizzare uno di questi modelli di blocco, è sufficiente fare clic per visualizzare il modello e poi fare clic sul pulsante ‘Copia modello’.

Successivamente, è necessario tornare al proprio blog WordPress e modificare il post o la pagina in cui si desidera inserire il modello di blocco.

Nella schermata di modifica, è sufficiente fare clic con il tasto destro del mouse e selezionare “Incolla” nel menu del browser oppure premere CTRL+V (Command + V su Mac).

Come creare e condividere i propri pattern a blocchi

Volete creare i vostri pattern di blocchi WordPress e condividerli con il mondo?

WordPress rende facilissimo creare modelli di blocco e utilizzarli sui propri siti web o condividerli con tutti gli utenti di WordPress nel mondo.

È sufficiente visitare il sito web della WordPress Pattern Directory e fare clic sul link “New Pattern”.

Nota: per salvare i modelli è necessario accedere o creare un account gratuito su WordPress.org.

Una volta effettuato l’accesso, si accede alla pagina dell’editor di blocchi. È identico all’editor di blocchi predefinito di WordPress e potete usarlo per creare il vostro modello.

È sufficiente aggiungere blocchi per creare il layout del modello.

È possibile utilizzare blocchi di layout come gruppo, copertina, galleria e altro ancora per organizzare il layout.

Sono disponibili anche immagini royalty-free da utilizzare nei blocchi multimediali. La libreria multimediale di WordPress vi permetterà di trovare e utilizzare facilmente queste immagini nei vostri modelli.

Una volta soddisfatti del vostro modello di blocco, potete salvarlo come bozza o inviarlo alla directory dei modelli.

Prima di inviare il vostro modello a blocchi per la directory dei modelli, assicuratevi di aver letto le linee guida della directory dei modelli a blocchi.

Potete gestire tutti i vostri schemi a blocchi facendo clic sul link “I miei schemi”. Verranno visualizzati tutti gli schemi a blocchi che avete condiviso, gli schemi in bozza e gli schemi che avete favorito.

Se si desidera creare pattern a blocchi solo per uso personale, è possibile salvarli come bozze. Dopodiché, copiateli e incollateli dalla pagina I miei pattern al vostro sito web WordPress.

Creare manualmente i modelli di blocco di WordPress

È anche possibile creare pattern di blocchi manualmente e aggiungerli al tema di WordPress o a un plugin di snippet personalizzati come WPCode.

È sufficiente creare un nuovo post o una nuova pagina in WordPress. Nell’area dei contenuti, utilizzare i blocchi per creare un layout personalizzato o una raccolta di blocchi che si desidera salvare come modello.

Quindi, passare alla modalità Editor del codice.

Da qui, è necessario copiare tutto il contenuto che si vede nell’editor del codice.

Quindi, aprire un editor di testo semplice come Notepad e incollare il codice. Ne avrete bisogno nel prossimo passo.

Ora siete pronti a registrare i vostri blocchi come pattern.

Per farlo, è sufficiente copiare e incollare il seguente codice nel file functions.php del vostro tema o in un plugin di snippets di codice come il plugin gratuito WPCode (consigliato).

Per maggiori dettagli, ecco la guida completa all’aggiunta di codice personalizzato in WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Ora, copiare e incollare i dati grezzi del blocco copiati in precedenza come valore del parametro content. In altre parole, è necessario sostituire il testo che dice “Il codice del contenuto del blocco va qui” con il codice del blocco. Assicurarsi di lasciare al loro posto le virgolette singole che circondano il testo.

Infine, non dimenticate di modificare il titolo e la descrizione e di salvare le modifiche.

Ora è possibile visitare il sito web e modificare una pagina o una pubblicazione. Il pattern di blocco appena registrato apparirà nel pannello di inserimento dei blocchi.

Come rimuovere un pattern di blocco in WordPress

È possibile rimuovere o disregistrare facilmente qualsiasi modello di blocco in WordPress. Supponiamo di voler rimuovere il modello di blocco creato nell’esempio precedente.

È sufficiente copiare e incollare il seguente codice nel file functions.php del vostro tema o in WPCode:

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

In questo esempio, "my-plugin/my-awesome-pattern" è il nome del pattern usato per la registrazione.

È possibile utilizzare questo codice per disregistrare qualsiasi modello di blocco creato dal tema o da un plugin. Tutto ciò che occorre sapere è il nome usato per registrare il modello.

Rimuovere i modelli principali di WordPress

I pattern principali di WordPress sono disponibili per tutti gli utenti di WordPress. Ciò significa che possono essere abusati e che potrebbero anche non corrispondere al resto del tema di WordPress.

Se non si vuole utilizzare uno schema, si può semplicemente evitare di aggiungerlo ai propri contenuti. Tuttavia, se gestite un sito WordPress con più autori, potreste voler impedire a tutti gli utenti di utilizzare questi modelli fondamentali.

Per rimuovere tutti i modelli principali di WordPress, è necessario aggiungere il seguente codice al file functions del tema o a WPCode:

remove_theme_support( 'core-block-patterns' );

Che fine hanno fatto i blocchi riutilizzabili?

I pattern di blocchi e i blocchi riutilizzabili hanno entrambi l’obiettivo di risolvere un problema simile: fornire agli utenti opzioni per aggiungere facilmente blocchi di uso comune.

Per correggere questo problema, il team Core WordPress ha unito i blocchi riutilizzabili in pattern.

Per avere la stessa funzionalità dei blocchi riutilizzabili, è ora possibile utilizzare i pattern sincronizzati. Quando l’utente o altri utenti modificano il pattern, le modifiche vengono salvate al successivo utilizzo del pattern.

Domande frequenti

Ecco alcune domande frequenti dei nostri lettori sui pattern a blocchi.

Dove posso trovare altri pattern di blocchi?

A lato dei pattern predefiniti di WordPress, potete esplorare la WordPress Patterns Directory online per trovare altre opzioni create dalla Community.

I pattern di blocco possono rallentare il mio sito web?

No, i pattern di blocco in sé non influiscono sulla velocità del sito. Sono un modo per strutturare i contenuti, ma assicuratevi di utilizzare immagini e blocchi ottimizzati per ottenere le migliori prestazioni.

Per i suggerimenti, consultate la nostra guida definitiva sulla velocità e le prestazioni di WordPress.

Risorse aggiuntive

Se volete personalizzare il design del vostro sito WordPress, troverete utili le seguenti risorse:

• Come creare facilmente un tema WordPress personalizzato (senza codice)
• Come riprogettare un sito web WordPress (Guida per principianti)
• Problemi comuni dell’editor a blocchi di WordPress e come risolverli
• Come abbellire il modulo dei commenti di WordPress (guida definitiva)
• Come personalizzare il colore di sfondo dell’editor di blocchi di WordPress

Speriamo che questa guida vi abbia aiutato a imparare a utilizzare i pattern di blocco di WordPress sul vostro sito web. Potreste anche consultare la nostra guida su come padroneggiare l’editor a blocchi di WordPress o dare un’occhiata a questi pratici scorciatoi di WordPress per essere più produttivi.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.