Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Les pages de catégorie sont une partie importante de tout site Web de commerce électronique. Les clients parcourent les catégories de produits pour trouver ce dont ils ont besoin. C’est pourquoi vos pages de catégories doivent être aussi belles que vos pages de produits. Avec le générateur de thèmes de Divi, la création de modèles de page de catégorie est plus facile que jamais. Dans ce tutoriel, nous allons vous montrer étape par étape comment créer un modèle de page de catégorie et le formater à l’aide des options intégrées de Divi. Nous vous montrerons également comment le filtrer à l’aide de Filtres de produits Themify WooCommerce Brancher.

Ouvrez deux onglets de navigateur côte à côte. Utilisez le premier onglet pour le générateur de thèmes et le deuxième onglet pour l’aperçu en direct d’une page de catégorie. Travaillez de cette façon pour voir les progrès. Pour faciliter les choses, nous avons également ajouté le modèle en téléchargement gratuit.

Commençons!

Aperçu

Avant de commencer à créer le modèle à partir de zéro, examinons à quoi ressemble le modèle de page de catégorie sur différentes tailles d’écran.

Bureau

Page de catégorie de produit WooCommerce

Téléphone portable, téléphone portable

Page de catégorie de produit WooCommerce

Téléchargez le modèle de page de catégorie Woo GRATUITEMENT

Pour mettre la main sur le modèle de page de catégorie Woo gratuit, vous devez d’abord le télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

1. Mettez à jour vos produits et catégories

Avant de créer le modèle, assurez-vous que vos produits sont organisés dans les bonnes catégories. Vérifiez qu’ils sont également correctement étiquetés. Celles-ci sont importantes lors de la configuration du plug-in Product Filter.

Page de catégorie de produit WooCommerce

2. Plug-in de configuration

Télécharger et installer

Téléchargez le Filtres de produits WooCommerce. Accédez au tableau de bord de votre plugin et téléchargez le fichier zip du plugin pour l’installer. Vous pouvez également rechercher le plugin dans le répertoire. Le plugin ajoute un nouvel onglet à votre menu de tableau de bord. Assurez-vous également d’activer le plugin.

Ajouter un nouveau formulaire de filtre

Sur votre tableau de bord, cliquez sur l’onglet Plugin. Dans les paramètres du plugin, cliquez sur le bouton pour ajouter un nouveau formulaire de filtre.

Configurer le formulaire de filtre

Utilisez les paramètres ci-dessous pour que votre barre latérale filtrable ressemble exactement à l’aperçu de ce message. Vous pouvez ajuster ces paramètres à tout moment.

  • Disposition: verticale
  • Champs vides: ne pas afficher le champ s’il est vide
  • Tri des produits: masquer le tri des produits
  • Option de pagination: défilement infini
  • Bouton de réinitialisation: pas de bouton de réinitialisation
  • Relation logique entre les taxonomies: ET
  • Modèle de page de résultats: afficher les résultats sur la même page

Page de catégorie de produit WooCommerce

Créer un champ de catégorie

Dans la barre de menu sous la zone principale, vous verrez une sélection d’onglets. Faites glisser et déposez l’onglet « Catégorie » dans le générateur ci-dessous. Puis ajustez les paramètres comme suit:

  • Titre du champ: Catégories
  • Inclure les enfants: Oui
  • Afficher comme: case à cocher
  • Logique: OU
  • Ordre: nom, décroissant
  • Disposition: horizontale, 2 colonnes

Créer un champ de balise

Maintenant, faites glisser et déposez l’onglet « Tag » dans le générateur. Assurez-vous qu’il est placé sous l’onglet Catégorie. Ajustez les paramètres comme suit:

  • Titre du champ: Type
  • Afficher comme: case à cocher
  • Ordre: nom, décroissant
  • Disposition: horizontale, 2 colonnes
  • Icônes de couleur
    • Fond: transparent
    • Couleur du texte: brun foncé # 44000d

Page de catégorie de produit WooCommerce

Cliquez sur Enregistrer pour générer un shortcode

Enregistrez votre travail et fermez le générateur. Vous pouvez voir le shortcode dans le menu principal du plugin. Copiez-le, vous en aurez besoin plus tard.

Page de catégorie de produit WooCommerce

Page de catégorie de produit WooCommerce

3. Recréez le modèle de page de catégorie de produit dans Theme Builder

Ouvrez le générateur de thèmes / Ajouter un nouveau modèle

Il est temps de recréer le modèle! Ouvrez votre générateur de thèmes et ajoutez un nouveau modèle.

Spécifiez les paramètres du modèle

Sélectionnez « Pages de catégories de produits spécifiques » dans les paramètres du modèle. Cliquez sur les catégories auxquelles vous souhaitez attribuer ce modèle. Nous choisissons la maroquinerie artisanale.

Page de catégorie de produit WooCommerce

Ajouter un corps personnalisé

Cliquez ensuite sur « Ajouter un corps personnalisé ».

Page de catégorie de produit WooCommerce

Choisissez Créer un corps personnalisé

Nous allons créer ce modèle à partir de zéro. Alors choisissez « Créer un corps personnalisé ».

Page de catégorie de produit WooCommerce

Construire à partir de zéro

Dans Visual Builder, sélectionnez l’option de reconstruction à partir de zéro.

Page de catégorie de produit WooCommerce

Section 1 Paramètres

Contexte

Une fois que vous êtes dans l’éditeur de modèle, vous remarquerez une section. Ouvrez cette section et ajoutez une couleur d’arrière-plan.

  • Couleur de fond: gris bleuâtre transparent – rgba (68,66,109,0,02)

Page de catégorie de produit WooCommerce

Ajouter une ligne

Structure de la colonne

Maintenant, ajoutez une nouvelle ligne avec la structure de colonne suivante:

Page de catégorie de produit WooCommerce

Dimensionnement

Ajustez les paramètres de taille sur la ligne suivante.

  • Largeur de gouttière: 1
  • largeur
    • Bureau: 90%
    • Tablette et téléphone: 85%
  • Largeur maximale: 1920px

Page de catégorie de produit WooCommerce

distance

Appliquez ensuite différentes valeurs de distance à différentes tailles d’écran.

  • Marges gauche et droite
    • Bureau: voiture
    • Tablette: 55px
    • Téléphone: 30px
  • Rembourrage supérieur: 100px

Page de catégorie de produit WooCommerce

Ajouter le module de titre de l’article à la 1ère colonne

éléments

Il est temps d’ajouter des modules en commençant par un module post-titre dans la colonne 1. Cochez uniquement le titre.

Page de catégorie de produit WooCommerce

Contexte

Ensuite, ajoutez une couleur d’arrière-plan.

Page de catégorie de produit WooCommerce

Texte du titre

Accédez à l’onglet Conception et stylisez le texte du titre.

  • Niveau du titre: H1
  • Police: Josefin Sans
  • Poids: gras
  • Style: TT
  • Couleur: # 44000d
  • Taille
    • Bureau: 32px
    • Tablette: 28px
    • Téléphone: 30px
  • Hauteur de ligne: 1,2 em

Page de catégorie de produit WooCommerce

distance

Ajustez également l’espacement.

  • Rembourrage supérieur
    • Bureau et tablette: 100px
  • Rembourrage au sol: 80px
  • Rembourrage gauche
  • Rembourrage correct
    • Bureau et tablette: 30px
    • Téléphone: 10px

Page de catégorie de produit WooCommerce

bord

Donnez au module des coins arrondis.

  • Coins arrondis: 15 px tous les quatre

Page de catégorie de produit WooCommerce

Boîte ombre

Et ajoutez une subtile ombre de boîte.

  • Box Shadow: 2ème option
  • Position horizontale: 12px
  • Position verticale: 12px
  • Flou: 20px
  • Force de propagation: -5px
  • Couleur de l’ombre: #dddddd

Page de catégorie de produit WooCommerce

Ajouter un module de texte à la 1ère colonne

teneur

Ajoutez un module de texte juste en dessous du module précédent. Dans la zone de contenu, ajoutez le shortcode que vous avez copié à partir du plugin.

Page de catégorie de produit WooCommerce

Contexte

Ensuite, ajoutez une couleur d’arrière-plan.

Page de catégorie de produit WooCommerce

texte

Concevez le texte.

  • Police: Josefin Sans
  • Couleur: # 44000d
  • Taille
    • Bureau: 20px
    • Tablette: 18px
    • Téléphone: 16px
  • Distance: 1px

Page de catégorie de produit WooCommerce

distance

Ajustez également les paramètres d’espacement.

  • Marge supérieure: 50px
  • Rembourrage au-dessus et au-dessous: 40px
  • Rembourrage gauche et droit: 30px

Page de catégorie de produit WooCommerce

bord

Ajoutez ensuite quelques coins arrondis.

  • Coins arrondis: 15 px tous les quatre

Page de catégorie de produit WooCommerce

Boîte ombre

Complétez les paramètres du module en ajoutant une subtile ombre de boîte.

  • Box Shadow: 2ème option
  • Position horizontale: 12px
  • Position verticale: 12px
  • Flou: 20px
  • Force de propagation: -5px
  • Couleur de l’ombre: #dddddd

Page de catégorie de produit WooCommerce

Ajouter le module boutique à la 2ème colonne

teneur

Passez à la colonne suivante! Ajoutez un module de boutique et ajustez les principaux paramètres comme suit:

  • Type de vue du produit: Standard
  • Utiliser la page actuelle: Oui
  • Disposition des colonnes: 3 colonnes

Page de catégorie de produit WooCommerce

image

Passez à l’onglet « Conception » et concevez l’image en conséquence:

  • Coins arrondis de l’image: 15px les quatre
  • Image Box Shadow: 2ème option
    • Position horizontale: 6px
    • Position verticale: 6px
    • Flou: 18px
    • Couleur de l’ombre: #dddddd

Page de catégorie de produit WooCommerce

Page de catégorie de produit WooCommerce

Texte du titre

Ensuite, concevez le texte du titre.

  • Police: Josefin Sans
  • Poids: demi-gras
  • Alignement: à droite
  • Couleur: # 44000d
  • Taille
    • Bureau: 26px
    • Tablette: 24px
    • Téléphone: 17px
  • Distance: 2px

Page de catégorie de produit WooCommerce

Texte du prix

N’oubliez pas de concevoir également le texte du prix.

  • Police: Josefin Sans
  • Alignement: à droite
  • Couleur: # 44000d
  • Taille: 15px
  • Espacement des lettres: 2px
  • Hauteur de ligne: 46px

Page de catégorie de produit WooCommerce

distance

Ajustez également les paramètres d’espacement.

  • Rembourrage supérieur
  • Rembourrage gauche
    • Bureau: 50px
    • Tablette et téléphone: 0px

Page de catégorie de produit WooCommerce

CSS personnalisé

Enfin, dans l’onglet Avancé, ajoutez deux lignes de code CSS personnalisé pour faire de la place entre les différents éléments du module Store. C’est ça!

  • Image: rembourrage ci-dessous: 20px
  • Prix: rembourrage ci-dessous: 40px
padding-bottom: 20px;
padding-bottom: 40px;

Page de catégorie de produit WooCommerce

Aperçu

Nous avons recréé le modèle de page pour la catégorie de produits WooCommerce. Regardons à nouveau le design fini sur différentes tailles d’écran.

Bureau

Page de catégorie de produit WooCommerce

Téléphone portable, téléphone portable

Page de catégorie de produit WooCommerce

Dernières pensées

Ce modèle de page de catégorie de produit peut être appliqué à toutes les catégories et balises de votre boutique WooCommerce. À l’aide du plug-in de filtre de produit, vous pouvez ajouter les paramètres de filtre qui conviennent à votre propre entreprise et à vos produits. Vous pouvez utiliser l’un des modules Divi woo pour personnaliser votre boutique comme vous le souhaitez. Nous espérons que ce modèle vous aidera à donner à vos créations un aspect personnalisé. Faites-nous savoir dans les commentaires si vous avez des questions ou des suggestions!





Source link

Recent Posts