I migliori blocchi WordPress originali [Rapida panoramica]

Ti offriamo una guida su come utilizzare l'editor e i blocchi di WordPress di Gutenberg. Si prega di leggere le notizie sulle modifiche ai blocchi che arriveranno nella prossima versione 5.4. Abbiamo selezionato tutti i blocchi di uso più frequente che devono essere utilizzati su qualsiasi sito web. Una volta rilasciato, pubblicheremo maggiori dettagli su tutte le funzionalità.

Quando WordPress aveva annunciato il nuovo editor Gutenberg nel 2018, ne eravamo entusiasti. Ora, un paio di anni dopo, vediamo un enorme miglioramento. Gutenberg WordPress editor è un ottimo strumento per creare un sito web.

Con Plugin AitThemes CitadelaWP, puoi creare contenuti specifici per la presentazione di un'azienda, di un'azienda, di un blog o di un sito Web senza scopo di lucro. O anche avviare una nuova attività online. La velocità del sito Web e la facilità di modifica del sito Web sono i fattori più importanti.

Cos'è un blocco?

I blocchi WordPress di Gutenberg stanno costruendo unità del sito web. Ognuno di loro ha il suo posto e il suo scopo speciali. È molto importante utilizzare il blocco WordPress giusto per un determinato tipo di contenuto.

Ma come trovi il blocco più adatto al tuo intento?

Per aiutarti a comprendere meglio i blocchi di WordPress, abbiamo preparato questa panoramica dei più popolari.

Blocchi di contenuti testuali

Esistono diversi blocchi che puoi utilizzare per inserire contenuti di testo sul tuo sito web. Puoi usare diversi blocchi. Da WordPress 5.4 c'è una nuova impostazione, puoi cambiare il colore del testo.

• Paragrafo
• Intestazione
• Citazione
• Elenco
• Pullquote
• Tavolo
• Versetto
• Preformattato

Tranne questo, usi il blocco Classico che può essere più pratico per un lungo paragrafo.

Blocco pulsanti

Creare un pulsante CTA convincente in WordPress è diventato semplicissimo con Button block. Non è necessario inserire CSS personalizzati o comprendere l'HTML. Puoi, ma non devi, inserire il codice esadecimale del tuo colore preferito per rendere il pulsante bello e accattivante.

Dove utilizzare il blocco pulsanti?

Una volta che il visitatore web arriva al tuo sito web, vuoi incoraggiarlo ad agire. Ecco a cosa servono i pulsanti CTA.

In generale, ci sono 3 posti in cui dovresti usare il blocco Button di WordPress:

• Home page: per completare l'azione che porterà al raggiungimento del tuo obiettivo, come iscriversi alla newsletter, scoprire un'offerta speciale o registrarsi per una prova gratuita.
• Pagina del prodotto: a seconda di come viene condotta la pagina del prodotto, potrebbero esserci 1 pulsante CTA (ACQUISTA) o più pulsanti, ad esempio dettagli del prodotto, acquista, aggiungi alla lista dei desideri, ecc.
• Blog: i pulsanti CTA potrebbero fare riferimento a un altro articolo utile o all'acquisto del tuo prodotto/servizio.

Impostazioni del blocco dei pulsanti

In Inspector, sul lato destro, puoi gestire facilmente le impostazioni del tuo pulsante:

• Stile
• Colore di sfondo
• Colore del carattere
• Confine

Il testo scritto nel tuo pulsante CTA dovrebbe essere breve e diretto, incoraggiando l'azione che desideri che i tuoi visitatori web intraprendano.

Novità in arrivo nella prossima versione di WordPress 5.4 (rilascio 31 marzo 2020)

Il blocco pulsante verrà sostituito con il nuovo pulsanteS bloccare.
Puoi presumere dal nuovo nome che sarai in grado di creare più pulsanti uno per uno in un contenitore di blocchi. Spesso è necessario creare due CTA alla volta, ad esempio: Acquista ora e Leggi di più. Inoltre, sono in arrivo alcune nuove impostazioni di stile e colore. Scegli lo stile Riempimento o Contorno e poi il colore dello sfondo. Puoi scegliere uno sfondo a tinta unita o sfumato. Alcuni preset come punto di partenza saranno disponibili per una messa a punto più agevole. La buona notizia è che tutti i blocchi di pulsanti esistenti funzioneranno e non sarà necessario migrarli.

Blocco colonne

Il blocco colonne è un fantastico blocco WordPress che apre le porte a nuovi layout. Ti offre più opzioni di disposizione degli elementi della pagina che si traducono in più alternative di design.

Lavorare con il blocco Colonne è facile:

• Nessuna installazione aggiuntiva di plug-in.
• Nessuna codifica richiesta.
• Tutto ciò di cui hai bisogno è un po' di buon senso per un design pulito.

Rispetto al problema precedente che dovevi affrontare prima del rilascio dell'editor di blocchi di WordPress, è semplicissimo utilizzare il blocco di colonne di WordPress.

Come usare il blocco Colonne?

Come indicato sopra, ci sono 2 modi in cui è possibile utilizzare il blocco Colonne:

• Per organizzare il flusso dei tuoi testi (in un post sul blog o sulla pagina normale).
• Per disporre altri blocchi in colonne.

Quando organizzi il testo in colonne, ad esempio all'interno di un post di un blog, aumenti la leggibilità e rendi il tuo sito web più trasparente e facile da usare.

Tuttavia, quando utilizzi il blocco Colonne per nidificare altri blocchi, come immagini, testi e pulsanti, stai modificando l'intero layout della pagina scelta e creando nuovi design.

Impostazioni del blocco di colonne

Dopo aver inserito un blocco Colonna nella pagina, scegli quante colonne desideri. Può essere qualsiasi importo da 2 a 6 colonne. Quindi puoi iniziare a digitare il testo o ad aggiungere blocchi in ogni colonna.

L'allineamento del contenuto del blocco di colonne può essere impostato separatamente per l'intero blocco e per le singole colonne. Puoi anche scegliere la proporzione della larghezza della colonna. In questo modo, una colonna può essere più larga di un'altra.

Blocco di copertura

Parliamo dell'intestazione del tuo sito web. È una sezione che definisce la prima impressione quando qualcuno arriva sulla tua home page. Tipo di importante, non è vero? E sapevi che il blocco Cover può essere utilizzato come intestazione su qualsiasi pagina?

Cover è il blocco principale di WordPress che ti aiuta a stupire i tuoi visitatori web. Soprattutto quando è usato correttamente, o per meglio dire, quando è perfettamente integrato nel tuo web design.

Dove usare Cover block?

Come accennato in precedenza, il blocco copertina può essere utilizzato su qualsiasi pagina. Inoltre, può essere aggiunto in qualsiasi punto della pagina, a differenza dell'intestazione del tuo sito Web che è fissata nella parte superiore del tuo sito Web.

Il blocco di copertura può essere utilizzato come:

• Intestazione di qualsiasi pagina, inclusa la home page.
• Immagine o video sovrascritti dal testo utilizzato nella pagina del prodotto.
• Separatore di contenuto nel post del blog.

Impostazioni blocco copertura

L'impostazione del blocco Cover è molto semplice. Innanzitutto, scegli un'immagine o un video come sfondo. Puoi anche usare un solo colore. Quando hai impostato lo sfondo, aggiungi un titolo e un sottotitolo. 

Puoi scegliere l'allineamento del blocco e, naturalmente, l'allineamento del testo all'interno.

L'allineamento del blocco di copertura offre le seguenti opzioni:

• Allineare a sinistra
• Allinea al centro
• Allinea a destra
• Ampia larghezza
• Intera larghezza

Il mio preferito è la sovrapposizione di colori disponibile nell'ispettore: l'immagine di sfondo del blocco copertina può essere modificata con qualsiasi colore desiderato. Insieme alla dimensione e al colore del carattere personalizzati, puoi creare bellissimi contrasti e l'aspetto finale del tuo blocco copertina sarà sorprendente.

Da WordPress 5.4 puoi scegliere lo sfondo sfumato invece di uno a tinta unita.

Blocco galleria

Metti in mostra le immagini sul tuo sito web utilizzando il blocco Galleria. Questo blocco WordPress standard è stato progettato per contenere le tue immagini e visualizzarle bene su qualsiasi pagina del tuo sito web. Analogamente ad altri blocchi di WordPress, il blocco Galleria può essere posizionato ovunque sul sito Web o all'interno del post del blog.

Il caricamento delle tue immagini può essere effettuato scegliendo i file dalla libreria multimediale, dal tuo computer o utilizzando la funzione drag&drop.

Dove utilizzare il blocco Galleria?

A seconda del tipo di sito Web, potresti voler creare una galleria fotografica complessa o una semplice presentazione di immagini. Puoi utilizzare il blocco Galleria su:

• La tua home page
• Singole sottopagine create come album della tua galleria fotografica
• Pagine dei prodotti
• Post sul blog

Impostazioni del blocco galleria

Oltre alle varie opzioni di allineamento del blocco Galleria stesso, ci sono un paio di opzioni interessanti all'interno di questo blocco, come:

• Numero di colonne in cui sono allineate le immagini.
• Ritaglio dell'immagine in modo che corrisponda alla stessa dimensione (dell'immagine più piccola).
• Collegamento ipertestuale per darti la possibilità di collegarti a un'altra pagina o file multimediale.

Blocco immagine

Il blocco immagine non è altro che il blocco per visualizzare un'immagine sul tuo sito web.

Giusto. Se vuoi solo aggiungere un'immagine a una qualsiasi delle tue pagine, dovresti usare il blocco Image WordPress. Potrebbe essere simile ad altri blocchi presentati, ma ci sono differenze significative che lo rendono perfetto per le singole immagini.

Quando utilizzare il blocco immagine?

Il blocco immagine dovrebbe essere utilizzato soprattutto quando l'oggetto visualizzato sull'immagine è particolarmente importante per il tuo visitatore web che desideri:

• Cattura l'attenzione del visitatore web con un'immagine specifica.
• Mostra immagine con didascalia.
• Mostra infografiche che aiutano i visitatori a comprendere meglio l'argomento discusso.

Impostazioni del blocco immagine

Uno dei maggiori vantaggi del blocco Image WordPress sono le sue opzioni di dimensione dell'immagine. Puoi facilmente ridimensionare un'immagine tirandola per l'angolo, scegliere una dimensione fissa in pixel o definire la dimensione in percentuale.

Un'altra opzione significativa sono i campi di input per testo alternativo, didascalia e collegamento. Consiglio vivamente di utilizzare questi campi in quanto svolgono un ruolo importante nella SEO on page.

Media e blocco di testo

Passiamo a layout di pagina più avanzati che puoi creare utilizzando Media e blocco di testo. Questo blocco centrale di WordPress ti consente di combinare media e testo fianco a fianco, in modo estetico e contestuale.

Dove utilizzare Media e blocco di testo?

Sebbene il blocco Media e testo sia più adatto per l'uso all'interno dei post del blog, con un po' di immaginazione è possibile utilizzarlo anche altrove. Ad esempio, puoi creare una bella panoramica di prodotti o servizi utilizzando immagini e testo uno accanto all'altro.

Non dimenticare di aggiungere un blocco Pulsante alla sezione di testo del blocco Media e testo, se utilizzato come panoramica del prodotto/servizio. In questo modo puoi progettare una bella sezione CTA su qualsiasi pagina.

Vantaggi di Media e blocco di testo

• Riunire immagini e testo che si adattano contestualmente l'uno all'altro.
• Evitare lo smarrimento dell'immagine all'interno del post del blog.
• Aiutare con la reattività del sito (utilizzare la funzione "Stack on mobile").

Impostazioni dei blocchi multimediali e di testo

Osservando l'impostazione di Media e blocco di testo, noterai alcune opzioni di allineamento, alcune delle quali sono uniche rispetto alla maggior parte degli altri blocchi.

L'impostazione interessante e utile di questo blocco è il colore di sfondo. Colorando l'area attorno all'immagine e al testo che combaciano, puoi evidenziare visivamente la loro connessione.

Inserisci un collegamento da WordPress versione 5.4 (31.3.2020). Puoi scegliere tra collegamento, file multimediale o pagina di allegato.

Blocco tavolo

Il blocco tabella è uno degli esempi di come WordPress è migliorato dopo l'introduzione dell'editor di blocchi di WordPress nella versione 5.0 e successive. Mentre prima avevi bisogno del plug-in per inserire la tabella nel tuo sito Web WordPress, ora puoi semplicemente utilizzare il blocco tabella.

Dove usare il blocco tabella?

Le tabelle svolgono un ruolo enorme nel fornire contenuti utili in modo ben organizzato e trasparente. Sicuramente, la maggior parte dei siti Web ha utilizzato le tabelle. Di seguito sono riportati solo alcuni esempi di utilizzo delle tabelle su diversi siti Web:

• Confronto dei dati
• Tabelle dei prezzi
• Dettagli tecnici del prodotto
• Ricette
• Panoramica dei pacchetti di abbonamento

Avere il blocco Table come parte del core gratuito di WordPress è davvero sorprendente.

Impostazioni del blocco tabella

Quando inserisci un blocco Tabella nella pagina, devi definire un numero di colonne e righe della tabella. Non preoccuparti, questo numero non è fisso. Puoi aggiungere più righe e colonne (o rimuoverle) in qualsiasi momento.

Quindi, scegli uno stile della tua tabella: predefinito o strisce. Passa all'allineamento e allo stile del carattere e, infine, compila la tabella prima di aggiungere un tocco finale.

Altre opzioni includono:

• Colore di sfondo
• Celle a larghezza fissa
• Intestazione
• Piè di pagina
• Collegamento (l'immissione di testo in una tabella può collegarsi ad altre pagine)

Quale blocco vorresti vedere dopo?

Spero ti sia piaciuto leggere la nostra selezione di blocchi core di WordPress molto utili, disponibili gratuitamente per tutti. Per favore, facci sapere quali blocchi vorresti leggere in seguito o quali funzionalità ritieni ancora mancanti nel core di WordPress. Grazie per aver letto!