Custom Elements

This document explains how to modify the output of each available element (thumbnail image, overlay, header, meta, excerpt) of the Divi FilterGrid plugin. First it’s important to understand all of the available options for customizing the output of each grid item. There are three ways to do this:

Custom Fields

Divi FilterGrid makes it really easy to display custom fields from within the module settings, 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. If you want to simply output one or more custom fields, we would recommend looking at this option. You can find the Show Custom Fields option near the bottom of the Post Elements section in the module settings.

Custom Content

The Custom Content filter allows you to add additional content to each grid item. This content can be anything you want: static text, custom fields, advanced custom fields, the output of a php function or shortcode. You could go as far as to turn off all elements in the grid and output a completely custom layout for each post.

By default the output of the Custom Content filter will be at the bottom of the grid item. However, 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.

Element Filters

The last option for customizing the output of each grid item is to utilize the Element Filters. These allow you to intercept the output of each element in the grid item and either manipulate it, replace it, or add to it. For example, the Overlay Filter will allow you to add content within the overlay or replace the overlay with your own. Below is an example of how to use the filters for each element.

Thumbnail Filter

The example below shows how to add custom HTML inside the figure with class dp-dfg-image:

Overlay Filter

The example below shows how to add custom HTML inside the div with class dp-dfg-overlay:

Heading Filter

The example below shows how to add custom HTML inside the div with class dp-dfg-header:

Meta Filter

The example below shows how to add custom HTML inside the figure with class dp-dfg-meta:

Excerpt Filter

The example below shows how to add custom HTML inside the figure with class dp-dfg-content:

All of the examples above are simple examples that show how to return the original element and add content to it. You can also conditionally replace an element based on the module CSS ID and return data from the $post object as shown in the example below:

You could then target the remove_overlay_icon class to remove the default icon:

.remove_overlay_icon:before {display: none !important;}