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

Come selezionare e utilizzare i blocchi annidati in 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 selezionare e utilizzare i blocchi annidati in WordPress?

La funzione dei blocchi annidati di Gutenberg consente di aggiungere più blocchi all’interno di un blocco padre. In questo modo è possibile personalizzare diversi elementi del blocco allo stesso tempo, organizzare il contenuto del post in modo efficiente e accedere a una maggiore flessibilità di progettazione.

In questo articolo vi mostreremo come selezionare e utilizzare facilmente i blocchi annidati di WordPress.

Select and use nested blocks in WordPress

Cosa sono i blocchi annidati di WordPress?

La funzione di blocco annidato di WordPress Gutenberg consente di inserire (o “annidare”) uno o più blocchi all’interno di un altro blocco.

I blocchi annidati aiutano a creare layout più complessi sul vostro sito WordPress, aggiungendo più blocchi uno dentro l’altro. Ciò consente una maggiore flessibilità nella progettazione e nella formattazione dei contenuti di pagine e post.

Ad esempio, è possibile annidare più blocchi Immagine all’interno di un blocco Gruppo per visualizzare una serie di foto di un particolare evento o una serie di opere d’arte create con una tecnica particolare.

Preview of WordPress nested blocks

Inoltre, la funzione di blocco annidato consente di modificare i singoli blocchi separatamente. Ciò significa che è possibile personalizzare ogni blocco in base alle proprie esigenze senza influenzare gli altri blocchi.

A sua volta, ciò si traduce in una migliore organizzazione dei contenuti, li rende più attraenti e snellisce il processo creativo.

Detto questo, vediamo come selezionare e utilizzare facilmente i blocchi annidati di WordPress Gutenberg.

Come utilizzare i blocchi annidati di WordPress

È possibile annidare facilmente più blocchi tra loro utilizzando il blocco Gruppo o Colonne nell’editor di blocchi di Gutenberg.

Per prima cosa, è necessario aprire un post esistente o nuovo nell’editor di blocchi dalla barra laterale dell’amministrazione di WordPress.

Da qui, è sufficiente fare clic sul pulsante Aggiungi blocco ‘+’ nell’angolo in alto a sinistra dello schermo e trovare il blocco Gruppo. Dopo aver fatto clic su di esso e averlo aggiunto alla pagina, è necessario selezionare un layout per i blocchi che si andranno ad annidare.

Per questa esercitazione, selezioneremo il layout ‘Gruppo’.

Select Group block from the block menu

Successivamente, è sufficiente fare clic sul pulsante “+” sullo schermo per iniziare ad aggiungere contenuti all’interno del blocco padre.

Per questo tutorial, aggiungeremo un blocco immagine.

Add an image block within the Group block

Dopo aver aggiunto il blocco, è sufficiente fare clic sul pulsante “Raggruppa” nella barra degli strumenti del blocco in alto per selezionare il blocco padre.

Successivamente, è necessario fare clic sul pulsante ‘+’ per aprire nuovamente il menu dei blocchi, da cui è possibile scegliere altri blocchi da aggiungere.

Open the block menu to add another block within the Group block

Come configurare le impostazioni dei blocchi annidati di WordPress

Una volta annidati più blocchi, è possibile configurare le loro impostazioni individuali facendo clic su ciascun blocco. Si apriranno le impostazioni del blocco nella colonna destra dello schermo.

Da qui è possibile regolare il colore di sfondo, il colore del testo e le dimensioni dei singoli blocchi senza influenzare gli altri blocchi annidati al loro interno.

Configure the individual block settings

Per configurare le impostazioni di tutti i blocchi annidati insieme, è necessario fare clic sul pulsante ‘Raggruppa’ nella barra degli strumenti dei blocchi in alto. Si apriranno le impostazioni del blocco padre nella colonna di destra.

È ora possibile configurare la giustificazione, l’orientamento, il colore di sfondo, il colore del testo e la tipografia di tutti i blocchi annidati.

Tenere presente che queste impostazioni influiscono su tutti i blocchi annidati all’interno del blocco padre.

Configure the settings of the Group block

È inoltre possibile convertire un blocco singolo esistente in blocchi annidati facendo clic sul pulsante “Opzioni” nella barra degli strumenti superiore di qualsiasi blocco.

Si aprirà un menu in cui si dovrà selezionare l’opzione “Crea pattern”.

Create a pattern

Una volta fatto ciò, si aprirà un prompt che chiederà di dare un nome e di scegliere una categoria per il nuovo blocco riutilizzabile.

Quindi, fare clic sul pulsante “Crea” per memorizzare le impostazioni.

Add a name for the pattern

Una volta soddisfatti, non dimenticate di fare clic sul pulsante “Pubblica” o “Aggiorna” per salvare le modifiche.

Nel nostro esempio, abbiamo annidato un blocco Titolo, Immagine e Paragrafo all’interno di un blocco Gruppo.

Ecco come appaiono i blocchi annidati sul nostro sito web dimostrativo.

Preview of WordPress nested blocks

Bonus: utilizzare il plugin Wayfinder per selezionare facilmente i blocchi annidati

A volte può essere difficile selezionare un singolo blocco e configurarlo quando ci sono più blocchi annidati insieme.

Fortunatamente, il plugin Wayfinder consente di selezionare con estrema facilità i blocchi annidati da un blocco genitore, indicando anche il tipo e la classe dei blocchi.

Per prima cosa, è necessario installare e attivare il plugin Wayfinder. Per ulteriori istruzioni, consultate la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, andare alla pagina Impostazioni ” Wayfinder dalla barra laterale dell’amministrazione di WordPress.

Una volta lì, tutte le impostazioni saranno già attivate. È sufficiente deselezionare la casella accanto alle impostazioni che non si desidera utilizzare.

Ad esempio, se si desidera che Wayfinder visualizzi i tipi di blocco per tutti i blocchi dell’editor, si deve tenere selezionata la casella accanto all’opzione “Visualizza tipo di blocco”.

Configure the Wayfinder plugin settings

Tuttavia, se non si desidera che il plugin visualizzi le classi di blocco, è sufficiente deselezionare la casella accanto a questa opzione.

Dopo aver configurato le impostazioni, non dimenticate di fare clic sul pulsante “Salva modifiche”.

Successivamente, è necessario aprire una pubblicazione esistente o nuova nell’editor a blocchi di WordPress dalla Bacheca.

Una volta arrivati a questo punto, al passaggio del mouse su qualsiasi blocco interno verrà visualizzato un contorno con il suo nome. Sarà inoltre possibile vedere il contorno e il nome di qualsiasi blocco annidato all’interno del blocco genitore.

GIF for the Wayfinder plugin

Questo aiuta a identificare tutti i diversi blocchi annidati all’interno di un blocco Gruppo o Colonna.

Da qui si può facilmente selezionare un singolo blocco dal blocco padre per configurarne le impostazioni.

Use Wayfinder plugin to easily select a block

È anche possibile selezionare tutti i blocchi annidati contemporaneamente, facendo semplicemente clic sull’intestazione “Colonne” o “Gruppo”. In questo modo si apriranno le impostazioni del blocco padre nella colonna di destra.

Una volta configurate le impostazioni del blocco, è sufficiente fare clic sul pulsante “Aggiorna” o “Pubblica” per salvare le modifiche.

Click the Group block outline to open its settings

Speriamo che questo articolo vi abbia aiutato a imparare a selezionare e utilizzare i blocchi annidati di WordPress. Potreste anche consultare il nostro tutorial passo-passo su come modificare l’altezza e la larghezza dei blocchi in WordPress e le nostre scelte dei plugin WordPress indispensabili per far crescere il vostro sito.

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

4 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. Ralph says

    I’m using nest blocks for image on left and text on the right and I want it to stay that way not only on desktop but also on mobile but it just doesn’t It places text under the image. Is this normal in case of mobile or am I doing something wrong?

    • WPBeginner Support says

      It would depend on the theme but it is very common to happen on mobile to ensure the text remains readable on mobile.

      Admin

  3. Jiří Vaněk says

    Thanks to these articles, I’m slowly getting acquainted with Gutenberg. I’m used to very simple solutions from Elementor, and here everything seems a bit complicated or rather unfamiliar to me. However, sometimes I come across people who want help with a website exclusively using Gutenberg and nothing else. So, I appreciate these guides where I can get my hands on, try out, and learn things that might be completely ordinary for someone using Gutenberg.

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.