{"id":349453,"date":"2022-06-12T11:21:37","date_gmt":"2022-06-12T11:21:37","guid":{"rendered":"https:\/\/www.lafactory.online\/?p=349453"},"modified":"2022-06-12T11:21:41","modified_gmt":"2022-06-12T11:21:41","slug":"divi-plugin-highlight-divi-filter-2","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/divi-plugin-highlight-divi-filter\/","title":{"rendered":"Divi Plugin Highlight: Divi Filter"},"content":{"rendered":"<div id=\"post-153781\">\n<p>Divi Filter is a third-party plug for Divi that adds some unique filtering options to your Divi website. It lets you use any Divi module as a filter, and any module can be included in the filtered results. There are two versions of the plugin: free and premium. The premium version has the best features, but you can do a lot with the free version. In this Divi plugin highlight, we\u2019ll look at the free version of Divi Filter and see what it can do to help you decide if it\u2019s the right plugin for your needs.<\/p>\n<h2>Installing Divi Filter<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Installing-Divi-Filter.png\" alt=\"Installing Divi Filter\" width=\"960\" height=\"261\" class=\"with-border aligncenter size-full wp-image-153907\"><\/p>\n<p>Upload and activate the plugin as normal.<\/p>\n<p>Go to:<\/p>\n<ul>\n<li>Plugins in the WordPress dashboard<\/li>\n<li>Select Upload Plugin<\/li>\n<li>Click Choose File and navigate to your plugin<\/li>\n<li>Select Install Now<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Installing-Divi-Filter-2.png\" alt=\"Installing Divi Filter\" width=\"960\" height=\"371\" class=\"with-border aligncenter size-full wp-image-153906\"><\/p>\n<p>Once the plugin is activated, you\u2019ll see a popup with the option to receive security alerts, information about feature updates, and allow non-sensitive diagnostic tracking. Simply select Allow and Continue or Skip to close the popup.<\/p>\n<h2>Using Divi Filter<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Using-Divi-Filter.png\" alt=\"Using Divi Filter\" width=\"960\" height=\"267\" class=\"with-border aligncenter size-full wp-image-153915\"><\/p>\n<p>Divi Filter doesn\u2019t add modules or features to the Divi elements. The filters are added manually with CSS classes.<\/p>\n<p>This can be confusing at first (especially if you\u2019re like me and just want to jump in and start exploring the features. I tend to dive in headfirst and read the instructions later). Fortunately, it does have well-written documentation that steps you through it. Once you\u2019ve gone through it once it makes sense and becomes more intuitive.<\/p>\n<p>Divi Filter works by filtering the categories that you create. The steps for adding the filter are simple:<\/p>\n<ol>\n<li>Create a trigger for the filter by adding a CSS class. The trigger can be buttons, images, etc. You\u2019ll add a category name to the class. The category names can be anything you want.<\/li>\n<li>Create a new section and add a CSS class.<\/li>\n<li>Add the modules to the columns you want to filter in the new section.<\/li>\n<li>Add CSS classes to the columns that contain the categories you want to filter. The categories match the triggers.<\/li>\n<\/ol>\n<h3>Thoughts on the manual process<\/h3>\n<p>Even though this is a manual process, it\u2019s not difficult to use. We can use any Divi module. This opens a lot of possibilities. We can use the modules in any combination. Anything in the column will be included in the filter results.<\/p>\n<p>This allows us to filter maps, toggles, forms, text modules, menus, pricing tables, comments, buttons, code, audio, etc. Since the filter itself is made with Divi modules, we can style them any way we\u2019d like and use code, CSS, etc.<\/p>\n<h2>Creating a Filter<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Creating-a-Filter.png\" alt=\"Creating a Filter\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153904\"><\/p>\n<p>For my first example, I\u2019ve created articles for a help center using the contact page from the Meal Kit layout. Buttons are used for the filter and toggles are used for the information. The toggles can include any type of content such as written tutorials, videos, etc. I\u2019ve added the button class to the Advanced tab. I\u2019ve also added a class with the category. In this case, the category is Themes.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Creating-a-Filter-2.png\" alt=\"Creating a Filter\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153898\"><\/p>\n<p>Next, I\u2019ve added the CSS class to the section that contains the toggles I want to filter.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Creating-a-Filter-3.png\" alt=\"Creating a Filter\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153899\"><\/p>\n<p>Finally, I\u2019ve added the category class to each column. Each of the toggles matches the topic of the column I\u2019ve placed them in.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Creating-a-Filter-4.png\" alt=\"Creating a Filter\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153900\"><\/p>\n<p>Now, when I click on one of the buttons that category is displayed, and all other categories are removed. I can also create a way to bring them back. The pro version will restack them so you\u2019d see multiple columns.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Creating-a-Filter-5.png\" alt=\"Creating a Filter\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153901\"><\/p>\n<p>I\u2019ve added a new button that will turn the filter off and display all categories. For this, I\u2019ve added the button class to the CSS Class field, but I did not include a category class. Without the category specified, the button will trigger all categories.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Creating-a-Filter-6.png\" alt=\"Creating a Filter\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153902\"><\/p>\n<p>To demonstrate the All button, I clicked a button to filter the categories. I\u2019ve clicked the Plugin filter, so the Plugin category is now displayed.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Creating-a-Filter-7.png\" alt=\"Creating a Filter\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153903\"><\/p>\n<p>Selecting All shows every category again. This is an easy way to remove the filter and let the user see all of the columns.<\/p>\n<h2>Another Divi Filter Example<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153897\"><\/p>\n<p>For this example, I wanted to create a filter with just text. The filter will display choices based on the most popular, best deal, and latest filter options. I\u2019ve added the CSS classes to the text modules. The first only includes the button class so it will display all the columns.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example-2.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153890\"><\/p>\n<p>In this image, I\u2019ve added the button class and the category class to the Most Popular text module. I\u2019ll also add the classes to the other two text modules.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example-3.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153891\"><\/p>\n<p>Next, I\u2019m adding the CSS classes to each column. Each column contains one blurb. The filter will display just one of the three blurbs.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example-4.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153892\"><\/p>\n<p>Finally, I\u2019m adding the df-area CSS class to the section that contains the blurbs.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example-5.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153893\"><\/p>\n<p>Clicking any one of the text modules displays the blurb for that category. The other two blurbs are now hidden.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example-6.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153894\"><\/p>\n<p>Clicking See All brings them back.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example-7.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153895\"><\/p>\n<p>I decided to experiment and add multiple categories to each column. Sometimes an element needs to be listed under multiple categories. This is certainly the case when your filter includes terms such as the latest or best deals.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Another-Divi-Filter-Example-8.png\" alt=\"Another Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153896\"><\/p>\n<p>Divi Filter worked exactly as expected. I added two categories to each column and now each of the filters displays two columns rather than one.<\/p>\n<h2>Third Divi Filter Example<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Third-Divi-Filter-Example.png\" alt=\"Third Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153914\"><\/p>\n<p>For my third Divi Filter example, I wanted to continue my train of thought from the previous example, but I wanted to get a little more complex. I\u2019ll create a recipe list with text modules as the triggers. This will include multiple categories and I\u2019m adding them to the columns in various combinations. This example uses the Recipes page from the Meal Kit Divi layout pack. I\u2019ve added the proper CSS classes to the text modules.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Third-Divi-Filter-Example-2.png\" alt=\"Third Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153908\"><\/p>\n<p>The section includes the Area class. I\u2019m using images for the filtered items.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Third-Divi-Filter-Example-3.png\" alt=\"Third Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153909\"><\/p>\n<p>I\u2019ll add multiple categories to each column. Of course, in real life, the items will have to match those categories. I\u2019m choosing images at random for the screenshot.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Third-Divi-Filter-Example-4.png\" alt=\"Third Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153910\"><\/p>\n<p>Here\u2019s the page showing all recipes. This one is set to three columns.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Third-Divi-Filter-Example-5.png\" alt=\"Third Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153911\"><\/p>\n<p>Here\u2019s the page with a filter selected. It filters one column.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Third-Divi-Filter-Example-6.png\" alt=\"Third Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153912\"><\/p>\n<p>I added more columns to have more category combinations.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/Third-Divi-Filter-Example-7.png\" alt=\"Third Divi Filter Example\" width=\"960\" height=\"469\" class=\"with-border aligncenter size-full wp-image-153913\"><\/p>\n<p>My result displays four columns with one filter selected. Of course, I\u2019d have to be careful in choosing these categories, but I think this works to get the point across. It doesn\u2019t matter how many columns you have, what modules are in them, or how many modules you have. The filter works the same regardless.<\/p>\n<h2>How to Get Divi Filter<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lafactory.com\/blog\/wp-content\/uploads\/2021\/10\/How-to-Get-Divi-Filter.png\" alt=\"How to Get Divi Filter\" width=\"961\" height=\"542\" class=\"with-border aligncenter size-full wp-image-153905\"><\/p>\n<p>Divi Filter is available for free in the Divi Marketplace. The free version only filters columns, but you can do a lot with this version.<\/p>\n<p>The premium version adds the filter to rows, filter animations, dropdown filters, unlimited filters on all pages, and more. These features will expand what you can filter, and the animations give it a polished look.<\/p>\n<p>The pro version starts at 19\u20ac. You can upgrade to the pro version within the free plugin, so you can try the free version and upgrade to the pro version at any time. There are several layouts available in the pro version to get you started. You can also purchase them separately.<\/p>\n<h2>Ending Thoughts on Divi Filter<\/h2>\n<p>That\u2019s our look at Divi Filter. You do have to create the filters manually. Fortunately, it\u2019s not difficult and this does give you a lot of control. Once you\u2019ve stepped through it once it\u2019s easy enough to use without putting too much thought into it. I like the way it works because anything can be used as the trigger and anything can be placed in the columns. The content makes no difference. This sets it apart from the standard content filter.<\/p>\n<p>These examples only cover what can be done in the free version. The pro version does give you more control and more elements you can apply the filters to. I highly recommend trying the free version to see if it can do what you need and then upgrading if you like using the plugin.<\/p>\n<p><strong>We want to hear from you. Have you tried Divi Filter? Let us know what you think about it in the comments below. <\/strong><\/p>\n<p><em>Featured Image via H12 \/&nbsp;shutterstock.com<\/em><\/p>\n<p><span class=\"et_social_bottom_trigger\"><br \/>\n<\/span><\/p>\n<\/div>\n<p><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/divi-plugin-highlight-divi-filter\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Divi Filter is a third-party plug for Divi that adds some unique filtering options to your Divi website. It lets you use any Divi module as a filter, and any module can be included in the filtered results. There are two versions of the plugin: free and premium. The premium version has the best features, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":349454,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1522],"tags":[],"class_list":["post-349453","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-en"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/349453","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=349453"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/349453\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media\/349454"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=349453"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=349453"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=349453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}