{"id":56607,"date":"2022-06-27T07:57:50","date_gmt":"2022-06-27T06:57:50","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=56607&preview=true&preview_id=56607"},"modified":"2022-07-14T07:28:07","modified_gmt":"2022-07-14T06:28:07","slug":"tabella-elementor","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/tabella-elementor\/","title":{"rendered":"Come Creare una Tabella in WordPress con Elementor"},"content":{"rendered":"

Le tabelle sono un componente fondamentale nella maggior parte dei siti web. Potete utilizzarle per condividere ogni tipo di informazione, dai prezzi agli elenchi di caratteristiche e link. WordPress vi permette di creare tabelle di base per il vostro sito web, ma potreste essere alla ricerca di maggiori opzioni di personalizzazione.<\/p>\n

Con Elementor<\/a> potete accedere a diversi widget per le tabelle. Inoltre, esistono numerosi plugin per tabelle di Elementor che aggiungono nuovi widget al popolare page builder<\/a>.<\/p>\n

In questo articolo parleremo di come funzionano le tabelle di WordPress e di come si comportano rispetto ai widget di Elementor. Poi vi mostreremo come creare tabelle Elementor manualmente e vi presenteremo alcuni plugin che aggiungono nuovi widget di tabella all’editor. Andiamo subito al sodo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Quando Usare le Tabelle di WordPress<\/h2>\n

Quando iniziate a prestarci attenzione, noterete che le tabelle sono ovunque sul web. Questo perch\u00e9 sono tra gli elementi pi\u00f9 versatili che potete inserire in un sito.<\/p>\n

Prendiamo per esempio le tabelle dei prezzi. \u00c8 difficile trovare un sito web di servizi o abbonamenti che non usi le tabelle per aiutarvi a confrontare le opzioni:<\/p>\n

\"Schermata
Tabelle dei prezzi su Kinsta<\/figcaption><\/figure>\n

Le tabelle vi permettono di presentare grandi quantit\u00e0 di informazioni in modo da renderle facilmente digeribili per chi legge. Inoltre, le tabelle semplificano agli utenti il confronto tra pi\u00f9 serie di dati:<\/p>\n

\"Una
Confronto tra pi\u00f9 dataset<\/figcaption><\/figure>\n

Oltre ad aiutarvi a condividere le informazioni, le tabelle possono anche contribuire a spezzare la monotonia dei lunghi paragrafi di un blog o di una pagina. In genere si consiglia di evitare lunghi muri di testo perch\u00e9 possono essere difficili da navigare.<\/p>\n

L’Editor a blocchi<\/a> vi offre la possibilit\u00e0 di aggiungere tabelle al vostro sito web con facilit\u00e0. Il blocco Tabella <\/strong>vi permette di impostare il numero di righe e colonne di cui avete bisogno:<\/p>\n

\"Tre
Tabelle costruite con il blocco WordPress<\/figcaption><\/figure>\n

Anche se aggiungere tabelle in WordPress \u00e8 facile, le opzioni di personalizzazione sono piuttosto limitate. Potete cambiare i colori di sfondo, personalizzare gli stili dei pulsanti e modificare le dimensioni dei caratteri, ma questo \u00e8 tutto. Se volete creare tabelle pi\u00f9 eleganti e complesse, dovete usare un page builder come Elementor (o anche Divi)<\/a>.<\/p>\n\n

Cosa Pu\u00f2 Fare una Tabella Elementor<\/h2>\n

Se volete andare oltre le tabelle di base di WordPress, Elementor vi d\u00e0 accesso a un widget Price Table<\/strong> altamente personalizzabile. Questo vi permette di modificare i titoli delle tabelle, impostare tag di intestazione, aggiungere elenchi di caratteristiche, modificare le chiamate all’azione (CTA) e molto altro ancora:<\/p>\n

\"Schermata
Widget Elementor Price Table<\/figcaption><\/figure>\n

Ricordate che con Elementor potete creare qualsiasi tipo di layout per qualsiasi pagina o articolo. Questo significa che potete creare dei design a pi\u00f9 colonne in modo da avere diversi widget Price Table<\/strong> uno accanto all’altro:<\/p>\n

\"Esempio
Widget tabella prezzi in Elementor affiancati<\/figcaption><\/figure>\n

Elementor \u00e8 dotato anche di un widget Table of Contents<\/strong>. Questo rende la navigazione dei contenuti lunghi<\/a> molto pi\u00f9 semplice per i vostri lettori.<\/p>\n

Come Creare una Tabella Elementor (Manualmente)<\/h2>\n

Creare una tabella prezzi con Elementor \u00e8 semplice. Per iniziare, aprite l’editor di Elementor. Da qui potete scegliere di iniziare con una pagina vuota o di importare un modello dalla libreria di Elementor:<\/p>\n

\"Schermata
Scegliete una pagina o un modello dalla libreria di Elementor<\/figcaption><\/figure>\n

Quando aggiungete l’elemento, dovete selezionare il numero di colonne che volete inserire nella tabella. Fate clic sul segno pi\u00f9 di Elementor nella parte inferiore dell’editor e selezionate la struttura di colonne che volete usare per la sezione dei prezzi:<\/p>\n

\"Schermata
Seleziona il numero di colonne che desiderate<\/figcaption><\/figure>\n

Tenete presente che se usate pi\u00f9 colonne, dovrete aggiungere un widget Price Table<\/strong> separato in ognuna di esse. Anche se ogni tabella sar\u00e0 un elemento unico, gli utenti le vedranno una accanto all’altra (o una sotto l’altra su mobile) come parte di un’unica sezione:<\/p>\n

\"Schermata
Aggiungi widget di tabelle multiple quando necessario<\/figcaption><\/figure>\n

Vi consigliamo di aggiungere un modulo Price Table<\/strong> e di stilizzarlo per primo. In seguito, potrete duplicare o copiare questo elemento nelle altre colonne e aggiungere un testo unico a ciascuna di esse.<\/p>\n

Per personalizzare la tabella, selezionate l’elemento e andate alla scheda Style<\/strong> nelle impostazioni del widget. Elementor vi offre numerose opzioni di stile. Queste includono la selezione dei colori, le impostazioni tipografiche e le configurazioni uniche per ogni sezione della tabella:<\/p>\n

\"Schermata
Personalizzate la tabella utilizzando le opzioni di stile di Elementor<\/figcaption><\/figure>\n

Una volta che lo stile della tabella dei prezzi vi soddisfa, fate clic con il tasto destro del mouse sull’elemento e selezionate l’opzione Duplicate<\/strong>. Una copia della tabella apparir\u00e0 sotto l’elemento originale e potrete trascinarla in una delle colonne vuote:<\/p>\n

\"Schermata
Duplicate la tabella per risparmiare tempo<\/figcaption><\/figure>\n

Dovrete ripetere questo procedimento per tutte le colonne che avete. Tenete presente che ogni tabella pu\u00f2 avere uno stile unico se preferite non riutilizzare le impostazioni. In questo caso, assicuratevi che gli stili siano abbastanza simili in modo che i visitatori capiscano che stanno guardando un confronto.<\/p>\n

Durante la personalizzazione della tabella, ricordate che Elementor vi permette di aggiungere CSS personalizzati a qualsiasi modulo. Per farlo, andate nelle impostazioni Advanced<\/strong> del widget e selezionate la scheda CSS personalizzato<\/strong>:<\/p>\n

\"Schermata
Aggiungi CSS personalizzato<\/figcaption><\/figure>\n

Aggiungere CSS personalizzati tramite Elementor \u00e8 molto pi\u00f9 semplice che modificare manualmente il codice di WordPress<\/a>. Allo stesso modo, la modifica del CSS in WordPress<\/a> richiede l’accesso ai file del tema e l’ottimizzazione del codice<\/a> per ottenere prestazioni ottimali. Con Elementor, dovete solo aggiungere il codice CSS nel campo corrispondente per ogni modulo.<\/p>\n

Se aggiungere i CSS manualmente vi intimidisce, non preoccupatevi. Per imparare i CSS<\/a> non \u00e8 necessario lavorare nello sviluppo web<\/a>. Tuttavia, conoscerne le basi \u00e8 un’abilit\u00e0 preziosa che vi aiuter\u00e0 a personalizzare i vostri siti web WordPress (e forse anche a trovare una carriera nello sviluppo web<\/a>).<\/p>\n

Una volta che tutte le tabelle sono state impostate, \u00e8 il momento di modificare il loro testo e aggiungere tutte le caratteristiche necessarie per ogni voce. Potete farlo selezionando una tabella e spostandovi nella scheda Content<\/strong> delle impostazioni del widget:<\/p>\n

\"Schermata
Modifica il testo della tabella e altri contenuti della tabella<\/figcaption><\/figure>\n

Modificare il contenuto delle tabelle dei prezzi \u00e8 facile. Potete cliccare su qualsiasi elemento all’interno del widget per iniziare a modificarlo. Quando il risultato vi soddisfer\u00e0, le vostre tabelle dei prezzi saranno pronte.<\/p>\n

I Migliori Plugin per Tabelle di Elementor (12 Opzioni)<\/h2>\n

Anche se Elementor contiene molti strumenti per aiutarvi a creare tabelle, potete sempre aggiungere altri widget alla lista. In questa sezione vedremo 12 plugin di Elementor che potete usare per aggiungere nuovi tipi di tabelle ai vostri articoli e alle vostre pagine. Anche se molti di questi addon nascono per Elementor, potete installarli come normali plugin<\/a>.<\/p>\n

Come sempre, raccomandiamo solo i migliori plugin per WordPress<\/a> che offrono ottime prestazioni e che vengono aggiornati regolarmente. L’utilizzo di plugin ben ottimizzati vi aiuter\u00e0 a scalare il vostro sito web<\/a> senza incorrere in problemi di prestazioni.<\/p>\n

1. ElementsKit Add-Ons for Elementor<\/h3>\n
\"Homepage
ElementsKit<\/figcaption><\/figure>\n

ElementsKit<\/a> aggiunge oltre 85 widget a Elementor. Sono disponibili opzioni per tabelle di base, tabelle di prezzi, supporto per l’incorporazione di elementi TablePress e altro ancora.<\/p>\n

La versione professionale di ElementsKit include anche un widget per le tabelle avanzate. Questo vi permette di aggiungere funzioni di ricerca e di filtro alle tabelle. Inoltre, potete includere la paginazione in modo che gli utenti possano navigare tra le voci senza avere enormi tabelle sul vostro sito web.<\/p>\n

Caratteristiche Principali:<\/strong><\/p>\n