Comment créer des tableaux de prix horizontaux avec Divi

Les tableaux de prix horizontaux sont un excellent moyen de promouvoir des produits dotés de nombreuses fonctionnalités. Et, avec la nouvelle disposition à cinq colonnes de Divi, c'est étonnamment facile à faire. Cependant, comme pour toute mise en page comportant cinq colonnes ou plus, le défi consiste à rendre la mise en page réactive afin qu'elle s'affiche également bien sur mobile. Dans ce didacticiel, je vais vous montrer comment créer des tableaux de prix horizontaux qui ont fière allure sur tous les appareils. Et je vais même vous montrer à quel point il est facile de dupliquer vos tableaux de prix horizontaux et d'utiliser de nouvelles fonctionnalités de conception telles que « rechercher et remplacer » pour modifier rapidement le schéma de couleurs de chacun de vos tableaux en quelques clics.

Commençons.

Aperçu

Commencer

Pour ce tutoriel, vous n'aurez besoin que de Divi. Et nous utiliserons le Visual Builder. Étant donné que nous allons créer les tableaux à partir de zéro, vous devrez créer une nouvelle page, déployer le générateur visuel, puis sélectionner l'option « Créer une mise en page à partir de zéro ».

Après cela, vous êtes prêt à commencer. Faisons le!

Configuration de la ligne à cinq colonnes pour vos tableaux de prix horizontaux

Pour commencer, donnons une disposition en cinq colonnes à la section qui nous attend déjà dans le constructeur visuel.

Avant de commencer à ajouter des modules, mettons à jour les paramètres de la section pour avoir une largeur personnalisée sans aucun rembourrage supérieur ou inférieur.

Largeur : 1200px
Alignement de la section : Centre
Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas

Allez ensuite dans les paramètres de la ligne pour donner rapidement une couleur de fond à votre ligne ainsi qu'aux trois colonnes du milieu comme suit :

Couleur d'arrière-plan : #00cbc9
Couleur d'arrière-plan de la colonne 2 : #00cbc9
Couleur de fond de la colonne 3 : #eeeeee
Couleur de fond de la colonne 4 : #eeeeee

Ensuite, mettez à jour le dimensionnement comme suit :

Faire cette ligne pleine largeur : OUI
Largeur de gouttière : 1
Égaliser les hauteurs de colonne : OUI

Nous devrons revenir un peu aux paramètres de ligne pour mettre à jour l'espacement, mais pour l'instant, commençons à ajouter les textes de présentation à chacune de nos colonnes pour le contenu.

Remplir les colonnes avec des modules de contenu

Le titre du produit

Dans la première colonne, ajoutez un module de texte avec l'en-tête suivant dans la zone de contenu (sous l'onglet texte) :

<h2>Starter</h2>

Cela servira d'emplacement pour le titre de votre plan ou produit que vous présentez. Dans cet exemple, il s'agirait d'un plan « Starter » quelconque.

Mettez ensuite à jour les paramètres de conception suivants :

Titre 2 Style de police : TT
Titre 2 Couleur du texte : #ffffff
Titre 2 Taille du texte : 38px
Rembourrage personnalisé (bureau) : 90 % en haut, 90 % en bas, 10 % à gauche
Rembourrage personnalisé (tablette) : 30 % en haut, 30 % en bas

Ajouter des éléments de présentation pour les en-têtes de catégorie d'objets

Dans la deuxième colonne, ajoutez un module de présentation. Supprimez ensuite le texte de remplissage dans la zone de contenu et laissez le texte du titre seul. Choisissez ensuite d'utiliser une icône au lieu d'une image et mettez à jour l'icône avec celle de votre choix.

Passez à l'onglet Conception et mettez à jour le reste des paramètres comme suit :

Couleur de l'icône : #00cbc9
Placement des images/icônes : à gauche
Taille du texte du titre : 16px
Rembourrage personnalisé : 2vw bas
Largeur de la bordure de la rangée inférieure : 4px
Couleur de la bordure inférieure : #cccccc

Étant donné que cette conception de présentation sera utilisée comme titre de catégorie d'entités dans les colonnes 2, 3 et 4, vous pouvez copier le module de présentation et le coller dans les deuxième et troisième colonnes.

Je me rends compte que l'espacement n'a pas vraiment l'air génial pour le moment. Et vous pourriez être tenté d'ajouter un espacement au niveau du module, mais pour cette conception, je trouve qu'il est plus facile de faire des ajustements d'espacement au niveau de la colonne (sous les paramètres de ligne). Nous y reviendrons plus tard.

Ajouter des modules de texte pour une liste de descriptions de fonctionnalités

Ensuite, ajoutez un module de texte sous le texte de présentation dans la deuxième colonne. Ajoutez ensuite le code html du tableau suivant dans la zone de contenu :

• description de la fonctionnalité va ici.
• description de la fonctionnalité va ici.
• description de la fonctionnalité va ici.
• description de la fonctionnalité va ici.

Type de style de liste non ordonnée : Carré
Retrait d'élément de liste non ordonné : 4 px
Rembourrage personnalisé : 20 pixels en haut, 20 pixels en bas, 5 % à gauche, 5 % à droite

Maintenant, comme nous l'avons fait pour les textes de présentation, copiez le module de texte et collez-le sous chacun des modules de présentation dans les colonnes 3 et 4.

Ajout du prix et du bouton à la dernière colonne

Dans la dernière colonne (colonne cinq), je vais utiliser un module de tableau de tarification pour obtenir la conception du texte de tarification avec le signe dollar. C'est tout ce dont nous avons vraiment besoin du module des tableaux de prix, je vais donc supprimer le reste du contenu et des éléments de conception, en laissant le texte de prix et le signe dollar. Je pourrais utiliser le bouton qui est inclus avec le module des tableaux de prix, mais c'était un peu plus difficile de faire de la magie réactive sur tablette (vous verrez ce que je veux dire plus tard). J'utiliserai donc également un module de boutons.

Allez-y et ajoutez le module Tableaux de prix à la cinquième colonne. Supprimez l'une des deux tables incluses par défaut en cliquant sur l'icône de la corbeille à droite de l'une d'entre elles.

Débarrassez-vous ensuite de la couleur de fond en ajoutant un code couleur complètement transparent.

Couleur d'arrière-plan : rgba(255,255,255,0)

Ensuite, mettez à jour les éléments suivants :

Couleur d'arrière-plan de l'en-tête du tableau : rgba(255,255,255,0)
Devise et fréquence Couleur du texte : #ffffff
Devise et fréquence Taille du texte : 30 px
Couleur du texte du prix : #ffffff
Largeur de la bordure : 0px
Marge personnalisée (tablette) : -100 % juste
Marge personnalisée (smartphone) : 0 % à droite
Rembourrage personnalisé : 0 pixels en haut, 10 pixels en bas, 0 pixels à gauche, 0 pixels à droite

Accédez maintenant aux paramètres de table individuels en cliquant sur l'icône d'engrenage à gauche du menu d'affichage de la table individuelle.

Supprimez maintenant le contenu par défaut pour le titre, le sous-titre et le contenu. Cela ne laissera que la devise et le texte du prix.

Maintenant, je sais ce que vous pensez à ce stade. Que faire à propos de cette ligne de bordure sous le texte du prix ? Eh bien, il y a un petit extrait de css personnalisé pour cela. Accédez à l'onglet Avancé et ajoutez le CSS suivant dans la zone de saisie Haut de la tarification :

Haut de la page :

border: none;

Voilà comment vous avez réussi à vider le tableau des prix uniquement pour le texte de prix et le symbole de devise !

Pour le bouton, ajoutez un module de bouton sous le module des tableaux de prix et mettez à jour les éléments suivants :

Alignement des boutons : Centre
Couleur du texte : clair
Marge personnalisée (tablette) : -100 % juste
Marge personnalisée (smartphone) : 0 % à droite

La marge personnalisée correspondra à la marge que nous avons ajoutée au module des tableaux de prix afin d'obtenir un module pleine largeur sur tablette. Étant donné que la disposition à cinq colonnes sur la tablette placera la cinquième colonne sur le côté gauche d'une disposition à deux colonnes, tirer le module de -100 % vers la droite forcera le module à prendre toute la largeur de la ligne.

Ajout de la conception de la flèche et de l'espacement des colonnes réactif

Ajout de la flèche en superposant des dégradés

Pour créer l'effet de conception de flèche dans la première colonne, nous superposerons deux arrière-plans dégradés. Le premier fond dégradé sera ajouté au niveau de la colonne. Nous ajouterons le suivant plus tard au niveau du module.

Pour ajouter l'arrière-plan dégradé, accédez aux paramètres de ligne et ajoutez les éléments suivants :

Colonne 1 Arrière-plan dégradé Couleur de gauche : rgba(255,255,255,0)
Colonne 1 Dégradé Couleur de fond à droite : #eeeeee (cela doit correspondre à la couleur de fond de la colonne 2)
Direction du gradient : -245 deg
Position de départ : 75 %
Position finale : 0%

Enregistrez les paramètres et passez aux paramètres du module de texte dans la première colonne. C'est là que nous allons ajouter la deuxième couche de dégradé d'arrière-plan pour compléter la flèche. Mettez à jour les éléments suivants :

Colonne 1 Arrière-plan dégradé Couleur de gauche : #eeeeee
Colonne 1 Arrière-plan dégradé Couleur droite : rgba(255,255,255,0)
Direction du gradient : 245 deg
Position de départ : 25 %
Position finale : 0%

Notez que les valeurs sont également opposées. Par exemple, l'ordre des couleurs a changé, les 245 degrés sont passés du négatif au positif et le 75 % est maintenant de 25 % (la différence). C'est ainsi que vous obtenez que les côtés de la pointe de la flèche soient parfaitement symétriques.

Espacement de la ligne et des colonnes

Revenez aux paramètres de ligne et ajustons l'espacement de nos lignes et colonnes en mettant à jour les éléments suivants :

Rembourrage personnalisé : 0 pixels en haut, 0 pixels en bas, 0 pixels à gauche, 0 pixels à droite
Rembourrage personnalisé 2 : 5% en haut, 5% en bas, 2% à gauche, 2% à droite
Rembourrage personnalisé 3: 5 % en haut, 5 % en bas, 2 % à gauche, 2 % à droite
Rembourrage personnalisé 4 : 5% haut, 5% bas, 2% gauche, 2% droite
Rembourrage personnalisé 5 : 10 % en haut, 10 % en bas

Vous vous demandez peut-être pourquoi je n'ai pas simplement utilisé une largeur de 2 gouttières et que j'en ai fini avec elle. Eh bien, c'est parce que je voulais maximiser l'espace dans les colonnes contenant du texte autant que possible pour améliorer la lisibilité sur tous les appareils. Chaque petit espace que nous pouvons économiser compte. C'est pourquoi les marges entre les colonnes sont créées avec des pourcentages de remplissage à gauche et à droite.

Duplication du tableau pour les nouveaux tableaux et schémas de couleurs

Évidemment, vous voudrez avoir plusieurs tableaux de prix horizontaux que les utilisateurs pourront comparer. Pour créer le deuxième tableau de prix, dupliquez toute la section contenant le premier tableau que vous avez créé.

Ensuite, ouvrez les paramètres de ligne et survolez la couleur d'arrière-plan et cliquez sur rechercher et remplacer.

Sous "Dans" choisissez "Cette section".
Sous « Remplacer la largeur », ajoutez la couleur : #f84f51
Cochez ensuite la case Remplacer toutes les valeurs trouvées dans la section (pas seulement la couleur d'arrière-plan).

Cliquez ensuite sur Remplacer et regardez la magie opérer. C'est un moyen rapide et facile de changer toutes les instances de la couleur précédente avec une nouvelle couleur.

N'oubliez pas d'enregistrer les paramètres de ligne avant de quitter pour enregistrer les modifications.

Vous avez maintenant une nouvelle table avec un nouveau schéma de couleurs.

Répétez ce processus à nouveau pour ajouter une autre table avec la couleur : #bdc958

Faire une table en vedette

Pour que l'une de vos tables ait l'air en vedette et se démarque un peu, vous pouvez ajouter une ombre de boîte à la section contenant la table ainsi que changer la couleur grise utilisée pour les arrière-plans des colonnes et les dégradés en une belle couleur blanche.

Pour ce faire, accédez aux paramètres de section de la deuxième section (celle du milieu) et mettez à jour les éléments suivants :

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force du flou d'ombre de la boîte: 80px

Pour remplacer la couleur de fond grise, accédez aux paramètres de la ligne et recherchez la couleur de fond de la colonne 2 (#eeeeee). Faites un clic droit dessus et cliquez sur « rechercher et remplacer ». La mise à jour suivante :

Sous "Dans" choisissez "Cette section".
Sous « Remplacer la largeur », ajoutez la couleur : #ffffff
Cochez ensuite la case Remplacer toutes les valeurs trouvées dans la section (pas seulement la couleur d'arrière-plan).
Cliquez ensuite sur « Remplacer ».

Utiliser Rechercher et remplacer pour tester les polices

Si vous souhaitez utiliser une police différente dans votre tableau, vous pouvez facilement en tester différentes en utilisant la fonction « Rechercher et remplacer ». J'ai volontairement laissé la police par défaut pour tous les modules afin de rendre ce processus fluide. Pour modifier la police de toute votre page de tableaux, il vous suffit d'ouvrir les paramètres du module de texte dans la première colonne de n'importe quelle section de tableau (cela peut en fait être n'importe quel module utilisant la police par défaut de votre page). Cliquez ensuite avec le bouton droit sur la police de titre 2 utilisée et sélectionnez « Rechercher et remplacer ». Ensuite, mettez à jour les éléments suivants :

Sous "Dans" gardez "Cette page".
Sous « Remplacer la largeur », sélectionnez une police (j'utilise Roboto Condensed).
Cochez ensuite la case Remplacer toutes les valeurs trouvées dans la section (ou vous ne pourriez pas la cocher pour remplacer toutes les polices h2).
Cliquez ensuite sur « Remplacer ».

Maintenant, toutes les polices ont été modifiées sur toute la page.

C'est ça! Les tableaux de prix horizontaux sont maintenant terminés.

Vérifions le résultat.

Le réglage à cinq colonnes sur tablette et smartphone fonctionne également à merveille.

Dernières pensées

La disposition en cinq colonnes de Divi, ainsi que les puissantes fonctionnalités de conception disponibles dans Visual Builder, vous permettent de créer de magnifiques tableaux de prix horizontaux. Et ajuster les couleurs et les polices tout au long de l'utilisation de Rechercher et remplacer est un gain de temps considérable, améliorant encore plus le processus de conception. J'espère que vous trouverez le tutoriel à la fois informatif et inspirant.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!