Comment styliser le filtre de catégorie dans le module de portefeuille filtrable de Divi

Le module de portefeuille filtrable de Divi contient de nombreux éléments, et chacun peut être stylisé individuellement. Le filtre est l'un des éléments les plus utiles, mais il est parfois négligé. Dans cet article, nous verrons comment styliser le filtre de catégorie dans le module Portfolio filtrable de Divi. Nous verrons ce qui peut être fait avec les paramètres standard, et nous approfondirons le CSS pour voir comment le styliser encore plus.

Commençons!

Aperçu

Voyons d'abord ce que nous allons construire dans ce tutoriel.

Premier exemple de filtre de catégorie de bureau

Exemple de filtre de catégorie de téléphone 1

Exemple de filtre de catégorie de bureau deux

Exemple de filtre de catégorie de téléphone 2

Exemple de filtre de catégorie de bureau trois

Exemple de filtre de catégorie de téléphone trois

Fractionner les projets en catégories

Pour tirer le meilleur parti du filtre de catégorie, vous devrez diviser vos projets en catégories qui ont le plus de sens pour vos lecteurs. Pour créer vos catégories, allez dans Projets > Catégories dans le tableau de bord WordPress.

Ici, vous verrez des champs pour ajouter le nom, le slug, la catégorie parent et la description. Vous verrez également votre liste de catégories dans une liste où vous pourrez les modifier.

Une fois que vous avez créé vos catégories, assurez-vous de choisir celles qui ont le plus de sens pour le lecteur pour chacun de vos projets. Pour créer vos projets, allez dans Projets et cliquez sur Ajouter nouveau dans le menu ou en haut de la page.

Pour mes exemples, j'ai créé des projets pour une entreprise de rénovation domiciliaire. L'entreprise se concentrerait sur les rénovations domiciliaires, mais inclurait également des travaux similaires pour les entreprises et pourrait construire à partir de zéro. Pour les maisons, j'utilise les catégories Intérieur et Extérieur. Pour tous les autres travaux, j'ai ajouté Corporate et Construction.

Paramètres du module Portfolio filtrable

Dans notre exemple, je remplacerai la section portfolio de la page Portfolio du pack de mise en page de rénovation gratuit par un module de portfolio filtrable. Voyons d'abord comment styliser le module. Ensuite, nous allons styliser le filtre de trois manières différentes. Voici la page avant que je fasse les changements.

Voici la page après avoir ajouté le module Portfolio filtrable à la place des images.

Tout d'abord, nous allons styliser le module. Nous utiliserons ces mêmes paramètres pour les trois exemples.

Contenu

Dans l'onglet Contenu, définissez le nombre de publications sur 8 et sélectionnez les catégories dans la liste des catégories incluses.

• Nombre de messages : 8
• Catégories incluses : votre choix

Éléments

Faites défiler jusqu'à Éléments et désactivez Afficher les catégories . Nous allons simplement utiliser les titres et permettre au filtre d'afficher les catégories.

• Afficher les catégories : Non

Disposition

Ensuite, allez dans l'onglet Conception et sélectionnez Grille sous Disposition . Je l'avais déjà sélectionné pour les images précédentes, mais le module s'affiche en pleine largeur par défaut.

• Disposition : Grille

Texte

Ensuite, faites défiler jusqu'à Texte et définissez l' alignement du texte sur Centre. Cela centre le filtre et la pagination avec le module et les titres avec les images du projet.

• Alignement du texte : Centré

Texte du titre

Ensuite, faites défiler jusqu'à Texte du titre . Changez la police en Kanit et réglez le poids sur semi-gras. Définissez la couleur sur noir.

• Police : Kanit
• Poids : semi-gras
• Couleur : #000000

Modifiez la taille de la police à 20px pour les ordinateurs de bureau, 18px pour les tablettes et 16px pour les téléphones. Définissez l' espacement des lignes sur 1px et la hauteur des lignes sur 1,3em.

• Taille : ordinateur de bureau 20 px, tablette 18 px, téléphone 16 px
• Espacement des lettres : 1px
• Hauteur de ligne : 1,3 em

Texte de pagination

Ensuite, faites défiler jusqu'à Texte de pagination et changez la police en Kanit. Changez la couleur en noir.

• Police : Kanit
• Couleur : #000000

Changez l'interligne à 1px . Enregistrez votre travail. Nous pouvons maintenant styliser le filtre de catégorie pour nos exemples.

• Espacement des lettres : 1px

Exemples de filtres de catégorie

Maintenant, nous pouvons passer à nos exemples de filtre de catégorie. J'utilise des repères de conception du pack de mise en page.

Exemple de filtre de catégorie 1

Notre premier exemple est le plus simple des trois. Il utilise les paramètres de base et ne fait rien d'extraordinaire. Cela fonctionne bien avec la conception de la mise en page.

Filtrer le texte des critères

Dans l'onglet Conception , faites défiler jusqu'à Texte des critères . Changez la police en Kanit. Changez le style en TT et la couleur en noir.

• Police : Kanit
• Style : TT
• Couleur : #000000

Définissez l' espacement des lignes sur 1px et la hauteur des lignes sur 1,3em. Voilà pour le premier. Maintenant, enregistrez vos paramètres et fermez le module.

• Espacement des lettres : 1px
• Hauteur de ligne : 1,3 em

Exemple de filtre de catégorie 2

Notre deuxième exemple utilisera du CSS simple pour le module et la page pour créer des coins arrondis et une ombre de boîte. Celui-ci semble le plus différent.

Filtrer le texte des critères

Accédez à l'onglet Conception et faites défiler jusqu'à Filtrer le texte des critères . Changez la police en Kanit. Définissez la couleur sur noir, la taille sur 16 pixels et la hauteur de ligne sur 1,5 em. La taille de la police fonctionne bien sur toutes les tailles d'écran, nous n'aurons donc pas besoin de l'ajuster pour les tablettes ou les téléphones.

• Police : Kanit
• Couleur : #000000
• Taille : 16 pixels
• Hauteur de ligne : 1,5 em

CSS des modules

Ensuite, allez dans l'onglet Avancé . Faites défiler jusqu'à Filtre de portefeuille actif et ajoutez CSS pour la couleur d'arrière-plan et fermez le module. Ceci change la couleur de fond du filtre actif. Tout filtre sur lequel l'utilisateur clique passe à cette couleur d'arrière-plan et le filtre précédent revient à la couleur normale.

• Filtre de portefeuille actif CSS :

  background-color:#ffd000;

Paramètres de la page CSS

Ensuite, ouvrez les paramètres de la page dans le menu de la page. Dans le modal Paramètres de la page, sélectionnez l'onglet Avancé et collez le CSS personnalisé dans le champ. Ce CSS supprime la bordure des éléments de filtre, crée un rayon de bordure de 25 pixels et ajoute 5 pixels de marge entre les éléments. Il ajoute également une petite boîte-ombre au bas des éléments et change la couleur de l'ombre. Fermez le module et enregistrez vos paramètres.

• CSS personnalisé:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {border-width:0px; border-radius: 25px!important; margin:5px; box-shadow: 1px 2px rgba(0,0,0,0.3);}

Exemple de filtre de catégorie trois

Notre troisième exemple suit des idées de conception CSS similaires à celles de l'exemple précédent. Il n'inclut pas les coins arrondis et modifie la police et les couleurs d'arrière-plan au survol. Il utilise également CSS pour le module et la page.

Filtrer le texte des critères

Accédez à l'onglet Conception et faites défiler jusqu'à Filtrer le texte des critères . Choisissez Kanit pour la police , définissez le style sur TT et la couleur sur blanc.

• Police : Kanit
• Style : TT
• Couleur : #ffffff

Ensuite, sélectionnez l' option Survoler pour la couleur du texte et changez la couleur en noir. Cela prend soin des polices au survol. Nous allons gérer les arrière-plans avec CSS. Modifiez l' espacement des lettres à 1px et la hauteur de ligne à 1,3em.

• Couleur de survol : #000000
• Espacement des lettres : 1px
• Hauteur de ligne : 1,3 em

CSS des modules

Ensuite, allez dans l'onglet Avancé et faites défiler jusqu'à Active Portfolio Filter . Ajoutez le CSS suivant pour modifier l'arrière-plan du filtre actif. Fermez le module.

• Filtre de portefeuille actif CSS :

  background-color:#ffd000

Paramètres de la page CSS

Enfin, ouvrez les paramètres de la page . allez dans l'onglet Avancé et entrez le CSS personnalisé suivant. Fermez le module et enregistrez vos paramètres. Cela change l'arrière-plan en noir, ajoute 15 pixels de rembourrage en haut et en bas et 30 pixels de rembourrage à gauche et à droite. Cela redimensionne les éléments de filtre pour qu'ils correspondent étroitement aux boutons de la mise en page et aide à créer le changement de couleur pour l'effet de survol. L'arrière-plan deviendra blanc au survol.

• CSS personnalisé:

  .et_pb_filterable_portfolio .et_pb_portfolio_filters li a {background-color:black; padding: 15px 30px 15px 30px;}

Résultats

Premier exemple de filtre de catégorie de bureau

Exemple de filtre de catégorie de téléphone 1

Exemple de filtre de catégorie de bureau deux

Exemple de filtre de catégorie de téléphone 2

Exemple de filtre de catégorie de bureau trois

Exemple de filtre de catégorie de téléphone trois

Mettre fin aux pensées

C'est notre regard sur la façon de styliser le filtre de catégorie dans le module de portefeuille filtrable de Divi. Le filtre de catégorie comprend les mêmes outils de style que les autres éléments, il peut donc facilement être stylisé pour fonctionner avec n'importe quelle mise en page Divi. En ajoutant du CSS à la fois au module et à la page, nous pouvons styliser le filtre de catégorie de nombreuses façons uniques pour nous démarquer de la foule.

Nous voulons de vos nouvelles. Avez-vous stylisé votre filtre de catégorie dans le module Portfolio filtrable de Divi ? Dites-le nous dans les commentaires.