Divi est l’un des constructeurs de pages les plus populaires sur WordPress, connu pour sa flexibilité et ses fonctionnalités puissantes. Cependant, certains utilisateurs souhaitent aller plus loin en ajoutant des fonctionnalités avancées, comme un système de filtres pour leurs articles. Bien que Divi propose une grande variété d’outils, un système de filtres intégré n’est pas toujours évident à configurer.
Dans cet article, nous vous expliquons comment ajouter des filtres sur Divi de manière simple et efficace, en vous offrant deux approches possibles :
- Sans plugin : en utilisant le module Blog natif de Divi, accompagné de CSS et JavaScript pour ajouter des filtres fonctionnels à vos articles.
- Avec un plugin, Divi Pixel : pour ceux qui préfèrent une solution plus automatisée et prête à l’emploi.
Nous détaillerons les étapes pour chaque méthode et vous fournirons des exemples concrets de la manière de mettre en place ces filtres sur votre site Divi.
1. Configurer le module Blog pour avoir des filtres d’articles dans Divi
Étape 1 : Ajouter le module Blog
- Ouvrez une page Divi et ajoutez un nouveau module Blog à l’endroit où vous souhaitez afficher vos articles.
- Dans les paramètres du module Blog, définissez le style sur « Plein écran ». Ensuite, ajustez les colonnes, marges, et taille des images pour une grille esthétique. Personnalisez la typographie, les espaces et les ombres pour un rendu visuel optimal.
Étape 2 : Configurer les catégories
Assurez-vous que vos articles sont bien catégorisés. Vous pouvez créer des catégories comme Web, Création site, etc. Ces catégories seront utilisées pour filtrer les articles plus tard.
- Allez dans Articles > Catégories dans votre tableau de bord WordPress.
- Créez les catégories nécessaires pour votre contenu (par exemple, Web, Création site).
Étape 3 : Ajouter un peu de code CSS et JS pour les filtres
Dans les paramètres du module Blog, allez dans l’onglet Avancé, puis ajoutez le code suivant dans le CSS personnalisé :
.et_pb_post {
display: block;
}
.et_pb_post.hidden {
display: none; /* Cache les articles lorsque la classe 'hidden' est appliquée */
}
.et_pb_ajax_pagination_container {
display: flex;
flex-wrap: wrap;
}
.filter-button {
background-color: #4d486c; /* Définit la couleur de fond des boutons de filtre */
color: #fff; /* Définit la couleur du texte des boutons de filtre */
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s;
}
.filter-button:hover {
transform: translateY(-2px); /* Ajoute un léger effet de "montée" du bouton au survol */
}
.et_pb_posts .et_pb_post {
position: relative;
width: 31%; /* Définit la largeur de chaque article */
padding: 20px;
margin: 1%; /* Ajoute un petit espace entre les articles */
box-shadow: 0px 2px 18px 0px rgb(0 0 0 / 30%);
}
.et_pb_posts .et_pb_post .entry-title { /* Permet de restreindre le titre à 2 lignes, sans déborder */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
overflow: hidden;
height: 50px;
font-size: 26px;
}
@media (max-width: 981px) { /* mobile */
.et_pb_posts .et_pb_post {
width: 100%; /* Les articles occupent toute la largeur de l'écran */
margin: 3% 0px;
}
}Ce code CSS stylise les boutons de filtre et cache les articles qui ne correspondent pas à la catégorie sélectionnée.
Étape 4 : Ajouter le code JavaScript pour l’interaction des filtres
Ajouter un module Code de Divi, ajoutez ce JavaScript dans la section Code du module :
<script>
jQuery(document).ready(function($){
$('.filter-button').click(function(){
var filter = $(this).data('filter');
$('.et_pb_post').each(function(){
if(filter === 'all' || $(this).hasClass(filter)){
$(this).removeClass('hidden');
} else {
$(this).addClass('hidden');
}
});
});
});
</script>Ce code JavaScript permet aux boutons de filtre de fonctionner dynamiquement (il créera autant de boutons que vous avez de catégorie) : lorsqu’un utilisateur clique sur un bouton, les articles seront filtrés en fonction des catégories auxquelles ils appartiennent.
Étape 5 : Ajouter des boutons de filtre
Dans votre page Divi, vous devez maintenant ajouter les boutons de filtre pour permettre aux utilisateurs de trier les articles. Utilisez un 2eme module Code de Divi pour ajouter le code HTML suivant :
<div style="display: flex;">
<button class="filter-button" data-filter="all">Tous</button>
<button class="filter-button" data-filter="category-web">Web</button>
<button class="filter-button" data-filter="category-creation-site">Création site</button>
</div>
- Chaque bouton a un data-filter qui correspond à une catégorie spécifique d’articles.
- Personnalisez les noms des catégories avec les vôtres, le « data-filter » correspond au slug de vos catégories.
- Le bouton « Tous » permet d’afficher tous les articles sans filtrage.
Étape 6 : Tester le filtre Divi et ajuster le CSS ou HTML
Une fois le code ajouté, testez les filtres sur votre page pour vérifier que tout fonctionne correctement. Lorsqu’un utilisateur clique sur un bouton, les articles doivent se mettre à jour en fonction de la catégorie sélectionnée.
Exemple de rendu :
Voici à quoi pourrait ressembler le système de filtres une fois mis en place sur votre site Divi :
Pourquoi la maintenance de votre site web est indispensable
Assurer la fiabilité, la performance et l'adaptabilité de votre site est essentiel dans un environnement numérique en...
WordPress vs Webflow : Quel CMS choisir pour votre projet ?
Lorsque vous lancez un projet de site web, choisir le bon CMS est essentiel pour assurer la réussite et la pérennité...
L’importance de l’UX/UI pour booster les conversions sur un e-commerce
La réussite d’un site e-commerce repose largement sur l'expérience qu'il offre à ses utilisateurs. Cet article explore...
Les stratégies de marketing en ligne pour promouvoir votre site web et augmenter votre visibilité en 2024
Pourquoi le marketing en ligne est essentiel pour votre site web en 2024 ? En 2024, la concurrence en ligne est plus...
Entretien avec notre partenaire consultant marketing
Aujourd’hui nous recevons notre consultant marketing partenaire pour une présentation complète de son métier. Quel est...
Comment remplacer n’importe quel texte sur un site internet Divi
Dans ce tutoriel, nous allons vous montrer comment remplacer n'importe quel mot ou phrase de texte sur votre site Divi...
2. Configurer le module Pixel Filterable Grid pour avoir des filtres d’articles dans Divi avec Divi Pixel
Étape 1 : Ajouter le module Pixel Filterable Grid
Pour cette méthode, nous allons utiliser le module Pixel Filterable Grid de Divi Pixel, un plugin qui facilite, entre autres, l’ajout de filtres dynamiques sur vos articles et produits. Ce module est idéal pour ceux qui souhaitent une solution prête à l’emploi, sans avoir à manipuler le code.
- Installez l’extension Divi Pixel : Si vous n’avez pas encore installé Divi Pixel, vous pouvez le télécharger depuis le site officiel. Une fois téléchargé, installez et activez-le via le tableau de bord WordPress.
- Ajoutez le module Pixel Filterable Grid :
- Ouvrez la page où vous souhaitez afficher vos articles dans l’éditeur Divi.
- Ajoutez un nouveau module en cliquant sur le bouton « + ».
- Recherchez le module « Pixel Filterable Grid » et ajoutez-le à la page.
- Sélectionnez les catégories d’articles à afficher :
- Dans les paramètres du module, vous pouvez spécifier les catégories d’articles que vous souhaitez inclure dans la grille filtrable, Par défaut, les catégories Divi Pixel sont utilisées, mais elles peuvent être modifiées.
- Vous pouvez choisir de filtrer les articles par catégorie, tag, ou tout autre critère personnalisé. Ou même d’autres types de post que des articles (portfolio, projets, page et autres)
- Configurer les filtres :
- Le module vous permet d’ajouter facilement des boutons de filtres en fonction des catégories d’articles. Chaque bouton appliquera un filtre pour n’afficher que les articles correspondants.
- Vous pouvez également personnaliser le style des boutons de filtre, la disposition de la grille, et d’autres options de mise en page pour que l’interface soit cohérente avec le design de votre site.
Étape 2 : Personnalisation du style de la grille et des filtres
Une fois le module ajouté et configuré, vous pouvez personnaliser l’apparence de la grille filtrable :
- Disposition de la grille : Vous pouvez choisir la disposition des articles en grille (nombre de colonnes, taille des images, etc.). Divi Pixel offre une grande flexibilité pour ajuster l’affichage en fonction de la taille de l’écran.
- Paramètres de filtre : Vous pouvez personnaliser l’affichage des filtres sous forme de boutons, que vous pouvez styliser selon vos préférences (couleur, taille, etc.).
- Styles de filtres et animation : En plus de la personnalisation des boutons de filtre, vous pouvez ajouter des animations pour les rendre plus interactifs. Cela inclut des effets de survol pour dynamiser l’interaction avec les utilisateurs et améliorer l’expérience visuelle.
Étape 3 : Tester et ajuster
Une fois que vous avez configuré le module Pixel Filterable Grid, testez-le sur différents appareils pour vous assurer que les filtres et la grille d’articles sont affichés correctement. Vous pouvez ajuster la réactivité de la grille pour que l’affichage soit adapté aux écrans de bureau, tablettes et mobiles.
Voici quelques éléments à vérifier :
- Filtres fonctionnels : Assurez-vous que les filtres fonctionnent correctement en affichant uniquement les articles correspondants.
- Affichage sur mobile : Vérifiez que la grille est bien responsive et s’adapte à différentes tailles d’écran. (« Contenu » > « Grid » > « Columns » pour mobile)
- Bouton « Load More » : Vérifiez que le bouton « Load More », soit bien configuré pour parcourir plus d’articles.
Exemple de rendu :
Une fois le module configuré, voici à quoi pourrait ressembler votre grille filtrable sur Divi :
Conclusion : Offrez une meilleure expérience utilisateur avec des filtres personnalisés Divi
En ajoutant un système de filtres sur votre site Divi, vous améliorez non seulement la navigation et l’accessibilité, mais vous offrez aussi à vos utilisateurs un moyen simple de trouver le contenu pertinent. Que vous choisissiez de le faire sans plugin, en utilisant du CSS et du JavaScript, ou que vous optiez pour une solution plus simple avec Divi Pixel, vous pouvez personnaliser facilement votre site pour répondre aux besoins de vos utilisateurs.
Optimisez votre site Divi dès aujourd’hui en ajoutant ces filtres personnalisés pour une meilleure expérience utilisateur et des conversions accrues. Si vous avez des questions ou souhaitez personnaliser davantage votre site, contactez-nous chez OpenMyDiv. Nous serons ravis de vous accompagner dans vos projets de personnalisation Divi.
