WordPress Gutenberg Tutorial per gli utenti

Maddy Osman Ultimo aggiornamento 14.07.2021
11 Min.
Gutenberg-Guida
Ultimo aggiornamento 14.07.2021

Se stai pensando di costruire un sito web con WordPress , probabilmente hai sentito parlare di Gutenberg . Gutenberg è l'editor per WordPress , che è stato rilasciato con la versione 5.0. 

Dal suo rilascio iniziale, molte caratteristiche sono state aggiunte al WordPress Block Editor - tra cui Block Grouping e Block Patterns. Ma la ragione principale per cui Gutenberg è così popolare è che ti permette di modificare post e pagine in modo molto più visivo rispetto all'editor standard WordPress .

WordPress  Gutenberg  Tutorial per gli utenti

Questa guida include:

  • Cosa è Gutenberg
  • una guida completa a Gutenberg per gli sviluppatori
  • un breve elenco delle diverse caratteristiche in Gutenberg

E posso promettervi una cosa adesso: Dopo questa guida saprete come creare layout professionali per i vostri siti web con l'aiuto di Gutenberg .

WordPress 5.6 è finalmente arrivato!

L'ultima versione di WordPress si concentra su layout e design: un nuovissimo Theme, opzioni di layout aggiuntive per i post e le pagine e modelli di blocco per l'intero sito web. Potete trovare tutti i dettagli nella nota di rilascio ufficiale e nella guida di campoWordPress .

Cosa c'è di nuovo nel Gutenberg Block Editor?

Prima di immergerci specificamente nel tutorial di WordPress Gutenberg , diamo prima un'occhiata a cosa sia effettivamente Gutenberg . 

Gutenberg sostituisce l'editor TinyMCE e ti permette di utilizzare i blocchi di contenuto per aggiungere testo, immagini e altri media ai tuoi post e pagine. Il classico editor TinyMCE era basato sul testo - e limitava i nuovi utenti che non avevano competenze di codifica. 

Mentre la conoscenza dell'HTML non era essenziale per usare l'editor classico, si doveva spesso andare nella vista HTML per fare qualsiasi cambiamento. Altrimenti, dovevi installare un Plugin separato per aggiungere semplici funzioni come tabelle o gallerie di immagini al tuo sito web.

WordPress  Gutenberg  Tutorial per gli utenti

Con Gutenberg puoi progettare il tuo sito web non con testo ma con immagini. Con l'editor di blocchi WordPress Gutenberg , puoi facilmente aggiungere blocchi di contenuto alle tue pagine e post. Ci sono blocchi per le immagini, per i paragrafi - e per quasi ogni altro elemento che vuoi avere sul tuo sito web.

WordPress  Gutenberg  Tutorial per gli utenti

Gutenberg è ora l'editor di blocchi predefinito di WordPress e viene fornito con molti blocchi out-of-the-box. Puoi anche aggiungere WordPress Plugins che ti darà ancora più blocchi per incorporare facilmente varie funzioni nei tuoi post e pagine. 

WordPress Gutenberg Tutorial

Quando si costruiscono siti web, non fa mai male semplificare il flusso di lavoro. Gutenberg può farvi risparmiare molto tempo. Quindi è giunto il momento di dare un'occhiata più da vicino all'editor di blocchi WordPress . Per prima cosa, ripassiamo insieme le basi di Gutenberg.  

Come usare Gutenberg

  1. Crea un nuovo post sul blog come al solito in WordPress . 
  2. Clicca sul segno più blu nell'angolo in alto a sinistra. 
  3. Seleziona il blocco che vuoi includere nel tuo post. 
  4. Regola le impostazioni del blocco all'interno del design del post. 
  5. Riorganizza i tuoi blocchi trascinandoli e rilasciandoli.

Questo è tutto! L'unica cosa che ha bisogno di qualche spiegazione in più è capire come funzionano i singoli blocchi, come personalizzarli e come raggrupparli. Ci arriveremo nel resto del nostro WordPress Gutenberg tutorial. 

Manuale dettagliato per il Gutenberg Block Editor 

Ora che abbiamo tolto di mezzo le basi, tuffiamoci nelle specifiche dell'editor di blocchi WordPress . Quando si carica per la prima volta la schermata dell'editor di una pagina o di un post con Gutenberg , l'editor sembra piuttosto vuoto - anche più dell'editor classico, perché mancano le opzioni del menu tradizionale. Non c'è problema. Il primo passo è aggiungere alcuni blocchi. 

1. aggiungi dei blocchi al tuo post

Per aggiungere un blocco al tuo post, premi il segno più nell'angolo in alto a sinistra della bozza del post. Un nuovo blocco è sovrapposto con una piccola serie di opzioni di menu. 

Ci concentreremo prima sul menu principale, e poi discuteremo su come fare ulteriori regolazioni con il menu secondario.

WordPress  Gutenberg  Tutorial per gli utenti

Puoi sfogliare i tipi di blocco o usare la barra di ricerca per trovare il tipo di blocco che vuoi. Poi aggiungi un blocco digitando "/" e il tipo di blocco. Per esempio, se volete inserire un'immagine, digitate "/image".

Ci sono molti blocchi disponibili, tra cui

  • Tacchi
  • Immagini
  • Titoli
  • Ascolta
  • Tabelle
  • Separatore
  • Galleria
  • Pulsanti
  • Video
  • File audio 

Se hai installato Plugins con blocchi personalizzati, questi appariranno anche in questa lista. 

In alternativa, puoi aggiungere un blocco cliccando sul segno più nero: Questo appare quando si clicca nella bozza dove c'è scritto "Scrivi qualcosa o scrivi per bloccare la selezione". 

WordPress  Gutenberg  Tutorial per gli utenti

Oppure puoi seguire le istruzioni nel testo e digitare "/" per selezionare da un elenco a discesa di opzioni.  

WordPress  Gutenberg  Tutorial per gli utenti

2. riorganizzare i tuoi blocchi

Puoi spostare i blocchi dove vuoi che appaiano usando le frecce sul blocco stesso o premendo i punti tra le frecce per trascinare i blocchi.

WordPress  Gutenberg  Tutorial per gli utenti

Con il WordPress Block Editor, è molto più facile riorganizzare il tuo contenuto che con l'editor classico. Non devi preoccuparti di rompere il codice, dato che tutte le informazioni sul contenuto del blocco (incluso il carattere, il colore e la dimensione) si spostano con il blocco. 

La semplicità con cui puoi organizzare i tuoi blocchi è una delle migliori caratteristiche di Gutenberg Block Editor. Si risparmia tempo nel sistemare il codice rotto e non si deve fare affidamento sul copia-e-incolla per fare il lavoro.

3. regola le impostazioni di stile del tuo blocco

Il prossimo passo nel nostro tutorial di WordPress Gutenberg è conoscere il menu Style Settings. In alcuni casi, alcune opzioni appaiono vicino al blocco quando si clicca su di esse. Per esempio, se state modificando un blocco paragrafo, alcune opzioni familiari appariranno proprio sopra il blocco. 

WordPress  Gutenberg  Tutorial per gli utenti

Tuttavia, un menu secondario apparirà anche sul lato destro dello schermo. Clicca sulla scheda"Impostazioni".  

WordPress  Gutenberg  Tutorial per gli utenti

Le opzioni delle impostazioni di stile che puoi personalizzare dipendono dal blocco. Per esempio, le impostazioni del blocco Paragraph sono diverse da quelle del blocco Image.

WordPress  Gutenberg  Tutorial per gli utenti

Il menu Style Settings ti permette di personalizzare facilmente i blocchi nei tuoi post. Di nuovo, a differenza dell'editor classico, non devi preoccuparti di fare modifiche alla didascalia di un'immagine e rovinare la formattazione del testo sottostante. 

Creare blocchi riutilizzabili dell'editor Gutenberg

Ora veniamo ai suggerimenti avanzati di WordPress Gutenberg tutorial. Ti risparmierai un sacco di tempo e fatica salvando blocchi che potrai riutilizzare in futuri post, pagine e altri siti web WordPress .

WordPress  Gutenberg  Tutorial per gli utenti

I blocchi riutilizzabili sono utili quando si hanno elementi che devono essere aggiunti regolarmente a una particolare pagina o tipo di post. 

Diciamo che scrivi recensioni di film e hai un foglio di calcolo che mostra le tue classifiche per ogni film. Vuoi che abbia sempre lo stesso aspetto, con uno stile specifico e lo stesso numero di colonne e righe. Se si crea un blocco riutilizzabile, si può risparmiare una notevole quantità di tempo ricreandolo per ogni post. 

Salvare lo stile e i vari attributi degli elementi può anche essere un vero risparmio di tempo per i pulsanti. 

Diciamo che hai bisogno della stessa CTA (call-to-action) in ogni post che scrivi. Per creare un pulsante riutilizzabile, iniziate con il tipico processo di aggiunta di un blocco di pulsanti. Regola lo stile e il testo fino a quando non appare come vuoi tu.  

WordPress  Gutenberg  Tutorial per gli utenti

Poi clicca sui tre punti nel menu dei blocchi e seleziona Aggiungi ai blocchi riutilizzabili

WordPress  Gutenberg  Tutorial per gli utenti

Qui puoi dare un nome al tuo nuovo blocco. 

WordPress  Gutenberg  Tutorial per gli utenti

Se vuoi riutilizzare questo blocco, vai al menu"Regular Blocks", passa alla scheda"Reusable" e seleziona il tuo blocco salvato. 

WordPress  Gutenberg  Tutorial per gli utenti

Puoi anche esportare blocchi riutilizzabili per usarli su altri siti web. Basta cliccare sui tre punti accanto al blocco, selezionare Export as JSON e scaricare il file. 

WordPress  Gutenberg  Tutorial per gli utenti

Poi, per aggiungere un blocco riutilizzabile esportato ad un altro sito WordPress , vai alla scheda Riutilizzabile nel menu Blocchi e seleziona Gestisci tutti i blocchi riutilizzabili

WordPress  Gutenberg  Tutorial per gli utenti

Questo apre una sezione dall'aspetto più tradizionale nel WordPress dashboarddove puoi gestire tutti i blocchi riutilizzabili che hai creato. 

Se hai salvato dei blocchi riutilizzabili da altri siti web, puoi caricarli cliccando su Import from JSON. Una volta fatto questo, dovresti essere in grado di accedervi come al solito dalla scheda Riutilizzabile nel menu Blocchi

Metti i tuoi blocchi in gruppi

Il prossimo Pro Tip nel nostro tutorial WordPress Gutenberg riguarda il raggruppamento dei blocchi. Se metti due o più blocchi in un gruppo, puoi regolarli e manipolarli come se fossero un unico blocco. 

Per esempio, puoi raggruppare un blocco di call-to-action per i social media con un blocco che contiene icone di condivisione sociale. Puoi anche raggruppare un blocco paragrafo con un blocco pulsante per creare una CTA standard che puoi inserire alla fine dei tuoi post. 

Per creare un gruppo di blocchi usando il Gutenberg Block Editor, seleziona tutti i blocchi che vuoi raggruppare. Poi clicca sull'icona a strati sul lato sinistro della piccola sovrapposizione del menu:

WordPress  Gutenberg  Tutorial per gli utenti

Appare un nuovo menu con la scritta"Transform to", clicca su Group. Questo è tutto. Ora puoi spostare e regolare questi blocchi come se fossero uno solo. 

È ancora possibile apportare modifiche alle impostazioni di ogni singolo blocco. Per esempio, potete aggiungere del testo a un blocco di paragrafo e cambiare il suo aspetto. 

Se vuoi disaggregare i blocchi, seleziona il gruppo e poi clicca sui tre punti nel menu di sovrapposizione. Scorri verso il basso e clicca su Ungroup.

WordPress  Gutenberg  Tutorial per gli utenti

Questa funzione funziona anche con i blocchi riutilizzabili. Dopo aver raggruppato i blocchi, puoi salvarli come blocchi riutilizzabili seguendo la stessa procedura di cui sopra. 

Usare gli schemi a blocchi nell'editor di blocchi di WordPress

Con WordPress Block Patterns puoi creare e condividere layout di blocchi predefiniti. Con Block Patterns è possibile creare layout complessi con pochi clic del mouse.

Per accedere a Block Patterns, clicca sullo stesso segno più che hai usato per accedere al menu Block . Selezionare la scheda Schemi

WordPress  Gutenberg  Tutorial per gli utenti

A prima vista, i Block Patterns sembrano simili ai blocchi riutilizzabili. Tuttavia, i modelli a blocchi sono la cosa più vicina alla capacità di creare intere pagine in Gutenberg il più vicino. 

Con Block Patterns, puoi aggiungere sezioni di layout completo ai tuoi post o pagine con un solo clic. Questi sono ideali se vuoi creare e salvare un layout da usare in più post. 

Il WordPress Block Editor viene fornito con diversi modelli pre-progettati, tra cui

  • colonne di testo multiple
  • pulsanti adiacenti
  • intestazioni personalizzate
  • Citazioni con immagini
WordPress  Gutenberg  Tutorial per gli utenti

Un altro vantaggio degli schemi a blocchi è che permettono di passare più facilmente da un Themes passare da uno all'altro. Poiché la vostra formattazione è legata ai blocchi stessi, non è influenzata da un altro Theme . 

Se volete creare manualmente i vostri schemi a blocchi, questo richiede alcune abilità di programmazione. Nel manuale di sviluppo, sono chiamati layout di blocco predefiniti

La creazione di Block Patterns da zero richiede l'uso dell'API (Block Application Programming Interface). Tuttavia, il Plugin Block Pattern Builder può aiutare. 

WordPress  Gutenberg  Tutorial per gli utenti

Aggiungere altri blocchi a Gutenberg

Prima di continuare con questo WordPress Gutenberg tutorial, dovete sapere che ci sono diversi Plugins che permettono di aggiungere ancora più tipi di blocchi all'editor, tra cui

  • Tabella dei contenuti
  • Listini prezzi
  • Google Maps 
  • Moduli di contatto

C'è una directory ufficiale dei blocchi WordPress dove si possono trovare e aggiungere altri blocchi per Gutenberg . 

WordPress  Gutenberg  Tutorial per gli utenti

Il piano originale era di creare una sottodirectory per il blocco singolo Plugins. Invece, la directory corrente è una sottosezione della directory standard Plugin di WordPress con una lista ricercabile di blocchi basati su Plugins. 

Modifica completa del sito web in Gutenberg

Al momento, Gutenberg non permette ancora l'editing completo del sito web. Tuttavia, il team di sviluppo di WordPress sta facendo grandi progressi verso questo obiettivo, compresa l'aggiunta di modelli a blocchi. 

C'è attualmente una versione sperimentale di Twenty Twenty Themes, che utilizza l'editing completo del sito web e abbraccia l'idea di un blocco basato su Themes

Con il WordPress Block Editor, è ora possibile creare layout completamente personalizzati basati su blocchi - ma solo per i post e le pagine. Una volta che l'editing completo del sito web è arrivato a Gutenberg , i widget diventano obsoleti. Questo dà agli utenti il controllo completo su ogni elemento del layout, comprese le intestazioni, le barre laterali e i piè di pagina. 

Anche se il Gutenberg Block Editor non è ancora un costruttore di pagineWordPress completo, è sulla buona strada per diventarlo. Nel frattempo, i Block Patterns, come spiegato sopra nel WordPress Gutenberg Block Tutorial, forniscono un set di funzioni molto vicino a quello di un editor di siti web completo. 

Svantaggi dell'editor Gutenberg 

Mentre Gutenberg è uno strumento utile che ha cambiato il modo in cui molti utenti interagiscono con WordPress e creano contenuti, l'editor non è privo di svantaggi. 

Per esempio, quando Gutenberg è stato introdotto per la prima volta, era abbastanza buggato. La maggior parte di questo è stato risolto. 

Una cosa che non è un bug, tuttavia, è il fatto che Gutenberg è ancora incompatibile con molti Themes . Quindi, se volete usare un particolare Theme e vi piace il design, è probabile che non sarete in grado di personalizzarlo o usare Gutenberg in esso. Se ci provi, il risultato è spesso semplicemente un casino. 

Beh, Gutenberg è compatibile con alcuni Themes , ma non abbastanza per vantare una compatibilità diffusa. 

Un altro problema che Gutenberg porta sul tavolo è il fatto che non offre la stessa flessibilità dell' editor classico. Certo, Gutenberg elimina alcuni dei problemi di formattazione idiosincratica che si verificano con l'editor classico - ma purtroppo sei limitato nei tipi di pagine che puoi creare. 

Poiché le opzioni di personalizzazione più ampie Theme non sono ancora disponibili su Gutenberg , dovrai accontentarti di ciò che Gutenberg compatibile Themes e di quali blocchi e blocchi Plugins sono disponibili. 

Theme Le risorse disponibili per l'uso di Gutenberg stanno crescendo ad un ritmo costante - ma questo non rende Gutenberg un costruttore. Non ancora. 

In definitiva, Gutenberg è la scelta ideale per coloro che sono già abituati ai page builder o agli editor puramente visuali e vogliono mantenere quell'esperienza, o coloro che vogliono solo concentrarsi sul contenuto e fare il drag-and-drop del design. 

Pensieri finali: guida a WordPress Gutenberg 

L'editor Gutenberg è ora parte del nucleo di WordPress . Il team di sviluppo dietro WordPress ha grandi progetti per questo. Alla fine sarete in grado di creare menu di navigazione con Gutenberg , creare layout di siti web completi e Gutenberg sarà compatibile con ancora più Themes . 

Fino ad allora, puoi sfruttare al massimo le caratteristiche attualmente offerte da WordPress Block Editor e creare post e pagine visivamente accattivanti - senza conoscere una sola riga di codice. Un bell'affare, se ce lo chiedete. 

Quindi vai avanti: usa i suggerimenti del nostro tutorial WordPress Gutenberg e inizia a personalizzare il contenuto del tuo sito web. E assicurati che il tuo sito web funzioni a velocità ottimale con un piano di hostingWordPress da RAIDBOXES con una velocità ottimale. 

WordPress Gutenberg Editore: Le vostre domande

Cosa ne pensi dell'editor di WordPress Gutenberg ? Che domande hai per Maddy? Sentitevi liberi di usare la funzione di commento. Vuoi altri consigli su WordPress ? Allora seguici su Twitter, Facebook o tramite la nostra newsletter.

Maddy Osman è un SEO Content Strategist. Lavora con clienti selezionati nel WordPress e il settore dell'hosting web. Con un background nel web design e WordPress , ha una profonda comprensione del SEO - e sa esattamente come collegare i marchi con contenuti rilevanti per il SEO.

Articoli correlati

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.