Elementor est un puissant constructeur de pages WordPress qui permet de créer facilement des mises en page personnalisées à l'aide d'un éditeur par glisser-déposer. Pour les boutiques WooCommerce, la création d'une page de catégorie de produits belle et réactive peut grandement améliorer l'expérience de l'utilisateur et augmenter les opportunités de vente. Dans cet article, nous allons vous expliquer étape par étape comment créer des pages de catégories de produits réactives avec Elementor, en veillant à ce que vos pages s'affichent parfaitement à la fois sur les ordinateurs de bureau et les appareils mobiles.

Première étape :Installation et activation d'Elementor et de sa version Pro

Pour commencer à créer des pages de catégories de produits WooCommerce personnalisées, vous devez installer Elementor et sa version Pro. Bien que la version gratuite d'Elementor soit puissante et qu'elle nécessite Version Propour débloquer WooCommerce et les fonctionnalités avancées.

Étape 2 : Créez une nouvelle page et ajoutez un modèle de catégorie de produits

1. Nouvelle pageDans le tableau de bord de WordPress, allez à l'adresse suivante Pages > Ajouter une nouvelle page.
2. Nommer la page: donnez un nom à la page, par exemple "Classification des produits"ou tout autre nom approprié, puis cliquez sur le bouton Modifier avec Elementor Bouton.

3. Sélectionner un modèleUne fois que vous êtes dans l'éditeur Elementor, cliquez sur le bouton Paramètres (icône en forme de roue dentée)Sélection mise en page pour "Elementor Canvas"pour s'assurer que la page est construite à partir de zéro.

Étape 3 : Ajouter un module de catégorie de produits

1. Ajouter un titre de catégoriepar glisser-déposer Rubrique ajoutez un titre de page tel que "Nos catégories de produits". Les polices, tailles et alignements peuvent être modifiés dans le panneau de gauche pour s'adapter au style de votre site.

2. Insérer le WooCommerce Product Category WidgetElementor Pro : Elementor Pro offre Classification des produits Widgets. Rechercher "Classification des produits"et faites-le glisser sur la page. Ce widget affichera dynamiquement toutes les catégories de produits que vous avez créées dans WooCommerce.

3. Affichage personnalisé des catégories de produits: :
   • Dans le panneau de gauche, vous pouvez sélectionner les catégories à afficher et définir la manière dont les catégories sont triées (parNom, dernière mise à jour(etc.).
   • Sélectionnez le nombre de colonnes et de lignes à afficher, en veillant à ce que la mise en page soit soignée à la fois sur les ordinateurs de bureau et sur les appareils mobiles.
   • Personnalisez les options relatives à la taille des vignettes, au style du titre de la catégorie et à l'affichage des prix.

Étape 4 : Mise en place du responsive design

Pour vous assurer que vos pages de catégories de produits s'affichent correctement sur tous les appareils, Elementor propose de puissants outils de conception responsive.

1. Passer en mode réactif: En bas de l'éditeur Elementor, sélectionnez le bouton Ordinateur de bureau, tablette, mobile pour la prévisualisation et la personnalisation.

2. Ajustement des paramètres de style: :
   • En mode mobile, veillez à ce que vos catégories soient affichées sur une ou deux colonnes, au lieu de trois ou quatre sur l'ordinateur de bureau.
   • Redimensionnez les titres, le texte et les images pour que les utilisateurs puissent lire et parcourir facilement les catégories de produits.
3. Masquer les éléments inutilesCertains éléments peuvent ne pas être adaptés à un affichage sur des appareils mobiles. En option, vous pouvez masquer des widgets ou des éléments spécifiques et les afficher uniquement sur les ordinateurs de bureau ou les appareils mobiles.

Étape 5 : Ajouter des filtres personnalisés et des fonctions de recherche

Pour améliorer encore l'expérience de l'utilisateur, ajoutez des filtres de produits personnalisés et une fonctionnalité de recherche à vos pages de catégories de produits.

1. utiliser Filtre de produits WooCommerce par WBW plug-in (composant logiciel)Pour les produits : Installez et activez le plugin WooCommerce Product Filter, puis utilisez Elementor pour définir l'onglet terme de recherche peut-être Filtre (machine) Les widgets sont glissés sur les pages des catégories de produits pour aider les utilisateurs à trouver plus rapidement les produits dont ils ont besoin.

2. Mise en place de filtres personnalisésLes options de filtre personnalisées du plugin permettent aux utilisateurs de filtrer les produits par prix, par marque, par couleur, etc. L'apparence de ces filtres peut également être personnalisée pour s'aligner sur le design de la page.

Sixième étape :Ajout de termes d'appel (CTA)et d'autres améliorations

Au bas de la page de votre catégorie de produits, ajoutez un message d'accroche Terme d'appel (CTA) Des widgets tels que "Acheter"ou"Voir plus de produits"qui peuvent inciter les utilisateurs à naviguer ou à acheter davantage.

1. Glisser-déposer des widgets de boutons: Will Widget bouton Faites-la glisser vers le bas de la page et définissez son texte comme une phrase d'action puissante, telle que "Explorez notre gamme complète de produits".
2. Ajouter une bannière promotionnelle: Utilisation cadre d'image peut-être Images en ligne Widgets qui ajoutent une bannière promotionnelle accrocheuse qui incite les utilisateurs à cliquer pour voir le produit à prix réduit.

Étape 7 : Prévisualisation et publication de la page

Après avoir terminé la conception de la page et l'optimisation de la réactivité, cliquez sur le bouton avant-premières Assurez-vous que la page se trouve dans la sectionSur ordinateur, tablette et mobileTout s'affiche correctement. Si tous les paramètres et dessins sont conformes aux attentes, vous pouvez cliquer sur le bouton poste pour le mettre en ligne.

résumés

Créer des pages de catégories de produits réactives pour WooCommerce avec Elementor est à la fois simple et puissant. Grâce à la flexibilité de l'édition par glisser-déposer, aux mises en page personnalisées des catégories de produits et aux options de conception responsive, vous pouvez vous assurer que vos pages offrent une excellente expérience utilisateur sur tous les appareils. N'oubliez pas d'améliorer l'interaction avec l'utilisateur grâce à des boutons CTA et des filtres, ce qui permet d'augmenter les conversions sur le site web.