I blocchi annidati sono una delle funzionalità più potenti nell'editor a blocchi di WordPress e padroneggiarli può portare i tuoi progetti al livello successivo.
Ti consentono di raggruppare e organizzare più elementi come paragrafi, immagini e pulsanti in un unico layout. Una volta che capisci come usarli, puoi creare pagine più flessibili e dall'aspetto professionale senza fare affidamento su plugin aggiuntivi o codice personalizzato.
Noi di WPBeginner utilizziamo i blocchi annidati fin dal loro lancio e hanno completamente cambiato il nostro approccio alla progettazione delle pagine. Rendono i layout complessi più facili da gestire e aiutano a trasformare contenuti di base in sezioni curate e facili da usare.
In questa guida, ti spiegheremo passo dopo passo come selezionare e utilizzare i blocchi annidati in WordPress, in modo che tu possa iniziare a creare layout più puliti ed efficaci con sicurezza.

Cosa sono i blocchi annidati di WordPress?
La funzionalità dei blocchi annidati di WordPress Gutenberg ti consente di inserire (o 'annidare') uno o più blocchi all'interno di un altro blocco.
I blocchi annidati ti aiutano a creare layout più complessi sul tuo sito web WordPress aggiungendo più blocchi uno dentro l'altro. Ciò consente maggiore flessibilità nella progettazione e formattazione dei contenuti per pagine e articoli.
Ad esempio, puoi 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 utilizzando una particolare tecnica.

Inoltre, la funzionalità dei blocchi annidati ti consente di modificare i singoli blocchi separatamente. Ciò ti permette di personalizzare ogni blocco in base alle tue esigenze senza influenzare gli altri blocchi.
Questo, a sua volta, si traduce in una migliore organizzazione dei contenuti, rende i contenuti più attraenti e semplifica il processo creativo.
Detto questo, vediamo come puoi facilmente selezionare e utilizzare i blocchi nidificati di WordPress Gutenberg.
Come utilizzare i blocchi nidificati di WordPress
Puoi facilmente nidificare più blocchi insieme utilizzando il blocco Gruppo o Colonne nell'editor a blocchi di Gutenberg.
Innanzitutto, devi aprire un post esistente o nuovo nell'editor a blocchi dalla barra laterale di amministrazione di WordPress.
Da qui, fai semplicemente clic sul pulsante Aggiungi blocco '+' nell'angolo in alto a sinistra dello schermo e trova il blocco Gruppo. Dopo aver fatto clic su di esso e averlo aggiunto alla pagina, devi selezionare un layout per i blocchi che nidificherai insieme.
Per questo tutorial, selezioneremo il layout 'Gruppo'.

Successivamente, fai semplicemente clic sul pulsante '+' sullo schermo per iniziare ad aggiungere contenuti all'interno del blocco padre.
Ai fini di questo tutorial, aggiungeremo un blocco Immagine.

Dopo aver aggiunto il blocco, fai semplicemente clic sul pulsante 'Gruppo' nella barra degli strumenti del blocco in alto per selezionare il blocco padre.
Successivamente, devi fare clic sul pulsante '+' per riaprire nuovamente il menu dei blocchi, da cui puoi scegliere altri blocchi da aggiungere.

Come configurare le impostazioni dei blocchi nidificati di WordPress
Una volta nidificati più blocchi, puoi configurare le loro impostazioni individuali facendo clic su ciascun blocco. Da lì, le impostazioni del blocco appariranno nella colonna di destra dello schermo
Da qui, puoi regolare il colore di sfondo, il colore del testo e le dimensioni dei singoli blocchi senza influenzare gli altri blocchi che sono nidificati al loro interno.

Per configurare insieme le impostazioni di tutti i blocchi nidificati, dovrai fare clic sul pulsante ‘Raggruppa’ nella barra degli strumenti del blocco in alto. Questo aprirà le impostazioni del blocco padre nella colonna di destra.
Ora puoi configurare la giustificazione, l'orientamento, il colore di sfondo, il colore del testo e la tipografia di tutti i blocchi nidificati.
Tieni presente che queste impostazioni influenzeranno tutti i blocchi nidificati all'interno del blocco padre.

Puoi anche convertire un singolo blocco esistente in blocchi nidificati facendo clic sul pulsante ‘Opzioni’ nella barra degli strumenti superiore di qualsiasi blocco.
Questo aprirà un menu contestuale, dove dovrai selezionare l'opzione ‘Crea modello’.

Una volta fatto ciò, si aprirà una finestra di dialogo che ti chiederà di dare un nome e scegliere una categoria per il tuo nuovo blocco riutilizzabile.
Quindi, fai clic sul pulsante ‘Crea’ per salvare le tue impostazioni.

Dopo aver terminato, non dimenticare 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 apparivano i blocchi annidati sul nostro sito demo.

Bonus: Usa 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 rende super facile selezionare i blocchi annidati da un blocco padre e ti dice persino il tipo e la classe dei blocchi.
Innanzitutto, dovrai installare e attivare il plugin Wayfinder. Per ulteriori istruzioni, consulta la nostra guida per principianti su come installare un plugin di WordPress.
Dopo l'attivazione, vai alla pagina Impostazioni » Wayfinder dalla barra laterale di amministrazione di WordPress.
Una volta lì, tutte le impostazioni saranno già attivate. Devi semplicemente deselezionare la casella accanto alle impostazioni che non desideri utilizzare.
Ad esempio, se desideri che Wayfinder visualizzi i tipi di blocco per tutti i blocchi nell'editor, lascia selezionata la casella accanto all'opzione ‘Visualizza tipo di blocco’.

Tuttavia, se non desideri che il plugin visualizzi le classi dei blocchi, semplicemente deseleziona la casella accanto a quell'opzione.
Dopo aver configurato le impostazioni, non dimenticare di fare clic sul pulsante ‘Salva modifiche’.
Successivamente, devi aprire un post esistente o nuovo nell'editor a blocchi di WordPress dalla dashboard.
Una volta lì, passando il mouse sopra qualsiasi blocco interno mostrerà un contorno con il suo nome. Sarai anche in grado di vedere il contorno e il nome di eventuali blocchi annidati all'interno del blocco padre.

Questo ti aiuterà a identificare tutti i diversi blocchi annidati all'interno di un blocco Gruppo o Colonna.
Da qui, puoi facilmente selezionare un singolo blocco dal blocco padre per configurarne le impostazioni.

Puoi anche selezionare tutti i blocchi annidati contemporaneamente facendo clic sull'intestazione 'Colonne' o 'Gruppo'. Questo aprirà le impostazioni del blocco padre nella colonna di destra.
Dopo aver configurato le impostazioni del blocco, fai semplicemente clic sul pulsante 'Aggiorna' o 'Pubblica' per salvare le modifiche.

Speriamo che questo articolo ti abbia aiutato a imparare come selezionare e utilizzare i blocchi annidati di WordPress. Potresti anche voler consultare il nostro tutorial passo-passo su come cambiare altezza e larghezza dei blocchi in WordPress e la nostra guida per principianti su come usare i pattern di blocchi di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.


Christopher Molitor
Ottimo articolo e GRAZIE per aver menzionato Wayfinder!
p.s. Rilasciata la versione 1.1.7 per aggiungere il supporto all'ultima versione di WP.
Supporto WPBeginner
Glad you liked the article and glad we could share Wayfinder
Amministratore
kzain
I blocchi annidati sembrano un punto di svolta per creare layout unici sul mio sito WordPress! La funzionalità drag-and-drop sembra super intuitiva. Mi piace che tu possa personalizzare ogni blocco annidato individualmente. Questo apre così tante possibilità per creare contenuti web coinvolgenti. Grazie per questa utile guida!
Ralph
Sto usando blocchi annidati per l'immagine a sinistra e il testo a destra e voglio che rimanga così non solo sul desktop ma anche sul mobile, ma semplicemente non lo fa. Posiziona il testo sotto l'immagine. È normale nel caso del mobile o sto facendo qualcosa di sbagliato?
Supporto WPBeginner
Dipenderebbe dal tema, ma è molto comune che accada sui dispositivi mobili per garantire che il testo rimanga leggibile.
Amministratore
Jiří Vaněk
Grazie a questi articoli, mi sto lentamente familiarizzando con Gutenberg. Sono abituato a soluzioni molto semplici da Elementor, e qui tutto mi sembra un po' complicato o piuttosto sconosciuto. Tuttavia, a volte mi imbatto in persone che desiderano aiuto con un sito web esclusivamente utilizzando Gutenberg e nient'altro. Quindi, apprezzo queste guide dove posso mettermi alla prova, provare e imparare cose che potrebbero essere del tutto ordinarie per chi usa Gutenberg.