Blog

WordPress 5 Gutenberg come funziona: Tutorial come pubblicare articolo o news
Facebook
Twitter
Pinterest
WhatsApp

WordPress 5 Gutenberg come funziona: Tutorial come pubblicare articolo o news

Articolo letto 2085 volte

WordPress 5 Gutenberg, creare un articolo: questo tutorial ti darà delle semplici istruzioni per pubblicare post, articoli o news in wordpress 5 o versioni successive. La procedura è analoga anche per “portfolio, prodotti”, ecc. e tutte le pubblicazioni basate sugli articoli in wordpress con Editor Gutenberg.

Wordpress 5 Gutenberg come funziona: Tutorial come pubblicare articolo o news

WordPress 5 Gutenberg, come funziona l’editor a blocchi

Gutenberg, introdotto con la versione 5 di WordPress, è un editor a blocchi che consente l’inserimento di elementi come testi, gallerie o immagini, nei post o nelle pagine di WordPress. Ogni elemento è pensato come un “blocco” che si può modificare, spostare, cancellare o aggiungere. Così la tua news sarà più attraente e dotata di un layout ricco e movimentato e attirerà più visitatori.

Mh!, sembra interessante, vediamo come funziona.

Questo tutorial è stato realizzato con la versione 5.3 di WordPress.

Per iniziare accedi all’area di amministrazione di WordPress 5+ e fai login

Per continuare devi aver a disposizione: Nome utente, Password e andare all’url o indirizzo web del sito su cui volete pubblicare il post, seguito da /wp-admin, proprio come trovi qui sotto:

www.iltuosito.com/wp-admin

Puoi copiare ed incollare l’indirizzo ma ricorda che dovrai sostituire www.iltuosito.com con il giusto indirizzo del tuo sito web.

Ok sei dentro, ora fai click su “Articoli”

Crea un nuovo articolo cliccando su “Aggiungi articolo” e troverai Gutenberg pronto ad aspettarti con la sua nuova pagina di editor.

Lavoriamo con WordPress 5 Gutenberg, l’editor a blocchi, vediamolo nell’insieme

Wordpress 5 Gutenberg panoramica

Se eri abituato alle versioni precedenti del famoso editor di WordPress troverai da subito tante modifiche che vediamo subito nel dettaglio:

Tab Documento

Sulla colonna destra ora trovi due Tab (o linguette) con Documento e Blocco. Iniziamo con “documento”, qui puoi impostare tantissime voci come ad esempio Permalink, che va modificato se vuoi un SEO perfetto per il tuo articolo, oppure Categorie o immagine in evidenza.

Tab Blocco

Il tab Blocco, invece, riporta tutte le impostazioni disponibili per il singolo blocco aggiunto alla pagina.

Come inserire il titolo della pagina

Dove trovi scritto “Aggiungi titolo” in grigio, fai click e scrivi nel campo il nome della tua pagina, questo è molto importante per il SEO, il titolo della pagina deve una lunghezza massima di circa 60 caratteri e deve identificare bene la pagina.

 

Aggiungi il primo Blocco

Utilizza le icone con “il più dentro il cerchietto” per aggiungere un blocco. Ti apparirà un bel menu a tendina ricco di blocchi da poter inserire nella tua pagina.

Wordpress 5 Gutenberg aggiungi blocco

Per il momento fai click su “Titolo H”

Vedremo le caratteristiche di un blocco semplice ma capirai subito come funziona tutto l’editor e non ti sarà difficile esplorare le tantissime altre voci di blocco a tua disposizione.

Scrivi nel blocco

Una volta aggiunto il blocco “Titolo H” questo sarà evidenziato da un bordino grigio e sarà pronto per accettare il tuo testo. Per sicurezza puoi fare un ciak con il mouse dentro al campo e poi comincia a scrivere il tuo titolo.

Wordpress 5 Gutenberg scrivi titolo pagina

Nella colonna laterale a destra le impostazioni per il blocco

Se sposti la tua attenzione sulla colonna destra del tuo browser, noterai che automaticamente ti vengono proposte le possibilità che hai per l’impostazione dei vari blocchi. Per questa volta troviamo, in riferimento ai titoli, la possibilità di impostare la grandezza su un livello H1, H2, H3, ecc

Nelle Impostazioni Titolo, trovi la possibilità di inserire un colore per il titolo, ma anche per il testo in paragrafo e per moltissimi altri blocchi.

Prova da solo, inserisci un testo

Ok ora che hai imparato lo schema generale dei blocchi, puoi cimentarti con l’inserimento di testo (paragrafo) usando la medesima procedura.

Aggiungi un blocco “paragrafo”, scrivi un po’ di testo e … il gioco è fatto! Ci sei riuscito? Benissimo, allora procediamo.

Altre opzioni per i blocchi

Muovi il mouse sopra al blocco per far apparire le icone in alto, se stai già editando il blocco questa operazione non serve.
L’ultima icona con i “tre puntini in verticale” serve per aprire il menu “Altre opzioni”.

Wordpress 5 Gutenberg modifica blocco

Come cancellare i blocchi

Qui trovi importanti opzioni ma quella che voglio evidenziare è “Rimuovi blocco” che ti consente di eliminare (cancellare) un blocco dalla tua pagina o post.

Ricorda

Puoi scorrere nel menu a tendina dei blocchi per vedere le altre possibilità che sono suddivise per categorie funzionali, come:

  • Più utilizzati
    Qui trovi i blocchi più ricorrenti
  • Blocchi comuni
    Paragrafo, Titolo, immagine, galleria, citazione, audio e video
  • Formattazione
    Codice, Html personalizzato, ecc
  • Elementi del Layout
    Pulsante, Colonne, Leggi tutto, Interruzione di pagina, separatori…
  • Widget
    Inserisci un widget come: Shortcode, articoli recenti, Ultimi commenti, ecc
  • Incorporamenti
    Includi o incorpori risorse da Twitter a Instagram, da YouTube a Spotify e tantissimi altri

Aggiungi un’immagine

Per aggiungere un’immagine, devi agire come descritto in precedenza e fare click dai “blocchi comuni” sull’icona “immagine”. Una volta caricato il blocco scegli se caricare una nuova immagine sul server, usare la libreria di WordPress oppure inserire l’indirizzo (URL) di un’immagine.

Wordpress 5 Gutenberg inserisci immagine

Per il momento usiamo l’opzione “Libreria Media” per richiamare un’immagine precedentemente caricata in WordPress. Scegli una foto e premi il bottone in basso “Seleziona” (se non ne trovi nella libreria puoi sempre caricarla usando il tab “Carica File” oppure trascinando nella finestra un’immagine dal tuo computer, l’upload si avvierà automaticamente).

Wordpress 5 Gutenberg Libreria

Una volta aggiunta la foto, usando la colonna di destra, puoi impostare il testo alternativo (ALT), la didascalia o le dimensioni tra quelle proposte.

Wordpress 5 Gutenberg Immagine inserita

Sostituire una foto già inserita

Se vuoi cambiare una foto inserita nel post o nella pagina tramite l’apposito blocco, fai doppio click sull’immagine e seleziona una nuova immagine.

Cancellare una foto

Per eliminare una foto lo dovrai fare agendo sul blocco immagine: fai click sui “tre pallini in verticale” e fai click su “rimuovi blocco”.

Spostare i blocchi

Wordpress 5 Gutenberg Spostare i Blocchi

Già, succede che volevi inserire prima il testo e poi la foto ma di fatto c’è prima la foto e dopo il testo, che fare?
Facile, fai un click sull’elemento che intendi spostare in modo che compaia il menu di modifica dei blocchi. Come vedi sul lato sinistro ci sono due frecce (alto e basso), usa una di queste per far scivolare il blocco o verso l’alto o verso il basso. Nessun blocco si cancellerà e troverei il nuovo ordinamento per il tuo layout.

Prima di salvare

Ok abbiamo inserito la base di un Post o una News: titolo, testo, foto. Abbiamo anche dato l’ordine giusto ai blocchi, che altro manca? Ovviamente bisogna Salvare gli inserimenti ma prima di tutto ricorda che dovrai attribuire una categoria.

Attribuisci una categoria alla news/post

Wordpress 5 Gutenberg Categorie

Questo è importante. Per far apparire un articolo nella giusta collocazione nel sito, è quasi sempre necessario assegnare una categoria, dipende dal tema utilizzato o da come è stata progettata e configurata la sezione su wordpress. Le categorie utilizzabili possono essere simili a: news, evidenza, novità, evento.

Ok ora puoi salvare

Le opzioni di salvataggio sono diverse:

  • Salva Bozza
    Consente il salvataggio ma la news rimane non visibile, questa opzione è utile se vuoi continuare il lavoro più tardi oppure se devi aspettare un ok o altre informazioni prima di renderla visibile.
  • Anteprima
    Dopo aver salvato come bozza usa questo bottone per vedere in anteprima come appare la news o il post quando sarà pubblicato.
  • Pubblica
    Questo bottone pubblica istantaneamente la tua News e tutti potranno vederla da subito. Se vuoi invece programmare una data specifica puoi impostare la data di pubblicazione usando la colonna laterale destra, al Tab “Documento” alla voce “Stato e Visibilità”: Fai click su Pubblica (all’inizio troverai accanto la scritta “immediatamente”) per far apparire un calendario dove potrai impostare la data e l’ora della tua pubblicazione, sia indietro che in avanti nel tempo.

Wordpress 5 Gutenberg Salvare

 

Conclusioni

Come hai potuto vedere con l’aiuto di questo breve tutorial, la meccanica dell’editor a blocchi Gutenberg è abbastanza semplice. Baste veramente un minimo di dimestichezza con il Pc per poter intuire le potenzialità di questa modalità di editing per i nostri post.

Devo dire che con l’attuale versione 5.3 di Wp, le funzionalità generali e la facilità d’uso di Gutenberg sono notevolmente migliorate rispetto alle prime versioni introdotte con wordpres 5.

Ci sono tantissimi blocchi da esplorare

È vero: ci sono tantissimi blocchi in wordpress che soddisfano gran parte delle normali esigenze di un blogger, il mio consiglio è quello di provarli tutti per completare l’apprendimento di Gutenberg.

Tra i più importanti blocchi:

  • Galleria
  • Inserisci Youtube
  • Inserisci un widget
  • Video
  • COLONNE
  • ecc

 

Buon divertimento

Marco

 

Altre info

Per ulteriori informazioni o per conoscere il funzionamento dell’editor precedente di wordpress  vedi gli articoli di questo Blog:

Riguardo wordpress 5 Gutenberg

Marco Michelangeli

Marco Michelangeli

PENSO, SOGNO, CREO. La mia vita è fatta di colori e meraviglie, di sensazioni e intuizioni, nella quotidianità e nel lavoro. Con oltre venti anni di attivitá nel settore, progetto, penso e disegno Grafica, Siti web, Applicazioni, Illustrazioni, Cataloghi, Cartoni animati, Video, Azioni di marketing e molto altro ancora. Anche come consulente.

Altri Articoli

Dal portfolio

Commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *