Blocchi WordPress: una guida approfondita

I blocchi di WordPress sono il componente principale del sistema di modifica Gutenberg drag-and-drop di WordPress per i siti web.

Il modo più semplice per imparare a usare i blocchi è attraverso la pratica pratica, ma capire cosa sono i blocchi e cosa possono fare per te può rendere la creazione della tua pagina più efficiente e persino divertente.

Che tu sia nuovo nella creazione di siti WordPress o stia cercando di sviluppare alcune abilità avanzate, questa guida ti insegnerà di più su cosa sono i blocchi, quali blocchi comuni usano le persone, come usarli e altre informazioni che possono migliorare il tuo sito.

Ulteriori informazioni: Progettazione di siti Web WordPress: come creare un sito Web WordPress da zero

Cosa sono i blocchi di WordPress?

I blocchi di WordPress sono elementi discreti di testo, contenuti multimediali o codice personalizzato che puoi aggiungere a un post di un blog o a una pagina di un sito Web utilizzando il sistema di modifica Gutenberg di WordPress.

La maggior parte delle persone si concentra sull'utilizzo per i blog, ma funziona bene per la maggior parte delle altre pagine su molti siti web.

Esistono blocchi di WordPress per semplificare la creazione di post e pagine che sembrano piacevoli ai lettori eliminando la necessità di codificare manualmente ogni elemento. Invece, puoi trascinare e riorganizzare ogni blocco per personalizzare l'aspetto della tua pagina.

Ogni blocco è funzionalmente un elemento autonomo nella pagina, quindi la modifica di un blocco non modificherà gli altri.

Questo non è l'unico sistema di editing a blocchi sul mercato. Alcuni servizi concorrenti, come Ghost, hanno anche editor robusti che puoi utilizzare per creare siti web.

Tuttavia, Ghost è principalmente una piattaforma di blog e il suo editor si concentra su questo, mentre l'editor di WordPress è utile anche per creare pagine non di blog sul tuo sito web.

Questi blocchi sono anche diversi da Drupal, un altro sistema di gestione dei contenuti.

Drupal si concentra su blocchi che possono apparire su più parti di un sito web, mentre WordPress si concentra su singole parti di una pagina.

Puoi duplicare i contenuti abbastanza facilmente, ma i blocchi stessi non sono collegati e non cambieranno tutti quando ne modifichi uno.

Ulteriori informazioni: Design della pagina di destinazione: 10 pagine di destinazione ispiratrici e ad alta conversione

Storia di Gutenberg

Gutenberg è l'attuale editor di WordPress.

Lanciato originariamente nel 2018, da allora è cresciuto fino a diventare un sistema più maturo in grado di fornire modifiche rapide e potenti per pagine Web e post di blog.

Non è ancora finito perché gli sviluppatori vogliono usarlo per la modifica dell'intero sito, ma ora ha molte più funzionalità rispetto al lancio.

Gutenberg esiste perché molti utenti di WordPress volevano avere un modo più semplice e pulito di blog senza modificare il codice per far sembrare tutto a posto.

Qui, è essenziale capire che WordPress attrae molti utenti occasionali, molti dei quali hanno poche conoscenze di programmazione.

Questa è una netta differenza dai primi anni di internet quando non sarebbe nemmeno avere un sito web a meno che non si aveva relativamente avanzata di codifica delle conoscenze per il momento. In altre parole, WordPress vuole supportare il mercato occasionale, dove i processi di trascinamento hanno più senso.

Una considerazione secondaria per Gutenberg è come e dove le persone bloggano.

Alcuni proprietari di siti Web utilizzano sistemi di sintesi vocale invece di scrivere le cose manualmente, mentre un sistema di modifica drag-and-drop rende molto più semplice la creazione di siti Web su smartphone, tablet e altri dispositivi.

Tuttavia, alcune persone preferiscono ancora il vecchio sistema di editing. Non è una sorpresa perché offre ancora molto più controllo e supporto per gli utenti in grado di gestire il proprio codice.

Gutenberg è un potente editor , ma per necessità limita alcune cose che gli utenti possono fare. Niente è flessibile come la codifica pura, ma Gutenberg è più veloce e più facile per la maggior parte delle esigenze.

Ulteriori informazioni: Ottimizzazione del tasso di conversione: la guida completa

Passaggio tra editor classico e editor a blocchi

WordPress sa che la flessibilità di solito è meglio che costringere tutti a utilizzare un sistema, ed è per questo che puoi passare dal suo sistema di editing classico a quello a blocchi.

Nella maggior parte dei casi, devi essere l'amministratore del sito per passare da una visualizzazione di modifica all'altra.

Tuttavia, una volta effettuato l'accesso con l'account corretto, puoi cambiare l'editor in ogni pagina quando lo modifichi facendo clic sul pulsante nella parte superiore dello schermo.

Questo è tutto ciò che la maggior parte degli utenti deve sapere, ma puoi personalizzare ulteriormente le cose.

Molti plugin di WordPress ti consentono di creare pagine con un'interfaccia drag-and-drop come Gutenberg, ma che potresti preferire. In genere offrono anche scelte di modifica che Gutenberg non offre.

Plugin come Divi builder, SeedProd e il popolare e facile da usare Elementor offrono sistemi di editing oltre i blocchi forniti da Gutenberg.

Questi plug-in in genere contengono strumenti di ridimensionamento, componenti in più parti e modelli avanzati che riducono ulteriormente il processo di creazione delle pagine.

I plugin esterni sono utili per le pagine non di blog, ed è qui che spesso Gutenberg cade un po'. Può fare molte di quelle pagine, ma non con la stessa flessibilità degli altri sistemi.

Ulteriori informazioni: Mappa del percorso del cliente: best practice + modelli pronti

Come disattivare Gutenberg

Puoi disabilitare Gutenberg per utenti specifici? Si può disattivare completamente?

La risposta ad entrambi è sì. Ci sono diversi modi per disabilitare Gutenberg se non vuoi usarlo sul tuo sito.

Disabilita Gutenberg installando un plugin

Il primo metodo, e per la maggior parte degli utenti il ​​migliore, è utilizzare il plug-in Editor classico. Questo è un plugin ufficiale del team di WordPress, con letteralmente milioni di installazioni attive sui siti.

L'editor classico ti consente di impostare l'editor predefinito per ogni utente, consente agli utenti di scegliere un editor e include diverse funzionalità aggiuntive per semplificare le cose.

Questo non è tanto disabilitare tecnicamente Gutenberg quanto nasconderlo, ma il risultato pratico è lo stesso. Oppure, in un altro senso, l'installazione di Classic Editor è saggia perché ti consente di utilizzare l'editor che desideri, ed è semplicemente meglio che rimanere bloccato con un editor tutto il tempo.

Un'alternativa basata sulla comunità utilizza il plug-in Disabilita Gutenberg, che non è così popolare come l'editor classico ma non si basa sul supporto ufficiale.

Questo è un modo semplice e pratico per disabilitare completamente Gutenberg o per disabilitarlo per pagine, tipi di post, ruoli o temi specifici su un sito.

Per installare entrambi i plugin, i passaggi sono semplici:

1. Accedi alla tua interfaccia WordPress
2. A sinistra, seleziona "Plugin"
3. Nella schermata Plugin espansa, seleziona "Nuovo"
4. Nel campo di ricerca in alto, digita il nome del plugin che desideri
5. Scegli il plug-in che desideri dai risultati e fai clic sul pulsante "Installa ora"
6. Al termine, fai clic su "Attiva plug-in"

Disabilita Gutenberg modificando functions.php

Infine, puoi modificare il file functions.php sul tuo sito per disabilitare le cose direttamente.

Tuttavia, questo può finire per danneggiare il tuo sito se lo fai in modo errato, quindi non lo consigliamo agli utenti occasionali. L'installazione di uno dei plugin sopra elencati è sia più semplice che facilmente reversibile.

Se vuoi disabilitare Gutenberg senza un plugin e sei un principiante con il codice WordPress, puoi seguire questi passaggi. Questo metodo lo disabilita per tutti gli utenti.

1. Accedi alla tua interfaccia di WordPress (dovrai essere un amministratore)
2. Trova "Aspetti" nella barra laterale sinistra e passaci sopra con il mouse
3. Seleziona "Editor temi"
4. Nell'elenco dei file a destra, seleziona "functions.php"
5. Fai una copia del tuo file functions.php prima come backup in modo da poterlo ripristinare se qualcosa va di lato
6. Quando viene visualizzato l'editor, copia esattamente quanto segue e incolla nel file: add_filter( 'use_block_editor_for_post', '__return_false' );
7. Fai clic sul pulsante Aggiorna file in basso

Ulteriori informazioni: spiegazione della mappa di calore + come creare una mappa di calore del sito web

Tipi comuni di blocchi WordPress

Ecco i tipi più comuni di blocchi disponibili nell'editor di base di WordPress.

Prima di Gutenberg, la maggior parte delle persone codificava questi blocchi direttamente o con gli strumenti di formattazione del testo e delle immagini dell'editor di testo RTF e riorganizzava il codice secondo necessità per regolare il layout sulla pagina.

Paragrafo

Questo è il blocco che la maggior parte delle persone usa più di ogni altro. Come suggerisce il nome, si concentra sul contenuto scritto.

L'editor di testo converte ogni paragrafo in un blocco in modo che tu possa spostarli e riordinarli dopo averli scritti.

Immagine

I blocchi di immagini incorporate contengono elementi grafici singoli che puoi spostare nella pagina.

Questi sono dotati di varie opzioni di allineamento, incluso il ridimensionamento dell'immagine o addirittura l'intera larghezza, oltre il solito limite di un tema.

I blocchi di paragrafo e immagine insieme sono sufficienti per creare una pagina Web di base, quindi tutto il resto è in definitiva lì solo per ripetere e migliorare questi elementi, seguendo i principi di base della gerarchia visiva.

intestazioni

I blocchi di intestazione contengono testi di grandi dimensioni per dividere la pagina in sezioni e facilitare la ricerca dei contenuti da parte degli utenti. L'editor ti consente di regolare le dimensioni delle intestazioni, la formattazione, i collegamenti ipertestuali e altri elementi secondo necessità.

WordPress supporta fino a 6 livelli di intestazione, incluso h1 per il titolo della pagina, ma la maggior parte delle persone raramente va oltre h4.

Galleria

Il blocco galleria è una versione avanzata del blocco immagine di base e consente di aggiungere più immagini in un layout predeterminato.

L'editor corrente supporta un massimo di otto colonne per le immagini, oltre a ridimensionamento, collegamento e altre opzioni di formattazione per la pagina.

Elenco

Blocchi di elenchi creati elenchi numerati o puntati.

Questa è essenzialmente solo un'applicazione del blocco paragrafo, ma separare gli elenchi nel proprio componente rende più facile evitare di modificare accidentalmente la formattazione.

Citazione

I blocchi di citazioni sono blocchi di paragrafo formattati in modo speciale che aiutano a richiamare qualcosa di particolarmente importante.

La maggior parte delle persone li usa per una citazione di una persona specifica, ma puoi anche usarli per fornire commenti o evidenziare in altro modo informazioni vitali.

Audio

I blocchi audio sono relativamente rari sui siti Web, ma WordPress li supporta ancora.

Questi ti consentono di aggiungere qualsiasi file audio che hai, incluse funzionalità come la riproduzione automatica dell'audio o il loop.

Ricorda che alla maggior parte degli utenti non piace l'audio che viene riprodotto automaticamente a meno che non lo desiderino, quindi cerca di evitare di sorprendere i visitatori con rumori inaspettati.

Coperchio

I blocchi di copertina sono un elemento di formattazione più avanzato. Questo blocco ti consente di selezionare un'immagine o un video, e talvolta del testo, che puoi sovrapporre alla tua pagina.

Questo supporto può fluttuare sullo sfondo, ripetersi e in altro modo fungere da richiamo istantaneo dell'attenzione.

WordPress supporta l'assenza di trasparenza sull'overlay o la trasparenza completa, ma consiglia una quantità moderata per garantire che il testo sia facile da leggere.

File

I blocchi di file ti consentono di fornire collegamenti diretti ai file sul tuo sito Web in modo che i visitatori possano scaricarli.

Puoi caricare quasi ogni tipo di file sul tuo sito, ma il tuo provider di hosting potrebbe avere delle domande se provi a caricare qualcosa di troppo grande o ricevi troppi download per il tuo piano.

Questo è un buon esempio dell'interconnessione dello sviluppo web.

Probabilmente non incontrerai limiti se consenti solo alle persone di scaricare file di testo di base, ma parli con l'host del tuo sito Web prima di aggiungere altri file. Possono dirti cosa è consentito sul tuo piano o suggerire alternative se necessario.

video

I blocchi video ti consentono di aggiungere contenuti multimediali al tuo sito, caricandoli direttamente o collegando i contenuti su un altro sito.

I file video tendono ad essere estremamente grandi, quindi di solito hai bisogno di un buon piano di hosting se vuoi avere i file sul tuo sito.

Hosting esterno, ad esempio tramite YouTube e l'utilizzo dell'incorporamento di YouTube, è notevolmente più facile. Gutenberg converte automaticamente alcuni collegamenti video in un diverso tipo di blocco a seconda dei casi.

Come usare i blocchi di WordPress

Esistono diversi modi per aggiungere un blocco nell'editor di Gutenberg. Puoi aggiungerli direttamente dalla barra delle icone in alto o facendo clic sul pulsante di inserimento.

Questo pulsante ha l'aspetto di un cerchio con un segno più e ti consente di fare clic sul tipo di blocco da aggiungere.

Una volta che i blocchi sono sulla pagina, puoi spostarli su e giù facendo clic sulle frecce sul lato sinistro del blocco. In alternativa, puoi fare clic sulla griglia di sei punti e tenere premuto il pulsante del mouse, quindi trascinare il blocco nel punto desiderato.

Per modificare i blocchi, fai clic sul loro spazio. Questo aprirà automaticamente le informazioni sul blocco e ti consentirà di regolare i componenti secondo necessità.

È possibile utilizzare le stesse funzioni per modificare il tipo di blocco. Le frecce nel pannello di controllo possono essere utilizzate per espandere o chiudere sezioni dell'editor, mentre il pulsante X ti consente di chiudere l'editor di blocchi e concentrarti su altre cose.

Differenza tra blocchi e widget di WordPress

I blocchi sono principalmente contenuti di pagine Web, inclusi testo e contenuti multimediali come immagini e audio. Quindi, cos'è un widget WordPress e in cosa è diverso da un blocco?

I widget di WordPress, al contrario, sono contenuti che puoi inserire in aree speciali come barre laterali e piè di pagina. L'editor Gutenberg evita principalmente queste aree, sebbene tu possa includere cose simili a widget nel tuo contenuto principale aggiungendo blocchi di codice.

L'interfaccia del blocco si trova solitamente sul lato destro dello schermo quando l'editor di pagine è aperto. L'editor del widget è disponibile tramite l'area Aspetto > Personalizzatore e tramite il menu di amministrazione.

I widget di solito vengono visualizzati su ogni pagina di un sito Web, quindi non puoi modificarli dallo stesso punto in cui puoi modificare i blocchi.

Creazione di modelli di blocchi WordPress riutilizzabili

WordPress ti consente di creare modelli di blocchi riutilizzabili.

Questo è utile per avere un marchio e un design coerenti sul tuo sito senza ricreare ogni volta un layout esatto. Ciò è particolarmente utile se utilizzi software come Vectornator o Adobe Illustrator per creare grafica vettoriale e layout avanzati.

Creare il modello stesso è semplice. Tutto quello che devi fare è selezionare il blocco, fare clic sui tre punti nella barra degli strumenti che appare, quindi fare clic su Aggiungi a blocchi riutilizzabili.

Da lì, puoi rinominarlo in qualcosa di facile da ricordare e tornare a lavorare sulla pagina.

I modelli di blocco semplificano cose come loghi, pulsanti personalizzati realizzati in software di progettazione grafica, elementi di design e qualsiasi cosa utilizzata nel marchio di un sito web.

Il modello consentirà di aggiungere facilmente l'elemento ovunque desideri senza dover ripetere un determinato elemento di branding o layout ogni volta che desideri utilizzarlo.

Considerazioni finali sui blocchi di WordPress

Sebbene i blocchi di WordPress non siano l'ideale per tutti, sono un potente punto di partenza per creare pagine e organizzare i contenuti in modo intuitivo e facile da usare.

Tuttavia, la semplice lettura dei blocchi non è sufficiente per padroneggiarli.

Invece, vai ora sul tuo sito WordPress e inizia a giocare su una pagina. Facendo un po' di pratica, sarai in grado di padroneggiarne l'uso e iniziare a creare layout avanzati sul tuo sito.

Proprio come andare in bicicletta, i blocchi di WordPress sono difficili da dimenticare una volta che li impari e possono aiutarti a creare quasi tutti i design di pagina standard.