Customizing Overview
Many of the customization options available in the Divi FilterGrid plugin can be found right from within the module settings. Whether you need to change the image size, create an advanced query, add custom fields, or change the number of columns in the grid. All of this can easily be done in the module settings.
But some changes are more complex and require a different approach. For more advanced customization, we’ve added filters that allow you to customize every piece of the Divi FilterGrid puzzle. These filters can be broken into seven sections:
- Query
- Filters
- Elements
- Content
- Lightbox
- Popup
- Loader
Query
Divi FilterGrid offers three query types: Basic, Advanced, and Custom. The Basic query type is extremely easy to use but is limited to posts and post categories. Categories can be selected from within the module.
The Advanced query type is more complex, but is also configured within the module settings. This query type will allow you to select any post type, taxonomy, and term and multiple of each. It also has options to exclude specific taxonomies and terms.
The last query type is the Custom query. This option allows you to create incredibly complex and unique queries by defining the query arguments yourself. To enable the Custom query option, you’ll need to select the “Custom” option in the Query Type dropdown located within the Query Options section in the module settings. Once this option is turned on, you’ll then need to use the Custom Query Filter to define your query arguments.
Filters
The filters displayed at the top or left side of the grid in Divi FilterGrid can also be defined in the module settings or manually using the Custom Filters filter. By default, the filters will display all post categories. To change this, you’ll need to change the Query Type option from Basic to Advanced in the dropdown. This option located within the Query Options section in the module settings.
Once the Query Type is changed to Advanced, scroll down to the Filters Options section where you’ll now options for selecting the taxonomy and terms you would like to use to populate the filters.
There is also a Custom Filters filter that will allow you to manually define the filters you would like to use.
Elements
Divi FilterGrid makes is easy to customize the output of each grid item by simply turning each element off or on in the module settings. For example, you can independently choose whether or not to display the image, overlay, title, meta, excerpt, read more button, etc. Some elements also have additional options in the module settings to control the output.
We also make it really easy to display custom fields from within the module, the order you would like to display the custom fields, and whether or not to display a label or simply the value of the field.
Finally, we have added hooks to each element that allow you modify, replace, or add to each element in the grid. Each element has its own filter and you can read more about those in the Custom Elements documentation page.
Content
The last customization filter we’ve added is the Custom Content filter. To use this filter, you’ll need to turn on the Custom Content option found at the bottom of the Post Elements section within the module settings. Once this option is turned on, you can add any content to the bottom of the module using the Custom Content filter. Better yet, you can then utilize CSS Grid to place your custom content anywhere within the grid item: above the image, on top of the image, below the title, etc. To read more about the Custom Content filter and what you can do with it, please review the Custom Content documentation page.
Lightbox
There are three types of lightboxes available in the Divi FilterGrid plugin: lightbox, lightbox gallery, and custom lightbox gallery. All three options can be chosen in the Click Action option at the top of the module settings
The Lightbox option will open the featured image in a lightbox popup window when clicked. The Lighbox Gallery option will also open the featured image in a lightbox window and will add a left and right arrow to view the previous and next images from the grid.
The Custom Lightbox Gallery option will load a custom image or custom gallery of images. These images can either be loaded from a custom field defined in the module settings below the Cilck Action option or using the Custom Lightbox filter.
Popup
The Popup is another option available in the Click Action option at the top of the module settings. When this option is selected, the contents of the post will be loaded within a popup window when the grid item is clicked. We’ve created a special popup template so we can remove the header and footer when the post is loaded inside the popup window. You can create your own template by following the Popup Template documentation page. This will give you more control over the output and styling of the post without affecting the post when viewed outside of the popup window.
Loader
The Loader is the circle with four dots that rotate and change color while the Divi FilterGrid plugin loads or refreshes the results during initial page load, pagination or when a filter is clicked. This can easily be changed using the Custom Loader filter.