Divi Plugin Highlight: Divi FilterGrid

Posted on September 8, 2019 by in Divi Resources | 16 comments

Divi Plugin Highlight: Divi FilterGrid

Divi FilterGrid is a third-party plugin that adds a new filterable module to the Divi Builder. It can display posts from any custom post type and create custom filters to display them according to any taxonomy you choose. Display blog posts, projects, products, create galleries, and much more.

In this plugin highlight, we’ll take a look at Divi FilterGrid, see what it can do, and see how easy it is to use. You can purchase the plugin from the developer’s website.

Divi FilterGrid Module

The Divi FilterGrid module is added to the Divi Builder. The icon is in color and stands out from the rest.

Divi FilterGrid Content Tab

The Content tab adds a lot of features. They include post elements, query options, filter options, pagination options, and background to adjust all of the background colors. It also includes the standard link and admin label options.

Post Elements

The Post Elements options let you show or hide the featured image and then determine the thumbnail action. You can link to the post, show the image in a lightbox, in a lightbox gallery, show the post in a popup, or open a custom lightbox gallery. For this example, I’m showing the post in a popup.

This one opens the image in a lightbox gallery. The reader can select the arrows to see the featured images of all the posts. Clicking the post title still opens the post in the same tab.

You can also change the overlay color, icon, and icon color. I’ve customized each of these in the image above. You can also show the title, add the link to the title, add an excerpt, limit the excerpt character-count, show a read more button, add custom fields, and more. I’ve added an excerpt and disabled the post meta.

Query Options

Query Options let you choose the query type from Basic, Advanced, and Custom. Choose the categories, post number, offset number, and order by options. I’ve chosen one category in this example.

The Advanced options give you several new features. Select specific post types, taxonomies, terms, and exclude terms and taxonomies. You can also show private posts and sticky posts. In the example above, I’m setting a taxonomy. It lets me choose the specific categories or tags I want to use and then specify their relationship to the search term. The child terms work the same way. This allows you to get extra detailed and not just show posts based on categories or tags. You can also set post number and order options for taxonomies.

The Custom query type allows you to use custom content. It provides a link to documentation where you can learn how to set this up. Custom queries are done with code in the functions.php file. The documentation includes several examples to step you through it.

Filters Options

The Filters Options allow you to filter the grid by search terms. Select the default filter and you’ll see a modal where you can choose categories and tags for posts and projects. You can also set the order and filter by ID, name, or a custom order. For the custom order, you’ll see a box where you can enter the values separated by commas.

Pagination Options

The Pagination Options allow you to choose the pagination type. Choose from paged, a load more button, or to load more on scroll. For the paged option you can choose the arrows, text, and the number of pages that shows in the links. I’ve added text and changed the arrows in this example.

Background

The Background settings let you customize the backgrounds of the grid, filters, active filter, pagination, and active pagination. It also includes the standard background options you’d expect in a Divi module. In the example above, I’ve adjusted the background colors for the filter, grid, and pagination.

Divi FilterGrid Design Tab

The Design tab provides customizations for the layout options, post title text, post meta data text, post content text, filters text, pagination text, read more button, load more button, and all of the standard Divi module options.

Layout Options

The Layout Options let you select a layout, a skin, set the items width, the column and row gutter size, and the grid font size. I’ve decreased the items width, removed the gutter, and selected Midnight for the skin. I’ve also reduced the font size.

This is Left Vertical Filters. It places the filters in a vertical stack to the left side. I’ve increased the items width so the images are larger.

This is Items in Overlay. The posts are shorter in this option.

Zoom Image shows each image with an overlay and the title in the center. The image zooms on hover.

Library shows the cards with a border and places the title above the image.

This is the List layout using the default skin.

This is Fullwidth. It places the title, meta, and excerpt at the bottom of the image.

Divi FilterGrid Module Advanced Tab

The Advanced tab adds 15 Custom CSS fields for just about every element within the module. CSS users won’t have any trouble targeting specific elements to customize.

Divi FilterGrid Module Styling

The layout options can create some interesting designs. In this example, I’ve reduced the width so they show in a single row. I’ve also removed the meta and excerpt.

For this one, I increased the items width. This creates a nice mosaic gallery design.

In this one, I’ve added the title, all of the meta, the excerpt, and the read more button. I’ve changed the color of the title, made it all caps, increased the size, centered it, and increased the character spacing. I’ve also reduced the size of the read more button and styled the text white.

There are lots of styling options for the read more button. For this one, I’ve gone back to the default size but made the text light in weight. I’ve rounded the edges and gave it a background gradient.

It doesn’t display in the editor mode, but you can also add an image to the button. You can add the image by itself, with a solid overlay, or with a gradient overlay. In this example, I’ve added the image behind my green gradient.

The post meta data text adjusts all of the post meta together. I’ve changed the color and line spacing.

The filters text lets you style the font for the filter. I’ve increased the size of the font, changed the color, and added a shadow effect. The default filter style has a different color for the selected filter. You can adjust that separately in the backgrounds option in the Content tab.

In this example, I’m adjusting the pagination text. I’ve changed the color, increased the size, added some character spacing, and added a shadow. I’ve also adjusted the blur strength.

The load more button also includes the basic styling options. I’m using the default text (it can be changed in the content tab). I’ve also set the text to white (it’s green by default).

I’ve increased the font size, added character spacing, adjusted the border, added a gradient, and disabled only showing the icon on hover.

Divi FilterGrid and Custom Post Types

I found it easy to use with custom post types. In the query options, click Select Post Types and then select the post type from the modal.

It still shows the original filter, but you can create your own or disable it. In the filter options, click filter taxonomies and choose your taxonomies from the list. Click Set Values.

I now have a custom filter for my WooCommerce products.

I now have a WooCommerce product module that I can style to my heart’s content.

Divi FilterGrid Blog Example

For this example I’ve replaced the blog module from the Dog Walker layout blog page. I styled it to match the colors, font styles, and the rounded corners for the posts. I then added WooCommerce products to appear within the blog list. This is a great way to add various types of content within your blog stream.

The result looks amazing. It creates a filterable blog, or you can disable the filter and just show the content.

Divi FilterGrid Module Documentation and price

Documentation is available at the developer’s website. Click the buttons to see specific information about advanced features. You can visit the FAQ page or submit a support ticket from here. You can also click on the question mark for every feature in the module to see an explanation of how to use it.

There are four options to purchase Divi FilterGrid:

  • Single Site – $19
  • 5 sites – $39
  • Unlimited Sites – $59
  • Lifetime Unlimited Sites – $129

You can purchase the plugin from the developer’s website.

Ending Thoughts

Divi FilterGrid is an interesting plugin. It’s an excellent module for displaying different types of content. You can display practically any post type and display multiple post types together. The filtering options can be as complex as you want them to be.

I love having the color adjustment options for the backgrounds. Having the color options in the Content tab means that color options are in two different locations. I do think it would be a touch more intuitive if those color adjustments were moved to the Design tab. It is nice, though, to be able to customize the colors independently.

I found it to be highly intuitive. I do recommend exploring to see all of the options. If you’re interested in adding a powerful filtered grid to display your post types, Divi FilterGrid is an easy plugin to recommend.

We want to hear from you. Have you tried Divi FilterGrid? Let us know what you think about it in the comments.

Featured Image via Thepanyo / shutterstock.com

Premade Layouts

Check Out These Related Posts

13 Industrial Child Themes for Divi

13 Industrial Child Themes for Divi

Posted on November 17, 2019 by in Divi Resources

Industrial websites are technology-based and include lots of science and engineering and can include anything from manufacturing robots to building a home. Divi is a great choice for building industrial websites because everything you need to show services, projects, products, introduce clients to...

View Full Post

16 Comments

  1. Can you filter by post author?

    • Hi John! You can filter on any taxonomy and term. Unfortunately the post author is neither. You can create a custom query that would allow you to query a specific author or multiple authors, but the filters can not currently be generated with author names.

      I can see how this would be very helpful though. We’ll look into it and see if we can add this as a feature.

      As a workaround, you can create a global module with your author filter buttons. Each button will link to an author page that you would need to create. Each author will have his/her own page. On each author page, you could then display this global module and below that display posts from that author using our plugin. Our Custom Query option allows you to create a different custom query for different pages.

      We’ll look into adding author filters to make this much easier, but depending on how many different authors you have on your site, the workaround above might not be a bad option.

  2. This is really close to Portfolio Posts Pro, another plugin by Divi Plugins. So close, that I’m confused why a second plugin was created and the first wasn’t extended. Since the settings layout is a bit different it was hard to inventory and compare, but they are pretty darn similar. I’d love to hear what use cases were better for each one.

    • Hi Jules! That’s a great question and probably something we could do a much better job conveying on our site. We’re really good at building plugins. Marketing, not so much 🙂

      Portfolio Posts Pro basically copies the existing portfolio modules in Divi and adds additional functionality and features. But a lot of the HTML and CSS are borrowed from the original portfolio modules in Divi. Because of this, we were limited in what we could do with the plugin.

      Divi FilterGrid has similar features and functionality, but it’s built from the ground up. All of the HTML and CSS is independent of Divi’s existing portfolio modules. This allowed us to do a lot of things we couldn’t do in Portfolio Posts Pro like:
      – Build the layout on CSS Grid, an extremely flexible framework that makes it easy to modify the position and order each element within each grid item (and the grid itself). The entire layout is built using multiple CSS grids.
      – Add AJAX filters and pagination, including a load more button and load on scroll option
      – Add Skin options. Because the layout is built on CSS Grid, it’s really easy to make dramatic layout changes using CSS only
      – Make it easy to change the number of columns in the grid using a slider in the module’s settings
      – Add more control over the query and filters, allowing more complex solutions

      Hopefully this makes it a little more clear why Divi FilterGrid is different! It would have been impossible to extend our other plugin with all of these features without breaking existing layouts. And the first question we ask ourselves when adding a feature is “Will this break existing layouts?” If yes, we find another way.

      • Brad – Thank you for the clarification. That was really helpful!

  3. This plugin/new feature looks very promising. But like so many wonderful new Divi features and elaborate explanations how to use them, the upfront summary is awful at providing a quick overview of why a reader should care. Yes, the concept of a better filter is very appealing. But I want to see a quick summary of the feature in practice before I read on. Perhaps most other readers are more sophisticated than me and can immediately understand what a new feature is about. Alas, if many such readers exist, I am not one of them.

  4. Divi FilterGrid is really good. I am using it on my website for a couple of months now. It really stands out from the rest as you said.

    • Thanks John! Glad you like the plugin.

  5. Hi Brown
    In the pro version would it be possible to only display the image without the click through? We wanted to use this plugin for a staff rotator but they dont want to click through to individual content (assuming that by not having an archive this would be disabled but not sure).

    Would we also be able to have the text in a custom field (what drives the custom field functionality?) that has all the text for each staff member on the slider OR would we need to change the WordPress limitations on how long a excerpt goes for.
    Sorry for all the questions, just want to make sure I understand everything.

    • Hi Steve. I believe you may be referring to our Owl Carousel plugin? If so, yes you can display images without linking to anything. And yes with all of our plugins that display posts and custom post types, you can display an excerpt, custom fields, or custom content from each post. Please visit our site and click on Support -> Email Us if you have any other pre-sales questions.

  6. Hello,
    and thank you for this article.

    Is it possible with the plugin to use different posts of different taxonomies in one query? For example 3 posts of a certain category and at the 4th place a single post with a special custom taxonomy (if available – otherwise at the 4th place also a normal post)?

  7. I would like to know those answers too, following. Thanks!~

  8. Thanks Randy for taking the time to review our plugin! It’s hard to keep up with comments on here so if anyone has any questions, please hop over to our site and shoot us a message.

  9. Hey, I bought this plugin and have to say i have not been disappointed. Great review BTW.

  10. This plugin really looks promising! It really could be the answer for a feature I missed in Divi, yet. I guess, I’ll give it a try 🙂
    Thanks for the review!

  11. Hi, can you filter by date?

Join To Download Today

Pin It on Pinterest