Style personnalisé TablePress – Comment rendre vos tables élégantes et réactives

TablePress est le plugin de table WordPress le plus populaire et le plus répandu (plus de 700 000 installations actives). Le plugin fait un excellent travail et le créateur Tobias Bäthge fournit un support incroyable pour un plugin gratuit! Il est parfait pour les tableaux de données et avec un peu de travail, il pourrait également être utilisé pour les tableaux de comparaison (puissant outil de marketing). Mais le fait est que le style par défaut du plugin semble démodé et peu attrayant pour l’œil de l’utilisateur moderne. Voici un aperçu de notre tableau de test avec le style et les options par défaut: [toc] Ce qui attirera probablement votre attention, c’est le mauvais alignement du texte et des éléments, les options de tri et de recherche inutiles et d’autres détails mineurs, dont nous voudrons nous débarrasser.

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 nous le centreons, il serait toujours au sommet, ce qui a l’air mauvais. Au lieu de cela, nous le définirons pour qu’il soit centré au milieu de la cellule, quelle que soit la hauteur de la rangée. Comme ceci Pour ce faire, ajoutez cette ligne de CSS à votre CSS personnalisé (vous pouvez utiliser ce plugin gratuit):

.tablepress thead th,
.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;
}

Supprimer les options TablePress inutiles

Lors de l’ajout d’une nouvelle table, vous verrez des cases à cocher avec des options. Certains d’entre eux sont pratiques, mais pour notre objectif, nous voudrons les désactiver. Voici ce que nous avons laissé coché : Alternance de couleurs de ligne et de mise en surbrillance de survol de ligne ne semble bonne que si les images de vos produits sont transparentes ! Si vous utilisez des images d’arrière-plan transparentes, vous pouvez laisser ces options activées.

Modification de 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 option à modifier. Pour ce faire, vous devrez ajouter cette ligne de CSS à votre CSS personnalisé :

.tablepress thead th,
.tablepress tfoot th {
	couleur d’arrière-plan: #F2A53B;
}

Ajout d’éléments visuels

Les visuels fonctionnent mieux que le texte brut et en ce qui concerne les taux de conversion, les chiffres augmentent considérablement. TablePress fonctionne parfaitement avec les shortcodes. Ajoutez votre shortcode de bouton préféré pour vos CTA. Téléchargez quelques icônes pour afficher les avantages et les inconvénients, « oui et non », etc. Vous pouvez même ajouter des listes d’avantages ou de spécifications, soyez créatif.

Rendre TablePress réactif

Par défaut, les contes TablePress rétréciront dans une certaine mesure, mais sur les é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échargez l’add-on responsive pour TablePress- Cliquez ici Lisez la description sur la page ci-dessus, car le plugin dispose de 3 modes responsive, vous devez également changer le shortcode de votre table à partir de:

[[id de table=1 /]]

à quelque chose comme

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

Pour « responsive », vous pouvez choisir parmi: flip, scroll ou collapse et pour le « responsive_breakpoint » à partir de quel type d’appareil la table deviendra réactive – téléphone, tablette, ordinateur de bureau ou tout. Téléchargez et activez le plugin et vérifions à nouveau notre tableau. Je choisis la configuration suivante :

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

Et voici le look final de notre table TablePress rafraîchie et stylisée