Avez-vous une liste de prix sur votre site ? Ces prix peuvent s’appliquer à des services comme l’entretien des pelouses ou à des logiciels. Du monde de la technologie aux studios de yoga, la plupart des compagnies pourraient utiliser des tableaux de prix pour une meilleure représentation de ce qu’elles offrent. La principale façon d’y parvenir est de regarder les meilleurs plugins de tableau de prix WordPress, puis d’en implémenter un sur votre site.
Mais cela soulève la question suivante : pourquoi est-il si important d’avoir un tableau de prix ?
La réponse à cette question peut sembler évidente (vous voulez améliorer les conversions, n’est-ce pas ?), mais il est agréable de comprendre les raisons qui se cachent derrière le tableau des prix. Pourquoi une extension de tableau de prix est-elle plus efficace pour faire une vente qu’une liste à puces, un paragraphe ou même une image ?
- Un tableau des prix vous permet de comparer vos services ou vos forfaits de façon claire et nette.
- Les caractéristiques les plus importantes sont indiquées dans un tableau des prix, ce qui permet de nettoyer le désordre et de le laisser pour une autre page.
- Le tableau des prix comporte des boutons d’appel à l’action clairs pour montrer aux gens comment procéder à l’achat.
- La plupart des tableaux de prix utilisent des noms de forfaits qui facilitent grandement la compréhension des clients.
- Vous pouvez mettre l’accent sur certains mots, forfaits ou caractéristiques en utilisant des polices de caractères ou des graphiques plus grands.
- Il est beaucoup plus intéressant de lire un tableau des prix basé sur des graphiques qu’un tableau ne contenant que du texte.
- Vous pouvez améliorer les conversions de façon urgente (Ex : « le temps est presque écoulé pour une bonne affaire ») ou en proposant des essais gratuits.
- Les tableaux de prix occupent un minimum d’espace sur la page, vous pouvez donc ajouter des informations supplémentaires, comme une FAQ ou une boîte de discussion pour vos vendeurs.
Ce qu’il faut rechercher dans un plugin de tableau de prix WordPress
Maintenant que nous connaissons les avantages d’une extension de tableau de prix WordPress, jetons un coup d’œil à certaines des fonctionnalités que vous devriez vouloir :
- Options gratuites et payantes – Mes extensions de tableau de prix préférés vous donnent un tableau standard pour rendre vos prix attrayants. Après cela, la version payante avec des fonctions supplémentaires ne devrait pas être super chère.
- Intégrations avec les meilleurs constructeurs de page – Certains des constructeurs de page viennent même avec leurs propres tableaux de prix. Certains des constructeurs de page les plus populaires tels que Divi Builder, Elementor, et WPBakery.
- Habillages ou thèmes pour lancer des tableaux de prix en quelques secondes. Nous aimons aussi voir des outils de personnalisation pour les couleurs, les polices et les icônes.
- Un réglage pour l’affichage de badges sur certains forfaits, comme pour les forfaits « Meilleure offre » ou « Populaire ».
- Options de devises multiples pour une utilisation dans le monde entier.
- Prise en charge de gros boutons personnalisables sur chaque tarif de forfait.
- Un générateur en glisser-déposer serait également excellent.
- Nous aimons aussi voir l’accès aux CSS et HTML, car les développeurs plus avancés voudront des possibilités d’ajustement complexes.
Nous pourrions passer en revue des douzaines de caractéristiques qui ont du sens sur les tableaux de prix, mais ceci est un bon début avec l’essentiel.
Les meilleurs plugins WordPress de tableaux de prix comparées (et comment coder le votre)
- Responsive Pricing Table by WP Darko
- Go Pricing
- Pricing Tables WordPress Plugin – Easy Pricing Tables
- Pricing Table by Supsystic
- CSS3 Responsive WordPress Compare Pricing Tables
- ARPrice – Responsive WordPress Pricing Table Plugin
- Pricing Table – Price list, Price Table, Easy Pricing Table
- WRC Pricing Tables
- Comment construire un tableau de prix dans WordPress à partir de zéro
Il n’y a pas de pénurie d’options disponibles lorsqu’il s’agit de fixer le prix des plugins de table et des sites WordPress. Certains des meilleurs peuvent être utilisés gratuitement, tandis que d’autres sont premium sans aucune option gratuite. Cela dit, toutes les extensions ci-dessous méritent une place sur cette liste, et certaines d’entre elles ont des caractéristiques uniques qui sont excellentes pour certaines industries ou des entreprises spécifiques.
1. Responsive Pricing Table by WP Darko
Responsive Pricing Table est l’une des extensions les plus conviviale et riche en fonctionnalités pour la création de tableaux de prix. Elle fournit une excellente version gratuite, sans aucune limitation quant au nombre de forfaits que vous incluez ou au nombre de tableaux que vous créez pour vos sites. Vous pouvez toutefois passer à la version payante pour accéder à de meilleures fonctionnalités telles que des habillages et un « égaliseur » pour que toutes les hauteurs de colonnes soient exactement les mêmes.
Les tableaux de prix que vous construisez sont complétés avec des champs simples et des boutons d’administration. Par exemple, certains des champs intégrés que vous pouvez utiliser incluent les prix, les descriptions, les titres des forfaits et les boîtes d’icônes. Certains des boutons personnalisés permettent des liens vers des sites comme Stripe et PayPal, tandis que les classes CSS personnalisées sont sûres d’aider les développeurs avancés.
Coût
Une formule gratuite est disponible.
Vous pouvez obtenir l’extension payante pour 19$ pour un site ou 49$ pour un nombre illimité de sites.
Les développeurs Darko vendent d’autres extensions, vous pouvez donc les obtenir toutes pour le prix de 79$. Cela pourrait être utile pour certaines entreprises.
Fonctionnalités qui font de Go Pricing un bon choix
- La formule gratuite fournit les outils nécessaires pour un large éventail de petites entreprises, puisque vous recevez un nombre illimité de tableaux et de forfaits.
- La tarification payante est assez faible.
- Les habillages ont un aspect moderne et hautement personnalisable, avec beaucoup de boutons et de polices à ajuster.
- Les icônes et autres visuels sont accessibles.
- Vous pouvez inclure autant de fonctions que vous le souhaitez dans vos formules de tarification.
- Les boutons d’appel à l’action peuvent être reliés à des systèmes de paiement tiers comme PayPal.
- Une large gamme de signes de devises est disponible pour atteindre les différents pays.
- Vous pouvez afficher un badge pour les forfaits recommandés.
- Les forfaits récurrents (par mois ou par an) peuvent être affichés avec des réglages spéciaux.
2. Go Pricing
L’application Go Pricing n’a pas de version gratuite, mais elle compte des milliers de ventes et d’excellentes critiques sur la place de marché CodeCanyon. Sans compter qu’il ne vous en coûtera que 27$ pour obtenir l’une des meilleures extensions de tableau de prix sur le marché.
Qu’est-ce qui rend l’extension Go Pricing si spéciale ? Pour commencer, elle a des formules de prix incroyablement élégantes avec des couleurs modernes et beaucoup d’espaces blancs pour ne pas avoir l’air encombré. Vous pouvez également choisir parmi une vaste collection de thèmes, dont certains sont conçus uniquement pour certaines industries. Nous adorons aussi le fait que l’extension s’intègre avec plusieurs constructeurs de pages et possède des codes courts pour s’assurer que personne n’a besoin d’être un génie du code pour faire des tableaux de prix.
Coût
Des frais uniques de 27$, avec la possibilité de prolonger le support jusqu’à un an pour 8,25$.
Fonctionnalités qui font de Pricing un bon choix
- Chaque partie de votre tableau de prix est décomposée dans sa propre section dans un éditeur visuel. Ceci inclut l’en-tête, le corps et la zone des boutons.
- Plus de 250 tableaux de démonstration vous sont donnés après l’achat de l’extension. Cela devrait permettre à la plupart des entreprises de récupérer un modèle et de lancer une page de prix en quelques minutes.
- Le glisser-déposer des éléments est possible avec les intégrations de générateur de pages. Go Pricing fonctionne bien avec Beaver Builder, Elementor et WPBakery.
- Le processus de création de tableaux de prix est facile pour tous les niveaux d’expérience. L’extension dispose d’une excellente interface de gestion, avec des options pour les codes courts, l’importation et les réglages.
- Incluez des animations pour rendre vos tableaux de prix plus attrayants.
- Utilisez plus de 2000 icônes de polices pour rendre vos tableaux encore plus visuels.
- Un module CSS personnalisé est fourni pour ceux qui veulent aller au-delà des fonctionnalités de base.
- Ajoutez des fonctionnalités uniques telles que des éléments multimédia, des boutons PayPal et Google Maps.
3. Extension de tableau de prix WordPress – Easy Pricing Tables
Si vous êtes intéressé par des tableaux de comparaison et de prix clairs sans les artifices esthétiques, l’extension WordPress Easy Pricing Tables semble être une solide option pour vous. Elle est disponible en version gratuite et payante, à partir de 29$ par an pour un site et jusqu’à 99$ par an pour un nombre illimité de sites. Certaines des fonctionnalités payantes commencent à devenir vraiment cool, y compris un module WooCommerce et l’intégration de Google Analytics.
Parmi les autres intégrations pour les versions payantes, citons Easy Digital Downloads, Stripe et un module de bascule de tarif. De plus, vous pouvez vous attendre à commencer le processus de conception avec 10 modèles prédéfinis. Comme mentionné, c’est l’une des plus simple extensions de tableau de prix, donc nous l’aimons pour ceux qui ne veulent pas d’éléments comme les animations et les graphiques.
Coût
L’extension de base est gratuite.
L’extension payante est à 29$ par an pour un site, 59$ par an pour cinq sites et 99$ par an pour un nombre illimité de sites.
Fonctionnalités qui font de Easy Pricing Tables un bon choix
- La conception des tableaux de prix est simple et épurée, ce qui donne un aspect moderne sans effets inutiles.
- Vous pouvez ajuster les couleurs et autres éléments de presque tous les articles du tableau des prix. Cela comprend les colonnes, les boutons et les polices.
- Tous les tableaux de prix sont construits avec une simple liste de champs visuels dans l’administration. La configuration est formatée de la même façon que le tableau des prix sur l’interface publique.
- Vous pouvez spécifier qu’un ou plusieurs forfaits sont mis en avant par rapport aux autres.
- Vous pouvez glisser-déposer les colonnes pour les réorganiser.
- Un module CSS personnalisé est fourni pour des personnalisations plus avancées de vos tableaux de prix.
- Même la version gratuite supporte un nombre illimité de lignes de tableaux de prix.
- Certaines des versions payantes ont de grandes intégrations pour des choses comme WooCommerce, Google Analytics, et Stripe.
4. Pricing Table par Supsystic
L’équipe de développement de Supsystic est reconnue pour la réalisation de toutes sortes d’extensions pour les galeries de photos, les popups, les tableaux de données, et plus encore. Mais nous jetons un coup d’oeil à l’extension Pricing Table, qui est offerte gratuitement avec un certain nombre de fonctionnalités pour que vous puissiez jouer avec. En fait, la version gratuite de l’extension possède des fonctionnalités pour les modèles prédéfinis, les animations survolées et la personnalisation des boutons. Vous pouvez même importer et exporter facilement les informations de vos tableaux.
Nous aimons aussi l’apparence de l’extension payante, vu qu’elle commence à partir de 39$ pour un site et que vous recevez un grand nombre de modèles payants et de restrictions de rôle. Dans l’ensemble, je dirais que c’est l’une des meilleures extensions de tableau de prix pour l’utilisation de base, extension gratuite et passer la version payante. Cependant, les modèles payants sont assez cool et ils ne vous coûtent pas tant que ça.
Coût
Une formule gratuite est offert.
Passez au payant pour 39$ sur un seul site. Ou 69$ pour une prise en charge sur cinq sites. Ou 149$ sur des sites illimités.
Fonctionnalités qui font de Pricing Table by Supsystic un bon choix
- L’extension Pricing Table de Supsystic est la plus proche de la solution de tableau de prix la plus complète dans la version gratuite. La seule mise à jour que vous obtenez dans l’extension payante est de meilleurs modèles.
- Tous les tableaux de prix sont beaux, avec des éléments responsives et des couleurs vives.
- Les modèles de la version gratuite sont géniaux, et les modèles payants sont étonnants.
- Choisissez d’avoir un interrupteur qui montre aux gens des offres spéciales – comme de payer un an à l’avance ou d’acheter aujourd’hui.
- Présentez certains de vos forfaits à l’aide d’icônes visuelles.
- Utilisez des outils comme les codes courts, les diaporamas de couleur et la construction visuelle pour vous assurer que vous ne touchez pas une ligne de code pendant le processus de création.
- L’extension a des animations au survol pour rendre vos formules plus attrayantes pour les visiteurs.
- Les images et les vidéos sont également prises en charge afin que vous puissiez mettre en valeur certaines fonctions ou parties de votre entreprise.
- Un générateur en glisser-déposer est situé dans l’administration de votre tableau de bord WordPress.
5. CSS3 Responsive WordPress Compare Pricing Tables
Au prix de 20$, l’extension CSS3 Responsive Pricing Table est d’une valeur incroyable. Elle n’est vendue que sur la place de marché CodeCanyon, mais vous devez garder à l’esprit qu’aucune version gratuite n’est disponible. Cela dit, la plupart des gens n’hésiteront pas à payer 20$ pour un extension de tarification très bien notée et évaluée. Dans l’ensemble, l’extension a quelques beaux modèles pour vous permettre de commencer. Vous pouvez changer les couleurs et les polices de caractères, tout en mettant en évidence certaines des meilleures formules que vous proposez.
La plupart des tableaux de prix sur cette liste sont responsives, mais celui-ci semble particulièrement bien après avoir été testé sur mon téléphone et ma tablette. Il semble également que le développeur soit réactif, prêt à créer de nouvelles fonctionnalités et à les publier sous forme de mises à jour. Par exemple, au moment de cet article, je vois actuellement trois versions de fonctionnalités majeures : les colonnes coulissantes, le mode responsive ainsi que l’importation et l’exportation de données.
Coût
20$ pour toutes les fonctions.
Vous pouvez payer 5,63$ pour prolonger votre service à la clientèle d’un an. Aucune extension gratuite n’est fournie.
Fonctionnalités qui font de CSS3 Pricing Tables Grids un bon choix
- Les prix sont de loin parmi les meilleurs que nous ayons vus pour les fonctionnalités que vous obtenez dans l’extension de tarification.
- La vaste collection d’outils de personnalisation permet de créer des milliers de tableaux de prix uniques. Cela comprend 20 versions de couleurs, 60 rubans, 42 icônes et deux styles de tableau.
- Créez un nombre illimité de lignes et de colonnes.
- Tapez dans les modules CSS et HTML pour une personnalisation supplémentaire.
- Vous obtenez des options pour ajuster la largeur et la hauteur de toutes les colonnes et lignes.
- Compatibilité multi-site.
- Des codes courts qui vous aident à mettre en œuvre vos tableaux de prix n’importe où sur vos sites.
- Outils d’importation et d’exportation de données pour que vous puissiez déplacer vos données vers un autre tableau ou les importer depuis une feuille de calcul.
- Prise en charge des icônes pour inclure des éléments visuels tels que les cases à cocher et les X.
- Animations et support média pour ajouter plus de visuels et faire ressortir vos projets.
6. ARPrice – Responsive WordPress Pricing Table Plugin
L’extension ARPrice se vend aussi sur le site de CodeCanyon, mais au prix de 23$, et nous commençons à remarquer que beaucoup d’entreprises et de personnes ont intérêt à payer ces prix super bas pour obtenir toutes les fonctionnalités dont ils ont besoin, au lieu de travailler avec une extension gratuite qui manque de fonctionnalités. Quoi qu’il en soit, cette extension de tableau de prix présente certains des meilleurs visuels de cette liste, car elle supporte plusieurs types de médias, tels que les images d’arrière-plan et les icônes.
Le concepteur de l’administration est un éditeur visuel qui révèle exactement à quoi ressemblera votre tableau de prix en ligne. Vous pouvez ensuite choisir si vos plans tarifaires sont basés sur les offres annuelles, mensuelles ou sur les nombreuses autres offres de temps disponibles. Vous commencez le processus en sélectionnant un modèle, puis vous pouvez y entrer et importer des données, modifier les effets et choisir vos polices. Dans l’ensemble, l’extension ARPrice offre une belle interface utilisateur avec des résultats encore meilleurs.
Coût
Des frais uniques de 23$ et des frais de 6,75$ pour prolonger votre support jusqu’à un an.
Fonctionnalités qui font de ARPrice un bon choix
- Elle est plutôt abordable pour une extension payante.
- Plus de 300 modèles de tableaux de prix sont fournis pour que vous puissiez les télécharger avec l’extension.
- Les outils de personnalisation sont excellents, avec des options de couleurs illimitées, des modèles entièrement responsives, un bouton de bascule de tarification et plus de 3 000 icônes.
- Les effets d’animation ne manqueront pas de vous aider en rendant vos tableaux de prix plus attrayants.
- Il y a un module CSS et un système de guidage CSS pour les personnalisations avancées.
- Vous recevez des intégrations uniques avec d’autres programmes tiers comme Google Maps.
- L’éditeur de modèles en temps réel fournit une belle interface visuelle pour ajuster des éléments tels que les colonnes, les en-têtes et les arrière-plans.
- Il y a une fonction supplémentaire de « vitrine d’équipe », qui prend essentiellement le même format de colonne et vous permet de partager des informations sur vos employés sur le site.
- L’extension WordPress Pricing Table est compatible avec les constructeurs de pages les plus populaires comme Elementor, Gutenberg, et WPBakery.
7. Pricing Table – Liste des prix, tableau de prix, simple
L’extension Pricing Table – Extension de liste de prix vient des gens de A WP Life. C’est une solution un peu plus récente, mais très respectée. La version gratuite offre de belles options de personnalisation, y compris quelques modèles fournis avec l’extension. Des animations sont fournies et vous pouvez insérer des éléments tels que des icônes et des listes de fonctionnalités. Placez les boutons Acheter maintenant sur les listes et incorporez des balises pour des choses comme « Nouveau » ou « Populaire ».
La version payante de cette extension vous offre toutes les mêmes fonctionnalités, ainsi que 19 modèles supplémentaires. Elle est seulement 9,99$, donc si vous trouvez un modèle qui correspond à votre marque, allez-y.
Coût
Gratuit et 9,99$ pour la version payante.
Fonctionnalités qui font de Pricing Table un bon choix
- Vous recevez toutes les bonnes fonctionnalités de la version gratuite. La seule raison nécessaire pour la mise à jour est si vous voulez un modèle particulier qui n’est pas dans l’extension gratuite.
- Une poignée de modèles de tableaux de prix attrayants sont inclus avec la version gratuite. Vous pouvez également effectuer une mise à niveau pour une vingtaine d’autres.
- Tous les tableaux fournis avec l’extension sont considérés comme entièrement responsive.
- Les icônes vous permettent de créer des tableaux plus attrayants visuellement.
- Les codes courts vous aident à placer vos tableaux n’importe où sur votre site.
- Des tableaux de prix peuvent être ajoutés et supprimés de votre site d’un simple clic.
- Les options de personnalisation incluent des couleurs illimitées, des couleurs de boutons, des couleurs d’en-têtes, et plus encore.
- Le style CSS personnalisé peut être réalisé dans le tableau de bord.
- La zone de conception n’est pas un constructeur entièrement visuel, mais elle est configurée avec plusieurs colonnes pour simuler ce à quoi ressembleront les tableaux.
8. WRC Pricing Tables
L’extension WRC Pricing Tables est fournie gratuitement, mais vous avez le choix de la mettre à niveau pour 10$. La version payante est un peu plus avancée, avec plus de 500 modèles supplémentaires, une intégration PayPal et des bascules de prix pour passer d’un abonnement mensuel à un abonnement annuel. Une poignée d’autres caractéristiques viennent avec la formule payante, il est donc certainement intéressant de l’envisager car le prix est si bas.
L’extension gratuite est idéale pour construire des tableaux de prix simples, et vous pouvez créer un nombre illimité de lignes et de colonnes. Toute la conception se fait à l’aide d’un éditeur en glisser-déposer. L’une des choses que nous aimons le plus dans l’extension WRC Pricing Tables est que vous pouvez utiliser un sélecteur de couleurs, qui prend essentiellement votre couleur et génère pour vous une conception aléatoire de tableau.
Coût
Gratuit. 10$ pour le payant
Fonctionnalités qui font de WRC Pricing Tables un bon choix
- L’extension WRC Pricing Tables possède d’excellentes fonctionnalités dans la version gratuite, avec une solution payante complète pour seulement 10$ (frais uniques).
- L’extension fournit des codes courts pour placer vos tableaux de prix n’importe où sur votre site WordPress. Par exemple, un code court pourrait techniquement aller sur n’importe quelle page, un article, ou même potentiellement un widget.
- Les icônes Font Awesome ajoutent un peu de pop visuel à votre conception.
- L’extension supporte également les polices Google.
- L’intégration du bouton PayPal vous permet de collecter de l’argent auprès de vos clients.
- De nombreux modèles sont fournis avec l’extension.
- Vous pouvez ajouter un nombre illimité de lignes et de colonnes tout en dupliquant les tableaux de prix et en les sauvegardant pour plus tard.
- Les développeurs avancés ont la possibilité d’améliorer leurs tables avec le CSS personnalisé.
Quel est la meilleure extension WordPress de tableau de prix pour vous ?
Les extensions listées ci-dessus sont tous prêtes à être testées. Cependant, je peux également vous faciliter la tâche en vous faisant des recommandations supplémentaires.
- Si vous voulez une formule gratuite avec la plupart des fonctionnalités dont vous avez besoin, optez pour Responsive Pricing Table par WP Darko ou Pricing Table par Supsystic.
- Si vous voulez une collection énorme de modèles de tableau – Envisagez l’extension Go Pricing ou ARPrice.
- Pour un tableau simple et propre sans le superflu – Pensez à l’extension Pricing Tables WordPress Plugin – Easy Pricing Tables.
- Pour obtenir le meilleur rapport qualité/prix avec le plus grand nombre de fonctionnalités d’une extension payante, pensez à CSS3 Responsive WordPress Compare Pricing Tables.
Toutes les autres extensions de tableau de prix sur cette liste ont aussi leurs avantages. Cependant, ce sont celles que j’ai tendance à apprécier le plus.
Mais que faire si vous n’êtes pas intéressé par l’utilisation d’un plugin et que vous souhaitez coder votre propre tableau de prix ?
Voici comment faire !
Comment construire un tableau de prix dans WordPress à partir de zéro
La construction d’un tableau de prix à partir de zéro se fait avec du code HTML qui nous donnera la structure de notre tableau et ensuite le style avec CSS.
Pour commencer, connectez-vous à votre site WordPress, naviguez jusqu’au tableau de bord et cliquez sur Pages → Ajouter. Vous pouvez également ajouter le code à une page déjà existante sur laquelle vous souhaitez que vos tableaux de prix apparaissent.
Une fois l’éditeur WordPress chargé, passez en mode texte et collez le code suivant :
<div class="pricing-table">
<div class="one-third first">
<ul>
<li class="header">Basic</li>
<li class="grey-blue">$ 9.99 / an</li>
<li>Article #1</li>
<li>Article #2</li>
<li>Article #3</li>
<li>Article #4</li>
<li>Article #5</li>
</ul>
<a class="pricing-button" href="#">S'inscrire !</a>
</div>
<div class="middle one-third">
<ul>
<li class="header-blue">Pro</li>
<li class="light-blue">$ 99.99 / an</li>
<li>Article #1</li>
<li>Article #2</li>
<li>Article #3</li>
<li>Article #4</li>
<li>Article #5</li>
</ul>
<a class="pricing-button" href="#">S'inscrire !</a>
</div>
<div class="one-third">
<ul>
<li class="header">Business</li>
<li class="grey-blue">$ 199.99 / an</li>
<li>Article #1</li>
<li>Article #2</li>
<li>Article #3</li>
<li>Article #4</li>
<li>Article #5</li>
</ul>
<a class="pricing-button" href="#">S'inscrire !</a>
</div>
</div>
Le code est assez simple : tout d’abord, nous créons un div pour tenir notre code de table de prix et le rendre facile de les styliser avec du CSS. Ensuite, puisque nous créons trois tables, chacune d’entre elles est enveloppée dans une colonne. La dernière partie est le tableau lui-même, avec des classes ajoutées pour un en-tête et un point de prix qui les distingueront du reste du tableau.
Avant de cliquer sur Publier ou Mettre à jour, assurez-vous de remplacer le texte entre les balises [pre]<li> et </li>[/pre] par le vôtre et d’ajouter le lien à votre formulaire de paiement après la partie href du lien.
Une fois toutes les informations remplacées, cliquez sur Publier si vous avez créé une nouvelle page ou sur Mettre à jour si vous avez ajouté le tableau à une page existante.
Si vous regardez votre page maintenant, vous remarquerez que le tableau des prix est très clair. Ajoutons-y un peu de style.
Si vous utilisez un thème enfant, vous devez ajouter le code suivant à la feuille de style de votre thème enfant ou dans l’éditeur CSS personnalisé.
La première partie du code s’assurera que notre tableau des prix s’affiche en colonnes et si vous voulez ou devez afficher plus de trois tableaux, ces classes vous permettront de les remplacer facilement :
/* ## Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
float: left;
margin-left: 2.564102564102564%;
}
.one-half,
.three-sixths,
.two-fourths {
width: 48.717948717948715%;
}
.one-third,
.two-sixths {
width: 31.623931623931625%;
}
.four-sixths,
.two-thirds {
width: 65.81196581196582%;
}
.one-fourth {
width: 23.076923076923077%;
}
.three-fourths {
width: 74.35897435897436%;
}
.one-sixth {
width: 14.52991452991453%;
}
.five-sixths {
width: 82.90598290598291%;
}
.first {
clear: both;
margin-left: 0;
}
La deuxième partie du code donnera le style réel aux tableaux.
/* ## Pricing Table
--------------------------------------------- */
.pricing-table {
line-height: 1;
}
li.header {
background-color: #2f79a9;
color: #fff !important;
font-size: 25px;
border-bottom: 1px solid #2f79a9 !important;
margin-bottom: 0 !important;
}
li.grey-blue {
background-color: #569dcc;
color: #fff !important;
font-size: 20px;
}
li.header-blue {
background-color: #00b9eb;
color: #fff !important;
border-bottom: 1px solid #00b9eb !important;
font-size: 25px;
margin-bottom: 0 !important;
}
li.light-blue {
background-color: #72dffd;
color: #fff !important;
font-size: 20px;
}
.middle {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.pricing-table .one-third {
background-color: #fff;
margin: 20px 5px;
padding: 40px;
width: 32.33%;
}
.pricing-table .one-third:nth-child(3n+1),
.pricing-table .one-third:nth-child(3n+2),
.pricing-table .one-third:nth-child(3n) {
border: 1px solid #ddd;
}
.pricing-table .one-third ul {
margin: 0;
}
.pricing-table ul li {
border-bottom: 1px solid #ddd;
color: #333;
margin-bottom: 10px;
padding: 10px;
text-align: center;
list-style-type: none;
}
.pricing-table a.pricing-button {
background-color: #00b9eb;
border: 3px solid #00b9eb;
color: #fff;
display: block;
text-align: center;
padding: 16px 24px;
}
.pricing-table a.pricing-button:hover {
background-color: #000;
border: 3px solid #000;
color: #fff;
}
/* Pricing Table - Media Queries for Mobile Devices
--------------------------------------------- */
@media only screen and (max-width: 1140px) {
.pricing-table .one-third {
width: 32%;
}
}
@media only screen and (max-width: 800px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 568px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.pricing-table .one-third {
width: 100%;
}
}
@media only screen and (max-width: 420px) {
.pricing-table .one-third {
width: 100%;
margin: 20px 0;
}
}
Nous avons ajouté un style simple et basique pour les tables de prix et nous avons conçu l’en-tête et le prix différemment pour qu’ils se démarquent. Nous avons également ajouté une ombre autour de la table du milieu pour mettre en évidence cette offre spécifique. Enfin, nous avons ajouté quelques Media Queries pour nous assurer que les tables sont responsives.
Une fois que vous avez collé les deux extraits CSS, allez de l’avant et cliquez sur Mettre à jour. Maintenant, regardez votre page et assurez-vous que tout s’affiche comme vous le voulez.
Si vous avez des questions sur les meilleurs tableaux de prix, ou si vous avez des suggestions pour d’autres personnes, faites-le nous savoir dans les commentaires !
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire