Point culminant du plugin Divi : Filtre Divi

Divi Filter est un plug-in tiers pour Divi qui ajoute des options de filtrage uniques à votre site Web Divi. Il vous permet d'utiliser n'importe quel module Divi comme filtre, et n'importe quel module peut être inclus dans les résultats filtrés. Il existe deux versions du plugin : gratuite et premium. La version premium a les meilleures fonctionnalités, mais vous pouvez faire beaucoup avec la version gratuite. Dans ce point culminant du plugin Divi, nous examinerons la version gratuite de Divi Filter et verrons ce qu'il peut faire pour vous aider à décider s'il s'agit du bon plugin pour vos besoins.

Installer le filtre Divi

Téléchargez et activez le plugin comme d'habitude.

Aller à:

• Plugins dans le tableau de bord WordPress
• Sélectionnez Télécharger le plugin
• Cliquez sur Choisir un fichier et accédez à votre plugin
• Sélectionnez Installer maintenant

Une fois le plugin activé, vous verrez une fenêtre contextuelle avec la possibilité de recevoir des alertes de sécurité, des informations sur les mises à jour des fonctionnalités et d'autoriser un suivi de diagnostic non sensible. Sélectionnez simplement Autoriser et continuer ou Ignorer pour fermer la fenêtre contextuelle.

Utiliser le filtre Divi

Divi Filter n'ajoute pas de modules ou de fonctionnalités aux éléments Divi. Les filtres sont ajoutés manuellement avec des classes CSS.

Cela peut être déroutant au début (surtout si vous êtes comme moi et que vous voulez juste vous lancer et commencer à explorer les fonctionnalités. J'ai tendance à plonger la tête la première et à lire les instructions plus tard). Heureusement, il a une documentation bien écrite qui vous guide à travers elle. Une fois que vous l'avez parcouru, cela a du sens et devient plus intuitif.

Divi Filter fonctionne en filtrant les catégories que vous créez. Les étapes pour ajouter le filtre sont simples :

1. Créez un déclencheur pour le filtre en ajoutant une classe CSS. Le déclencheur peut être des boutons, des images, etc. Vous ajouterez un nom de catégorie à la classe. Les noms de catégorie peuvent être tout ce que vous voulez.
2. Créez une nouvelle section et ajoutez une classe CSS.
3. Ajoutez les modules aux colonnes que vous souhaitez filtrer dans la nouvelle section.
4. Ajoutez des classes CSS aux colonnes qui contiennent les catégories que vous souhaitez filtrer. Les catégories correspondent aux déclencheurs.

Réflexions sur le processus manuel

Même s'il s'agit d'un processus manuel, il n'est pas difficile à utiliser. On peut utiliser n'importe quel module Divi. Cela ouvre beaucoup de possibilités. Nous pouvons utiliser les modules dans n'importe quelle combinaison. Tout ce qui se trouve dans la colonne sera inclus dans les résultats du filtre.

Cela nous permet de filtrer les cartes, les bascules, les formulaires, les modules de texte, les menus, les tableaux de prix, les commentaires, les boutons, le code, l'audio, etc. Étant donné que le filtre lui-même est composé de modules Divi, nous pouvons les styliser comme nous le souhaitons et utiliser du code, CSS, etc.

Création d'un filtre

Pour mon premier exemple, j'ai créé des articles pour un centre d'aide à l'aide de la page de contact de la mise en page Kit repas. Les boutons sont utilisés pour le filtre et les bascules sont utilisées pour les informations. Les bascules peuvent inclure tout type de contenu tel que des didacticiels écrits, des vidéos, etc. J'ai ajouté la classe de bouton à l'onglet Avancé. J'ai également ajouté une classe avec la catégorie. Dans ce cas, la catégorie est Thèmes.

Ensuite, j'ai ajouté la classe CSS à la section qui contient les bascules que je souhaite filtrer.

Enfin, j'ai ajouté la classe de catégorie à chaque colonne. Chacune des bascules correspond au sujet de la colonne dans laquelle je les ai placées.

Maintenant, lorsque je clique sur l'un des boutons, cette catégorie s'affiche et toutes les autres catégories sont supprimées. Je peux aussi créer un moyen de les ramener. La version pro les réempilera pour que vous voyiez plusieurs colonnes.

J'ai ajouté un nouveau bouton qui désactivera le filtre et affichera toutes les catégories. Pour cela, j'ai ajouté la classe de bouton au champ Classe CSS, mais je n'ai pas inclus de classe de catégorie. Sans la catégorie spécifiée, le bouton déclenchera toutes les catégories.

Pour illustrer le bouton Tout, j'ai cliqué sur un bouton pour filtrer les catégories. J'ai cliqué sur le filtre Plugin, donc la catégorie Plugin est maintenant affichée.

La sélection de Tout affiche à nouveau chaque catégorie. C'est un moyen facile de supprimer le filtre et de permettre à l'utilisateur de voir toutes les colonnes.

Un autre exemple de filtre Divi

Pour cet exemple, je voulais créer un filtre avec uniquement du texte. Le filtre affichera les choix en fonction des options de filtre les plus populaires, les meilleures offres et les dernières. J'ai ajouté les classes CSS aux modules de texte. Le premier n'inclut que la classe de bouton, il affichera donc toutes les colonnes.

Dans cette image, j'ai ajouté la classe de bouton et la classe de catégorie au module de texte le plus populaire. Je vais également ajouter les classes aux deux autres modules de texte.

Ensuite, j'ajoute les classes CSS à chaque colonne. Chaque colonne contient un texte de présentation. Le filtre n'affichera qu'un seul des trois textes de présentation.

Enfin, j'ajoute la classe CSS df-area à la section qui contient les textes de présentation.

Cliquer sur l'un des modules de texte affiche le texte de présentation de cette catégorie. Les deux autres textes de présentation sont maintenant masqués.

Cliquer sur Voir tout les ramène.

J'ai décidé d'expérimenter et d'ajouter plusieurs catégories à chaque colonne. Parfois, un élément doit être répertorié dans plusieurs catégories. C'est certainement le cas lorsque votre filtre inclut des termes tels que les dernières ou les meilleures offres.

Divi Filter a fonctionné exactement comme prévu. J'ai ajouté deux catégories à chaque colonne et maintenant chacun des filtres affiche deux colonnes au lieu d'une.

Troisième exemple de filtre Divi

Pour mon troisième exemple de filtre Divi, je voulais continuer mon raisonnement de l'exemple précédent, mais je voulais devenir un peu plus complexe. Je vais créer une liste de recettes avec des modules de texte comme déclencheurs. Cela inclura plusieurs catégories et je les ajoute aux colonnes dans diverses combinaisons. Cet exemple utilise la page Recettes du pack de mise en page Meal Kit Divi. J'ai ajouté les classes CSS appropriées aux modules de texte.

La section comprend la classe Area. J'utilise des images pour les éléments filtrés.

Je vais ajouter plusieurs catégories à chaque colonne. Bien sûr, dans la vraie vie, les articles devront correspondre à ces catégories. Je choisis des images au hasard pour la capture d'écran.

Voici la page présentant toutes les recettes. Celui-ci est réglé sur trois colonnes.

Voici la page avec un filtre sélectionné. Il filtre une colonne.

J'ai ajouté plus de colonnes pour avoir plus de combinaisons de catégories.

Mon résultat affiche quatre colonnes avec un filtre sélectionné. Bien sûr, je devrais être prudent dans le choix de ces catégories, mais je pense que cela fonctionne pour faire passer le message. Peu importe le nombre de colonnes que vous avez, les modules qu'elles contiennent ou le nombre de modules que vous avez. Le filtre fonctionne de la même façon.

Comment obtenir un filtre Divi

Divi Filter est disponible gratuitement sur le Divi Marketplace. La version gratuite ne filtre que les colonnes, mais vous pouvez faire beaucoup avec cette version.

La version premium ajoute le filtre aux lignes, aux animations de filtre, aux filtres déroulants, aux filtres illimités sur toutes les pages, etc. Ces fonctionnalités élargiront ce que vous pouvez filtrer et les animations lui donneront un aspect soigné.

La version pro démarre à 19€. Vous pouvez passer à la version pro dans le plugin gratuit, vous pouvez donc essayer la version gratuite et passer à la version pro à tout moment. Il existe plusieurs mises en page disponibles dans la version pro pour vous aider à démarrer. Vous pouvez également les acheter séparément.

Mettre fin aux pensées sur Divi Filter

C'est notre regard sur Divi Filter. Vous devez créer les filtres manuellement. Heureusement, ce n'est pas difficile et cela vous donne beaucoup de contrôle. Une fois que vous l'avez parcouru, il est assez facile à utiliser sans trop y penser. J'aime la façon dont cela fonctionne car tout peut être utilisé comme déclencheur et tout peut être placé dans les colonnes. Le contenu ne fait aucune différence. Cela le distingue du filtre de contenu standard.

Ces exemples ne couvrent que ce qui peut être fait dans la version gratuite. La version pro vous donne plus de contrôle et plus d'éléments auxquels vous pouvez appliquer les filtres. Je recommande fortement d'essayer la version gratuite pour voir si elle peut faire ce dont vous avez besoin, puis de mettre à niveau si vous aimez utiliser le plugin.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Filter ? Faites-nous savoir ce que vous en pensez dans les commentaires ci-dessous.

Image en vedette via H12 / shutterstock.com