Seleziona una pagina

TABELLE WORDPRESS:

come crearle responsive

  • Vuoi sapere come inserire tabelle nel tuo sito WordPress, Tabelle WordPress responsiveo in quello della tua azienda?
  • Hai bisogno di utilizzare delle tabelle per ordinare i contenuti del tuo sito, o i prodotti del tuo E-commerce?

Allora ti sarà utile sapere come creare delle tabelle WordPress e come crearle responsive. Se ti occupi di digital marketing, avrai senz’altro bisogno di conoscere bene questo CMS (Content Management System), in quanto è il più usato al mondo.

In questa pagina, parleremo di come creare tabelle responsive in modo facile e veloce, utilizzando sia l’editor per le tabelle, sia i migliori plugin per le tabelle WordPress. Scopriremo come personalizzare le tabelle interattive, vedremo come importare una tabella Excel in WordPress e come adattarle alle proprie esigenze.

L’utilità delle tabelle WordPress

Cosa sono le tabelle WordPress responsive? Sono degli elementi grafici che consentono di presentare dei dati sul tuo sito in modo chiaro e sintetico. Inoltre, le tabelle possono servire ad organizzare i contenuticome ad esempio risultati statistici, o i prodotti di un E-commerce, facendo sì che le informazioni siano schematizzate in una griglia, e che quindi siano di immediata comprensione.
Responsive invece sta ad indicare che le tabelle sono leggibili da ogni schermo, perché si adattano in automatico e in proporzione alla risoluzione del device che l’utente usa per navigare il sito.

Ti sarà capitato, o ti capiterà senz’altro, di aver bisogno di mostrare in modo chiaro e semplice dei dati, o i risultati di una ricerca, affinché siano leggibili anche a chi non è un addetto ai lavori e le tabelle WordPress potranno essere di aiuto.

Pensa ad esempio di dover presentare un prodotto complesso: come potresti spiegare ai tuoi potenziali clienti che è utile e conveniente per loro acquistarlo, comunicando in modo istantaneo? 

Le tabelle ti saranno utili, perché sono degli schemi che rendono la comunicazione più semplice e immediata.Il vantaggio di utilizzare tabelle WordPress responsive sta nel far trovare velocemente agli utenti quello che stanno cercando su un sito. Di conseguenza, aumentano le probabilità che gli utenti informati, secondo le loro esigenze, si trasformino più facilmente in clienti che convertano.Tabelle WordPress responsive table

Creare delle tabelle sul tuo sito può essere molto utile nel caso in cui si gestisca un tuo E-commerce con WordPress, per presentare i prodotti in modo ordinato; o ancora nel caso in cui si rivendano dei prodotti sul proprio sito per conto di terzi.
Le tabelle WordPress permettono di mettere a confronto diversi prodotti, sia per le loro caratteristiche specifiche, sia per il prezzo.

Riassumendo, le tabelle sono:

  • degli elementi grafici che arricchiscono i contenuti testuali
  • degli strumenti molto validi quando si ha la necessità di presentare un concetto in modo schematico sul proprio sito
  • dei contenitori che semplificano la comprensione delle informazioni

Tabelle WordPress: come crearle responsive

Il responsive design

Con “responsive” si intende il design di un sito web che è adattabile e “leggibile” su tutti i device. Questa leggibilità deriva dal fatto che tutti i contenuti – font, immagini, moduli, tabelle – sono creati secondo una griglia che si adatta proporzionalmente alle dimensioni dello schermo da cui si sta consultando il sito. Oltre ad essere responsivo, un sito dovrebbe essere pensato e progettato “mobile first”, dunque tenendo in considerazione per prima la web usability sullo schermo più piccolo, per poi arrivare a quello più grande, cioè il desktop.

Tabelle WordPress responsive design

Inoltre, il vantaggio del Responsive Web Design sta nell’avere nel proprio dominio un unico codice HTML, che tramite il CSS riconosce la risoluzione dello schermo da cui viene consultato il sito, per determinare in che modo il contenuto debba essere visualizzato. In questo modo si garantisce agli utenti la miglior User Experience possibile.

Perché è importante avere un sito con contenuti responsive? Perché il numero degli utenti che naviga da mobile, nel Settembre del 2016, ha superato il numero di quelli che naviga da desktop e questa tendenza è in continua crescita. E dato che, L’obiettivo di Google è offrire agli utenti i risultati più pertinenti e un’eccellente esperienza”, la scelta del responsive design è premiata come fattore di ranking e quindi in termini di posizionamento sulle SERP.
(Qui puoi consultare la guida di Google per ottimizzare il tuo sito mobile)

Perché creare tabelle WordPress responsive

Una volta compresi i concetti di responsive e di web usability, ti sembrerà più chiaro il motivo per il quale è fondamentale creare tabelle WordPress responsive. Infatti il responsive design non riguarda solo le pagine di un sito, ma anche i contenuti al loro interno.

Pensa alla cattiva esperienza di navigazione che avrebbero i tuoi utenti se provassero a leggere una tabella sul tuo sito con tutte le griglie spostate: i dati contenuti non sarebbero più così ordinati e di facile comprensione. E questo è proprio il contrario di ciò che si vuole ottenere se si creano schemi grafici con lo scopo di rendere la comunicazione con l’utente più semplice e immediata, rendendo più agevole la sua user experience.

Come creare tabelle WordPress responsive con l’editor

Tabelle WordPress- responsive editor di defaultOra passiamo alla pratica e vediamo insieme quali sono i passaggi da seguire per creare tabelle WordPress responsive.

Per iniziare ti consiglio il plugin TinyMCE Advanced, che consente di estendere gli strumenti di formattazione a tua disposizione nell’editor di default, tra cui un comodo pulsante “Tabella”.

A prescindere dal tema che hai scelto per il tuo sito, i passaggi da seguire, con questo editor per tabelle WordPress, sono gli stessi.

  • Vai su Pagina => Aggiungi Nuova / o Articolo => Aggiungi Nuovo (oppure apri in “Modifica” una Pagina, o un Articolo già creati in precedenza).
  • Posiziona in cursore nell’editor di testo, nel punto in cui vuoi inserire la tua tabella.
  • Nella barra degli strumenti di formattazione, clicca su “Tabella”: ti si aprirà un menu laterale nel quale, con il cursore del tuo mouse, potrai scegliere in modo veloce e intuitivo quante celle vuoi che compongano la tua tabella, in altezza e in larghezza. Puoi scegliere da un minimo di 1x1, a un massimo di 10x10.
  • Una volta scelto il numero di celle che andranno a formare la tua tabella WordPress, cliccaci sopra e la tabella sarà inserita dove avevi posizionato il cursore nell’editor testuale
  • La tua tabella sarà molto piccola, clicca nell’angolo e trascina l’estremità per allargarla finché sarà delle dimensioni che preferisci.

Una volta creata la tua tabella WordPress, dalla voce “Tabella”, scorrendo il menu a tendina, con TinyMCE Advanced potrai facilmente personalizzare degli elementi:

Tabelle WordPress- responsive editor- proprietà tabella

In Proprietà tabella => generale
potrai scegliere:

  • Larghezza e Altezza della tabella (unità di misura espressa in pixel)
  • Per quanto riguarda le singole celle potrai intervenire sulla Spaziatura cella, sul Padding cella e sul Bordo (unità di misura espressa in pixel)
  • Didascalia: potrai aggiungere altre informazioni alla tua tabella, come se fosse un’immagine.
  • Allineamento: puoi decidere se allineare la tua tabella al centro, a destra, o a sinistra rispetto al testo in cui l’hai inserita.

In Proprietà tabella => avanzate
 puoi personalizzare il colore del bordo della tabella WordPress, nonché il colore di sfondo

Tabelle WordPress- responsive editor- proprietà celleIn Celle => proprietà della cella della tabella => generale
puoi modificare:

  • Larghezza e Altezza delle singole celle (in pixel)
  • Tipo cella (cella o cella dell’header)
  • Ambito
  • H AlignNessuno
  • V Align

In Celle => proprietà della cella della tabella => avanzate
puoi customizzare sia il colore del bordo, sia il colore di sfondo

Infine, sempre nel menu a tendina che puoi aprire dalla tabella, cliccando sulle voci Riga/Colonna, potrai personalizzare gruppi di celle, oppure decidere se inserire una riga, o una colonna prima o dopo di altre, potrai tagliare e incollare elementi ovunque tu voglia all’interno della tabella.

I migliori plugin per creare tabelle WordPress responsive

Esistono moltissimi plugin per creare tabelle WordPress responsive, che inoltre permettono di personalizzarne la veste grafica, in modo da rendere le tabelle belle graficamente oltre che funzionali.

Vediamone 3 tra i più utilizzati:

  • TablePress
  • Automatic responsive table
  • Ultimate Tables

TablePress

Per scegliere il plugin che fa al caso tuo, per prima cosa vai su Plugin => Aggiungi Nuovo e digita “table”. Ti apparirà una serie di plugin e, tra tutti, spiccherà sicuramente TablePress, con le sue 600.000+ installazioni attive. Verifica che la tua versione di WordPress sia compatibile con il plugin, in caso contrario ti basterà eseguire un aggiornamento di WordPress, che dura solo qualche minuto. Una volta installato il plugin ti basterà attivarlo nei plugin installati.

TablePress è un plugin gratuito che consente di creare e gestire tabelle sul tuo sito e inoltre consente di importare una tabella Excel in WordPress. Per utilizzarlo non sono necessarie delle conoscenze preliminari di linguaggio HTML, in quanto l’interfaccia è di intuitivo utilizzo. Una volta creata la tua tabella, basterà inserire lo shortcode generato dal plugin nella visione testuale del tuo editor di testo. Un altro vantaggio di TablePress è che consente di filtrare i dati contenuti nelle celle, o cambiare l’ordinamento dei dati, cliccando sull’intestazione delle colonne. Infine questo plugin, in modo semplice, consente di importare ed esportare dati nei formati: CSV, Excel, HTML.

Le tabelle WordPress create con questo plugin possono contenere qualsiasi tipo di dato e anche delle formule come quelle che si possono utilizzare nei fogli di calcolo di Excel. => qui un esempio 

Ti consiglio di vedere un tutorial sul blog Tiziano Fogliata, docente del corso WordPress and Web site creation di Digital Coach, in cui vengono illustrati i passaggi per creare e personalizzare le tue tabelle create con TablePress:

  1. come creare una tabella WordPress con TablePress
  2. i passaggi per importare un file CSV per creare una tabella
  3. come personalizzare l’aspetto di una tabella con i CSS

Automatic Responsive Table

Automatic Responsive Table consente di creare tabelle WordPress responsive in modo semplice e veloce. Si tratta di un plugin che permette di costruire le proprie tabelle all’interno di griglie che indicano i break-point delle varie risoluzioni degli schermi.
Per installarlo vai su Plugin => Aggiungi Nuovo e digita “Automatic Responsive Table” nella barra di ricerca, installalo e poi attivalo dalla schermata dei plugin installati. Poi, per utilizzarlo, ti basteranno 5 semplici passaggi:

  1. Seleziona ‘Activate for all Tables’ oppure seleziona manualmente le tabelle su cui vuoi che agisca il plugin, tramite il CSS.Tabelle WordPress- Ultimate tables
  2. Setta i breakpoints per tutte le tabelle
  3. Scegli l’opzione di non usare lo style editor
  4. (Se necessario usa lo style editor)
  5. Salva

I vantaggi dell’utilizzo di questo plugin sono:

  • La possibilità di selezionare le tabelle su cui vuoi che agisca questo plugin
  • Settare i breakpoint per la responsività 
  • Personalizzare lo stile
  • Compatibilità con tutti i diversi browser
  • Pannello di backend e pannello di preview
  • Supporta IE5+

Ultimate tables

Ultimate tables è senz’altro uno dei plugin più scaricati ed utilizzati per creare tabelle interattive in WordPress. Con questo plugin, davvero molto semplice da utilizzare, potrai creare e gestire velocemente le tabelle dei tuoi dati, o prodotti. Puoi inserire le tabelle nelle tue pagine, negli articoli oppure nell’ultimate tables widget.

I vantaggi di questo plugin:Tabelle WordPress- Ultimate tables

  • Si possono creare più tabelle contemporaneamente
  • Puoi inserire al contempo diverse tabelle nelle tue Pagine o Articoli
  • Nelle celle puoi scrivere sia del testo che del codice HTML
  • Puoi scegliere tra 3 diversi design di base da personalizzare secondo le tue esigenze
  • Si possono creare tabelle WordPress responsive, che permetteranno una corretta visualizzazione dei tuoi dati da ogni device
  • Avrai una gestione semplice delle tabelle create: con qualche click potrai cambiare il numero delle colonne, riordinarle, o cancellarle.
  • Potrai gestire l’impaginazione della tabella, configurando anche altezza e larghezza delle celle.
  • Puoi inserire le tue tabelle all’interno di pagine, o articoli, incollando lo shortcode nell’editor testuale

Installare e usare questo plugin è facile e veloce. Come abbiamo visto per i precedenti plugin, ti basterà andare su Plugin => Aggiungi Nuovo e digitare “Ultimate tables“. Una volta scaricato il plugin, ricordati di attivarlo. A questo punto si entra nell’amministrazione del plugin e si può cominciare a creare una nuova tabella. Per ogni tabella creata si genererà uno shortcode da inserire nelle proprie pagine o articoli; con il pulsante “edit button” puoi gestire i valori e il formato delle tue tabelle WordPress. Questo plugin ha anche un’area widget in cui potrai inserire le tabelle.

Ti segnialiamo anche altri plugin che puoi provare per realizzare le tue tabelle WordPress responsive, il consiglio è di testarne 2 o 3 per poi scegliere quello che più si adatta alle tue esigenze:

Corsi di digital marketing utili per imparare a creare tabelle WordPress responsive

  • Hai bisogno di usare dei dati per avvalorare i tuoi contenuti?
  • Stai gestendo un E-commerce con WordPress e hai bisogno che i tuoi prodotti siano organizzati in modo ordinato?
  • Hai bisogno di presentare i tuoi prodotti, o servizi, in modo che i tuoi potenziali clienti raccolgano in un batter d’occhio tutte le informazioni necessarie a maturare una decisione di acquisto?

Se hai risposto sì ad almeno una di queste domande, dovresti prendere in considerazione l’acquisizione di maggiori conoscenze su WordPress, frequentando un periodo di formazione in questa materia, come il corso WordPress and Web site creation di Digital Coach. 

Inoltre, se vuoi sapere di più riguardo il responsive design e la web usability, potresti valutare di frequentare il corso User Experience di Digital Coachper. Così potrai capire in che modo offrire ai tuoi utenti la miglior UX possibile, facendo sì che navighino con piacere tra le pagine del tuo sito, aumentando la probabilità che tornino e si trasformino in clienti fedeli.

Spero di esservi stata utile con questo contenuto. Se vuoi avere maggiori dettagli sui corsi clicca sul pulsante qui sotto,
siamo pronti a rispondere ad ogni tua domanda. 

PIU’ INFORMAZIONI

Per saperne di più su date di partenza dei corsi, modalità di frequenza, e altro ancora, contattaci! Siamo a tua disposizione.

CONTATTACI!

Save

  • Rating Lettori
  • Votato 5 stelle
    5 / 5 (1 )
  • Vota!


[index]
[index]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]
[523.251,659.255,783.991]