Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come selezionare e utilizzare blocchi nidificati in WordPress

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.

Seleziona e utilizza i blocchi nidificati in WordPress

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.

Anteprima dei blocchi nidificati di WordPress

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

Seleziona il blocco Gruppo dal menu dei blocchi

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.

Aggiungi un blocco immagine all'interno del blocco Gruppo

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.

Apri il menu dei blocchi per aggiungere un altro blocco all'interno del blocco Gruppo

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.

Configura le impostazioni del singolo blocco

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.

Configura le impostazioni del blocco Gruppo

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

Crea un pattern

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.

Aggiungi un nome per il pattern

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.

Anteprima dei blocchi nidificati di WordPress

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

Configura le impostazioni del plugin Wayfinder

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.

GIF per il plugin Wayfinder

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.

Usa il plugin Wayfinder per selezionare facilmente un blocco

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.

Fai clic sul contorno del blocco Gruppo per aprire le sue impostazioni

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.

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

6 CommentsLeave a Reply

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

  2. 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!

  3. 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?

    • Dipenderebbe dal tema, ma è molto comune che accada sui dispositivi mobili per garantire che il testo rimanga leggibile.

      Amministratore

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

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.