Comment concevoir un tableau comparatif de produits créatifs avec Divi

Un tableau de comparaison de produits peut être un moyen extrêmement efficace de promouvoir de nouveaux produits ainsi que leurs fonctionnalités améliorées. L'aspect visuel d'un graphique est plus attrayant pour les utilisateurs qu'un simple texte. Et la structure d'une comparaison côte à côte permet aux utilisateurs de voir facilement la différence entre chaque caractéristique du produit.

Dans ce tutoriel, je vais vous montrer comment concevoir un tableau comparatif de produits créatifs avec Divi. Et cette disposition de conception peut être utilisée pour comparer à peu près n'importe quoi. Par exemple, je peux voir que c'est également une mise en page parfaite pour les études de cas.

Commençons.

Aperçu

Voici un aperçu du tableau de comparaison que je vais construire dans ce tutoriel.

Ce dont vous avez besoin pour ce tutoriel

Pour ce tutoriel, vous avez besoin des éléments suivants :

• Thème Divi (installé et actif)
• Deux images (environ 800px par 450px) pour servir d'images de produits dans le tableau de comparaison.

Créer votre en-tête et vos images de produits

Pour commencer, créez une nouvelle page, déployez le Visual Builder, puis choisissez de créer votre page à partir de zéro.

Ajoutez ensuite une disposition à une colonne à votre ligne de votre section.

Avant d'ajouter un module, passons au paramètre de section et mettons à jour les éléments suivants :

Couleur d'arrière-plan : #222222
Couleur du dégradé d'arrière-plan à gauche : rgba(242,90,71,0.14)
Couleur du dégradé d'arrière-plan à droite : rgba(255,255,255,0)
Type de dégradé : Radial
Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Enregistrer les paramètres. Ouvrez maintenant vos paramètres de ligne et donnez à votre ligne une largeur personnalisée de 100%.

Ajoutez ensuite un module de texte à votre ligne à une colonne avec les paramètres suivants :

Pour le contenu, entrez ce html :

<h2>Compare</h2>
VS

Police du texte : Montserrat
Poids de la police de texte : ultra gras
Style de police de texte : TT (majuscule)
Couleur du texte du texte : rgba(255,255,255,0.3)
Taille du texte du texte : 3vw
Hauteur de la ligne de texte : 1,8 em
Orientation du texte : Centre

Mettez ensuite à jour les options de conception de titre h2 et donnez à votre module une marge inférieure personnalisée pour créer l'effet de chevauchement.

Police de la rubrique 2 : Montserrat
Titre 2 Couleur du texte : rgba(255,255,255,0.3)
Titre 2 Taille du texte : 13vw
En-tête 2 Espacement des lettres : 1vw
Marge personnalisée : -13vw bas

Une partie de votre texte sera masquée pour le moment, mais elle apparaîtra une fois que nous aurons ajouté l'autre contenu.

Deux créer notre deuxième ligne dupliquer la première ligne, puis supprimer le module de texte à l'intérieur de la ligne dupliquée. Mettez ensuite à jour la structure des colonnes en une ligne à deux colonnes.

Allez-y et mettez à jour vos paramètres de ligne comme suit :

Largeur de gouttière personnalisée : 1
Remplissage personnalisé de la colonne 1 : 2vw à droite
Rembourrage personnalisé de la colonne 2 : 2vw à gauche

C'est ici que nous allons mettre les images de nos deux produits que nous souhaitons comparer. Dans la colonne de gauche de notre ligne, ajoutez votre image à l'aide du module image. Pour cet exemple, j'utilise une image png de 800px par 459px. Mettez ensuite à jour les paramètres du module d'image comme suit :

Largeur: 70%
Alignement du module : à droite
Rembourrage personnalisé : 40 pixels en bas

Copiez ensuite le module et collez-le dans la colonne de droite. Modifiez l'image, puis ajustez l'alignement du module vers la gauche.

Sous le module d'image dans la colonne de gauche, ajoutez un module de texte avec le contenu de texte suivant : « Ancien produit ».

Ensuite, allez dans le module de texte de la première ligne ci-dessus et copiez les styles de texte.

Passez ensuite la souris sur le nouveau module de texte avec le texte « Ancien produit » et collez les styles de texte dans le module à l'aide d'un clic droit.

Cela correspondra aux styles de texte dont nous avons besoin beaucoup plus rapidement. Il ne nous reste plus qu'à faire
mettre à jour la taille et l'alignement du texte :

Taille du texte du texte : 16px
Orientation du texte : à droite

Allez maintenant dans l'onglet avancé et placez le CSS personnalisé suivant dans la zone de saisie Élément principal :

text-align:right !important;

Cela est nécessaire car Divi ajustera l'alignement du texte à gauche sur les smartphones par défaut. Cet extrait CSS remplacera cela et s'assurera qu'il reste également aligné sur le smartphone.

Enregistrer les paramètres. Copiez ensuite le module de texte et collez-le sous l'image dans la colonne de droite. Remplacez le contenu du texte par « Nouveau produit » et mettez à jour l'orientation du texte sur « Gauche ».

Voici ce que nous avons jusqu'à présent.

Création du tableau de comparaison des produits

Pour créer notre tableau de comparaison, nous allons utiliser une séquence de deux lignes de colonnes séparées chacune par une ligne de colonne. Les deux rangées de colonnes contiendront nos barres colorées. Et la ligne d'une colonne affichera le nom de la fonctionnalité associée aux valeurs de la barre.

Créez une nouvelle ligne à deux colonnes et mettez à jour les paramètres de ligne comme suit :

Largeur personnalisée : 100 %
Largeur de gouttière : 1
Rembourrage personnalisé : 0px en bas
Remplissage personnalisé de la colonne 1 : 2vw à droite
Rembourrage personnalisé de la colonne 2 : 2vw à gauche

Le remplissage personnalisé des colonnes 1 et 2 crée l'espace dont nous avons besoin au milieu de nos graphiques à barres que nous ajouterons.

Dans la colonne de gauche, ajoutez un module diviseur et mettez à jour les paramètres comme suit :

Couleur du dégradé d'arrière-plan à gauche : rgba(81,91,214,0.25)
Couleur du dégradé d'arrière-plan à droite : rgba(255,255,255,0.15)
Direction du gradient : 90 degrés
Position de départ : 35 %
Couleur : #515bd6
Poids du diviseur : 23px (cette valeur doit être égale à la valeur de la hauteur du diviseur qui est de 23px par défaut afin que le diviseur ait la même largeur que l'arrière-plan du module)
Remplissage personnalisé : 70 % à gauche (cela pousse le diviseur vers la droite de 75 %, ce qui donne une valeur de graphique à barres de 25 % à partir de la droite)

Enregistrer les paramètres.

Copiez maintenant le module diviseur dans la colonne de droite de la même ligne. Mettez ensuite à jour les paramètres suivants :

Couleur du dégradé d'arrière-plan à gauche : rgba (255,255,255,0.15)
Couleur du dégradé d'arrière-plan à droite : rgba(242,90,71,0,25)
Position de départ : 70 %
Couleur : #f25a47
Remplissage personnalisé : 30 % à droite (cela pousse le diviseur vers la gauche de 30 %, ce qui donne une valeur de graphique à barres de 70 % à partir de la gauche.)

Maintenant que votre première rangée de barres est en place, nous devons ajouter une ligne de colonne en dessous pour mettre notre étiquette de caractéristique de produit.

Créez une ligne à une colonne avec un rembourrage personnalisé de 0px en haut. Ajoutez ensuite un nouveau module de présentation et mettez à jour les paramètres du module de présentation comme suit :

Contenu : « fonctionnalité »
Utiliser l'icône : OUI
Icône : voir capture d'écran

Couleur de l'icône : rgba(255,255,255,0.3)
Utiliser la taille de la police de l'icône : OUI
Taille de la police de l'icône : 30 px
Orientation du texte : centre
Police de caractère : Montserrat
Poids de la police de caractères : Ultra gras
Couleur du corps du texte : rgba(255,255,255,0.3)
Espacement des lettres du corps : 2px
Marge personnalisée : -20px

Sous l'onglet avancé, vous pouvez supprimer la marge par défaut sous l'icône de présentation en ajoutant le CSS personnalisé suivant dans la zone CSS de l'image de présentation :

margin-bottom: 0px;

Maintenant que vous avez votre premier exemple fonctionnel de fonction de comparaison de produits, il vous suffit de dupliquer les deux lignes qui composent la fonction de comparaison (la ligne avec les deux barres/séparateurs et la ligne avec le module de présentation). Je trouve qu'il est plus simple d'utiliser ctrl + c (ou commande + c) pour copier chaque ligne, puis ctrl + v (ou commande + v) pour les coller les unes sous les autres. Ensuite, mettez simplement à jour le remplissage personnalisé des diviseurs dupliqués pour afficher différentes valeurs de graphique à barres.

Vous pouvez également ajuster la position de début et de fin du dégradé en fonction de la valeur de remplissage personnalisée que vous choisissez. Par exemple, si vous donnez au séparateur de colonne de gauche un rembourrage de 60 % Gauche, vous pouvez ajuster la position de départ de votre dégradé à 30 % (exactement la moitié de la distance du rembourrage).

Pour une touche finale, vous pouvez ajouter un arrière-plan de séparation à votre section. Pour cet exemple, je vais ajouter ce qui suit :

Top Divider : voir capture d'écran
Couleur du diviseur : rgba(255,255,255,0,05)
Hauteur du diviseur : 19vw

Voici le résultat final.

J'aime aussi l'apparence du design lorsque je change la couleur d'arrière-plan de la section en #000314.

Rendre la conception réactive

Dans Divi, toute ligne à deux colonnes s'empilera automatiquement les unes sur les autres sur les appareils mobiles. Cela va bien sûr casser le design sur mobile. Pour résoudre ce problème, nous devrons faire deux choses. Tout d'abord, nous devons ajouter un petit extrait de CSS personnalisé dans le personnalisateur de thème.

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

Ce code ajustera la largeur de colonne de n'importe quelle ligne avec la classe CSS « disable-break » à 50 %. Cela garantira que nous conservons notre structure à deux colonnes sur les appareils mobiles afin que la conception ne se brise pas. N'oubliez pas de publier vos modifications.

Une fois le CSS en place, nous devons ajouter la classe CSS à n'importe quelle ligne ayant une structure à deux colonnes.

Pour commencer, ajoutons la classe CSS à la ligne à deux colonnes contenant nos deux images de produits. Ouvrez les paramètres de ligne et accédez à l'onglet avancé. Saisissez ensuite « disable-break » dans la zone de saisie Classe CSS.

Cliquez ensuite avec le bouton droit sur l'option Classe CSS et cliquez sur "Copier la classe CSS".

Maintenant, tout ce que vous avez à faire est de cliquer avec le bouton droit sur chaque ligne qui a une structure à deux colonnes (toutes les lignes avec les séparateurs/barres) et de cliquer sur « Coller la classe CSS ».

Désormais, vos colonnes conserveront la structure à deux colonnes sur les appareils mobiles et maintiendront la cohérence de la conception.

Dernières pensées

Créer un tableau de comparaison de produits dans Divi est simple une fois que vous avez appris quelques techniques de conception. L'astuce consiste à configurer vos rangées à deux colonnes avec une largeur de 100 % et une largeur de gouttière de 1. Après cela, vous pouvez utiliser le module de séparation pour créer des conceptions de graphique à barres uniques. Et si vous souhaitez conserver votre mise en page à deux colonnes sur mobile, tout ce dont vous avez besoin est un petit extrait de CSS personnalisé. Je m'attendrais à ce que cette disposition de tableau de comparaison puisse être utilisée de différentes manières. N'hésitez pas à partager quelques idées avec la Divi Nation.

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

À votre santé!