Blocchi di Gutenberg: Guida per l'utente definitiva con considerazioni essenziali per il 2022

Con la nuova versione del 6 dicembre 2018, WordPress 5.0 Kirk ha introdotto un editor di blocchi predefinito, noto anche come Gutenberg. Questo nuovo editor di contenuti ti aiuta a creare contenuti con un approccio completamente diverso. Ha sostituito l'editor TinyMCE di WordPress e offre un modo più visivo per la creazione di contenuti sotto forma di blocchi.

Gutenberg Editor fornisce una ricca libreria di elementi o blocchi predefiniti. E puoi usarli mentre lavori su un sito WordPress. Lì ogni contenuto è un blocco trascinabile. E questi blocchi sono i blocchi dell'editor utilizzati per creare layout di contenuto.

Indipendentemente dal fatto che tu abbia già aggiornato o meno il tuo sito a WordPress 5.0, dovresti imparare a utilizzare Gutenberg Block per il tuo futuro avanzamento. Qui avrai un'idea completa e un elenco di tutti i blocchi Gutenberg WordPress insieme ai popolari blocchi a trenta parti.

Blocchi Gutenberg di WordPress: il tuo miglior compagno per il futuro

I blocchi di Gutenberg rendono sicuramente il processo di creazione dei contenuti più ottimizzato e intelligente. Una volta che ti sarai abituato a questo editor, ridurrai notevolmente i tempi di sviluppo del tuo sito.

In poche parole, Gutenberg è un nuovo editor in stile blocco per la piattaforma WordPress. Ha gradualmente cambiato il modo in cui crei post, pagine, prodotti e quasi tutto sul tuo sito.

In effetti, con Gutenberg puoi gestire tutti i tipi di componenti in modo più organizzato. Come testo, immagine, video, tabella e altri. Se non conosci Gutenberg Editor, fai un tour di questa guida per principianti per suggerimenti e trucchi utili.

Nota: la visualizzazione front-end dei blocchi dipende in gran parte dal tema che stai utilizzando nel tuo sito.

Blocchi Gutenberg predefiniti in WordPress

Per essere preparato per il futuro, devi conoscere i nomi predefiniti dei blocchi Gutenberg e il loro utilizzo. Come utente di WordPress, prima o poi dovrai conoscere questi blocchi.

Quindi fondamentalmente i blocchi di Gutenberg sono organizzati dalle seguenti categorie:

• Più usato
• Blocchi comuni
• Formattazione
• Disposizione
• Widget
• Incorpora
• Riutilizzabile

Cliccando sull'icona "+" più puoi aggiungere un nuovo blocco al tuo sito. In cima all'elenco troverai i blocchi più utilizzati. Quei blocchi che usi più spesso nel tuo sito appariranno qui.

Sotto, i blocchi sono raggruppati per categoria. Fare clic su un titolo per svelare i blocchi.

Inoltre, dal pannello di modifica di destra puoi impostare la dimensione del carattere, il capolettera, cambiare il testo e i colori di sfondo per un particolare blocco.

Vediamo come funzionano effettivamente!

Blocchi comuni: usati regolarmente in qualsiasi post

Ecco i blocchi più comuni di cui chiunque ha bisogno per i propri post, inclusi testo e immagine. Hai bisogno di questi elementi di base per personalizzare una pagina o un post sul tuo sito.

1. Paragrafo: blocco di solo testo semplice per l'aggiunta di un singolo paragrafo di contenuto.
2. Immagine : inserisci una singola immagine ovunque nel tuo post
3. Intestazione : Aggiungi tag di intestazione
4. Galleria : mostra un gruppo di immagini in uno stile galleria
5. Elenco : aggiungi elenchi puntati o numerati
6. Citazione : includi una citazione in 2 stili diversi
7. Audio : caricamento di un file audio sul tuo sito
8. Copertina : inserisci un file video o audio con testo in sovrimpressione
9. File : aggiunge un collegamento a un file scaricabile
10. Video : carica un file video e riproducilo direttamente sul tuo sito

Formattazione: opzioni di personalizzazione extra

Questi blocchi vengono utilizzati per aggiungere alcune opzioni di formattazione extra per i tuoi contenuti come codice, versi e altri tipi di testo che richiedono una formattazione speciale.

1. Codice: Scrivi facilmente qualsiasi tipo di codice tecnico
2. Classico: fornisce strumenti di modifica del classico editor di WordPress
3. HTML personalizzato: inserisci il codice HTML personalizzato e visualizzalo in anteprima direttamente nell'editor di WordPress
4. Preformattato: aggiungi testo che rispetti la spaziatura e le tabulazioni
5. Pullquote: aggiungi un'enfasi visiva speciale a una citazione dal tuo testo
6. Tabella: usa la tabella per mostrare i dati tabulari
7. Versetto: scrivi poesie e altre espressioni letterarie inclusi tutti gli spazi e le interruzioni di riga

Elementi di layout: migliora lo stile di progettazione

Questi blocchi ti aiutano a rappresentare i contenuti del sito in modo attraente. Rende il tuo sito più coinvolgente per i tuoi visitatori.

1. Pulsante: crea un pulsante e inserisci un collegamento con uno sfondo e un colore del testo diversi
2. Colonne: crea layout a più colonne e puoi includere altri tipi di blocchi in ogni colonna
3. Media e testo: inserisci testo e file multimediale fianco a fianco in un blocco; colonne diverse
4. Altro: suddividi i tuoi contenuti in 2 parti, incluso un blocco "Leggi altro".
5. Interruzione di pagina: divide il contenuto del tuo sito in più pagine
6. Separatore: aggiungi una breve linea orizzontale nel tuo post
7. Distanziatore: includi un ampio spazio vuoto rettangolare tra due blocchi nel tuo post
8. Colonne di testo: aggiungi testo e visualizzalo in due o quattro colonne, come un giornale.

Widget: aggiungi alcuni widget a qualsiasi pagina o post

Questi blocchi ti consentono di aggiungere widget WordPress all'interno dei tuoi contenuti. Sono più probabilmente utilizzati nella barra laterale e nel piè di pagina.

1. Shortcode: inserisci contenuti personalizzati come i moduli tramite uno shortcode di WordPress
2. archivi: mostra un archivio mensile dei tuoi post
3. calendario: mostra un calendario mensile dei tuoi post
4. categorie: elenco di tutte le categorie di post
5. ultimi commenti: Scorcio degli ultimi 5 commenti (non il commento completo)
6. ultimi-post: elenco dei tuoi post recenti
7. RSS: aggiungi un feed RSS a qualsiasi pagina o post
8. Cerca: aggiungi una ricerca di WordPress a qualsiasi pagina o post
9. Tag Cloud: un elenco cloud dei tag dei tuoi post

Incorpora: inserisci contenuti da altre fonti

I blocchi incorporati ti consentono di incorporare immagini, video, tweet, audio, post di Facebook e altri contenuti da fonti esterne.

• Youtube
• Twitter
• Facebook
• Instagram
• Vimeo
• nuvola di suoni
• Spotify
• Flickr
• Animoto
• Cloudup
• CollegeHumor
• Movimento quotidiano
• Divertente o muori
• Hulu
• Imgur
• Issuu
• Kickstarter
• Meetup.com
• Mixcloud
• Secchio di foto
• Polldaddy
• Reddit
• ReverbNation
• Screencast
• Scribd
• Condivisione di diapositive
• Tazza compiaciuta
• Relatore
• TED
• Tumblr
• VideoPress
• WordPress
• WordPress.tv

Blocchi riutilizzabili:

Dopo aver premuto "Aggiungi a blocchi riutilizzabili", un blocco diventa riutilizzabile per un ulteriore utilizzo. Forse puoi trovarlo nella sezione del menu condiviso.

Plugin di terze parti per estendere sia gli elenchi di blocchi che le funzionalità

Puoi installare altri plugin essenziali per estendere le tue blocklist con attributi avanzati e potenti. Scegliendo un plug-in ricco di funzionalità, potrebbe essere facile aggiungere nuovi blocchi al tuo editor. E puoi eseguire molte attività ad alta funzionalità che non sono possibili con gli elementi di blocco predefiniti.

Ad esempio, alcuni plug-in della galleria ti consentono di aggiungere una galleria con molti effetti avanzati utilizzando i blocchi.

Oltre a ciò, troverai anche molti plugin che si concentrano esclusivamente sull'aggiunta di nuovi blocchi. Qui abbiamo elencato alcuni dei migliori plugin di WordPress che puoi utilizzare per aggiungere nuovi blocchi insieme a quelli predefiniti.

1. Componenti aggiuntivi per Gutenberg : plugin gratuito con oltre 15 blocchi Gutenberg
2. CoBlocks - Blocchi di Gutenberg del generatore di pagine
3. Impilabile – Blocchi Gutenberg
4. Ultimate Blocks – Blocchi Gutenberg personalizzati
5. Advanced Gutenberg – Oltre 20 nuovi blocchi per Gutenberg
6. Blocco Kadence – Gutenberg Page Builder ToolKit
7. Envira Gallery – Blocco WordPress per gallerie fotografiche
8. Blocchi atomici – Collezione Gutenberg Block

Componenti aggiuntivi per Gutenberg: plugin gratuito con oltre 15 blocchi Gutenberg

È uno degli addon popolari tra molti utenti di Gutenberg. The Ultimate Addons for Gutenberg è un pacchetto completo di blocchi unici e creativi. Pertanto, puoi potenziare il tuo editor per creare bellissime pagine e post usando questo plugin.

Comprende più di 15 blocchi Gutenberg, inclusi i seguenti:

• Pulsanti multipli: aggiungi più pulsanti personalizzabili all'interno di un unico blocco reattivo.
• Intestazione avanzata: includi intestazioni e sottotitoli alla moda e attraenti con un separatore
• Info Box: Inserisci un'immagine o un'icona con un'intestazione e una descrizione
• Listino prezzi: crea facilmente un listino prezzi come il menu di un ristorante
• Testimonianza: aggiungi la recensione dei clienti utilizzando questo blocco

La cosa più sorprendente è che questo plugin viene fornito con il supporto integrato per il tema Astra. E Astra è completamente compatibile con Gutenberg.

CoBlocks - Blocchi di Gutenberg del generatore di pagine

CoBlocks ha un gruppo creativo di blocchi WordPress per la creazione di pagine per il nuovo editor Gutenberg. Migliorerà la tua esperienza di creazione di pagine con Gutenberg. Questo leggero plugin per WordPress ti aiuterà a creare bellissime pagine web.

Supporta oltre 20 blocchi interattivi in ​​questo momento:

• Blocco di fisarmonica
• Blocco avvisi
• Blocco del profilo dell'autore
• Blocco pulsanti
• Blocco galleria carosello
• Fai clic per bloccare il tweet
• Blocco galleria collage
• Blocco separatore dinamico
• Blocco eventi (Novità!)
• Blocco funzioni
• Blocco cibo e bevande
• Blocco modulo
• Blocco GIF
• GitHub Gist Block

e altri.

Puoi creare l'intero sito Web con le funzionalità di CoBlocks. Inoltre, ti consente di progettare pagine Web con elementi tipografici allettanti.

Impilabile – Blocchi Gutenberg

Stackable è appositamente progettato per il nuovo editor di blocchi di WordPress. Supporta 23 blocchi di costruzione di pagina di qualità per Gutenberg e oltre 50 layout di blocchi e design di sezioni/blocchi preimpostati. Fornisce opzioni di progettazione web avanzate e flessibili per rendere agevole il tuo percorso di sviluppo web.

Alcuni popolari blocchi impilabili sono i seguenti:

• Blocco contenitore
• Blocco griglia caratteristica
• Blocco di carte
• Blocco di intestazione
• Blocco del conto alla rovescia
• Blocco dei membri del team
• Blocco notifiche

Migliora la tua capacità di progettazione con questi layout di progettazione personalizzabili e diversificati.

Ultimate Blocks - Blocchi Gutenberg personalizzati

Questo plug-in di blocchi di Gutenberg è appositamente progettato per blogger e marketer. Quindi, puoi creare contenuti migliori e coinvolgenti con Gutenberg senza sforzo.

Al momento, Ultimate Blocks supporta circa 20 blocchi per rendere più emozionante il tuo percorso di sviluppo. Alcune caratteristiche degne di nota sono riportate di seguito:

• Filtro contenuto
• Conto alla rovescia
• Dispositivo di scorrimento dell'immagine
• Contenuto a schede
• Scatola in stile
• Commutazione contenuto

Puoi unirti al loro gruppo Facebook interattivo per ulteriore assistenza.

Advanced Gutenberg – Oltre 20 nuovi blocchi per Gutenberg

Advanced Gutenberg rende l'editor Gutenberg predefinito più potente per creare siti Web professionali incredibilmente facili. Fornisce oltre 20 nuovi blocchi e opzioni per personalizzare il tuo sito WordPress senza problemi.

Qui otterrai blocchi unici come:

• Responsabile di colonna
• Dispositivo di scorrimento dell'ultimo post
• Blocco schede
• Blocco icone
• Blocco immagine avanzato
• Blocco e-mail di attivazione
• E tanti altri

Tuttavia, hanno una documentazione elaborata e un forum personalizzato per fornire supporto ai loro utenti.

Kadence Block-Gutenberg Page Builder ToolKit

Con questo plugin puoi aggiungere blocchi e opzioni personalizzati al tuo editor Gutenberg. Forse, potrebbe estendere le capacità di modifica di Gutenberg in modo da poter creare layout personalizzati e contenuti più accattivanti.

Kadence supporta infatti i seguenti blocchi:

• Disposizione delle righe
• Galleria avanzata
• Modulo
• Intestazione avanzata
• Pulsante avanzato
• Schede
• Fisarmonica
• Testimonianze
• Icona
• Distanziatore/divisore
• Casella Informazioni
• Elenco delle icone

Oltre a questi, ti rende utile costruire facilmente qualsiasi tipo di layout. Ciò è possibile solo con i popolari plugin di WordPress Page Builder.

Envira Gallery – Il miglior blocco WordPress per le gallerie fotografiche

Envira è un plug-in completamente ottimizzato e potente per inserire una galleria sul tuo sito WordPress senza compromettere la velocità del sito. Con questo plug-in della galleria, puoi includere album, tag, integrazione con i social media, modelli di galleria/layout di galleria, collegamenti diretti, impaginazione, e-commerce, prove di immagini e molto altro.

Dopo aver attivato questo plugin troverai una nuova opzione in Blocchi comuni. Da lì puoi cercare diversi tipi di stile della galleria in base alle tue esigenze. Questo plug-in è completamente compatibile con il plug-in WooCommecre, quindi puoi usarlo facilmente per qualsiasi sito di fotografia per vendere foto.

Blocchi atomici – Collezione di blocchi di Gutenberg

Atomic Blocks offre una serie di nuovi ed eleganti blocchi Gutenberg. Lo stesso talentuoso team di Array Themes sta lavorando anche dietro questa collezione di blocchi alla moda.

Attualmente, Atomic Blocks ha 15 blocchi Gutenberg, con altri in arrivo:

• Blocco sezione e layout
• Blocco colonne avanzato
• Blocco newsletter
• Blocco tariffario
• Blocco post griglia
• Blocco contenitore
• Blocco Testimonianze
• Blocco avvisi in linea
• Blocco di fisarmonica
• Condividi blocco icone
• Blocco dell'invito all'azione
• Blocco pulsanti personalizzabile
• Blocco distanziatore e divisorio
• Blocco del profilo dell'autore
• Blocco capolettera

Dopo aver installato il plugin, otterrai una nuova sezione Atomic Blocks nell'interfaccia di Gutenberg. Puoi controllare le demo live di tutti i blocchi prima di utilizzarli sul tuo sito web. La creazione di pagine con l'editor di blocchi e Atomic Blocks ti dà il pieno controllo per progettare e avviare rapidamente qualsiasi tipo di sito desideri!

Tuttavia, potresti trovare alcuni plugin più utili con ottimi blocchi per creare bellissimi contenuti in modo ottimizzato. Non dimenticare di condividere i tuoi pensieri con noi!

I blocchi di Gutenberg danno inizio a una nuova era nella progettazione di siti

L'editor Gutenberg si basa principalmente sul concetto di blocchi. Questi blocchi hanno introdotto un modo completamente nuovo per modificare i post e il contenuto della pagina nell'editor di WordPress. Attraverso questi blocchi, puoi aggiungere facilmente più tipi di contenuto ai tuoi post e alle tue pagine.

In questo blog, abbiamo cercato di condividere tutte le informazioni sui blocchi di Gutenberg. Quindi, puoi facilmente aggiornarti con il rivoluzionario layout di progettazione del nuovo editor di WordPress.

Puoi anche raccontarci la tua storia e porre qualsiasi domanda relativa a WordPress nella sezione commenti qui sotto.