Un tutoriel complet sur la création de tableaux de comparaison avec Elementor

Un tableau comparatif des produits est un moyen très utile d'afficher côte à côte des informations telles que les caractéristiques principales, les images, les spécifications et les prix de plusieurs produits, afin d'aider les visiteurs à prendre des décisions rapides. Si vous utilisez Elementor La création d'un site web peut révéler qu'il n'a pas la capacité de créer directement des tableaux de comparaison de produits. Mais ne vous inquiétez pas.HappyAddons C'est exactement ce que fait le plugin.

Que sont les HappyAddons et comment vous aident-ils ?

HappyAddons est un plugin d'extension pour les utilisateurs d'Elementor qui contient plus de 130 widgets utiles qui étendent les limites de la fonctionnalité d'Elementor. Son widget Tableau de comparaison permet de créer facilement des tableaux de comparaison de produits polyvalents.

Pourquoi les sites de commerce électronique ont-ils besoin de tableaux de comparaison des produits ?

Un tableau comparatif des produits peut présenter des informations sur plusieurs produits de manière clairement structurée, ce qui permet aux clients d'effectuer facilement des comparaisons et de faire des choix d'achat dans un court laps de temps. La présentation claire et intuitive des informations augmente également la confiance et exprime la confiance du commerçant dans le produit.

Ce type de tableau est courant dans les plateformes de commerce électronique, non seulement pour présenter les différents modèles de leurs propres produits, mais aussi souvent pour comparer leurs produits avec ceux de leurs concurrents, de sorte que les avantages et les inconvénients apparaissent. Les consommateurs peuvent ainsi voir la différence entre les produits d'un simple coup d'œil, réduire leur hésitation et passer rapidement commande.

Etapes pour créer un tableau de comparaison de produits avec HappyAddons

Étape 1 : Installer les plug-ins nécessaires

Veuillez installer et activer les deux plugins suivants avant de commencer :

• Elementor (version gratuite)
• HappyAddons (version gratuite)

Ouvrez ensuite la page ou l'article que vous souhaitez modifier et allez dans l'éditeur Elementor pour effectuer les réglages suivants :

Étape 2 : Ajouter le widget de tableau de comparaison

Tapez "Tableau de comparaison" dans la barre de recherche du panneau de gauche et faites glisser le widget dans la page.

Un formulaire par défaut sera chargé sur la page et quatre zones principales de définition du contenu apparaîtront :

• Réglages de la tête de table (tête de table)
• Paramètres de la rangée de table (Table Row)
• Paramètres du bouton (bouton de tableau)
• Réglages de la table

Définition du contenu de l'en-tête

Cliquez sur "Ajouter un élément" pour créer un nouvel élément d'en-tête. Chaque élément permet de définir l'alignement (gauche, centre, droite), la position de l'icône (gauche ou droite), le titre de l'étiquette, la couleur de l'icône, la largeur de la colonne, etc.

Il peut également être activé En-tête collant Lorsque cette fonction est activée, l'en-tête du tableau est fixé en haut de la page lors du défilement.

Ajouter et gérer des lignes de tableau

Dans son état initial, le tableau comporte deux lignes de contenu, chacune contenant plusieurs colonnes.

Cliquez sur "Ajouter un élément" pour ajouter une nouvelle ligne, puis insérez des colonnes (Titre, Icône, Image) dans la ligne.

Par exemple, pour ajouter une colonne d'en-tête :

• Cliquez sur Ajouter un élément → Définir comme colonne → sélectionnez "Type de contenu" comme "Titre".

• importationlégendeLe site Web de la Commission européenne contient des informations et des descriptions, avec la possibilité d'insérer des icônes, etc.

Conseil : par défaut, le contenu des colonnes est disposé de droite à gauche.

Configurer la zone des boutons

Accédez au paramètre "Bouton de tableau" et saisissez le titre du bouton et l'adresse du lien.

Si vous souhaitez embellir le style du bouton, vous pouvez activer les styles personnalisés pour ajuster la couleur du texte, la couleur d'arrière-plan et l'ombre,survolEffets, etc.

Réglage de la largeur du formulaire et de la réactivité

L'option "Paramètres du tableau" vous permet de définir la largeur du tableau en fonction des différents appareils. Lorsqu'il est affiché sur une tablette ou un téléphone portable, le contenu du tableau peut être déplacé horizontalement pour s'adapter aux différentes largeurs d'écran.

Zone de style personnalisé

Dans "Style", vous pouvez ajuster les polices, les couleurs, les marges et d'autres styles de l'en-tête du tableau, des lignes du tableau et des zones de boutons pour créer un style d'affichage plus étroitement aligné sur le style de votre marque.

Introduction au tableau de comparaison avancé de HappyAddons Pro

Si vous avez l'intention de créer des tableaux de comparaison plus complexes et informatifs, essayez de passer à HappyAddons Pro, qui offre le widget Tableau de comparaison avancé.

Fonctionnalités avancées des widgets :

• Supporte jusqu'à 10 colonnes
• La position de l'icône peut être réglée librement
• Prise en charge de l'icône de basculement expansion/réduction
• Prise en charge de la navigation par badge responsive
• Prise en charge de plusieurs types de contenu (texte, icônes, images, boutons, prix, etc.)
• L'en-tête du tableau peut être affiché de manière fixe
• Importation de modèles etétiquette dynamiquefonction intégrée

Marche à suivre pour l'utilisation :

• Installation : Elementor Free Edition + HappyAddons Free Edition + HappyAddons Pro
• Ajout de composants : glisser-déposer dans le tableau de comparaison avancé
• Initialisation : une vue à trois colonnes est chargée par défaut, le nombre de colonnes peut être étendu (jusqu'à 10) dans l'option Général.
• Remplir le contenu : développez chaque colonne pour insérer différents types de contenu, tels que du texte ou des icônes,boutonset al. (et autres auteurs)

Options de réglage personnalisées :

• Largeur réglable de chaque colonne
• Placement flexible des icônes
• Les projets de rangée soutiennent le pliage et le dépliage
• Prise en charge de l'ajout de descriptions d'infobulles par cellule
• Importer des modèles prédéfinis ou utiliser des codes courts pour intégrer des données dynamiques

Concevoir des éléments d'embellissement :

• Couleurs personnalisées,contextesPolices, bordures, etc.
• Prise en charge des styles de lignes paires et impaires
• Des styles individuels peuvent être définis pour chaque élément (texte, badges, boutons, etc.).
• Paramètres globaux de couleur et de police pour une cohérence globale

Paramètres réactifs :

• Support mobile pour le changement de badge de navigation
• Styles de boutons distincts sur les appareils mobiles

Aperçu des caractéristiques avancées

• données dynamiquesAccès : prise en charge des codes courts et des balises dynamiques

• Effet d'animation de l'en-tête collant : l'en-tête est toujours visible lorsque le contenu est glissant

• Importation de modèles prédéfinis : création rapide de structures de tableaux complexes
• Contrôle polyvalent du style : adaptation aux différents besoins des marques

Forces et faiblesses du widget tableau de comparaison

Avantage :

• Facile à mettre en œuvre et hautement personnalisable
• Disponible directement sur le site Elementor Manipulation dans l'éditeur
• Correction de l'en-tête du tableau, indices de description, lignes réduites, badges et bien d'autres améliorations
• Modèles appelables avec contenu dynamique, conception flexible

Insuffisant :

• Le nombre maximum de colonnes est de 10
• Pas de capture directe WooCommerce Données sur le produit
• La structure du formulaire doit être configurée manuellement et ne dispose pas d'une logique de génération automatique.

Exemples de scénarios d'application

• Tableau de comparaison des produitsPar exemple, il montre les différences de fonctionnalités entre les différentes lignes de l'Apple Watch.

• Comparaison des paquets de servicesDémonstration du contenu des services pour différentes fourchettes de prix

• Tableau de différenciation fonctionnelleLes modules fonctionnels d'un produit ou d'un service : démontrent les modules fonctionnels d'un produit ou d'un service

Ces scénarios peuvent être conçus à l'aide du widget Tableau de comparaison avancé.

résumés

Si vous construisez un site de commerce électronique ou un site de services vitrine et que vous avez besoin de créer des tableaux comparatifs clairement structurés et visuellement conviviaux.ElementorCe widget avec HappyAddons vous fournira une solution efficace et esthétique.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.