Come creare riquadri di contenuto in WordPress

Un riquadro di contenuto è un contenitore visivamente distinto con il quale è possibile incorniciare un contenuto specifico che lo fa risaltare rispetto al resto. Vi aiuta a mettere in evidenza informazioni chiave o annunci speciali, attirando l'attenzione degli utenti su dettagli importanti.

I riquadri di contenuto sono adatti a mostrare sezioni di invito all'azione, testimonianze, recensioni e caratteristiche chiave di prodotti o servizi. Esistono diversi modi per creare riquadri di contenuto nei siti web WordPress.

Nel seguito di questo articolo, vi mostreremo tre metodi pratici per creare box di contenuto in WordPress. Seguiteci fino alla fine.

Metodo uno: utilizzare il blocco colonne

È possibile creare e progettare un riquadro di contenuto di livello base utilizzando il blocco predefinito Colonne di WordPress. Seguite i passaggi illustrati di seguito.

Passo 01: aggiungere il blocco colonne all'editor

Trova il Blocco colonne dalla libreria dei blocchi di Gutenberg premendo il tasto pulsante più (+) e aggiungerlo all'editor.

Aggiungere il blocco Colonne all'editor

Selezionare la colonna a una cella tra le opzioni disponibili.

Selezionare il layout della colonna a cella singola

Passo 02: Aggiungere blocchi di contenuto alla colonna

Il blocco Colonne consente di aggiungere altri blocchi al suo interno. È possibile aggiungere qualsiasi blocco si desideri per curare i contenuti.

Aggiungere blocchi di contenuto alla colonna

Fare clic sul pulsante icona più (+) sul blocco colonna. Si aprirà la libreria dei blocchi di Gutenberg, dalla quale si potrà scegliere e aggiungere il blocco blocco paragrafo.

Aggiungere il blocco Paragrafo al blocco Colonne

Possiamo vedere che abbiamo già aggiunto del contenuto di testo al blocco della colonna. In seguito, è possibile aggiungere altri blocchi alle colonne come si desidera. Supponiamo di aggiungere il blocco Immagine.

Fare clic sul pulsante Icona delle colonne sulla barra degli strumenti. Premete il tasto icona più (+). Trovare e selezionare la voce Blocco immagine dalla biblioteca.

Aggiungere il blocco immagine al blocco colonne

Si può notare che abbiamo aggiunto un'immagine al blocco delle colonne.

Immagine aggiunta al blocco colonne

Passo 03: Personalizzare l'intero blocco colonne

Selezionare l'intera sezione della colonna facendo clic sull'icona della colonna nella barra degli strumenti. Andare alla sezione Scheda Impostazioni. È possibile regolare il Larghezza della colonna dalla rispettiva opzione.

Personalizzare l'intero blocco colonne

Successivamente, si arriva al Scheda Stili. È possibile modificare il colore del testo, il colore dello sfondo, la tipografia e le dimensioni del blocco.

Stilizzare il blocco colonna

Scorrendo la sezione verso il basso, si avranno ulteriori opzioni per aggiungere distanza tra i blocchi e confine al blocco colonne.

Aggiungere la spaziatura del blocco e il bordo al blocco colonne

Metodo due: utilizzare il plugin Ultimate Blocks

Ultimate Blocks è un promettente plugin per il content marketing con 25+ blocchi personalizzati per potenziare l'editor Gutenberg. Ha diversi blocchi straordinari con i quali è possibile creare ulteriori riquadri di contenuto di bell'aspetto sul proprio sito.

Passo 01: Installare e attivare il plugin Ultimate Blocks

Vai a Plugin > Aggiungi nuovo plugin. Trova il Plugin Ultimate Blocks digitando il suo nome nella casella di ricerca. Installare e attivare una volta che il plugin viene visualizzato di seguito.

Installare e attivare il plugin Ultimate Blocks

Passo 02: Aggiungere il blocco Styled Box del plugin all'editor Gutenberg

Il plugin Ultimate Blocks include un blocco dedicato chiamato Scatola in stile per creare caselle di contenuto. Trovarlo e aggiungerlo all'editor.

Aggiungere il blocco stilizzato del plugin all'editor Gutenberg

Il blocco offre quattro tipi di caselle. Scegliete quello che preferite per visualizzare il vostro messaggio. Ognuno di essi ha una serie di funzionalità uniche.

Per l'esercitazione, selezioneremo l'opzione Scatola delle caratteristiche.

Scatole in stile

La casella delle caratteristiche consente di aggiungere un'immagine, un titolo e una descrizione. Spero che possiate farli da soli.

Cose che si possono aggiungere al riquadro delle caratteristiche

Passo 03: Aggiungere contenuto al blocco

Per impostazione predefinita, il blocco consente di visualizzare un prodotto e di descriverne le caratteristiche. Tuttavia, è possibile aggiungere e visualizzare più prodotti con il blocco. Selezionare il tipo di colonna si vuole definire il numero di prodotti da visualizzare.

Selezionare il tipo di colonna

A questo punto, aggiungere contenuti alle opzioni visualizzate all'interno del campo Blocco Box stilizzato.

Aggiungere contenuto al blocco box stilizzato

Si può notare che abbiamo aggiunto del contenuto al blocco.

Contenuto aggiunto al blocco box stilizzato

Passo 04: Personalizzare e stilizzare il blocco box stilizzato

Venite al Scheda Impostazioni. Dal Selezionare l'opzione ModalitàÈ possibile cambiare il riquadro delle caratteristiche con altri riquadri in stile, come quelli mostrati sopra, come il riquadro delle notifiche, il riquadro con i bordi e il riquadro con i numeri.

Dopo di che, dal Opzione Controllo reattivoè possibile nascondere il blocco da un particolare tipo di dispositivo.

Personalizzare il blocco Casella stilizzata

Successivamente, si arriva al Scheda Stili. È possibile modificare il Imbottitura e Margine del blocco da questa scheda.

Stilizzare il blocco casella stilizzata

Pertanto, è possibile creare un riquadro di contenuto utilizzando il plugin Ultimate Blocks.

Metodo 3: Utilizzo del plugin TableBerg

TableBerg è un potente plugin per la creazione di tabelle in grado di potenziare la soluzione predefinita di WordPress. Con questo plugin è possibile creare anche dei riquadri di contenuto accattivanti. Vediamo come fare.

Passo 01: Installare e attivare il plugin TableBerg

Come per il metodo precedente, andare su Plugin > Aggiungi nuovo plugin. Trova il Plugin TableBerg digitando il suo nome nella casella di ricerca. Installare e attivare it.

Installare e attivare il plugin TableBerg

Passo 02: Aggiungere il blocco TableBerg all'editor

Il plugin viene fornito con un blocco chiamato TableBerg. Aggiungerlo all'editor.

Trovare e aggiungere il blocco TableBerg all'editor di Gutenberg

Se si pensa di costruire una tabella, si può definire qui il numero di righe e colonne, come il blocco tabella predefinito.

Definire le colonne e le righe della tabella

Ma selezioniamo la riga 1 e la colonna 0 per creare una casella di contenuto. Si può notare che il layout è stato creato all'istante.

Aggiungere contenuto alla casella TableBerg

Passo 03: Aggiungere contenuto al riquadro TableBerg

TableBerg consente di aggiungere diversi tipi di contenuto alle sue righe e colonne aggiungendo blocchi di contenuto.

Una volta posizionato il cursore sulla casella, nell'angolo in basso a destra apparirà l'opzione di blocco.

Aggiungere contenuto alla casella TableBerg

Selezionare uno per uno i blocchi che si desidera aggiungere al riquadro per curare i contenuti desiderati. Per prima cosa, aggiungeremo il blocco immagine.

Aggiungere il blocco immagine

Poi, si può notare che abbiamo aggiunto un testo descrittivo del prodotto. Abbiamo aggiunto e utilizzato l'elemento Blocco di paragrafi per questo.

Aggiungere un paragrafo al blocco

Infine, abbiamo aggiunto un pulsante CTA.

Aggiungere un pulsante CTA al riquadro TableBerg

Passo 04: personalizzare il riquadro TableBerg

È possibile personalizzare ogni singolo blocco aggiunto al riquadro TableBerg. Successivamente, è possibile personalizzare e stilizzare l'intero riquadro TableBerg.

Non mostreremo come personalizzare i singoli blocchi, perché il tutorial sarebbe troppo lungo. Potete vederlo nella nostra pagina di documentazione.

Selezionare l'intero riquadro facendo clic sull'icona TableBerg nella barra degli strumenti.

Personalizzare le impostazioni della casella TableBerg

Dalla scheda Impostazioni, è possibile impostare la larghezza desiderata per il riquadro.

Personalizzare la larghezza della tabella

Dal Scheda Stiliè possibile personalizzare il colore di sfondo, il padding, il margine e lo spazio del riquadro.

Personalizzare la casella di contenuto

È quindi possibile creare una casella di contesto con il plugin TableBerg.

Note di finitura!

Ultimate Blocks e TableBerg sono due plugin multifunzionali che mirano a rivoluzionare il sistema Gutenberg, consentendo agli utenti di creare facilmente contenuti sofisticati.

TableBerg è ancora in fase di sviluppo e promette di offrire presto molte funzioni avanzate. D'altra parte, Ultimate Blocks è già un plugin popolare utilizzato da oltre 60.000 siti web in tutto il mondo.

Se avete domande su di essi, sentitevi liberi di porcele in qualsiasi momento attraverso il box dei commenti.



Il team Tableberg

L'offerta Early Bird è ora disponibile!
Questo è il testo predefinito per la barra di notifica