Categorie

TablePress Custom Styling – Come rendere le tue tabelle eleganti e reattive

TablePress è il plugin per tabelle WordPress più popolare e diffuso (oltre 700 000 installazioni attive). Il plugin fa un ottimo lavoro e il creatore Tobias Bäthge sta fornendo un supporto straordinario per un plugin gratuito! È perfetto per le tabelle di dati e con un po 'di lavoro, potrebbe anche essere utilizzato per le tabelle di confronto (potente strumento di marketing). Ma il fatto è che lo stile predefinito del plugin sembra vecchio stile e non molto attraente per l'occhio dell'utente moderno. Ecco un'anteprima della nostra tabella di test con lo stile e le opzioni predefinite: [toc] Ciò che probabilmente attirerà la tua attenzione è lo scarso allineamento del testo e degli elementi, le opzioni di ordinamento e ricerca non necessarie e alcuni altri dettagli minori, di cui vorremo sbarazzarci.

Centrare l'allineamento di tutti gli elementi

Puoi vedere come il testo è allineato nell'angolo in alto a sinistra della cella. Anche se lo centrassimo, sarebbe ancora in cima, il che sembra brutto. Invece, lo impostiamo in modo che sia centrato al centro della cella, indipendentemente dall'altezza della riga. Come questo Per farlo aggiungi questa linea di CSS al tuo CSS personalizzato (puoi usare questo plugin gratuito):

.tablepress thead th,
.tablepress tbody td {
	text-align: centro;
}

td.column-1, td.column-2, td.column-3, td.column-4, td.column-5 {
vertical-align: middle !important;
}

Rimuovere le opzioni TablePress non necessarie

Quando aggiungi una nuova tabella vedrai alcune caselle di controllo con opzioni. Alcuni di questi sono utili, ma per il nostro scopo, vorremo disabilitarli. Ecco cosa abbiamo lasciato spuntato: Alternare i colori delle righe e l'evidenziazione delle righe al passaggio del mouse sembra buona solo se le immagini del prodotto sono trasparenti! Se si utilizzano immagini di sfondo trasparenti, è possibile lasciare abilitate tali opzioni.

Modifica del colore dell'intestazione e del piè di pagina

Per impostazione predefinita, tutte le tabelle hanno un'intestazione blu senza alcuna opzione di modifica. Per fare ciò dovrai aggiungere questa riga di CSS al tuo CSS personalizzato:

.tablepress thead th,
.tablepress tfoot th {
	colore di sfondo: #F2A53B;
}

Aggiunta di elementi visivi

Le immagini funzionano meglio del testo normale e quando si tratta di tassi di conversione, i numeri aumentano in modo significativo. TablePress funziona perfettamente con gli shortcode. Aggiungi il tuo shortcode pulsante preferito per le tue CTA. Scarica alcune icone per visualizzare pro e contro, "sì e no" ecc. Puoi anche aggiungere elenchi di vantaggi o specifiche, essere creativo.

Rendere TablePress reattivo

Per impostazione predefinita, i racconti TablePress si ridurranno in una certa misura, ma su schermi più piccoli la maggior parte delle tabelle apparirà ingombra. Puoi vedere come le colonne si sovrappongono nell'esempio seguente. Scarica il componente aggiuntivo reattivo per TablePress- Clicca qui Leggi la descrizione nella pagina sopra, perché il plugin ha 3 modalità reattive, inoltre devi cambiare lo shortcode della tua tabella da:

[[id tabella=1 /]]

a qualcosa di simile

[[id tabella=1 responsive=collapse responsive_breakpoint=device /]]

Per "responsive" puoi scegliere tra: capovolgere, scorrere o comprimere e per il "responsive_breakpoint" da quale tipo di dispositivo il tavolo diventerà reattivo – telefono, tablet, desktop o tutti. Carica e attiva il plugin e controlliamo di nuovo la nostra tabella. Scelgo la seguente configurazione:

[[id tabella=1 responsive=scroll responsive_breakpoint=tablet/]]

Ed ecco l'aspetto finale della nostra tabella TablePress aggiornata e in stile

Disclosure: Some of the links on the page may contain a ref code (affiliate links), that tells the other side that we have sent you. If you liked what we suggest and you make a purchase, we may receive a commission.

WPCtrl.com