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.

Method 1: Using the Columns Block

È 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.

Selezionare la colonna a una cella tra le opzioni disponibili.

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.

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.

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.

Si può notare che abbiamo aggiunto un'immagine al blocco delle 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.

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

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

Method 2: Using the TableBerg Plugin

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.

Passo 02: Aggiungere il blocco TableBerg all'editor

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

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

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.

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.

Selezionare uno per uno i blocchi che si desidera aggiungere al riquadro per curare i contenuti desiderati. Per prima cosa, aggiungeremo 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.

Infine, abbiamo aggiunto un pulsante CTA.

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.

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

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

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

Method 3: Using the Ultimate Blocks Plugin

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.

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.

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.

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

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.

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

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

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.

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

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

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.