Filterable Grid
The Filterable Grid module allows you to display any custom post type in a grid or masonry layout and filter them by using the taxonomy. This module will help you display content on your website in a fashioned way. Display portfolios, testimonials, blog posts, and more, and let users filter them by categories, tags, and any other taxonomies used.
Filter Settings
This is a core toggle in this module where we can select the custom post type and taxonomy that will be used for filtering. In this toggle, we can also change the post displaying order (Default or Random).
Pagination
It’s a good idea to enable pagination if you need to display a big number of posts. The Divi Pixel Filterable Grid offers 3 types of pagination: numbered pagination, load more, and infinite scroll. The load more option will add a button below the grid, and after it’s clicked, the module will load more posts. The infinite scroll functionality will load more posts after the user scrolls.
Filter Bar
In the Filter Bar toggle (Content → Filter Bar), you can select the filter bar layout, and alignment and enable the filter for all posts. When this option is enabled, it will add an “All” filter that will display all posts, no matter the taxonomy. In this toggle, you can also enable the option to show numbers. With this option enabled, filters will show the number of posts within the specific filter.
Grid
Grid toggle is one of the most important settings you need to customize to make your grid looks good on all devices. You have 2 layout options: Masonry and Grid. The Grid option offers also a Row Height setting. Make sure to set Columns, Row Height (if the Grid option is used), and gutter for all devices (desktop, tablet, and mobile).
Apart from the layout and grid settings, you can define Grid Animation, and enable the Fix Lazy Loading Images option. This setting should be enabled if you are using Lazy Load plugins and see layout issues using the module.
Grid Items
You can display featured post images, taxonomy, post titles, and excerpts in the Filterable Grid module. These elements can be displayed below the images, or as an image overlay. There are 7 built-in animations that can be added to the image when users mouse over. To add animation to the image go to Content → Grid Items, and select Image Animation (optionally you can change the animation speed).
Posts
The Posts toggle (Content → Posts) allows you to control how the image will interact after it’s clicked. You can enable Post Link and/or Image Lightbox. If you want your image to display both, you need to enable Use Image Overlay and Show Lightbox and Link Icon in the Content → Image Overlay toggle.
Image Overlay
The Filterable Grid module offers powerful settings in terms of displaying overlays on images. We can create stunning hover effects by adding icons, post titles, and excerpts, that will be displayed with a smooth animation when the user mouseovers. To start customizing the overlay you need to enable the Use Image Overlay setting in the Content → Image Overlay toggle.
Image Overlay Animation
The Divi Pixel Filterable Grid module gives even more control over the hover animations. By customizing animation for each element individually, we can create unique hover effects that will engage visitors and create an unforgettable experience.
To customize overlay animation go to Content → Image Overlay Animation toggle, which is divided into 3 tabs: Icon, Title, and Caption. Here you can select an animation, delay, and speed for each overlay element individually.
Design Settings
In the Design tab, we can customize the appearance of the filter bar, grid, and overlay items. The top 9 toggles in the Design tab are dedicated to the Filterable Grid module.
Pagination Button
In the Pagination Button toggle (Design → Pagination Button) you can customize the pagination appearance. This toggle is divided into 2 tabs – one for the normal state, and one for the active pagination button. You can control spacing, colors, borders, and box shadows.
Load More
If you use the Load More option, then you can customize this button in the Design → Load More toggle. You can control button spacing, colors, font, border, and box shadow. This button will load more posts after it’s clicked.
Filter Bar
Filter Bar settings allow you to customize the filter bar as a whole part. The settings selected here will apply to the whole filter bar as a container. You can change the Space Between Tabs, set Filter Bar Max Width, and control filter bar spacing, background color, border, and box shadow.
Filter Bar Items
Here you can customize filter bar items (filters) individually. This toggle is divided into 2 tabs: Normal and Active. In the Normal tab, you can customize the appearance of the not active tab. You can control padding, set tab background, width, and height (optionally), customize text, add border, and box shadow. The same settings are available for the Active filter bar item.
Grid
In the Grid toggle (Design → Grid), you can control grid spacing, enable grid overflow, and add background color, border, and box shadow. The settings will apply to the whole grid with gallery images.
Grid Items
The Grid Items toggle allows you to customize the single grid item appearance. In this toggle, you can add grid item background color, border, and box-shadow.
Grid Item Text
The Filterable Grid module allows you to add post titles, excerpt text, and taxonomy and display them in the grid layout, below the image. To customize those text styles, go to the Design → Grid Item Text toggle. Here you can customize spacing and text style for all grid text elements enabled.
Image Overlay Text
The Filterable Grid module allows you to display icons, titles, and excerpts in the image overlay. To customize image overlay text, go to Design → Image Overlay Text.
Image Overlay
In Design → Image Overlay you can add Overlay Color for default, hover state, and customize overlay icon colors and style.
Custom CSS
The Filterable Grid module comes with advanced Custom CSS fields, where you can add even more styling using custom CSS code. These settings will be useful for more advanced users, who want to add some cool hover effects using custom CSS. Note: we can enable the Hover state to add CSS that will apply only on hover. There are 6 custom CSS fields available:
Grid – these styles apply to the grid wrapper
Grid Item – the styles added here will apply to the single grid item
Grid Image – the styles added to this field will apply to the single image in the grid
Overlay Icon – add custom CSS to the Overlay Icon
Overlay Title – add custom CSS to the Overlay Title
Overlay Excerpt – add custom CSS to the Overlay Caption text
Filter Bar Container – add custom CSS to the Filter Bar Container
Filters
dipi_filterable_grid_before_meta
dipi_filterable_grid_before_meta_with_post
dipi_filterable_grid_after_meta
dipi_filterable_grid_after_meta_with_post
dipi_filterable_grid_first_meta
dipi_filterable_grid_first_meta_with_post
dipi_filterable_grid_last_meta_with_post
dipi_filterable_grid_last_meta
dipi_filterable_grid_before_title
dipi_filterable_grid_before_title_with_post
dipi_filterable_grid_after_title
dipi_filterable_grid_after_title_with_post
dipi_filterable_grid_before_readmore
dipi_filterable_grid_before_readmore_with_post
dipi_filterable_grid_after_readmore
dipi_filterable_grid_after_readmore_with_post
Sample code to inject WooCommerce Product Price:
add_filter( 'dipi_filterable_grid_before_title_with_post', 'show_price_before_title', 10, 2 );
function show_price_before_title( $dipi_filterable_grid_before_readmore, $post ) {
$price_html = "";
if (function_exists('wc_get_product')) {
$product = wc_get_product( $post->ID );
$price_html = sprintf('<div class="dipi-woo-price">%2$s%1$s</div>',
$product->get_price(),
get_woocommerce_currency_symbol()
);
}
return $price_html;
}Open specific tab
The Filterable Grid module is a dynamic module. It doesn’t have child modules. It is possible to open the specific tab based on URL parameters, but custom URL addresses with grid item classes must be used. Here are sample URLs that can be used:
mywebsite.com/?dipi-fg-tab-ids=1 (this will open 2nd tab)
mywebsite.com/?dipi-fg-tab-ids=2 (this will open 3rd tab) etc.
If you are using multiple modules on one page, you can open a tab of the specific module by using the following code:
mywebsite.com/?dipi-fg-tab-ids=3:1 (This will open 2nd tab of 4th filterable Gallery module).
NOTE: If you are experiencing styling issues, where the Filterable Grid is not displayed correctly on front-end, then make sure to clear Static CSS File in Divi → Theme Options → Builder → Advanced. This step is required, even when this option is disabled. In that case, enable that and click Clear button.
