Pour être complet et efficace, un tableau de prix doit permettre la comparaison des options, des caractéristiques et bien sur, des prix. Mais designer un tableau de prix à partir d'une feuille blanche peut être compliqué si vous n'avez pas de graphiste sous la main. Êtes-vous certain.e de ne pas oublier un détail important ? Êtes-vous au courant des dernières tendances webdesign en la matière ?
C’est ici que cet article sur les tableaux de prix peut vous être très utile si vous avez besoin d’inspiration. Dans ce tutoriel, vous allez apprendre comment créer un tableau de prix qui s'affichera parfaitement sur tous les écrans, que vous pourrez modifiez pour 'ladapter à votre site et que vous pouvez aussi copier intégralement pour économiser du temps et de l'argent. Cet exemple est entièrement responsive, uniquemetn codé en HTML et CSS, en accès libre et réalisé avec Material Design Bootstrap qui est, de mon point de vue, le meilleur des deux mondes. A vous de jouer!
Comment créer un tableau de prix responsive design ?
De quoi avez-vous besoin ?
- Un éditeur de texte: n'importe quel IDE convient ici pour écrire du code HTML et du CSS. Si vous n'en avez pas encore un d'installé sur votre ordinateur, je vous conseille Notepad++ qui est gratuit et parfaitement suffisant pour suivre ce tutoriel.
- Material Design Bootstrap: c'est avec ce framework que nous allons créer notre tableau de prix. Pourquoi celui-ci ? Parce qu'il est gratuit, parce qu'il est très complet et facile à prendre en mains, même par les novices. Vous pouvez télécharger la version gratuite ici.
Ce que nous allons créer
Voici un apreçu du rendu final de notre tableau de prix :
En gros, voici comment notre tableau de prix est construit :
- une balise H4 avec le nom du produit
- une première DIV où le prix est affiché
- une seconde DIV avec Ul et Li pour lister les caractéristiques
- et enfin, un bouton CTA tout en bas
Autant que possible, nous utiliserons les classes CSS de Material Design Bootstrap. Je vous suggère de suivre ce tutoriel avec la documentation de MDB ouverte dans votre navigateur.
Par où commencer ?
- Dézipper le dossier compressé MDB-Free_4.19.1 (la dernière version téléchargée depuis le site Material Design Bootstrap) dasn vos documents.
- Dans ce dossier, vous devez avoir cette structure de dossiers et de fichiers :
- Ouvrez les deux fichiers suivants avec votre éditeur de texte :
- index.html situé à la racine du dossier. C'est le fichier principal dans lequel nous allons écrire le code HTML de notre tableau de prix.
- style.css situé dans le dossier CSS. Dans ce fichier, nous ajouterons nos classes CSS supplémentaire pour notre tableau de prix.
le fichier index.html
Tout d'abord, nous allons ajouter une en-tête à notre section. Le titre principal et sa tagline seront centrés sur la page et nous ajouterons une décoration graphique sous le titre avec un peu de CSS.
Code:
<div class="row"> <div class="col-xl-8 mx-auto text-center"> <div class="section-title mt-5 pb-5"> <h2 class="h2 text-uppercase my-3 pb-3">Our plans</h2> <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in ex at nulla gravida aliquet id nec metus.</p> </div> </div> </div>
Maintenant et puisque nous avons 3 niveaux différents de prix, chaque colonne doit avoir une première DIV avec la classe CSS
col-xl-4. Ensuite, nous ajoutons une baliseH4pour afficher le nom du produit. Le prix est affiché grâce à la prmière DIV qui est stylisée avec quelques classes CSS. Puis vient la seconde DIV avec la liste des caractéristiques. Enfin, nous terminons avec le bouton CTA.Code:
<div class="col-xl-4 py-2"> <div class="text-center z-depth-1"> <h4 class="py-3 text-uppercase h4">standard</h4> <div class="py-2 price-tag red lighten-2 text-white"> <h2 class="h2 pt-2">$25 <span>month</span></h2> </div> <div class="price-item"> <ul class="list-unstyled my-3"> <li>10GB Monthly Bandwidth</li> <li>100 Google AdWords</li> <li>100 Domain Hosting</li> <li>SSL Shopping Cart</li> <li>24/7 Live Support</li> </ul> </div> <button class="btn btn-red mb-4">purchase now</button> </div> </div>
Voici la totalité du code du fichier index.html de notre tableau de prix.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Material Design Pricing Table</title> <!-- Fonts --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> </head> <section class="pricing-table" id="pricing"> <div class="container"> <div class="row"> <div class="col-xl-8 mx-auto text-center"> <div class="section-title mt-5 pb-5"> <h2 class="h2 text-uppercase my-3 pb-3">Our plans</h2> <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in ex at nulla gravida aliquet id nec metus.</p> </div> </div> </div> <div class="row"> <div class="col-xl-4 py-2"> <div class="text-center z-depth-1"> <h4 class="py-3 text-uppercase h4">standard</h4> <div class="py-2 price-tag red lighten-2 text-white"> <h2 class="h2 pt-2">$25 <span>month</span></h2> </div> <div class="price-item"> <ul class="list-unstyled my-3"> <li>10GB Monthly Bandwidth</li> <li>100 Google AdWords</li> <li>100 Domain Hosting</li> <li>SSL Shopping Cart</li> <li>24/7 Live Support</li> </ul> </div> <button class="btn btn-red mb-4">purchase now</button> </div> </div> <div class="col-xl-4 py-2"> <div class="text-center z-depth-1"> <h4 class="py-3 text-uppercase h4">professional</h4> <div class="py-2 price-tag red text-white"> <h2 class="h2 pt-2">$125 <span>month</span></h2> </div> <div class="price-item"> <ul class="list-unstyled my-3"> <li>50GB Monthly Bandwidth</li> <li>100 Google AdWords</li> <li>100 Domain Hosting</li> <li>SSL Shopping Cart</li> <li>24/7 Live Support</li> </ul> </div> <button class="btn btn-red mb-4">purchase now</button> </div> </div> <div class="col-xl-4 py-2"> <div class="text-center z-depth-1"> <h4 class="py-3 text-uppercase h4">business</h4> <div class="py-2 price-tag red darken-2 text-white"> <h2 class="h2 pt-2">$225 <span>month</span></h2> </div> <div class="price-item"> <ul class="list-unstyled my-3"> <li>100GB Monthly Bandwidth</li> <li>100 Google AdWords</li> <li>100 Domain Hosting</li> <li>SSL Shopping Cart</li> <li>24/7 Live Support</li> </ul> </div> <button class="btn btn-red mb-4">purchase now</button> </div> </div> </div> </div> </section> </html>
Le fichier style.css
Pour styliser notre colonne, nous avons ajouté plusieurs classes CSS provenant du framework mais nous en avons ajouté d'autres. Commençons par l'en-tête avec le titre et sa tagline.
- section-title
.section-title h2 { display: inline-block; position: relative; letter-spacing: 1px; } .section-title h2:before { position: absolute; content: ""; width: 150px; height: 1px; background-color: #777; bottom: 0; left: 50%; margin-left: -75px; } .section-title h2:after { position: absolute; content: ""; width: 80px; height: 3px; background-color: #f44336; bottom: -1px; left: 50%; margin-left: -40px; }
Voici le rendu de notre en-tête :
- .price-tag and .price-item
.price-tag h2 { font-size: 45px; } .price-tag h2 span { font-weight: 300; font-size: 16px; font-style: italic; } .price-item ul li { font-size: 14px; padding: 20px; border-bottom: 1px dotted #ddd; margin: 0 30px; } .price-item ul li:last-child { border-bottom: 0; }
Ensuite, nous devons styliser le prix (.price-tag) et la liste des caractéristiques (.price-item). Cela concerne principalement les fonts et la bordure affichée dans la liste.
Voici le rendu final :
Et voilà!
Congrats, our pricing table is done. You can easily change the colors with the MDB pallette. Don't hesitate to modify and customize your pricing table and to display it on your website.
If you have any question about this tutorial or about this code, feel free to post your comment below. If you like it, do not hesitate to share it to you friends. Thanks !
Comment créer un tableau de prix responsive design ?
