Blocchi WordPress: cosa sono e come usarli

Pubblicato: 2024-10-01

WordPress ha trasformato il modo in cui gli utenti creano e gestiscono i contenuti e i blocchi WordPress rappresentano una parte importante di questa evoluzione.

Con l'introduzione dell'editor Gutenberg, i blocchi sono diventati gli elementi costitutivi essenziali per la progettazione di post, pagine e interi siti.

L'attuale versione di WordPress include oltre 90 blocchi predefiniti. Includono testo, contenuti multimediali, widget, elementi del tema e incorporamenti.

In questo articolo esamineremo i blocchi WordPress, compreso il motivo per cui sono utili, i vari tipi di blocchi disponibili e come utilizzarli. Esamineremo anche alcuni dei plugin di blocco WordPress più popolari che offrono blocchi di contenuto extra, funzionalità di personalizzazione e modelli di layout per aiutarti con la progettazione.

Quindi, iniziamo con una rapida panoramica dei blocchi WordPress.

Cosa sono i blocchi WordPress?

I blocchi WordPress sono gli elementi costruttivi essenziali dell'editor di blocchi WordPress, noto anche come Gutenberg. I blocchi ti consentono di aggiungere e strutturare contenuti sui tuoi post e sulle tue pagine. Ogni sezione di contenuto (un paragrafo, un'immagine, un video o una galleria) è un blocco separato che può essere spostato, modificato e personalizzato in modo indipendente. Questo sistema rende la creazione dei contenuti molto più flessibile rispetto all’editor classico.

I blocchi forniscono anche un'interfaccia visiva per interagire con i tuoi contenuti. Puoi vedere le modifiche in tempo reale, consentendoti di mantenere un layout coerente. Questo approccio modulare è il fulcro dell’attuale esperienza WordPress, rendendolo accessibile a tutti gli utenti.

Perché utilizzare i blocchi WordPress?

Il vecchio editor di WordPress era un editor di testo basato su TinyMCE. L'interfaccia era molto simile a quella di un editor di testo, senza elementi visivi per le anteprime di pagine o post.

D'altra parte, i blocchi di contenuto consentono di modificare il layout della pagina e includere facilmente vari elementi visivi e interattivi, cosa che non era possibile con il vecchio editor classico.

Interfaccia dell'editor a blocchi di WordPress

Inoltre, i blocchi hanno reso più semplici diverse attività. Ad esempio, incorporare media esterni, come i video di YouTube, ora è semplice come aggiungere il blocco giusto al contenuto e incollare l'URL.

In precedenza, tale personalizzazione del contenuto avrebbe potuto richiedere l'uso di codice HTML aggiuntivo.

Inoltre, lo schema di blocco sincronizzato consente di salvare un blocco pre-personalizzato per un utilizzo futuro, eliminando la necessità di creare il contenuto da zero.

L'altra opzione è utilizzare modelli di blocchi regolari o non sincronizzati, ovvero layout di blocchi predefiniti adatti a vari usi.

Libreria di modelli di blocchi WordPress

Inoltre, un tema WordPress basato su blocchi ti consente anche di personalizzare i modelli utilizzando l'editor di blocchi e l'interfaccia degli stili globali. Semplifica la personalizzazione dei modelli o anche del layout completo del sito semplicemente riorganizzando i blocchi di contenuto.

Nel complesso, il nuovo editor di WordPress migliora l'esperienza dell'utente per la modifica dei contenuti.

Quali tipi di blocchi WordPress sono disponibili nell'editor dei blocchi?

L'ultima versione di WordPress ha circa 90+ blocchi, raggruppati in sei categorie: testo, media, design, widget, temi e incorporamenti.

Diamo un'occhiata ad alcuni dei blocchi nell'editor di blocchi di WordPress.

Blocchi di testo

I blocchi di testo sono fondamentali per la creazione di contenuti scritti sul tuo sito web. I blocchi di testo più comuni includono:

  • Blocco paragrafo: questo è il blocco più utilizzato per aggiungere e formattare il contenuto del testo.
  • Blocco intestazioni: ti consente di inserire intestazioni (H1, H2, H3, ecc.) per strutturare i tuoi contenuti in modo logico.
  • Blocco elenco: ideale per creare elenchi puntati o numerati per suddividere le informazioni.
  • Blocco citazioni: ti consente di inserire citazioni o testimonianze, evidenziando i punti chiave dei tuoi contenuti.
  • Blocco codice: utile per visualizzare frammenti di codice con la formattazione corretta.
  • Blocco tabella: crea contenuti strutturati in righe e colonne per visualizzare le informazioni.
  • E altro ancora.

Blocchi multimediali

I blocchi multimediali ti consentono di caricare file nel catalogo multimediale e incorporarli nei tuoi contenuti. Questi includono:

  • Blocco immagine: aggiungi e personalizza immagini, incluse didascalie e testo alternativo per la SEO.
  • Blocco video: inserisci direttamente i video o incorporali da fonti esterne come YouTube.
  • Blocco galleria: visualizza più immagini in un formato griglia, perfetto per creare una ricca galleria.
  • Blocco audio: carica e condividi file audio, ottimo per podcast o siti musicali.
  • Blocco file: includi file scaricabili, come PDF o documenti Word, all'interno dei tuoi contenuti.
  • E altro ancora.

Blocchi di progettazione

I blocchi di progettazione aiutano a migliorare il layout visivo dei tuoi post e delle tue pagine. Offrono opzioni per strutturare e definire lo stile dei contenuti, tra cui:

  • Blocco colonne: crea layout a più colonne per suddividere il contenuto in sezioni, migliorando la leggibilità.
  • Blocco spaziatore: aggiungi spazio vuoto tra gli elementi, creando un aspetto più pulito e organizzato.
  • Blocco pulsanti: inserisci pulsanti personalizzabili per inviti all'azione, indirizzando gli utenti ad altre pagine o azioni.
  • Blocco separatore: aggiungi linee orizzontali per dividere visivamente diverse sezioni del tuo contenuto.
  • Blocco di gruppo: combina più blocchi in un unico gruppo per una migliore gestione del layout.
  • E altro ancora.

Blocchi widget

I blocchi widget ti consentono di inserire contenuti dinamici nel tuo sito, tra cui:

  • Blocco shortcode: utilizza gli shortcode dei plugin o delle funzioni personalizzate per migliorare i tuoi contenuti.
  • Blocco dei post più recenti: visualizza un elenco dei tuoi post recenti, migliorando i collegamenti interni e la navigazione.
  • Blocco calendario: aggiungi una visualizzazione calendario al tuo sito, ottima per i blog incentrati sugli eventi.
  • Blocco HTML personalizzato: aggiungi codice HTML personalizzato e visualizzalo in anteprima mentre lo modifichi.
  • Blocco icone social: visualizza le icone che collegano ai tuoi profili o siti social.
  • E altro ancora.

Blocchi tematici

I blocchi tematici vengono utilizzati per aggiungere e gestire contenuti correlati al layout generale del tuo sito. Gli esempi includono:

  • Blocco logo sito: mostra il logo del tuo sito web all'interno di qualsiasi post o pagina.
  • Blocco di navigazione: aggiungi un menu o collegamenti di navigazione direttamente nell'area dei contenuti.
  • Cartiglio: visualizza il titolo di un post, una pagina o qualsiasi altro tipo di contenuto.
  • Blocco autore: visualizza i dettagli dell'autore del post come nome, avatar e biografia.
  • Blocco query: consente di visualizzare i tipi di post in base a diversi parametri di query.
  • E altro ancora.

Incorpora blocchi

I blocchi di incorporamento semplificano l'integrazione di contenuti esterni come post, video e podcast sui social media. WordPress supporta un'ampia gamma di incorporamenti:

  • Blocco YouTube: incorpora video di YouTube direttamente nei tuoi contenuti con un semplice URL.
  • Blocco Twitter: mostra tweet o interi thread di Twitter incollando l'URL del tweet.
  • Blocco Spotify: incorpora playlist, album o brani da Spotify per migliorare i contenuti multimediali.
  • Blocco Pinterest: ti consente di incorporare pin, bacheche e profili Pinterest.
  • E altro ancora.

Come utilizzare i blocchi WordPress

Ora che hai imparato cosa sono i blocchi WordPress, vediamo come utilizzarli per progettare il tuo sito web.

Come aggiungere un blocco WordPress

Per aggiungere un nuovo blocco, fare clic su una delle icone più (+) nell'interfaccia per aprire l'inseritore di blocchi. Quindi, cerca e seleziona il blocco che desideri aggiungere.

Per aprire l'inseritore di blocchi completi, fare clic sull'icona più (+) nella barra degli strumenti principale. Quindi seleziona un blocco. Quando passi il mouse sopra un blocco, vedrai un'anteprima di come potrebbe apparire.

Cerca e aggiungi blocchi WordPress all'editor Gutenberg

Inoltre, puoi anche passare il mouse su un'area particolare del contenuto e fare clic sull'icona più (+) per ottenere un'interfaccia di inserimento blocchi più piccola. Se utilizzi questo metodo per selezionare un blocco, questo verrà inserito automaticamente nell'area in cui hai cliccato sull'icona.

Aggiungi l'icona dei blocchi WordPress all'interno dell'editor di contenuti

Come personalizzare un blocco WordPress

Per personalizzare un blocco, è sufficiente fare clic su di esso per selezionarlo. Se hai difficoltà a trovare il blocco corretto, apri la visualizzazione elenco e selezionalo dall'elenco; ne parleremo più avanti nella sezione successiva.

Dopo aver selezionato il blocco, hai due opzioni principali per personalizzarlo. Innanzitutto, molti blocchi offriranno alcune opzioni di base sulla loro barra degli strumenti mobile. In genere, puoi aggiungere la formattazione del testo, regolarne l'allineamento e apportare altre modifiche di base.

Impostazioni in linea di base per i blocchi Paragragh

Quindi, per accedere a impostazioni più avanzate, utilizza le impostazioni Blocca nella barra laterale destra. Queste impostazioni saranno uniche per ciascun blocco, dandoti il ​​controllo completo su come funziona.

Ad esempio, il blocco paragrafo dispone di opzioni per personalizzare il colore, la tipografia, il margine e la spaziatura interna e altri elementi di progettazione.

Impostazioni avanzate per i blocchi di paragrafo

Come utilizzare la visualizzazione elenco per selezionare i blocchi

In generale, puoi selezionare un blocco semplicemente cliccandoci sopra. Tuttavia, potrebbero esserci momenti in cui è difficile selezionare il blocco esatto desiderato. Ciò è particolarmente vero con i blocchi Colonne e Gruppi, di cui parleremo più avanti.

Per risolvere questo problema, utilizzare la visualizzazione elenco dell'editor dei blocchi. Quando apri la visualizzazione elenco, verrà visualizzato un elenco di tutti i blocchi nel tuo post nell'ordine in cui appaiono.

Per selezionare un blocco, fare clic su di esso nell'elenco.

Selezione del blocco paragrafo nella visualizzazione elenco nell'editor blocchi Gutenberg

Come riorganizzare i blocchi WordPress

Quando si tratta di riorganizzare i blocchi WordPress, hai due opzioni.

Innanzitutto, se devi spostare un blocco verso l'alto o verso il basso di alcune posizioni, selezionalo e quindi fai clic sulla freccia su o giù, come mostrato nell'immagine seguente.

Sposta i blocchi WordPress su e giù nell'editor dei blocchi

In secondo luogo, se hai bisogno di maggiore controllo, puoi utilizzare la funzionalità di trascinamento della selezione per spostare il blocco in qualsiasi punto della tua pagina. Per usarlo, seleziona il blocco e fai clic con il cursore sull'icona a sei punti (come mostrato nell'immagine sopra).

Quindi, sposta il blocco nella sua nuova posizione. Per aiutarti ad assicurarti di essere nell'area giusta, apparirà una linea blu nel punto in cui si sposterebbe il blocco se rilasci il mouse.

Puoi anche utilizzare la visualizzazione elenco per riorganizzare i blocchi.

Come selezionare più blocchi

In alcuni casi, potresti voler scegliere più blocchi. Ciò è particolarmente utile se desideri disporre molti blocchi utilizzando i metodi sopra elencati.

Per selezionare più blocchi, fai semplicemente clic su di essi e trascinali, proprio come selezioni più paragrafi in un documento di testo.

Seleziona più blocchi

Anche per un maggiore controllo, puoi anche utilizzare la visualizzazione elenco per selezionare diversi blocchi per un maggiore controllo. Per fare ciò, è sufficiente fare clic sul primo blocco che desideri selezionare. Successivamente, tieni premuto Maiusc sulla tastiera e fai clic sull'ultimo blocco per scegliere. Tutti i blocchi tra il primo e l'ultimo verranno selezionati automaticamente.

Seleziona più blocchi nella visualizzazione elenco

Come affiancare i blocchi WordPress in colonne

Mettere i blocchi fianco a fianco è molto semplice e puoi farlo utilizzando il blocco Colonne.

Per fare ciò, fai semplicemente clic sull'icona più (+) , quindi cerca il blocco Colonne e aggiungilo all'editor. Quando aggiungi il blocco, ti verrà chiesto di selezionare la struttura di colonne desiderata. Ad esempio, puoi utilizzare due colonne di dimensioni simili o rendere una colonna più grande dell'altra. In alternativa, utilizzare più di due colonne.

Aggiungi il blocco colonne nell'editor Gutenberg

Dopo aver impostato la struttura delle colonne, noterai le icone più (+) all'interno di ciascuna colonna. Puoi utilizzare queste icone per aggiungere contenuto direttamente a ciascuna colonna, permettendoti di affiancarlo.

Aggiungi blocco al blocco colonne

Se in futuro avrai bisogno di modificare il layout delle colonne, potrai farlo facilmente modificando le impostazioni del blocco delle colonne principali.

Come raggruppare insieme i blocchi WordPress

Raggruppare i blocchi potrebbe essere utile in alcuni casi, ad esempio quando si applica lo stesso colore di sfondo a più blocchi.

Puoi farlo utilizzando il blocco Gruppo.

Aggiungi semplicemente un nuovo blocco Gruppo all'editor Gutenberg WordPress. Quindi, fai clic sull'icona più (+) all'interno del blocco Gruppo per aggiungere altri blocchi di contenuto a quel gruppo.

Se modifichi le impostazioni sul blocco del Gruppo principale, ad esempio aggiungendo uno sfondo colorato, ciò influenzerà tutti i blocchi del Gruppo. Puoi anche spostare il blocco Gruppo. Tutti gli altri blocchi rimarranno all'interno.

Blocco di gruppo

Alcuni dei migliori plugin per blocchi WordPress

L'installazione di un plug-in WordPress è un ottimo modo per aggiungere molte altre opzioni di blocco all'editor di WordPress.

Esistono diversi plugin WordPress che possono essere utilizzati per aggiungere più blocchi di contenuto, opzioni di personalizzazione e persino modelli di layout alla libreria dei blocchi.

Ecco alcuni dei migliori plugin di blocco per WordPress.

1. Blocchi Genesi

Blocchi Genesi

Genesis Blocks è un plugin Gutenberg gratuito che contiene una serie di blocchi WordPress personalizzati.

Ha 14 blocchi Gutenberg principali, quattro layout di pagina predefiniti e otto sezioni di pagina predefinite.

Alcuni dei blocchi nella libreria includono:

  • Blocco colonne avanzato
  • Blocco newsletter
  • Blocco dei prezzi
  • Blocco testimonianze
  • Blocco della fisarmonica
  • E altro ancora

Genesis Blocks offre una versione a pagamento, Genesis Pro, che include più blocchi, 26 layout a pagina intera predefiniti, 56 sezioni predefinite e altre funzionalità. È la scelta definitiva per creare un sito Web straordinario e funzionale in pochissimo tempo.

Genesis Blocks è di proprietà di WP Engine, una delle società di hosting WordPress gestite più popolari. Forniscono anche temi StudioPress di alta qualità che funzionano perfettamente con il plugin Genesis Blocks.

Prezzo:

È disponibile una versione gratuita. La versione pro costa $ 30 al mese.

Ottieni i blocchi Genesis

2. Spettri

Spettri – Blocchi Gutenberg di WordPress

Spectra, precedentemente noto come Ultimate Addon per Gutenberg, è il plug-in della libreria di blocchi Gutenberg più popolare.

Questo plugin, creato dagli stessi sviluppatori che hanno creato il popolare tema Astra, è attualmente installato su oltre 900.000 siti.

Contiene più di 30 blocchi Gutenberg, inclusi i seguenti:

  • Blocco cursore
  • Controblocco
  • Blocco valutazione a stelle
  • Blocco delle domande frequenti
  • Blocco casella informazioni
  • E altro ancora

Un vantaggio dell'utilizzo di questo plugin è che supporta il tema Astra, così come tutti i suoi siti iniziali e i kit di modelli. Di conseguenza, puoi importare un sito iniziale e utilizzare l'editor a blocchi per progettare splendidi layout.

Prezzo:

È disponibile una versione gratuita. La versione pro parte da $ 49/anno o $ 199 per una licenza a vita di un singolo sito.

Ottieni spettri

3. Blocchi Kadence

Blocchi Kadence

Kadence Blocks è un altro eccellente plugin per blocchi WordPress. Include alcuni dei blocchi più utilizzati e ti consente di aggiungere funzionalità extra al tuo editor di contenuti.

Il plugin è disponibile sia in versione gratuita che a pagamento. La versione gratuita include 23 blocchi personalizzati, inclusi i seguenti:

  • Blocco della fisarmonica
  • Blocco pulsanti avanzato
  • Blocco Galleria Avanzato
  • Blocco del conto alla rovescia
  • Blocco Sommario
  • E altro ancora

Il plugin ti consente di disabilitare tutti i blocchi di cui non avrai bisogno, mantenendo il tuo editor pulito e leggero.

Offre anche una libreria di design, che dispone di una libreria di modelli a blocchi e layout a pagina intera che puoi utilizzare per personalizzare qualsiasi post o pagina.

Se ti piacciono questi blocchi e vuoi vedere di più da Kadence Themes, puoi acquistare il loro plug-in professionale o il piano di abbonamento.

Prezzo:

È disponibile una versione gratuita. La versione pro parte da $ 149 all'anno.

Ottieni i blocchi Kadence

Conclusione

L'editor Gutenberg è basato su blocchi WordPress, che forniscono un modo flessibile per creare e gestire contenuti. Puoi creare facilmente pagine dall'aspetto professionale utilizzando diversi tipi di blocchi, inclusi testo, contenuti multimediali, widget e incorporamenti. Grazie alla loro natura configurabile, l’utilizzo dei blocchi migliora anche il SEO e l’esperienza dell’utente.

Inoltre, per più blocchi e funzionalità, considera l'utilizzo dei plug-in dei blocchi per sbloccare nuove possibilità di progettazione.

Sperimenta vari blocchi e plugin per vedere cosa funziona meglio per il tuo sito. Conoscendo i blocchi di WordPress, puoi creare contenuti accattivanti e dinamici che si distinguono.

Ora apri il tuo editor WordPress e scopri le possibilità illimitate offerte dai blocchi!

Per ulteriori informazioni, consulta queste altre risorse utili:

  • 12 migliori temi a blocchi WordPress per la modifica completa del sito
  • Confronto tra Elementor e Gutenberg: qual è il migliore?
  • I migliori page builder WordPress per il 2024: i primi 13 a confronto

Infine, seguici su Facebook e Twitter per rimanere aggiornato sugli ultimi articoli relativi a WordPress e ai blog.