TablePress sur mesure Styling – Comment rendre vos tables élégantes et réactives

TablePress est le plus populaire et répandu plugin WordPress table (700 000+ installations actives).

Le plugin fait un excellent travail et le créateur Tobias Bäthge fournit un soutien incroyable pour un plug-in gratuit! Il est parfait pour les tables de données et un travail, il pourrait également être utilisé pour les tables de comparaison (un outil marketing puissant).

Mais le fait est que le style par défaut du plugin semble démodé et peu attrayant aux yeux de l’utilisateur moderne..

Voici un aperçu de notre table de test avec le style par défaut et les options: [talon]

Ce qui va probablement attirer votre attention est le mauvais alignement du texte et des éléments, les options de tri et de recherche inutiles, et quelques autres détails mineurs, que nous voulons nous débarrasser de.

Centrer l'alignement de tous les éléments

Vous pouvez voir comment le texte est aligné dans le coin supérieur gauche de la cellule.

Même si on le centre, il serait encore au sommet qui semble mauvais. Au lieu, nous allons le placer au centre de la cellule, peu importe la hauteur de la rangée.

Comme ça

Pour ce faire ajouter cette ligne de CSS à votre CSS personnalisé (vous pouvez utiliser ce plugin gratuit):

.tablepress thead e,
.tablepress tbody td {
	text-align: centre;
}

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

Retirez les options de TablePress inutiles

Lors de l'ajout d'une nouvelle table, vous verrez quelques cases avec des options. Certains d'entre eux sont à portée de main, mais notre but, nous voulons les désactiver.

Voici ce que nous avons laissé vérifié:

Alternant les couleurs des lignes et la ligne Hover Mise en évidence semble bien que si vos images de produits sont transparents! Si vous utilisez des images d'arrière-plan transparent vous pouvez laisser ces options activées.

Changer la couleur de l'en-tête et du pied de page

Par défaut, toutes les tables ont un en-tête bleu sans possibilité de changer. Pour ce faire, vous aurez besoin d'ajouter cette ligne de CSS à votre CSS personnalisé:

.tablepress thead e,
.tablepress tfoot e {
	Couleur de fond: #F2A53B;
}

Ajout d'éléments visuels

Visuals fonctionnent mieux que le texte brut et en matière de taux de conversion, les chiffres augmentent de manière significative.

TablePress fonctionne parfaitement avec shortcodes. Ajoutez votre favori bouton shortcode pour vos CTAs. Télécharger des icônes pour les pros et les inconvénients d'affichage, “Oui et non” etc.

Vous pouvez même ajouter des listes de prestations ou spécifications, et soyez créatif.

Faire TablePress Responsive

Par défaut, contes de TablePress vont se réduire à un certain degré, mais sur des écrans plus petits, la plupart des tables auront l'air encombrées.

Vous pouvez voir comment les colonnes se chevauchent dans l'exemple ci-dessous.

Télécharger le module complémentaire pour répondre TablePress- Cliquez ici

Lisez la description sur la page ci-dessus, parce que le plug-in a 3 modes sensibles, aussi vous devez changer le shortcode de votre table de:

[Table id = 1 /]

à quelque chose comme

[Table id = 1 = effondrement sensible responsive_breakpoint = dispositif /]

Pour “sensible” vous pouvez choisir parmi flip, faire défiler, ou s'effondrer, et pour le “responsive_breakpoint” de quel type d'appareil la table deviendra sensible – téléphone, tablette, bureau, ou tout.

Télécharger et activer le plug-in et nous allons vérifier à nouveau notre table.

Je choisis la configuration suivante:

[Table id = 1 = réactif défilement responsive_breakpoint = comprimé /]

Et voici l'aspect final de notre table de TablePress rafraîchi et style

Bozh
Je m'appelle Bozh, et je crée des sites Web avec WordPress depuis 15+ ans. Depuis 2016, J'ai travaillé avec les meilleures sociétés affiliées, gérer ma propre entreprise de commerce électronique, et géré plusieurs blogs de niche. J'ai fondé WPCtrl.com avec l'idée de partager mes connaissances, Expériences personnelles, et vous recommander de meilleures alternatives.
WPCtrl.com