Divi filterable CPT is the extended version of the Divi CPT Grid module. This particular module offers grid and masonry layouts with a filter option. Suppose you have an extensive list of posts and would like your user to navigate through different categories based on taxonomy. In that case, this module is for you.
The elements for this module are the same. You will find a brief description of each element in this guide.
Now let’s move on to this module settings-
Content Tab
The first thing in the content tab is the option to “Add New Item.” You can add as many elements as you want. There is no limit on it.
CPT Setting
Then, we have CPT settings. It contains a branch of features in it.
- Post Type: Select the post type from the dropdown list.
- Post Count: Decide how many posts you want to display.
- Display Post by: By default, it will show all the posts. If you would like to filter, then use “By Taxonomy” and “Multiple Filter.” If you use “By Taxonomy,” then select taxonomy will appear as a new option. Now, if you use “Multiple Filter,” then you can select multiple taxonomies.
- Select Taxonomy: If “By Taxonomy” is selected, “Select Taxonomy” will be available to choose from. You can select the taxonomy you gave while creating the custom post type. The default post type has taxonomy like category and tag.
- Filter by Terms: It came based on the taxonomy you selected. From here, you can select or filter out your post based on taxonomy. Your selected terms will be shown as filter navigation.
- Note: If you selected “Multiple Filter” in Display Post By, Then you will find some new features.
- Select Taxonomy According to post type: List of all taxonomies. Those all will be added as a filter. You can deselect any taxonomy you don’t want.
- Multi Filter Type: You can add a type as AND/OR. Those are conditions for multifilter.
- Order By: Select the post order you would like to display. There is an option like New to old, a to z, and vice versa.
- Post Offset Number: Write the number of posts you would like to exclude from the beginning of the Filterable CPT.
- Multifilter dropdown placeholder prefix text: Change the filter prefix text from here.
- Search Filter: Turn ON the search filter.
- Search Button Text: You can change the search button text from here.
- Search Placeholder Text: Place text in the search field.
- Load More Button: Enable the load more button.
- Load More Text: Change the load more button text.
- All Items: Enable All Items for filter navigation.
- All Item Button Text: Change the text All Item Button Text.
- Use Image as Background: Turn ON to set an image as background.
- Background Image Scale On Hover: Turn this ON to set the background hover scale effect.
Background
This is the module background. This will apply to the whole module.
Design Tab
Let’s proceed to the design tab and explore the available features.
Alignment
Moving on, we have alignment. We can set it to the left, right, or center. This alignment will apply to all the elements.
Layout
Here are all the significant layout options.
- Layout: Choose the layout format from these two. One is Grid, and another one is Masonry.
- Column: Select the number of columns for the layout. You can choose from one to five.
- Space Between: Define the gap between the items.
- Equal Height: Make items equal in height for the grid layout.
Item Outer Wrapper
Here, all the elements or items will be wrapped into a container and styled with available features.
Item Inner Wrapper
Item inner wrapper is linked to “Outside inner wrapper.” Except for an item outside the inner wrapper, the rest of the element will be styled with Item Inner Wrapper settings. Also, we have options for rounder corners, borders, and shadows here.
Filter Buttons
Filter navigations are also customizable in our module. You can set alignment, define space in between, and adjust margin padding and typography for the filter navigation button.
Active Filter Button
Now, if you would like to give a different look to your active button, then the design option for that is available here.
Multi Filter Container
Now, if your multifilter is enabled, then you can customize the container here.
Set the filter option to right or left. You can keep this to the top as well. You can adjust the width if you keep it on the left or right. There is also an alignment option. You can show labels, adjust gaps, and so on inside this Multi Filter Container settings.
Multi Filter Dropdown
Customize or design the dropdown list here. You can set color, typography, margin-padding, border, and shadows for the dropdown list.
Multi Filter Label
If you are using a label, this is where you style it.
Search Input
If your search field is enabled, then you can customize or design the field from here. The design option for the search field is packed with features like wrapper customizer and input field customizer. You can change the margin padding. Position, typography, and more inside here.
Search Button
The next option we have is the search button. The search button is placed just after the input field. You can customize the button from here. You have all the button design options available here, including some additional options like using a search icon before/after the search text. You can even use only icon without text.
Load More
Here, you can customize the load more button according to your needs. You can align, make the button full width, customize the typography, and many more for your button here.
Loader Spinner
- Loader Spinner: Enable the Ajax load spinner while using the filter navigation option.
- Spinner Size: Define the size of the spinner.
- Spinner Distance from Top: Set the position of the spinner.
- Spinner Color: Set the loader color.
- Loader Overlay Background: Set an overlay background color while the loader is spinning. You can set a solid color or a gradient.
Overflow
Set overflow for the wrapper. You can set both for outer and inner in 5 different stages.
Sizing
This is a regular sizing option applied to the module. This will allow you to make the container smaller, and you can set the module alignment as well.
Spacing
We have regular spacing as well as container margin padding.
Transform
This is the default divi transform option and is applied to the whole module.
Animation
Different types of animation can be applied to the module from here.
Advanced Tab
Advanced Tab contains all of the standard Divi module options. You can use those features in our modules, too.
