I riquadri informativi sono ormai uno strumento comune per i siti web che hanno bisogno di condividere informazioni importanti in modo chiaro e attraente. In pratica, se volete attirare l'attenzione su una particolare promozione, attirare l'attenzione del visitatore su dettagli chiave e avvisi importanti, o incoraggiare gli utenti verso CTA fruttuose, i riquadri informativi offrono una soluzione semplice per far risaltare i vostri messaggi.
I riquadri informativi non solo suddividono le informazioni importanti in sezioni più piccole e facili da leggere, ma svolgono anche un ruolo importante nel guidare la navigazione degli utenti. Con l'aggiunta dei riquadri informativi, sarà più facile guidare i visitatori attraverso i punti essenziali senza sopraffarli e in un formato organizzato, pulito e amichevole.
Se siete qui a leggere questo articolo, significa che conoscete già il concetto di box informazioni o che lo state imparando per la prima volta. Tuttavia, potrebbe esserci ancora una domanda che vi frulla per la testa: come si crea un riquadro informativo? Per questo motivo abbiamo preparato una guida passo passo che vi illustrerà le basi della creazione di box informativi in WordPress. Vi forniremo due approcci diversi per aiutarvi a scegliere l'opzione più adatta. Quindi, perché aspettare? Andiamo subito al sodo.
Metodo 1: utilizzo dei blocchi colonna
Il blocco colonne dell'editor Gutenberg è un modo semplice per creare box informativi, se si desidera farlo senza l'aiuto di plugin. Permette di organizzare i contenuti di base in un formato strutturato. Ecco come impostare un box informativo utilizzando questo approccio:
Passo 1: Aggiungere un blocco di colonne all'editor
Creare un nuovo post o pagina in WordPress e aprirlo nell'editor di Gutenberg. Procedere all'aggiunta di un blocco colonna facendo clic sul pulsante "Icona "+ e quindi selezionare "Colonne" dalle opzioni del blocco.
Ora, scegliere un layout con una sola colonna o con più colonne, a seconda di come si vuole che appaia il riquadro informativo. Per comodità dei principianti, abbiamo scelto una sola colonna per creare il nostro riquadro informativo.
Passo 2: Aggiungere diversi blocchi per aggiungere contenuti
Quindi, aggiungere contenuto al blocco colonna per creare un riquadro informativo visivamente distinto. Fare clic sul pulsante "Icona "+ per aggiungere il blocco preferito. Questo, a sua volta, vi guiderà alla libreria dei blocchi di Gutenberg. Ad esempio, iniziamo con un'immagine nella parte superiore del nostro box informazioni. Quindi, cerchiamo il blocco Immagine nella libreria e selezionarla. Continuare a caricare l'immagine dalla libreria multimediale o caricarla dal dispositivo.
Una volta caricata l'immagine, è possibile regolare il valore di allineamento dell'immagine e personalizzare il dimensione di essa. È possibile allineare l'immagine a sinistra, al centro o a destra. In questo caso, abbiamo allineato l'immagine al centro, mantenendo però le stesse dimensioni.
Ora abbiamo bisogno di un'intestazione adeguata per evidenziare la nostra immagine. Per aggiungere un titolo Intestazione si inizia selezionando l'immagine, che aprirà la barra degli strumenti, e da lì si seleziona il blocco padre.
Una volta selezionato il blocco padre, il pulsante + icona apparirà. Quindi, premete l'icona +, cercate l'opzione Intestazione e fare clic su di esso. Continuare ad aggiungere i testi nel blocco Intestazione e allinearli nel modo desiderato.
Una volta terminato, ripetere la procedura precedente di aggiunta dei blocchi. Qui abbiamo aggiunto un blocco blocco paragrafo e un blocco pulsante uno dopo l'altro. Per prima cosa, scegliete il blocco paragrafo e aggiungere il testo necessario. Allineare i testi nel modo che si ritiene necessario.
Il prossimo compito riguarda i pulsanti. Individuare i blocchi Button dalla libreria, selezionare il blocco e aggiungere i testi da inserire nel pulsante.
Una volta terminato, allineare i pulsanti nel modo che preferite e poi aggiungere collegamenti al vostro pulsante.
Passo 3: personalizzare l'intero blocco
Le opzioni di personalizzazione consentono di regolare vari aspetti per ottenere un look raffinato. Selezionate il vostro intera sezione della colonna facendo clic sull'icona della colonna nella barra degli strumenti. A questo punto, è possibile iniziare la personalizzazione regolando i valori di larghezza della colonna per assicurarsi che si adatti bene al layout della pagina.
Successivamente, spostarsi nella sezione Scheda Stili. Da qui, è possibile scegliere l'opzione colore dei testi, dei collegamenti e degli sfondi; è possibile modificare tipografia e personalizzare il blocco dimensioni.
Se si scorre più in basso, si troveranno le impostazioni per aggiungere Spaziatura tra i blocchi e Confine e Ombre.
Abbiamo cambiato il colore del testo e dello sfondo, modificato il padding e introdotto alcuni bordi e raggi. Una volta pubblicato il riquadro informativo, avremo il risultato finale.
Metodo 2: utilizzo del plugin Tableberg
Il plugin Tableberg, utilizzato principalmente per la creazione di tabelle, può essere sfruttato anche per progettare box informativi con un formato strutturato. Ecco come creare un box informativo utilizzando Tableberg:
Passo 1: installare e attivare il plugin Tableberg
Accedere alla dashboard di WordPress, navigare in Plugin > Aggiungi nuovo, cerca "Tavolo di lavoro," e fare clic su Installa ora. Una volta installato, fare clic su Attivare per abilitare il plugin.
Passo 2: creare una nuova tabella
Fare clic sul pulsante + icona dal vostro editor e cercate la voce Tavolo di lavoro dalla libreria. Una volta trovato, fare clic su di esso.
Ora è necessario selezionare il numero di colonne e righe per il riquadro informativo. In questo caso, creeremo un riquadro a colonna singola; per questo motivo abbiamo selezionato 1 riga e 1 colonna.
Passo 3: Aggiungere contenuto alla tabella
Come abbiamo fatto nel primo metodo, cominceremo con l'aggiungere immagini nel nostro riquadro informativo. Premete il tasto + icona, cercare l'opzione Blocco immaginee aggiungerla ai propri post. Quindi, caricare l'immagine dal proprio dispositivo o dalla libreria multimediale.
Anche in questo caso, se è necessario apportare modifiche all'allineamento e alle dimensioni, procedere come mostrato nell'immagine sottostante.
Successivamente, si inserirà il testo dopo l'immagine, aggiungendo un elemento Blocco di paragrafi. Fare clic sul segno +, cercare il blocco di paragrafo e aggiungerlo. Se si ritiene necessario modificare l'allineamento, farlo.
L'ultima operazione è l'aggiunta dei pulsanti. Selezionare il pulsante blocco genitore, trovare il + icona, ricerca di pulsantie aggiungerlo all'editor.
Una volta completata questa operazione, aggiungere testo ai vostri pulsanti, controllate il allineamenti del vostro pulsante e aggiungere collegamenti ad esso.
Passo 4: personalizzare la tabella
Dopo aver impostato il riquadro Tableberg con il contenuto, si può procedere alla personalizzazione e allo stile del riquadro nel suo complesso. Ma tenete presente che potete anche personalizzare ogni singolo blocco che abbiamo usato qui. Per ora, ci atteniamo all'intera tabella.
Per prima cosa, fare clic sul pulsante Icona Tableberg nella barra degli strumenti per selezionare l'intero riquadro. Quindi, scorrere fino al punto Scheda Impostazioni e regolare il larghezza del riquadro per adattarlo al layout della pagina o del post.
Quindi, passare alla Scheda Stili per personalizzare la scatola".colore di sfondo, padding, margine e spazio.
Se si scorre ulteriormente verso il basso, si troveranno altre opzioni per modificare l'impostazione di tabella, bordo interno e di colonna, colore globale dei caratteri e altro ancora.
Ecco come realizzare un riquadro informativo perfetto. Se avete bisogno di più di un riquadro informativo, basta modificare il numero di colonne e righe e seguire la stessa procedura.
Conclusione
Ed ecco il vostro riquadro informativo Tableberg, realizzato alla perfezione. Con poche modifiche, il vostro contenuto può passare da ordinario ad accattivante, attirando l'attenzione proprio dove serve. Le possibilità di personalizzazione sono infinite, quindi date sfogo alla vostra immaginazione. Sperimentate con i colori, giocate con i bordi e aggiungete tocchi finali che rendano ogni riquadro una delizia visiva. Lasciate che i vostri riquadri informativi non solo trasmettano informazioni, ma aggiungano anche un tocco di stile all'intero sito web.