Divi CPT Grid is a standout module within the Divi CPT modules plugin, with which you can create grid and masonry layouts for your posts and custom post types.
This module comes equipped with 11 different elements, and in this article, we’ll provide a comprehensive exploration of each one.
So we assume you know about items or elements, and let’s explore all the dedicated features this module has-
Content Tab
You will find a list of child items you used in the content tab. You can click “Add New Item” to add more if needed. We already discussed all those elements.
CPT Setting
The following item is the CPT Settings. You can choose the post type to display from here.
- Post Type: Select the post type from the drop-down 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.”
- Select Taxonomy: If “By Taxonomy” is selected, “Select Taxonomy” will be available. You can select the taxonomy you gave while creating the custom post type. The default post type has taxonomy like category and tag.
- Include Terms: It came based on the taxonomy you selected. You can select or filter out your post based on taxonomy.
- 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 CPT grid.
- Show Pagination: Turn ON pagination from here. This is the regular pagination that shows order entries and next entries.
- Use Number Pagination: Turn this one ON if you want to use number system pagination.
- Use icon Only: If you don’t want to see the text in the pagination, turn this ON to use only the icon.
- Older Entries Button Text: Change the text of Older Entries.
- Next Entries Button Text: Change the text of Next Entries.
- Use Image as Background: Set the feature image in the 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 your elements on the post grid.
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
All the elements or items will be wrapped in 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.
Pagination Button Styles
Next, we have pagination Button Styles-
- Pagination Alignment: Set the alignment for the pagination in 4 different positions.
- Next & Prev Icon: Select the next and previous icons from the set of 4.
- Background: Set the Background to your pagination bar.
- Pagination Margin-Padding: Here, you can set margin padding for your pagination.
- Pagination typography: Set the font family, color, size, etc., from here for the pagination text.
- Rounded Corner: You can make the corner rounded.
- Borders: Set the border if you want.
- Box Shadow: Add box shadow to the pagination elements.
Active Pagination Number
Here, you can style the active pagination number, including background color, full typography, and other styling options like borders, shadows, and more.
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 a huge list of spacing options. You can apply spacing to the Container, Outer wrapper, Inner Wrapper, pagination text, and numbers.
Transform
This default divi transform option 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.
