Come aggiungere un'immagine di sfondo a una tabella in WordPress (3 semplici passaggi)

Se state cercando una risposta alla domanda "come aggiungere un'immagine di sfondo a una tabella in WordPress", non troverete una risposta diretta. Inoltre, non esiste un'opzione diretta per aggiungerne una.

Ma se siete abbastanza creativi, potete farlo facilmente con l'aiuto degli altri blocchi principali forniti da WordPress. Oggi vi mostrerò come aggiungere un'immagine di sfondo a una tabella in WordPress in tre passaggi.

Perché aggiungere un'immagine di sfondo a una tabella in WordPress

L'aggiunta di un'immagine di sfondo a una tabella in WordPress può servire a diversi scopi, a seconda degli obiettivi di progettazione e del contenuto che si sta presentando.

Ecco alcuni motivi comuni per cui potreste prenderla in considerazione:

  • Migliorare l'aspetto visivo: Un'immagine di sfondo può rendere una tabella semplice più accattivante e visivamente attraente. Aggiunge un tocco di creatività e può aiutare il contenuto a risaltare, soprattutto se la tabella fa parte di una landing page o di un post ricco di contenuti.
  • Coerenza del marchio: Se il vostro sito web segue un tema di design o un marchio specifico (colori, motivi o immagini), un'immagine di sfondo nella tabella può aiutare a mantenere la coerenza.
  • Presentazione creativa: Le immagini di sfondo sono utili per le tabelle che visualizzano contenuti creativi o non tecnici, come cronologie di eventi, cataloghi di prodotti o vetrine di portfolio. Possono elevare la tabella da puramente funzionale a parte integrante del design.

Ora passiamo alla parte principale.

Come aggiungere un'immagine di sfondo a una tabella in WordPress

Per l'esercitazione di oggi utilizzeremo l'Tableberg. Se non lo sapete, Tableberg è un plugin per tabelle solo per Gutenberg che consente di creare tabelle belle e reattive all'interno di Gutenberg.

Permette di aggiungere iimmagini, valutazioni a stelle, pulsanti, nastri, HTML personalizzato, testo, elenchi stilizzati, ecc. per creare una tabella funzionale e danzante all'interno dell'editor di blocchi di Gutenberg. Inoltre, dispone di funzioni avanzate come l'unione e la divisione delle celle, la definizione dell'altezza e della larghezza delle celle, l'intestazione appiccicosa, ecc. Anche in questo caso, è possibile utilizzare modelli di tabella per iniziare rapidamente.

Creare bellissimi tavoli
Con l'editor di blocchi

Passo 1: Creare prima un gruppo

Poiché il blocco WordPress Tableberg e Core table non consente di aggiungere un'immagine di sfondo, si utilizzerà il blocco Blocco di gruppo e Blocco di copertura.

Prima di creare una tabella, creare un gruppo.

Andate al vostro post e inserite prima il blocco di gruppo. Per inserire il blocco gruppo, fare clic sul pulsante "+"icona (Icona Aggiungi blocco) nell'editor (1) e digitare "Gruppo" nella casella di ricerca (2). Cliccare "Gruppo" per inserirlo nell'editor(3).

A questo punto, selezionare il primo layout.

Colpire il Pulsante Aggiungi blocco all'interno del blocco Gruppo (1). Tipo "Copertura" all'interno della casella di ricerca (2) e selezionare il Blocco di copertura (3).

Selezionare l'opzione per il caricamento dell'immagine.

Dopo aver inserito l'immagine, eliminare il blocco Titolo all'interno del blocco Copertina.

Passo 2: Creare la tabella Tablberg

Ora, creare la tabella all'interno del blocco Cover. Faccio clic sul pulsante "+"icona (Icona Aggiungi blocco) nell'editor (1) e digitare "Tavolo di lavoro" nella casella di ricerca (2). Ora faccio clic su "Tableberg" per inserirlo nell'editor(3).

Inserisco un modello di tabella da Tablberg (1) per iniziare rapidamente e modificare i miei dati di conseguenza.

Ora ne sceglierò uno dalla libreria dei modelli.

Ecco come appare di seguito.

Passo 3: personalizzare il blocco di copertura

A questo punto, è necessario personalizzare l'immagine di copertina in modo che chiunque possa comprendere facilmente i dati della tabella. Selezionare l'immagine Per coprire il blocco è sufficiente fare clic all'esterno della tabella. Passare alla sezione Impostazioni (1) > Blocco (2) > Stili (3).

Cambiare il Opacità della sovrapposizione in base alle vostre esigenze (1).

Modificare il Margine e l'Imbottitura in "Nessuno(1). Anche se si può vedere che il margine e il padding sono impostati su nessuno, è necessario farlo di nuovo. Altrimenti, l'immagine rimarrà fuori dalla tabella. (N.B. È facoltativo se siete d'accordo con il passo precedente.)

La demo dello sfondo della tabella è riportata di seguito.


Pensieri finali!

L'aggiunta di un'immagine di sfondo a una tabella in WordPress non è solo una questione estetica: si tratta di migliorare l'esperienza dell'utente mantenendo il sito web visivamente coeso.

Spero che questo post vi sia stato utile. Ora, aggiungete uno sfondo alla vostra tabella e adattatelo al design del vostro sito web.

Fatemi sapere cosa ne pensate nella sezione commenti qui sotto. Inoltre, non esitate a porre domande relative al tutorial. Sarò felice di aiutarvi. Condividete questo post con i vostri amici attraverso i social media se lo trovate utile.

Per saperne di più!



Il team Tableberg