Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete imparare a utilizzare i modelli di blocco di WordPress sul vostro sito web?

I modelli a blocchi consentono di aggiungere rapidamente elementi di design comunemente utilizzati ai layout dei post o delle pagine.

In questo articolo vi mostreremo come utilizzare i pattern di blocco di WordPress e troveremo altri pattern da utilizzare sul vostro sito web.

WordPress block patterns explained for beginners

Ecco gli argomenti in copertina in questa guida:

Cosa sono i pattern di blocco di WordPress?

Ipattern di blocco di WordPress sono una raccolta di elementi di design preconfezionati che possono essere utilizzati per creare layout personalizzati più velocemente.

WordPress è dotato di un editor intuitivo, comunemente noto come editor di blocchi. Permette agli utenti di creare bellissimi layout per i loro post e pagine, utilizzando blocchi per gli elementi di contenuto comuni.

WordPress block editor

Tuttavia, non tutti gli utenti di WordPress sono designer o vogliono dedicare tempo alla creazione di layout ogni volta che devono creare una pagina o un post.

I modelli a blocchi offrono una soluzione semplice a questo problema. WordPress è ora dotato di una serie di utili modelli a blocchi per impostazione predefinita.

Block patterns in post editor

Itemi WordPress più diffusi forniscono anche i propri modelli che si possono utilizzare per scrivere i contenuti.

Questi modelli includono elementi come layout multicolonna predefiniti, modelli di testo e media, modelli di call-to-action, intestazioni, pulsanti e altro ancora.

Potete trovare altri pattern sul sito web di WordPress.org e potete anche creare e condividere i vostri pattern.

Esaminiamo quindi come utilizzare facilmente i pattern a blocchi in WordPress per creare splendidi contenuti per il 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 della pubblicazione, fare clic sul pulsante Add Block [+] per aprire il pannello di inserimento dei blocchi. Da qui, passare alla scheda ‘Patterns’ per visualizzare i pattern di blocco disponibili.

Block patterns in post editor

È 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 pattern” per visualizzare i pattern a blocchi.

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

Explore all patterns

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.

Edit block pattern

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

Si avranno comunque tutte le opzioni normalmente disponibili per ciascun blocco. Ad esempio, se si tratta di un blocco copertina, è possibile modificare il colore di 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.

Remove cover block

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 una pagina o un post, è sufficiente selezionare i blocchi che si desidera includere nel pattern e fare clic su “Crea pattern”.

Create pattern block editor

È 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.

Select multiple blocks in List View

Creando un pattern si aprirà una finestra a comparsa.

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

New pattern name and settings

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.

Pattern non sincronizzati: Le modifiche apportate a questi pattern dopo averli inseriti in una pagina o in un post non influiranno sul pattern originale.

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

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

Reuse custom pattern

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.

Site Editor screen

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

Verranno visualizzati tutti i pattern e le categorie disponibili.

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

Create pattern in site editor

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.

Configure custom pattern settings

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

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

Design pattern in site editor

Una volta terminato, non dimenticate di fare clic sul pulsante ‘Salva’ per salvare il pattern.

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.

Site Editor screen

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 pattern, fate clic sulla scheda “Gestisci tutti i miei pattern” nella barra laterale.

Manage patterns shortcut

Verrà visualizzato un elenco di tutti i pattern.

Ora è possibile modificarli, esportarli o eliminarli.

List view to manage all your patterns

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

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

Managing patterns in classic themes

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.

WordPress block patterns directory

Qui troverete i pattern di blocco inviati dalla Community di WordPress.

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

Copy block pattern

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).

Paste pattern in block editor

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.

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

Create new pattern in WordPress.org pattern directory

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.

Block pattern creator

È 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.

Editing block pattern 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 pattern facendo clic sul link “I miei pattern”. Verranno visualizzati tutti i pattern a blocchi che avete condiviso, i pattern in bozza e i pattern che avete favorito.

Manage patterns in WordPress.org directory

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.

Switch to the code editor

Quindi, passare alla modalità Editor del codice.

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

Copy raw code blocks

Quindi, aprire un editor di testo 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 tema o in un plugin di snippets di codice come il 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 per il parametro del contenuto. 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 cambiare il titolo e la descrizione con quelli che preferite 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.

Add custom block pattern to your post

Come rimuovere un pattern di blocco in WordPress

È possibile rimuovere o annullare 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 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 un pattern, 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 pattern principali.

Per rimuovere tutti i pattern 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.

Configure custom pattern settings

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.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

7 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jim Weisman says

    “To do that, simply copy and paste the following code into your theme’s functions.php file or a site-specific plugin.” my question is where in the function.php file at the beginning or end or somewhere else

    • WPBeginner Support says

      We normally recommend the bottom of your functions.php file to prevent any issues as well as make it easier to find in the future.

      Admin

  3. Jay Castillo says

    Thanks for explaining what block patterns are.

    You mentioned that reusable blocks are not as flexible compared to block patterns because changes to a reusable block will also change all pages/posts where you used that reusable block. But isn’t that the point of using a reusable block?

    Just wanted to make it clear to other wordpress users that if you don’t want changes to a reusable block to appear globally, you can simply add the reusable block to a post/page and convert it to a regular block BEFORE making any changes/tweaks. Other instances with the reusable block won’t be affected by the changes.

    • WPBeginner Support says

      Converting it will allow it to be changed safely and that is useful. For most, it is not always intuitive that changing the block in the post itself instead of requiring an action to update the block across the site without the block warning that will happen or adding markup to note that you are editing a reusable block.

      Admin

  4. John Mason says

    I have started from scratch again.

    I have made a mess of things in the past with my website.

    But am now going to learn the ropes.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.