fbpx
WordPress

Gutenberg, il nuovo editor di WordPress [TUTORIAL + REVIEW]

By 6 Novembre 2018 No Comments
gutenberg

 

Gutenberg sarà il nuovo editor di WordPress e cambierà il modo in cui si potranno costruire le pagine web.

Dalla versione 5.0 sarà pienamente operativo ma il plugin è già disponibile.

Non perderti questo tutorial che abbiamo preparto per te.

 

Cos’è Gutenberg

L’ editor di Gutenberg è un plugin che nasce per semplificare e rendere accessibile a tutti la realizzazione del sito dei propri sogni.

Gutenberg permetterà di personalizzare le pagine del nostro sito Web in modo molto semplice, sulla base di blocchi che aggiungeremo senza conoscere necessariamente il codice.

 

 

Starai sicuramente pensando ai vari page builder come Elementor, Divi, Visual Composer o Thrive Architect (tra gli altri) e ti chiedi: ma qual è la differenza tra Gutenberg e gli altri modelli di layout di WordPress?

 

Quello che puoi fare con l’editor Gutenberg è costruire le pagine grazie ai blocchi che metterà a disposizione il cms stesso e il risultato potrai già vederlo dal back-end, che è una grande novità per WordPress.

 

Vediamo ora come installarlo.

 

Come installare Gutenberg, il nuovo editor di WordPress 5.0

La prima cosa che devi fare è andare nella libreria dei plugin di WordPress e cercare “Gutenberg”:

 

Una volta ottenuto il risultato, è necessario fare clic su “installa ora” e “Attiva”.

 

Come utilizzare l’editor di WordPress Gutenberg 3.2.0

Con il plugin Gutenberg già installato, possiamo creare una nuova pagina o un nuovo post sul blog e iniziare a fare scherzi con questo nuovo editor.

Ecco un video per vedere più visivamente come funziona Gutenberg.

 

Barra degli strumenti di Gutenberg

In questo caso ti mostrerò come viene realizzata la demo del plugin, che è una voce in un blog, per vedere come è fatta la barra degli strumenti e vedere come funziona.

modifica gutenberg

wordpress gutenberg

Come ho detto prima, il costruttore Guternberg funziona a blocchi, quindi dovrai selezionare il pulsante “+” per aggiungere il blocco che ti interessa nelle varie “sezioni” del sito.

 

disfa gutenbergL’editor ti consente di annullare le modifiche apportate e di ripristinarle molto facilmente, perché ha incluso due pulsanti per andare avanti e indietro.

 

installa gutenbergProprio accanto al pulsante “+” abbiamo un pulsante “informazioni”, che ti dirà le informazioni generali come il numero di parole presenti sulla nostra pagina, il numero di intestazioni, i paragrafi e il numero di blocchi della pagina che stai creando. .

Inoltre, mostrerà la gerarchia dei title H_ che sono presenti nella pagina in modo molto semplice.

 

 

Alla tua destra troverai l’opzione di “Anteprima” con cui, come con altri costruttori di back-end, facendo clic su di esso vedrai i risultati di ciò che stai costruendo sulla pagina.

 

Ma fai attenzione, se fai clic sull’anteprima e non fai clic su “Pubblica” questa pagina non sarà visibile online sul tuo sito, ma rimarrà nelle bozze e solo gli amministratori o gli utenti con tale accesso potranno accedervi. Quindi una volta ultimata la revisione clicca su Pubblica.

 

tutorial di gutenberg

Se guardi a destra, dove ci sono gli strumenti, hai la possibilità di nascondere o mostrare alcune opzioni per personalizzare meglio la tua pagina.

 

Come potete vedere nella foto, le opzioni mostrate sono le stesse di quelle indicate nell’editor di default di WordPress come categorie, tags, immagine di anteprima, eccetera.

 

Accanto alla voce “Documento”, troverete la sezione “Blocco”, che cambierà a seconda del blocco che abbiamo selezionato (sia esso un testo, un’immagine, video, intestazione, ecc.).

In questo caso seleziono il blocco che desidero modificare e nella sezione blocco avrò la possibilità di personalizzare l’immagine principale, modificare il font, oppure modificare gli attributi tramite il codice CSS.

 

videotutorial gutenberg

D’altra parte, se guardi a destra dell’intero c’è un pulsante con 3 punti, e se lo selezioni puoi cambiare e passare dall’editor visuale all’editor codice con un clic, vedendo così i codici HTML di ogni blocco generato.

<! – wp: cover-image -> <! – / wp: cover-image ->

<! – wp: paragraph -> <! – / wp: paragraph ->

<! – wp: heading -> <! – / wp: heading ->

 

Gutenberg Blocks: il nuovo modo di impaginare

Una volta che abbiamo visto il funzionamento degli strumenti forniti dall’editor, vedremo come funzionano i blocchi di Gutenberg e trarre conclusioni su questo editor di WordPress.

La prima cosa che faremo è creare una nuova pagina in “Pagine“, “Aggiungi nuovo“, “Gutenberg“.

 

Una volta creata la pagina, aggiungiamo i nostri nuovi blocchi facendo clic sul pulsante +, come ho spiegato prima.

Il plugin offre una varietà di elementi che possono essere inclusi nella pagina, distribuiti come segue: il più utilizzato, formati comuni, elementi di design, e widget incorporati.

 

Qui hai una descrizione di tutto ciò che puoi trovare nell’editor di Gutenberg 3.2.0.

blocchi di gutenberg

 

Se avete usato qualsiasi altro costruttore di WordPress come ad esempio Elementor, vedrete che essi hanno uno stile molto simile, la differenza è che in Elementor è necessario trascinare e rilasciare, mentre Gutenberg aggiunge automaticamente il blocco alla fine della pagina.

 

Una volta aggiunto, vengono aperte le specifiche, come nel caso del testo: lettere in grassetto, allineamento del testo, collegamenti, ecc.

 

Se fai clic sui 3 punti delle impostazioni, vengono aperte alcune opzioni molto importanti, come la duplicazione, la modifica come HTML (quel singolo blocco) o l’eliminazione .

 

E queste opzioni facilitano notevolmente sia le pagine di layout e articoli, come è possibile duplicare ciascuna delle sezioni già hanno curato e sovrascritto modificando il testo o le immagini per evitare di dover aggiungere nuovi blocchi.

 

Prestazione di Gutenberg

Una volta visti alcuni elementi importanti per la costruzione delle nostre pagine web, vedremo le prestazioni di questo plug-in e se il fatto di modificarle influirà sulla velocità di caricamento.

 

Ho creato un post sul blog con Gutenberg e un altro identico con il classico editor di WordPress per confrontare le prestazioni di entrambi.

 

Gli articoli hanno entrambi questi contenuti:

  1. Il titolo della pagina.
  2. Blocchi di testo
  3. Blocco HTML con un video.

 

Una volta analizzati e misurati con lo strumento Pingdom Toolsi risultati delle prestazioni sono quasi identici , quindi l’utilizzo di questo plug-in non influisce sul carico o sul peso della pagina.

 

 

Lo stesso accade agli occhi di Google, dal momento che misuriamo la velocità di entrambe le pagine, il risultato è esattamente uguale.

 

Vantaggi e svantaggi dell’editor di WordPress Gutenberg

Partiamo dai vantaggi dell’utilizzo di Gutenberg in WordPress che considero più importanti.

 

Vantaggi:

È molto facile da usare , quindi la curva di apprendimento è più breve di quella del classico editor di WordPress.

Gutenberg è molto visivo, intuitivo e pulito.

L’opzione per modificare l’HTML di Gutenberg consente di modificare il codice per sezioni, essendo molto più chiaro ed evitando errori a causa della sua trasparenza.

Ha una grande varietà di blocchi per rendere attraente il design.

Include una veloce visualizzazione di intestazioni (H2, H3, H4 …), qualcosa che l’editor classico e altri costruttori non incorporano di default.

Con l’implementazione di Gutenberg nel tuo WordPress non avrai bisogno di installare un altro builder per progettare i contenuti.

Ottimo adattamento a dispositivi mobili e tablet.

Ti permette di inserire elementi da altre piattaforme web come YouTube o Vimeo facilmente e rapidamente.

Le prestazioni del plug-in sono buone sia nei computer che nei dispositivi mobili, quindi non rallentano il web o ne influenzano negativamente l’utilizzo.

 

Ma nel plugin WordPress Gutenberg troviamo anche grandi svantaggi, quindi è una buona opportunità per portarli alla luce.

 

Svantaggi:

Potrebbe essere incompatibile con alcuni plugin o temi WordPress.

Non è sufficientemente sviluppato perchè ancora in fase beta. Speriamo ci siano in futuro nuovi e importanti aggiornamenti.

 

Bene, ora è il momento di sapere cosa ne pensi, dal momento che è stato un argomento molto discusso negli ultimi mesi, mi piacerebbe avere un tuo parere.

 

I test

Se desideri fare delle prove prima di scaricare il plugin, esiste una Demo di Gutenberg attraverso la quale potrai cominciare a prendere dimestichezza con i nuovi concetti di cui ti ho parlato in questo articolo.

 

 

Author Luca Pioggiosi

Passo più tempo online che con gli amici. Forse esagero o forse è semplicemente ciò che amo fare. Da 10 anni ormai mi occupo di comunicare alle aziende e ai professionisti, quanto sia importante oggi avere una presenza e un'identità ben precisa online. Nell'animo sono effettivamente un pò nerd!

More posts by Luca Pioggiosi

Lascia un commento:

Leave a Reply

*