Come usare Gutenberg (WordPress Editor)


come usare i blocchi gutenbergNel 2018, WordPress si è spostato dal suo editor di vecchia data a quello che ha soprannominato “Gutenberg”.


A differenza dell’editor dei vecchi utenti, gli utenti di WordPress ora utilizzano un moderno editor di blocchi con trascinamento della selezione per creare e personalizzare siti Web, pubblicare contenuti e vendere i loro servizi e prodotti online.

Che tu sia un utente di vecchia data che cerca di dare un senso al nuovo editor o che sei nuovo di zecca su WordPress, questa guida ti insegnerà le corde. Imparerai:

  • In che modo i blocchi di Gutenberg differiscono dall’editor classico.
  • Come utilizzare il generatore di blocchi per creare e modificare pagine.
  • Cosa fanno i blocchi di Gutenberg.
  • Come sbloccare le impostazioni extra con la barra laterale.
  • Come utilizzare la barra degli strumenti per essere più produttivi.

Contents

L’editor classico contro i blocchi di Gutenberg

Il passaggio dall’editor classico ai blocchi di Gutenberg è un grande passo in avanti per WordPress. Vediamo come si è evoluto l’editor.

Il classico editor di WordPress

Dal 2003 al 2018, WordPress ha fornito ai suoi utenti un editor di testo di base.

WordPress-Classic-Editor

Il classico editor di WordPress era il tipico editor WYSIWYG (“quello che vedi è quello che ottieni”).

In altre parole, hai digitato il tuo contenuto nel campo aperto, formattato utilizzando la barra degli strumenti fornita e questo è più o meno come appariva il tuo testo sul tuo sito web.

WordPress-WYSIWYG-Editor

È un’interfaccia abbastanza semplice e quella a cui molti utenti di WordPress si sono abituati nel corso degli anni. Ma aveva i suoi limiti.

Per esempio:

WordPress-Page-Esempio

Ecco come il contenuto verrebbe visualizzato sul sito Web una volta pubblicato. Ma saresti in grado di confermare che tutto tradotto dall’editor alla pagina va bene usando la funzione “Anteprima”.

Non c’era modo di scrivere il contenuto nel contesto reale della pagina. Inoltre, è stata necessaria una certa familiarità con HTML o una dipendenza eccessiva dai plug-in per poter costruire progetti e layout più avanzati.

Nel 2018, WordPress ha deciso di correggere queste limitazioni rilasciando il nuovo editor WordPress (ovvero Gutenberg).

L’Editor blocchi di Gutenberg

Il nuovo editor di WordPress è un editor di blocchi con trascinamento della selezione.

Gutenberg

Ciò significa che il contenuto non è più scritto in un editor principale. I singoli blocchi vengono rilasciati in posizione per creare il contenuto di una pagina.

Gutenberg-Blocks

Quando viene selezionato ogni blocco, viene fornito con una barra degli strumenti univoca. Ciò consente un’esperienza di modifica più snella e personalizzata poiché ti vengono mostrati solo i controlli editoriali di cui hai bisogno in quel momento.

L’editor di Gutenberg ha anche reso molto più facile aggiungere tipi di contenuti e layout che altrimenti sarebbero troppo lunghi o difficili da fare per un principiante di WordPress da solo.

Più-Gutenberg-Block-Esempi

Inoltre, non esiste più alcun gioco d’ipotesi. Quello che crei nell’editor blocchi è come appare sul tuo sito web. Caratteri, stile e layout corrispondono tutti:

WordPress-pagina-Example-con-Gutenberg

Un editor di WordPress è migliore dell’altro?

Per quanto riguarda ciò che è meglio – l’editor classico o Gutenberg – dovrai capirlo da solo.

Sebbene WordPress venga automaticamente installato con Gutenberg, gli utenti possono installarlo il plug-in Editor classico se non sono ancora pronti per passare all’editor blocchi.

Sono disponibili anche altre opzioni del componente aggiuntivo dell’editor. Elementor e Beaver Builder sono due delle più popolari alternative dell’editor drag-and-drop, Block Categories
sebbene siano più adatti a designer e sviluppatori professionisti che devono sbloccare più funzioni.

Per ora, facciamo un tuffo più profondo in Gutenberg e diamo un’idea migliore di cosa aspettarsi dall’editor di trascinamento della selezione di WordPress.

Come utilizzare l’Editor blocchi di Gutenberg

Rivediamo l’editor dei blocchi di Gutenberg impostando una nuova pagina (o post).

Inizia con il menu WordPress sul lato sinistro dello schermo. Se si desidera creare una nuova pagina Web, passare con il mouse su “Pagine” e selezionare “Aggiungi nuovo”. Se desideri creare un nuovo post sul blog, passa con il mouse su “Post” e seleziona “Aggiungi nuovo”.

WordPress-Add-New-Pagina

Aggiungi un titolo

Con la nuova pagina o post creati, assegnagli un titolo nel blocco “Aggiungi titolo”:

Gutenberg-Title-Block

Crea il tuo primo blocco

I paragrafi in genere comprendono la maggior parte dei contenuti che inseriamo in una pagina Web, motivo per cui il primo blocco che Gutenberg ci fornisce è sempre un blocco di paragrafi:

Gutenberg-New-Paragrafo-Block

Se vuoi iniziare con un paragrafo, aggiungi il cursore al blocco vuoto che dice “Inizia a scrivere o digita / per scegliere un blocco”. Durante la digitazione, il contenuto riempirà il blocco.

Personalizza il contenuto in un blocco

Per personalizzare lo stile del tuo paragrafo, usa la barra degli strumenti che appare appena sopra di esso.

Allineamento

Con la maggior parte dei blocchi Gutenberg, avrai la possibilità di modificare l’allineamento del contenuto all’interno del blocco:

Gutenberg-Allineamento

La sinistra è l’impostazione predefinita. Puoi anche scegliere di allineare al centro o allineare a destra il contenuto.

Formattazione

Ogni volta che c’è un testo all’interno di un blocco, puoi formattarlo in grassetto:

Gutenberg-Paragrafo-Bold

Rendi il testo in corsivo:

Gutenberg-Paragrafo-italica

Oppure aggiungi un collegamento ipertestuale:

Gutenberg-Paragrafo-Link

Se si desidera aprire i collegamenti in una nuova finestra del browser, fare clic sulla freccia giù nella barra dei collegamenti ipertestuali. Dopo aver apportato le modifiche, fai clic sulla freccia “Torna” per salvare il link.

Opzioni di stile aggiuntive

Se fai clic sulla freccia giù nella barra degli strumenti, troverai ulteriori opzioni di stilizzazione del testo:

Gutenberg-Più-text-Opzioni

“Code” modella il testo come se fosse scritto in un editor di codice:

Gutenberg-Paragrafo-Code

“Immagine in linea” consente di avvolgere il testo attorno a un’immagine:

Gutenberg-Paragrafo-InlineImage

Come puoi vedere, questo non è un modo efficace per accoppiare immagini e testo uno accanto all’altro in Gutenberg. (Esamineremo un altro modo per farlo in seguito.)

L’ultima opzione qui ti consente di aggiungere un barrato attraverso il testo evidenziato:

Gutenberg-Paragrafo-Barrato

Altre opzioni di blocco

L’ultimo pulsante nella barra degli strumenti rivela sempre più opzioni di blocco:

Gutenberg-più-Block-Opzioni

Queste opzioni saranno le stesse indipendentemente dal tipo di blocco che stai modificando.

Ricapitoliamo rapidamente cosa fanno questi:

  • Nascondi impostazioni blocco: Scompare la barra laterale a destra.
  • Duplicare: Crea una replica esatta di questo blocco.
  • Inserisci prima: Aggiunge un nuovo blocco vuoto sopra questo.
  • Inserisci dopo: Aggiunge un nuovo blocco vuoto al di sotto di questo.
  • Modifica come HTML: Trasforma il blocco in un editor di codice se si desidera scrivere in HTML.
  • Aggiungi a blocchi riutilizzabili: Salva il blocco in modo da poterlo riutilizzare altrove sul sito.
  • Rimuovi blocco: Elimina il blocco.

Transform Block

C’è un altro pulsante nella barra degli strumenti che devi conoscere:

Gutenberg-Switch-Blocks

Questo pulsante non sarà sempre così, quindi ricorda che il primo pulsante ti consente di trasformare il blocco corrente in uno correlato.

Ad esempio, puoi trasformare un blocco basato su testo come Paragrafo in Titolo, Elenco o Citazione. Tuttavia, non è possibile trasformare qualcosa come un paragrafo in un’immagine o una linea di separazione. Per questo avrai bisogno di un nuovo blocco.

Aggiungi un nuovo blocco

Per aggiungere un nuovo blocco alla tua pagina, hai una serie di opzioni.

Inserisci prima / dopo

Hai già visto le opzioni Inserisci prima / Inserisci dopo nella barra degli strumenti del tuo blocco. Questo è un modo per farlo.

Se fai clic lontano dal blocco esistente e passi il mouse sopra di esso, vedrai apparire un piccolo segno più:

Gutenberg-Add-Block-Cross

Quando lo fai clic, rivelerà i tuoi blocchi:

Gutenberg-Add-Block-Plus-Sign

Scegli quello a cui desideri aggiungere il nuovo blocco sopra quello che hai già.

Se passi con il mouse sopra la parte inferiore del blocco, vedrai lo stesso segno più. L’unica differenza è che aggiungerà un nuovo blocco sotto quello che hai.

Usa la tua tastiera

Un altro modo per aggiungere un nuovo blocco è premendo il tasto “Invio” sulla tastiera:

Gutenberg-Add-Block-Enter

Ciò aggiungerà immediatamente un nuovo blocco di paragrafo alla pagina.

Se si desidera modificarlo in un diverso tipo di blocco, è possibile utilizzare il segno più a sinistra del nuovo blocco:

Gutenberg-Change-New-Block

Oppure puoi digitare una barra (/) seguita dal nome del blocco che vuoi usare:

Gutenberg-Change-Block-Slash

Ad esempio, se desideri aggiungere un’immagine, dovresti digitare “/ image”. L’opzione di blocco si popolerà automaticamente durante la digitazione del nome corrispondente.

Aggiungi un blocco dalla barra degli strumenti

Puoi sempre semplicemente utilizzare la funzione di base Aggiungi blocco nella barra degli strumenti:

Gutenberg-Add-Block

Scorri le opzioni o digita il nome del blocco che stai cercando.

Sposta un blocco

Una volta che hai iniziato a creare blocchi, potresti decidere di non essere soddisfatto dell’ordine in cui vengono visualizzati. O forse hai aggiunto un blocco sopra quando avrebbe dovuto essere sotto.

Non è necessario eliminare blocchi o tagliare e incollare contenuti da un blocco all’altro. La soluzione è semplice.

Gutenberg è un editor di blocchi con trascinamento della selezione. Ciò significa che puoi spostare facilmente i tuoi blocchi ovunque tu voglia.

Ci sono due modi per farlo.

Usa le frecce di spostamento

La prima opzione è utilizzare le frecce di spostamento sul lato sinistro di ciascun blocco. Passa il mouse sopra il blocco che desideri spostare e troverai una freccia su e giù:

Gutenberg-move-Arrows

Se tutto ciò che vuoi fare è spostare un blocco su o giù una volta, questa opzione funziona bene.

Gutenberg-spostato-Block

Usa il trascinamento della selezione

Se si desidera effettuare un riarrangiamento più drastico dei blocchi, è necessario utilizzare il trascinamento della selezione.

Si trova nello stesso posto delle frecce. Passa il mouse sopra il blocco che desideri spostare e afferra i punti che appaiono nel mezzo. Vedrai il cursore diventare una mano quando fai:

Gutenberg-Grab-Drag-and-Drop

Quando si sposta il blocco in una nuova parte della pagina, assicurarsi di visualizzare una linea scura prima di rilasciarlo:

Gutenberg-Move-Block

Questo ti consente di sapere che stai spostando il blocco nello spazio disponibile. Senza quella linea, il trascinamento della selezione non funzionerà.

Elimina un blocco

Se decidi di voler rimuovere del tutto un blocco, hai anche opzioni con questo.

Hai già visto uno di questi. È all’interno delle opzioni aggiuntive del tuo blocco. Basta fare clic su “Rimuovi blocco” e verrà eliminato.

Puoi sempre eliminarlo anche alla vecchia maniera. Posiziona il cursore all’interno del blocco e usa il pulsante “Elimina” della tastiera per rimuoverlo.

Tieni presente, tuttavia, che se si tratta di un blocco basato su testo, dovrai rimuovere il contenuto prima di poterlo eliminare in questo modo. Per qualsiasi altra cosa – un’immagine, un widget incorporato, ecc. – puoi semplicemente usare il tasto “Elimina”.

Puoi anche evidenziare il blocco (trascinando il cursore su di esso) e quindi premere il tasto “Elimina”. Ciò è utile se si desidera evidenziare ed eliminare più di un blocco alla volta.

Crea un blocco riutilizzabile

I blocchi riutilizzabili sono utili quando si desidera creare un elemento che può essere utilizzato in tutto il sito, come un blocco promozionale per i post del blog o un invito all’azione.

Gutenberg-Create-riutilizzabile-Block

Invece di provare a ricreare il blocco sulle pagine che devono andare avanti, apri le opzioni di blocco e fai clic su “Aggiungi a blocchi riutilizzabili”. Quindi, dagli un nome:

Gutenberg-Name-riutilizzabile

Una volta salvato, sarai in grado di recuperarlo e utilizzarlo come faresti con qualsiasi blocco di Gutenberg. Lo troverai in una nuova categoria chiamata “Riutilizzabile”:

Gutenberg-riutilizzabile-Categoria

Un giro di blocchi di Gutenberg

Il classico editor di WordPress lasciava molto a desiderare in termini di aiutare gli utenti a creare contenuti e layout complessi. I blocchi di Gutenberg eliminano quel blocco stradale.

Conosciamo i blocchi:

Categorie di blocchi

WordPress ha fatto un buon lavoro nell’organizzare i suoi blocchi in categorie.

Blocchi comuni

Questi sono i tuoi blocchi comuni:

Common-Blocks

Il testo di base e gli elementi visivi che usi in una pagina saranno qui.

Blocchi di formattazione

Questi sono i tuoi blocchi di formattazione:

Formattazione-Blocks

La maggior parte di questi sono blocchi adatti agli sviluppatori, quindi potresti non averne bisogno molto. La tabella e le virgolette pull potrebbero essere utili.

Blocchi di layout

Questi sono i tuoi blocchi di layout:

Layout-Blocks

Se vuoi aggiungere interruzioni ai tuoi contenuti (come con grande spazio o linea di separazione) o elementi speciali (come un pulsante), troverai queste cose qui.

Blocchi widget

Questi sono i tuoi widget:

Widgets-Blocks

Per la maggior parte, questi sono gli elementi che dovrebbero andare nella barra laterale del tuo blog, non apparire nelle tue pagine. Le uniche eccezioni che troverai sono i blocchi creati da altri plugin, come questo esempio di WPForms.

Incorpora blocchi

Questi sono i tuoi incorporamenti:

Incorpora-Blocks

Li userai per portare contenuti da altre piattaforme. Questo è utile per incorporare elementi come video di YouTube, clip SoundCloud e post su Twitter.

I blocchi Gutenberg più comunemente usati

Come puoi vedere, ci sono dozzine di blocchi Gutenberg disponibili. Detto questo, ci sono alcuni elementi che tutti usano per creare pagine o post in WordPress, quindi inizia imparando le basi:

Paragrafo

Usa il blocco Paragrafo per aggiungere testo semplice alla tua pagina.

Paragrafo-Block

Blocco di direzione

Usa il blocco Titolo per aggiungere un’intestazione alla tua pagina.

Intestazione-Block

Questi ti consentono di introdurre nuovi argomenti sulla pagina e allo stesso tempo rendere più facile la lettura dei tuoi contenuti. I pulsanti H2, H3 e H4 consentono di stabilire una gerarchia anche per le intestazioni di pagina.

Blocco elenco

Utilizzare il blocco Elenco per aggiungere un elenco puntato o numerato alla pagina:

List-Block

Questo è utile anche per migliorare la leggibilità.

Image Block

Usa il blocco Immagine per aggiungere un’immagine alla tua pagina.

Immagine-Block

È possibile caricare un’immagine dall’unità o selezionarne una già esistente nella libreria multimediale.

Blocco video

Usa il blocco Video per incorporare un’immagine nella tua pagina.

Video-Block

Puoi caricare un file video, sceglierne uno dalla tua libreria o estrarlo da un link.

Poiché i video occupano molto spazio, l’opzione migliore è quella di salvare il file su una piattaforma di condivisione video come Vimeo o YouTube. Quindi, incorporalo con un link.

Per questo non utilizzerai il blocco video. Cerca invece l’incorporamento corrispondente.

YouTube ne ha uno:

YouTube-Embed

Come fa Vimeo:

Vimeo-Embed

Dovresti fare lo stesso per qualsiasi file audio (come podcast o colonne sonore) che desideri aggiungere alla pagina. Utilizzare il blocco audio o l’incorporamento corrispondente (come per Spotify) per farlo.

Button Block

Usa il blocco pulsanti per indirizzare i tuoi visitatori o lettori ad agire:

Button-Block

Questo potrebbe indirizzarli a: “Pianifica ora”, “Iscriviti”, “Leggi di più”, ecc.

Media e blocco di testo

Come accennato in precedenza, l’opzione Inline image nel blocco di paragrafo è un modo inefficiente per unire testo e immagini. Utilizzare invece il blocco Media e Testo per fare ciò:

Media-e-Text-Block

Blocco colonne

Un altro modo per posizionare due blocchi diversi (dello stesso tipo o diverso) uno accanto all’altro è utilizzando il blocco Columns:

Colonna-Block

Per aggiungere ulteriori colonne a destra o a sinistra, passa con il mouse sopra i blocchi all’interno della colonna e premi il segno più. È come aggiungere un nuovo blocco, solo questo li aggiungerà in senso orizzontale.

Blocchi di incorporamento sui social media

Invece di utilizzare il codice di incorporamento dai social media per inserire un post sulla tua pagina, aggiungi il link al post qui:

Social-Media-Embed

Esistono blocchi di incorporamento per Facebook, Twitter e Instagram, quindi trova il blocco di incorporamento che corrisponde al tuo post sui social media.

Blocco classico

Il blocco classico ti consente di continuare a creare contenuti in WordPress usando l’editor classico:

Gutenberg-Classic-Block

Il blocco classico entra in gioco anche ogni volta che un sito Web passa dall’editor classico all’editor Gutenberg. Gutenberg non proverà automaticamente a convertire il testo in blocchi propri. Li mette semplicemente nella classica interfaccia dell’editor.

Se vuoi convertire il tuo blocco classico in blocchi Gutenberg, vai su “Altre opzioni” e scegli “Converti in blocchi”:

Gutenberg-convert-Blocks

Farà del suo meglio per convertire ogni elemento nel tuo editor in un blocco corrispondente:

Gutenberg-convertiti-Blocks

Ricorda solo di rivedere i blocchi emessi per eventuali errori prima di salvare le modifiche.

Blocchi plugin di WordPress

La maggior parte dei plugin popolari utilizzati dagli utenti di WordPress sono compatibili con Gutenberg. In alcuni casi, questi plugin hanno creato blocchi speciali che vengono visualizzati nel tuo editor.

Ad esempio, se stai utilizzando un plug-in del modulo di contatto simile WPForms, dovresti trovare un blocco corrispondente per esso:

WPForms-Block

Basta creare il modulo nel plug-in e quindi individuarlo nel menu a discesa fornito qui. Non è più necessario rintracciare e incollare i codici brevi del modulo.

Yoast, un popolare plugin SEO, è un altro che ha aggiunto nuovi blocchi a Gutenberg:

Yoast-Blocks

WooCommerce, La soluzione di eCommerce di WordPress ha fatto lo stesso:

WooCommerce-Blocks

Ci sono anche plugin “definitivi” di Gutenberg che aggiungono un sacco di nuovi blocchi al tuo builder, come Componenti aggiuntivi definitivi per Gutenberg:

Ultimate-Addons-Gutenberg

Questi tipi di plugin estendono la funzionalità del tuo generatore di blocchi. Se stai creando un sito Web che necessita di elementi speciali, come Google Maps, blocchi di testimonianze o funzionalità di eCommerce, puoi aggiungerli a Gutenberg con plugin come questi.

Una panoramica della barra laterale del documento e dei blocchi

Ora che hai bloccato l’editor dei blocchi, rivolgiamo la nostra attenzione al documento e blocchiamo la barra laterale.

Quando il cursore si trova nel cartiglio o in qualche punto della pagina in cui non esiste un blocco, la barra laterale punterà alle impostazioni del documento:

Barra laterale del documento

Questi ti consentono di controllare cose come lo stato e l’aspetto della pagina.

Ecco quelli principali che devi sapere:

Stato e visibilità

Stato-and-VisibilitàIn questo pannello, puoi decidere chi può vedere la pagina (pubblica, privata o protetta da password) e quando viene pubblicata (se non immediatamente). Se si desidera eliminare completamente la pagina. Puoi farlo anche qui.

PermalinkUsa questo pannello per cambiare la lumaca (il pezzo identificativo dell’URL). Per esempio:

https://mywebsite.com/Gutenberg-block-builder /

In primo piano-ImageL’immagine in primo piano è l’immagine in miniatura che le persone vedono quando i tuoi post sul blog vengono visualizzati nel feed del blog principale. È anche ciò che usano le piattaforme di social media quando mostrano anteprime dei tuoi link.

categorie

categorieQuesto è disponibile solo per i post sul blog. Usa questo per mantenere organizzati i tuoi argomenti.

tag

tagQuesta è un’altra impostazione disponibile solo per i post sul blog. Usa questo per aggiungere parole chiave che compaiono nel tuo post e aiutare i lettori a trovare contenuti su argomenti correlati.

Quando il cursore viene posizionato all’interno di uno dei blocchi della pagina (tranne il titolo), la barra laterale passerà a un editor di blocchi:

Block-Sidebar

Questa barra laterale offre ulteriori opzioni di modifica per i tuoi blocchi, se lo desideri. La barra laterale del blocco cambierà in base al tipo di blocco su cui stai lavorando.

Ad esempio, la barra laterale del paragrafo mostra le opzioni di modifica per:

Paragrafo-Block-Sidebar

È possibile regolare la dimensione del testo, nonché il colore del testo o dello sfondo del blocco. Se sai come usare le classi CSS, puoi personalizzare ulteriormente l’aspetto del blocco usando “Impostazioni avanzate”.

La barra laterale dell’immagine, d’altra parte, ti dà queste impostazioni:

Immagine-Block-Sidebar

Puoi aggiungere il testo alternativo all’immagine (importante per il SEO), modificare le dimensioni dell’immagine e collegare l’immagine a una pagina Web.

Alcuni blocchi non offrono alcuna impostazione aggiuntiva nella barra laterale come l’incorporamento di Twitter:

Twitter-Block-Sidebar

L’unica cosa che puoi fare è creare una classe CSS personalizzata in “Impostazioni avanzate”.

In conclusione: se ti sembra di non poter modificare completamente il blocco con la barra degli strumenti del blocco, controlla la barra laterale per ulteriori opzioni.

Cosa fare con la barra degli strumenti

L’ultima parte dell’editor di cui hai bisogno per familiarizzare è la barra degli strumenti che si trova nella parte superiore di esso:

Gutenberg-Toolbar

Potrebbe non sembrare nient’altro che un luogo in cui memorizzare i pulsanti “Anteprima” e “Pubblica”, ma c’è molto altro che puoi e dovrebbero usa la barra degli strumenti per.

Rivediamo gli elementi essenziali:

blocchi

Il primo pulsante nella barra degli strumenti è, dove è possibile accedere a nuovi blocchi:

Gutenberg-toolbar-Blocks

Annulla Ripristina

I due pulsanti successivi consentono di annullare (la freccia che punta a sinistra) o ripetere (la freccia che punta a destra) l’ultima modifica apportata alla pagina:

Gutenberg-Barra-Undo

Informazioni sulla pagina

Per quelli di voi che desiderano creare pagine facili da esplorare per i visitatori, il pulsante “i” (informazioni) offre una panoramica dei contenuti:

Gutenberg-Barra-Info

Vedrai:

  • Quante parole hai scritto.
  • Quante voci ci sono, con una suddivisione dei titoli sottostanti.
  • Quanti paragrafi ci sono.
  • Quanti blocchi hai usato.

Sono le parole e il conteggio delle intestazioni le informazioni più importanti su cui concentrarsi qui.

Struttura della pagina

La parte successiva della barra degli strumenti rivela ciascuno dei blocchi che hai usato per creare la tua pagina:

Gutenberg-Block-navigazione

Usalo per scorrere istantaneamente fino al blocco su cui vuoi lavorare. Questo è utile per la modifica di contenuti su pagine e post più lunghi.

Salva le impostazioni

Utilizzerai questi primi tre pulsanti con ogni pagina o post che crei:

Gutenberg-save-Impostazioni

Usa “Salva bozza” per salvare le modifiche privatamente mentre lavori su una pagina.

Usa “Anteprima” per visualizzare la pagina sul tuo sito web.

Usa “Pubblica” per inviare la tua pagina al sito web live. Una volta pubblicata la pagina, questo pulsante cambierà in “Aggiorna”. Usalo per salvare e inviare nuove versioni delle tue pagine al sito.

impostazioni

Quando si fa clic sull’icona a forma di ingranaggio (impostazioni), si nasconde o mostra la barra laterale di Gutenberg. Ecco come appare quando disabilitato:

Gutenberg-toolbar-settings-disabili

Ecco come appare quando abilitato:

Gutenberg-toolbar-Impostazioni-enabled

Più opzioni

L’ultimo pulsante nella barra degli strumenti rivela ulteriori opzioni e strumenti. Usalo se vuoi personalizzare il tuo spazio di lavoro Gutenberg.

Gutenberg-toolbar-more-opzioni

Visualizza

La prima serie di opzioni relative alla “Visualizza”:

Gutenberg-Barra-View

“Barra degli strumenti superiore” sposta la barra degli strumenti dai blocchi e la attacca nella parte superiore dello schermo:

Gutenberg-Top-Toolbar

Le opzioni di modifica cambiano ancora in base al blocco che hai selezionato. L’unica differenza è che ora si trova solo nella parte superiore della pagina.

La “Modalità Spotlight” elimina tutti i blocchi non utilizzati:

Gutenberg-Spotlight-Mode

Se desideri aiuto per concentrarti su un blocco alla volta, questo è uno strumento utile da abilitare.

La “Modalità schermo intero” è la modalità di scrittura senza distrazioni di Gutenberg:

Gutenberg-tutto schermo-Mode

Rimuove i menu di WordPress in alto a sinistra e la barra laterale di Gutenberg a destra.

Modalità editor

La prossima serie di opzioni riguarda la modalità editor.

Gutenberg-Opzioni-Editor

Per impostazione predefinita, Gutenberg inserisce gli utenti nel “Visual Editor”.

Se preferisci comporre la tua pagina in HTML, puoi passare a “Editor di codice”:

Gutenberg Editor codice

Tuttavia, un modo più efficace e più pulito per modificare i blocchi in HTML è gestirlo singolarmente (poiché probabilmente non è necessario modificare l’intero codice della pagina).

Puoi accedere all’editor di codice in “Modifica come HTML”:

Gutenberg-Edit-HTML

Questo convertirà il blocco in HTML:

Gutenberg-HTML-Block

Modificalo come meglio credi. Se vuoi riconvertirlo in modalità visiva, apri le opzioni di blocco e scegli “Modifica visivamente”:

Gutenberg-Edit-visivamente

Utensili

Gutenberg include anche una serie di strumenti che ti consentono di semplificare la tua esperienza nell’editor:

Gutenberg-Tools

Il primo strumento è il “Block Manager”:

Gutenberg-Block-manager

A differenza dello strumento di navigazione a blocchi che abbiamo visto in precedenza, questo ti consente di disabilitare tutti i blocchi che non usi. In questo modo, quando arriva il momento di cercare un nuovo blocco, non devi setacciare i blocchi che non utilizzerai mai.

“Gestisci blocchi riutilizzabili” ti porterà all’editor di blocchi riutilizzabili:

Gutenberg-riutilizzabili-Blocks

Qui è dove verranno archiviati i blocchi salvati. Per modificare la copia principale del blocco (o crearne una completamente nuova), fallo qui.

Mentre Gutenberg ha sicuramente reso più semplice la creazione di contenuti in WordPress, alcune delle azioni possono diventare noiose. Utilizzando le “Scorciatoie” di Gutenberg, puoi fare cose come annullare l’ultima modifica, duplicare un blocco, mettere in corsivo il testo evidenziato e salvare le modifiche con la sola tastiera.

Gutenberg-tasti scorciatoia

L’opzione “Copia contenuto” non fa altro che evidenziare e copiare tutti i blocchi sulla pagina. Usalo per creare una nuova pagina simile per contenuto e design. Vai su Pagine> Aggiungi nuovo e quindi incolla i blocchi nella pagina vuota.

L’ultima opzione qui si chiama “Opzioni”. Quello che fa davvero, però, è consentirti di disattivare alcune parti delle impostazioni del documento sulla barra laterale:

Gutenberg-sidebar-Opzioni

Ancora una volta, se scopri che ci sono alcune parti dell’editor che non usi (come Attributi di Pagina), disabilitala qui in modo che non distraggano dagli elementi che devi usare.

Incartare

Poiché WordPress utilizzava lo stesso editor dal primo giorno, ci fu qualche reazione negativa quando Gutenberg fu introdotto per la prima volta.

Ma se osservi la competizione drag-and-drop che si accumula intorno a WordPress (Wix, Shopify, Squarespace, ecc.), Era tempo di cambiare.

Questa evoluzione dell’editor ha dato i suoi frutti, consentendo a WordPress di servire gli utenti a tutti i livelli. I suoi utenti ora traggono i seguenti vantaggi dalla creazione di siti Web con un editor di blocchi:

  • Una vista dell’editor personalizzata che ti rende più produttivo.
  • Più facile da creare e personalizzare i contenuti.
  • Creazione di contenuti più avanzata senza il know-how tecnico precedentemente necessario.
  • I blocchi riutilizzabili accelerano il design e garantiscono coerenza in tutto il sito.
  • Più facile aggiungere e configurare elementi di conversione (come pulsanti e moduli di invito all’azione).
  • Plugin e temi popolari sono compatibili con Gutenberg.
  • Tempo più veloce per il lancio.

A partire dal 2022, l’editor classico non sarà più disponibile. Quindi, ora è il momento perfetto per capire come farai lavorare Gutenberg per te.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map