Come utilizzare il Block Editor di WordPress (Tutorial Gutenberg)

Creare contenuti accattivanti in WordPress non deve essere complicato.

L'editor a blocchi (noto anche come Gutenberg) è stato progettato specificamente per rendere la creazione di pagine e articoli semplice come trascinare e rilasciare blocchi al loro posto, senza richiedere competenze tecniche.

Pensalo come costruire con blocchi Lego digitali. Ogni pezzo di contenuto, che si tratti di testo, immagini o pulsanti, diventa un blocco che puoi facilmente spostare e personalizzare.

Siamo passati a Gutenberg all'inizio e lo utilizziamo da anni. Questo ci ha aiutato a guidare migliaia di utenti di WPBeginner nel padroneggiare questo sistema.

In questo tutorial, ti mostreremo esattamente come funziona l'editor a blocchi di WordPress.

Imparerai le tecniche semplici che rendono la creazione di contenuti più veloce e piacevole, oltre a scoprire funzionalità che possono dare al tuo sito web un aspetto curato senza alcuna conoscenza di codifica.

Qual è la differenza tra l'editor a blocchi (Gutenberg) e l'editor classico?

Prima di addentrarci nell'editor a blocchi, confrontiamo e comprendiamo le differenze tra l'editor a blocchi Gutenberg e il vecchio editor classico.

Ecco come appariva l'editor classico in WordPress:

Aveva una casella di editor di testo con alcune opzioni di formattazione di base. Era piuttosto limitato in termini di funzionalità e aspetto visivo.

Ecco come appare l'editor a blocchi in WordPress:

Come puoi vedere, sono due editor completamente diversi per creare contenuti in WordPress.

Il vecchio editor classico era un editor di testo con pulsanti di formattazione simili a Microsoft Word.

Il nuovo editor utilizza un approccio diverso chiamato 'Blocchi' (da cui il nome Block Editor).

I blocchi sono elementi di contenuto che puoi aggiungere alla schermata di modifica per creare layout. Ogni elemento che aggiungi al tuo post o alla tua pagina è un blocco.

Ad esempio, puoi aggiungere blocchi per paragrafi, immagini, video, gallerie, audio, elenchi e altro ancora. Ci sono blocchi per tutti i comuni elementi di contenuto, e altri possono essere aggiunti tramite plugin di WordPress.

In che modo l'editor a blocchi di WordPress è migliore dell'editor classico?

L'editor a blocchi di WordPress offre un modo semplice per aggiungere diversi tipi di contenuto ai tuoi post e alle tue pagine.

Ad esempio, se in precedenza volevi aggiungere una tabella al tuo contenuto utilizzando l'editor classico, avevi bisogno di un plugin per tabelle separato.

Con l'editor a blocchi, puoi semplicemente aggiungere un blocco tabella, selezionare le tue colonne e righe e iniziare ad aggiungere contenuto.

Puoi spostare gli elementi di contenuto su e giù, modificarli come blocchi individuali e creare facilmente contenuti ricchi di media.

Soprattutto, l'editor a blocchi di WordPress è facile da usare e da imparare.

Questo offre un enorme vantaggio a tutti i principianti di WordPress che stanno appena iniziando il loro primo blog o costruendo un sito web aziendale fai-da-te.

Detto questo, esaminiamo come utilizzare l'editor a blocchi di WordPress per creare ottimi contenuti come un professionista.

Ecco cosa tratteremo in questo tutorial su Gutenberg:

• Utilizzare Gutenberg – L'editor a blocchi di WordPress
• Creare un nuovo post del blog o una pagina utilizzando l'editor a blocchi
• Come aggiungere un blocco nell'editor a blocchi
• Lavorare con i blocchi nel nuovo editor
• Organizzare i blocchi in gruppi e colonne
• Salvare e riutilizzare contenuti con pattern sincronizzati (blocchi riutilizzabili)
• Pubblicazione e opzioni di gestione nell'editor a blocchi di Gutenberg
• Impostazioni dei plugin in Gutenberg
• Aggiungere alcuni blocchi comuni nell'editor a blocchi
• Esplorare altri blocchi di contenuto nell'editor a blocchi
• Suggerimenti bonus per usare Gutenberg come un professionista
• Aggiungere altri blocchi all'editor a blocchi di Gutenberg in WordPress
• Domande frequenti su Gutenberg – L'editor a blocchi in WordPress
• Tutorial video
• Risorse bonus

Pronto? Immergiamoci.

Utilizzare Gutenberg – L'editor a blocchi di WordPress

L'editor a blocchi è progettato per essere intuitivo e flessibile. Sebbene abbia un aspetto diverso dal vecchio editor di WordPress, fa ancora tutte le cose che potevi fare nell'editor classico.

Iniziamo coprendo le cose di base che facevi nell'editor classico e come vengono fatte nell'editor a blocchi.

Creare un nuovo post del blog o una pagina utilizzando l'editor a blocchi

Inizierai a creare un nuovo post o una nuova pagina come faresti normalmente. Fai semplicemente clic sul menu Post » Aggiungi Nuovo Post nella tua bacheca di WordPress.

Se stai creando una pagina, vai invece al menu Pagine » Aggiungi Nuova.

Questo avvierà l'editor a blocchi.

Come aggiungere un blocco nell'editor a blocchi

Il primo blocco di ogni post o pagina è il titolo.

Puoi usare il mouse per spostarti sotto il titolo o premere il tasto Tab sulla tastiera per spostare il cursore in basso e iniziare a scrivere.

Per impostazione predefinita, il blocco successivo è un blocco Paragrafo. Questo consente agli utenti di iniziare a scrivere subito.

Tuttavia, se vuoi aggiungere qualcosa di diverso, puoi fare clic sul pulsante Aggiungi nuovo blocco [+] nell'angolo in alto a sinistra dell'editor, sotto un blocco esistente o sul lato destro di un blocco.

Facendo clic sul pulsante verrà visualizzato il menu Aggiungi blocco con una barra di ricerca in alto e i blocchi comunemente usati sotto.

Puoi fare clic sulle schede per sfogliare le categorie di blocchi o digitare una parola chiave per cercare rapidamente un blocco specifico.

Se non vuoi usare il mouse per fare clic sul pulsante, puoi anche usare una scorciatoia da tastiera.

Inizia digitando / per cercare un blocco e poi inseriscilo premendo il tasto Invio sulla tastiera.

Lavorare con i blocchi nel nuovo editor

Ogni blocco ha una barra degli strumenti che appare sopra di esso. I pulsanti nella barra degli strumenti cambiano a seconda del blocco che stai modificando.

Ad esempio, nello screenshot qui sotto, stiamo lavorando su un blocco Paragrafo che mostra pulsanti di formattazione di base come allineamento del testo, grassetto, corsivo, inserisci link e altre opzioni disponibili nel menu con tre punti.

Oltre alla barra degli strumenti, ogni blocco può avere le proprie impostazioni, che appaiono nella colonna di destra dello schermo di modifica.

Queste impostazioni variano a seconda del blocco che stai modificando. Ad esempio, il blocco Paragrafo ti consente di modificare il colore del testo, dello sfondo e del link, nonché la tipografia.

Puoi spostare i blocchi su e giù e riorganizzarli.

Se vuoi farlo, fai semplicemente clic per trascinare o rilasciare o fai clic sui pulsanti su e giù nella barra degli strumenti del blocco.

Correlato: Vedi la nostra guida su come rimuovere un blocco in WordPress.

Organizzare i blocchi in gruppi e colonne

L'editor a blocchi include anche strumenti utili per gestire e organizzare i layout dei tuoi contenuti.

Puoi selezionare più blocchi facendo clic su di essi mentre tieni premuto il tasto Maiusc sulla tastiera.

Dopodiché, fai clic sul pulsante del tipo di blocco nella barra degli strumenti per trasformare i blocchi selezionati in Gruppi o Colonne.

Puoi quindi applicare stili all'intero blocco Gruppo, come la modifica dell'allineamento o dello spazio.

L'editor a blocchi ti consente anche di aggiungere un blocco Gruppo o Colonne vuoto.

Dopodiché, puoi riempirli con altri blocchi.

Puoi aggiungere qualsiasi tipo di blocco in ogni colonna secondo necessità.

Questo ti permette di creare bellissimi layout per diversi casi d'uso.

Salvare e riutilizzare contenuti con pattern sincronizzati (blocchi riutilizzabili)

Una delle funzionalità più potenti dell'editor a blocchi è la possibilità di salvare e riutilizzare contenuti in tutto il tuo sito. Questo viene fatto utilizzando Pattern Sincronizzati, precedentemente noti come Blocchi Riutilizzabili.

Un Pattern Sincronizzato è un blocco, o un gruppo di blocchi, che puoi utilizzare su più post e pagine.

La parte migliore è che quando modifichi il pattern, questo si aggiorna automaticamente ovunque tu l'abbia utilizzato. Questo è perfetto per contenuti che devono rimanere coerenti, come una casella di invito all'azione, una biografia dell'autore o informazioni di contatto.

Per crearne uno, seleziona semplicemente il blocco o i blocchi che desideri salvare. Quindi, fai clic sull'icona del menu con tre puntini nella barra degli strumenti del blocco e scegli l'opzione 'Crea pattern'.

Apparirà una finestra popup. Qui, puoi dare un nome al tuo pattern e assegnarlo a una categoria per mantenere le cose organizzate.

Soprattutto, devi assicurarti che l'opzione 'Sincronizzato' sia attivata. Questo è ciò che fa sì che il pattern si aggiorni ovunque contemporaneamente.

Dopo aver fatto clic su 'Crea', il tuo nuovo Pattern Sincronizzato verrà salvato.

Per utilizzarlo in un altro post o pagina, fai semplicemente clic sul pulsante di inserimento blocchi (+) e trovalo nella scheda 'Pattern', oppure cercalo semplicemente per nome.

I pattern semplificano l'aggiunta di elementi comuni ai layout per i proprietari di siti, come chiamate all'azione, pulsanti dei social media, banner e altro ancora.

Il tuo tema o i tuoi plugin WordPress potrebbero persino includere i propri pattern, oppure puoi trovare pattern creati da altri nella libreria di pattern di blocchi di WordPress.

Se hai bisogno di ulteriore aiuto, abbiamo una guida separata per principianti su come trovare e utilizzare i pattern di blocchi di WordPress.

Pubblicazione e opzioni di gestione nell'editor a blocchi di Gutenberg

Ogni post di WordPress contiene molti metadati. Questi includono informazioni come la data di pubblicazione, categorie e tag, immagini in evidenza e altro ancora.

Tutte queste opzioni sono ben posizionate nella colonna di destra nella schermata dell'editor.

Opzioni dei plugin in Gutenberg

I plugin di WordPress possono sfruttare l'API dell'editor a blocchi per integrare le proprie impostazioni all'interno della schermata di modifica.

Alcuni plugin popolari includono i propri blocchi.

Ad esempio, WPForms, il miglior plugin per moduli di contatto di WordPress, ti consente di aggiungere moduli al tuo contenuto utilizzando un blocco.

Altri plugin di WordPress potrebbero anche aggiungere le loro impostazioni alla schermata dell'editor a blocchi.

Ad esempio, ecco come All in One SEO for WordPress ti consente di modificare le tue impostazioni SEO nella parte inferiore dell'editor a blocchi:

Allo stesso modo, se gestisci un negozio online utilizzando WooCommerce, noterai che ha anche i suoi blocchi.

Questi blocchi ti consentono di aggiungere i tuoi prodotti a qualsiasi dei tuoi post e pagine di WordPress.

Aggiungere alcuni blocchi comuni nell'editor a blocchi

L'editor a blocchi può fare tutto ciò che faceva il vecchio editor classico.

Tuttavia, farai le cose più velocemente ed elegantemente di prima. Inoltre, può fare molto di più, come permetterti di stilizzare i tuoi contenuti con una serie di opzioni no-code.

Ecco alcuni dei blocchi comuni che puoi utilizzare.

1. Aggiungere un'immagine nell'editor a blocchi di WordPress

Esiste un blocco Immagine pronto all'uso nell'editor a blocchi di WordPress. Basta aggiungere il blocco e quindi caricare un file immagine o selezionarlo dalla libreria multimediale.

Puoi anche trascinare e rilasciare immagini dal tuo computer e l'editor creerà automaticamente un blocco Immagine.

Una volta aggiunta un'immagine, potrai vedere le impostazioni del blocco, dove puoi aggiungere metadati per l'immagine, come il testo alternativo, la dimensione della risoluzione dell'immagine e l'aggiunta di un link all'immagine.

Per maggiori informazioni, dai un'occhiata al nostro tutorial su come aggiungere immagini in WordPress.

2. Aggiungere un link nell'editor a blocchi

L'editor a blocchi è dotato di diversi blocchi in cui è possibile aggiungere testo. Quello più comunemente usato è il blocco Paragrafo, che ha un pulsante per inserire link nella barra degli strumenti.

Tutti gli altri blocchi di testo comunemente usati hanno anche un pulsante per i link nella barra degli strumenti.

Puoi anche inserire un link usando la scorciatoia da tastiera, che è Comando + K per Mac e CTRL + K sui computer Windows.

3. Aggiungere una galleria di immagini in Gutenberg

Il blocco Galleria funziona come il blocco immagine. Lo aggiungi e poi carichi o selezioni i file immagine.

Per maggiori dettagli, consulta la nostra guida su come creare una galleria di immagini in WordPress.

4. Aggiungere Shortcode nei Post di WordPress con Gutenberg

Tutti i tuoi shortcode funzioneranno proprio come facevano nell'editor classico. Puoi semplicemente aggiungerli a un blocco Paragrafo, oppure puoi usare il blocco Shortcode.

Esplorare altri blocchi di contenuto nell'editor a blocchi

L'editor di Gutenberg prometteva di risolvere alcuni problemi di usabilità di lunga data in WordPress introducendo nuovi blocchi.

Di seguito alcuni dei preferiti che crediamo gli utenti troveranno immensamente utili.

1. Aggiungere un'immagine accanto a del testo in WordPress

Molti dei nostri utenti non riuscivano a posizionare un'immagine accanto al testo usando il vecchio editor. Ora puoi farlo con il blocco Media e Testo.

Questo semplice blocco presenta due blocchi affiancati, che ti permettono di aggiungere facilmente un'immagine con del testo accanto.

2. Aggiungere un pulsante nei post e nelle pagine di WordPress

Un altro fastidio del vecchio editor era l'aggiunta di un pulsante ai tuoi post o pagine del blog. Dovevi usare un plugin che creava uno shortcode per il pulsante o passare alla modalità HTML e scrivere codice.

Fortunatamente, Gutenberg ha un blocco Pulsante che ti permette di aggiungere rapidamente un pulsante a qualsiasi post o pagina.

Puoi aggiungere un link per il tuo pulsante, cambiare i colori e altro ancora. Per i dettagli, consulta il nostro articolo su come aggiungere facilmente pulsanti in WordPress.

3. Aggiungere bellissime immagini di copertina nei post del blog e nelle landing page

Un'altra fantastica funzionalità che potresti voler provare è il blocco Copertina, che ti permette di aggiungere immagini di copertina o sfondi colorati ai tuoi post e pagine.

Un'immagine di copertina è un'immagine più larga spesso usata per una nuova sezione di una pagina o l'inizio di una storia. Ha un bell'aspetto e ti permette di creare layout di contenuti coinvolgenti.

Aggiungi semplicemente un blocco Copertina e poi carica l'immagine che desideri utilizzare. Puoi scegliere un colore di sovrapposizione per la copertina o renderla un'immagine di sfondo fissa per creare un effetto parallax quando gli utenti scorrono la pagina.

Per maggiori dettagli, consulta il nostro articolo sulla differenza tra immagini di copertina e immagini in evidenza in WordPress.

4. Creazione di tabelle all'interno degli articoli

L'editor classico non aveva un pulsante per aggiungere tabelle ai tuoi post di WordPress. Dovevi usare un plugin o creare una tabella scrivendo CSS e HTML personalizzati.

Ora, l'editor a blocchi ha un blocco Tabella predefinito, che rende l'aggiunta di tabelle ai tuoi post e pagine super facile. Basta aggiungere il blocco e selezionare il numero di colonne e righe che desideri inserire.

Ora puoi iniziare ad aggiungere dati alle righe della tabella. Puoi sempre aggiungere altre righe e colonne se necessario, e sono disponibili due opzioni di stile di base.

5. Creazione di contenuti a più colonne

La creazione di contenuti a più colonne era un altro problema che l'editor classico non gestiva affatto.

Fortunatamente, l'editor a blocchi ti consente di aggiungere un blocco Colonne, che aggiunge due colonne di blocchi paragrafo.

Questo blocco colonna è piuttosto flessibile. Puoi aggiungere fino a 6 colonne in una riga e persino utilizzare altri blocchi all'interno di ciascuna colonna.

Suggerimenti bonus per usare Gutenberg come un professionista

Guardando l'editor a blocchi, potresti chiederti se passerai più tempo ad aggiungere e regolare blocchi che a creare contenuti effettivi.

Beh, l'editor a blocchi è incredibilmente veloce, e anche un uso molto basilare per pochi minuti ti permetterà di aggiungere blocchi istantaneamente senza nemmeno pensarci.

Molto presto, ti renderai conto di quanto più veloce diventerà il tuo flusso di lavoro con questo approccio.

Ecco alcuni suggerimenti bonus per utenti esperti per aiutarti a lavorare ancora più velocemente con l'editor a blocchi di WordPress.

1. Sposta la barra degli strumenti del blocco in alto

Potresti aver notato negli screenshot qui sopra che una barra degli strumenti appare in cima a ogni blocco. Puoi spostare questa barra degli strumenti in cima all'editor.

Per accedere all'opzione 'Barra degli strumenti in alto', fai clic sul pulsante con tre puntini nell'angolo in alto a destra dello schermo.

2. Usa le scorciatoie da tastiera

Gutenberg offre diverse scorciatoie utili che renderanno il tuo flusso di lavoro ancora più rapido e semplice. La prima che dovresti iniziare a usare subito è la /.

Digita semplicemente /, inizia a scrivere, e l'editor ti mostrerà i blocchi corrispondenti che puoi aggiungere istantaneamente.

Per altre scorciatoie, fai clic sul menu con tre puntini nell'angolo in alto a destra dello schermo e seleziona 'Scorciatoie da tastiera'.

Questo aprirà un popup con un elenco di tutte le scorciatoie da tastiera che puoi utilizzare. L'elenco avrà scorciatoie diverse per utenti Windows e Mac.

3. Trascina e rilascia i media per creare automaticamente blocchi multimediali

Gutenberg ti consente di trascinare e rilasciare file ovunque sullo schermo, creando automaticamente un blocco per te.

Ad esempio, puoi rilasciare un singolo file immagine o video, e verrà creato il blocco per te. In alternativa, potresti rilasciare più file immagine per creare un blocco Galleria.

4. Aggiungere YouTube, Twitter, Vimeo e altri embed

L'editor a blocchi rende più facile incorporare contenuti di terze parti nei tuoi contenuti WordPress. Ci sono blocchi per tutti i servizi popolari di terze parti.

Tuttavia, puoi semplicemente copiare e incollare l'URL di embed in qualsiasi punto, e verrà automaticamente creato un blocco per te.

Ad esempio, l'aggiunta di un URL di un video di YouTube creerà automaticamente un blocco di embed di YouTube e visualizzerà il video.

Mentre incollare un URL direttamente non funzionerà per i post di Facebook e Instagram, la soluzione è semplice.

Devi solo abilitare la funzionalità ‘oEmbeds’ utilizzando Smash Balloon Social Photo Feed e incollare l'URL nel blocco ‘Embed’.

Per i dettagli completi, consulta il nostro articolo su come incorporare post di Facebook e Instagram in WordPress.

Aggiungere altri blocchi all'editor a blocchi di Gutenberg in WordPress

L'editor a blocchi di WordPress consente agli sviluppatori di creare i propri blocchi. Alcuni eccellenti plugin WordPress offrono pacchetti di blocchi per il nuovo editor.

Eccone alcuni:

1. Blocchi Gutenberg per WordPress Spectra

Spectra WordPress Gutenberg Blocks è una libreria di blocchi con molti blocchi avanzati che ti aiutano ad aggiungere più elementi di design ai tuoi contenuti.

Spectra, creato dalle persone dietro il popolare tema WordPress Astra, ti aiuta a creare bellissimi design senza scrivere codice.

Per maggiori informazioni, consulta la nostra recensione completa di Spectra.

2. Blocchi PublishPress

PublishPress Blocks è un'altra potente libreria di blocchi che include blocchi aggiuntivi per estendere l'editor a blocchi di Gutenberg.

Include bellissime opzioni di layout, slider, pulsanti, icone, gallerie di immagini, mappe, schede, testimonianze, fisarmoniche e altro ancora.

3. Stackable – Blocchi Gutenberg

Stackable – Gutenberg Blocks è una raccolta di blocchi Gutenberg dal design accattivante che puoi utilizzare sul tuo sito web. Include blocchi per contenitori, post, griglie di funzionalità, fisarmoniche, caselle immagine, elenchi di icone, call to action e altro ancora.

Per altre opzioni, consulta il nostro elenco completo dei migliori plugin di blocchi Gutenberg per WordPress.

Domande frequenti su Gutenberg – L'editor a blocchi in WordPress

Da quando Gutenberg è diventato l'editor predefinito di WordPress, abbiamo ricevuto molte domande su come utilizzarlo. Ecco le risposte ad alcune delle domande più frequenti sull'editor a blocchi.

1. Cosa succede ai miei vecchi post e pagine nell'editor a blocchi? Posso ancora modificarli?

L'editor a blocchi non influisce sui tuoi vecchi post e pagine. Puoi ancora modificarli e l'editor a blocchi li aprirà automaticamente in un blocco contenente l'editor classico.

Puoi modificarli all'interno del vecchio editor, oppure puoi convertire i vecchi articoli in blocchi e utilizzare l'editor a blocchi.

2. Posso continuare a usare il vecchio editor?

Sì, puoi continuare a usare il vecchio editor. Installa e attiva semplicemente il plugin Classic Editor.

Dopo l'attivazione, l'editor a blocchi verrà disabilitato e potrai continuare a utilizzare l'editor classico.

Il plugin Classic Editor sarà ufficialmente supportato per il futuro prevedibile. Tuttavia, ti consigliamo vivamente di iniziare a utilizzare l'editor a blocchi ora per familiarizzare con il modo moderno di creare contenuti in WordPress.

3. Cosa devo fare se l'editor a blocchi non funziona con un plugin o un tema che sto utilizzando?

Project Gutenberg è stato a lungo in fase di sviluppo, il che ha dato agli autori di plugin e temi molto tempo per testare la compatibilità del loro codice.

Tuttavia, c'è ancora la possibilità che alcuni plugin e temi non funzionino bene con l'editor a blocchi. In tal caso, puoi installare il plugin Classic Editor, chiedere allo sviluppatore di aggiungere il supporto per Gutenberg o trovare un plugin o tema alternativo.

4. Come posso saperne di più sui suggerimenti e trucchi di Gutenberg?

WPBeginner è il posto migliore per imparare l'editor a blocchi in WordPress. Siamo il più grande sito di risorse WordPress su Internet.

Pubblicheremo nuovi articoli e aggiorneremo le nostre vecchie risorse per aiutarti a padroneggiare l'editor a blocchi.

Nel frattempo, se hai domande, non esitare a contattarci lasciando un commento o utilizzando il modulo di contatto sul nostro sito web.

5. Stai riscontrando problemi con Gutenberg?

Se stai riscontrando problemi con l'editor a blocchi di WordPress, abbiamo creato una guida rapida alla risoluzione dei problemi che elenca tutti i problemi comuni dell'editor a blocchi che gli utenti incontrano e come risolverli.

Tutorial video

Se non preferisci istruzioni scritte, guarda semplicemente il nostro video tutorial:

Iscriviti a WPBeginner

Risorse bonus

Le seguenti sono alcune risorse aggiuntive che ti aiuteranno a utilizzare l'editor a blocchi in modo più efficiente:

• Editor a blocchi di WordPress vs Page Builder: qual è la differenza?
• Come Creare un Blocco WordPress Personalizzato (Modo Facile)
• Come importare/esportare i tuoi blocchi Gutenberg di WordPress (2 passaggi)
• Widget di WordPress vs Blocchi – Qual è la Differenza? (Spiegato)
• Guida completa per principianti all'editor completo del sito di WordPress
• Migliori temi a blocchi per l'editing completo del sito in WordPress
• Suggerimenti per padroneggiare l'editor di contenuti di WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.