The DiviGear CPT Grid module provides a flexible and visually appealing way to display custom post types in a grid layout.
Let’s see the settings in brief and how to make better use of it —
Content Tab
This tab contains all the essential settings to select, arrange, and configure the post elements in your CPT Grid.
Add New Item
You can choose the custom post items you want to display in the CPT grid. To choose the items, click on the plus (+) icon named “Add New Item” which will take you to the “CPT Element Settings”, where you can add and customize the post elements. To learn how to customize the post elements, click here.
CPT Settings
- Post Type: Choose the type of posts you want to display in the grid. You can choose between posts, projects, products, or any custom post types that you have created.
- Post Count: Select the number of blog posts to display in the grid.
- Display Post By: Select the types of posts you want to display. You have two options: Default or By Taxonomy.
- Select Taxonomy: Select the taxonomy of your post types. The options you get will vary based on what you choose as the post type. Available only if you choose to display posts by taxonomy.
- Orderby: Set the order of the displayed posts. Only available if “Recent” posts are selected.
- Posts Offset Number: Choose some posts to be excluded from the display, starting from the latest ones.
- Show Pagination: Toggle this option to enable pagination to navigate through the custom posts.
- Use Number Pagination: Toggle to use numbers to denote the pages.
- Use Icon Oly in next and Previous Button: Enable to use only icon as the previous and next button.
- Use Image as Background: Use the featured images of the custom posts as the background of the other post elements.
- Background Image Scale on Hover: Enable this option to make the background image zoom in when you hover over it. Only available if “Use Image as Background” is enabled.
Item Background: Add a background color, gradient, or image to customize the appearance of each grid item.
Background: Add a background color, gradient, image, video, pattern, or mask to the module.
Element Label: Rename the module to organize it more easily in the Divi Builder. (Only you can see this label.)
Design Tab
Customize the appearance of the CPT Grid module with advanced design settings.
Alignment: Change the placement of all the post elements relative to the custom post grid containers.
Layout
- Layout: Choose between a traditional grid layout or a modern masonry layout.
- Column: Select the number of columns to display in the CPT grid.
- Space Between: Adjust the space between the post types.
- Equal Height: Enable to make all the CPT grid the same height.
Item Outer Wrapper: Border customization options for the outer wrapper of the CPT grid.
Item Inner Wrapper: Border customization options for the inner wrapper of the CPT grid.
Pagination Button Styles
- Pagination Alignment: Change the horizontal placement of the pagination buttons.
- Next & Prev Icon: Choose from 4 sets of previous and next icons for the pagination buttons.
The rest of the options are for the color, size, background, typography, and border of the pagination buttons.
Active Pagination Number: Background, typography, and border customization options to differentiate the active pagination number. Turn on number pagination to apply these styles.
Overflow
- Outer Wrapper Overflow: Control how content within the outer container is handled when it exceeds its boundaries.
- Inner Wrapper Overflow: Control how content within the inner container is handled when it exceeds its boundaries
Sizing: Adjust the width, height, and alignment of the module.
Spacing: Adjust the margins and padding of the module container.
Transform: Adjust the scale, position, rotation, and size of the module.
Animation: Add reveal animation effects and control the animation style, delay, duration, and more.
Advanced Tab
This tab provides additional settings for advanced users who want greater control over the module with custom code, conditions, and more.
CPT Element Settings
Each post element can be customized individually. Child-level settings here will override the parent-level CPT Grid Settings, which means parent level.
Content Tab
Element
Type: Choose the type of the post element. There are 11 different post elements to choose from. However, you can use custom post elements, by using an ACF (Advanced Custom Field) plugin.
If you choose “Image”
- Outside Inner Wrapper: Enable the featured image of the post to be placed outside the inner wrapper but inside the outer wrapper.
If you choose “Title”
- Title Tag: Choose the HTML tag for the post title.
If you choose “Content”
- Post Content: Choose to show either the content of the posts or just the post excerpt.
- Use Post Excerpt: Toggle this option to display the post excerpt that was manually submitted.
- Excerpt Length: Define the character length of the post excerpt.
Note: if the posts have no excerpt, Divi will automatically take the first few sentences to generate an excerpt from the post’s content. The Excerpt Length option allows you to control the length of this auto-generated excerpt. However, if the posts have manually submitted excerpts, the value in excerpt length will not apply.
If you choose the “Read More Button”
- Read More Text: Type in the text of the “Read More” button.
If you choose “Author”
- Outside Inner Wrapper: Enable the author’s name to be placed outside the inner wrapper but inside the outer wrapper.
- Show Author Image: Enable to display author image along with the name.
- Author Image Size: Adjust the size of the author image.
- Hide Author Text: Enable to hide the author’s name and only display the image.
- Display: Select how to display the custom post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the author’s name. Not available when “Block” is selected as the display option.
If you choose “Publish Date”
- Outside Inner Wrapper: Enable to place the post publish date outside the inner wrapper but inside the outer wrapper.
- Date Format: Define the date format. Use any combination from here.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the date. Not available when “Block” is selected as the display option.
If you choose “Taxonomy”
- Post Type: Choose the type of posts to display taxonomy. You have three options: Posts, Projects, and Products.
- Select Taxonomy: Choose the type of taxonomy you want to display. The options will vary depending on the post type you choose.
- Custom Separator: Enable to use a custom separator for the taxonomy.
- Separator Text: Insert the custom separator symbol.
- Before Text: Input the text you want to display before the separator.
- After Text: Input the text you want to display after the separator.
- Outside Inner Wrapper: Enable to place the post categories or post tags outside the inner wrapper but inside the outer wrapper.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the taxonomy. Not available when “Block” is selected as the display option.
If you choose “Custom Text”
- Outside Inner Wrapper: Enable to place the custom text outside the inner wrapper but inside the outer wrapper.
- Custom Text: Input the custom text you want to display.
- Custom Text Field:
- Select Field Name: Select the specific field from your custom post type or ACF to display.
- Before Text: Add text that will appear before the custom text.
- After Text: Add text that will appear after the custom text.
- Outside Inner Wrapper: Enable to place the custom text outside the inner wrapper but inside the outer wrapper.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the custom text. Not available when “Block” is selected as the display option.
If you choose “Reading Time”
- Before Text: Add text to display before the reading time value.
- After Text: Add text to display after the reading time value.
- Display: Choose inline, inline-block, or block display for the reading time.
- Align: Adjust the horizontal alignment of the reading time within its container.
If you choose “Icon”
- Outside Inner Wrapper: Enable to place the icon outside the inner wrapper but inside the outer wrapper.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the icon. Not available when “Block” is selected as the display option.
If you choose “ACF Fields”
- Post Type: Choose the type of post you want to display in the ACF field. You have three options: Posts, Projects, and Products.
- Select ACF Field: Select the ACF field value you want to display.
- Before Text: Add text that will be displayed before the ACF field value.
- After Text: Add text that will be displayed after the ACF field value.
- Display: Select how to display the post element: inline (on the same line), inline block (next to each other with potential line breaks), or block (on separate lines).
- Align: Choose the horizontal placement of the ACF field value. Not available when “Block” is selected as the display option.
Overlay and Scale
If you choose “Image” as the “Type”, this addition section will show up.
- Overlay: Enable to add a gradient over the image on hover.
- Overlay Primary Color: Choose the primary color for the overlay gradient.
- Overlay Secondary Color: Choose the secondary color for the overlay gradient.
- Overlay Gradient Direction: Adjust the overlay gradient direction.
- Use Icon: Enable to use an icon on the overlay gradient.
- Icon Color: Choose a color for the overlay icon.
- Icon Size: Adjust the size of the overlay icon.
- Icon Reveal Type: Choose the reveal animation for the overlay icon.
- Image Scale Type: Choose how the image will animate on hover.
Icon Settings
If you choose the “Read More Button”, “Author”, “Publish Date”, “Taxonomy”, “Icon”, and “ACF Fields” as the “Type”, this addition section will show up.
- Use Icon: Enable to use an icon for the selected post element.
- Icon Color: Choose a color for the icon.
- Icon Size: Adjust the size of the icon.
- Image: Upload an image to use instead of the icon.
- Image Width: Specify the width of the image.
- Vertical Align: Change the vertical placement of the post element relative to the image.
Settings For ACF
If you choose “ACF Fields” as the “Type”, this addition section will show up.
- Link Text: Input the text that will mask the URL in the custom URL field.
- Link Target: Decide if you want the URL to open in a new or the same tab.
- Email Text: Input the text that will mask the email address in the custom email field.
- Image Max Width: Set a maximum width limit for the image in the custom image field.
Divider Line
- Divider Line Height: Adjust the height of the divider line.
- Divider Color Primary: Choose the primary color for the divider gradient.
- Overlay Color Secondary: Choose the secondary color for the divider gradient.
- Divider Color Direction: Adjust the divider gradient direction.
- Starting Position: Adjust the starting position of the divider gradient.
- Ending Position: Adjust the ending position of the divider gradient.
Link: Add a URL to make the element clickable.
Background: Set a background color, gradient, or image for the element.
Admin Label: Rename the element for easy identification in the builder.
Design Tab
Alignment: Change the horizontal placement of all the text-based custom post elements relative to the CPT grid containers.
Image Settings
If you choose “Image” as the “Type”, this addition section will show up.
- Image Size: Select the desired image size: original, 1080×675, 350×450, 400×250, 400×400, or 300×300.
- Force Full Width: Toggle on to make the post images full width.
Body Text: Typography options for the text-based content of the custom post elements.
Before After Text: Typography options for the taxonomy, before and after text of the ACF field, and the meta.
Spacing: Add custom margins and padding to the custom post element.
Sizing: Adjust the width, height, and alignment of the custom post element.
Border: Border customization options for the custom post element. You have the option to style each border individually or all the borders together.
Box Shadow: Apply a shadow effect to the custom post element.
Filters: Add color filters to the custom post element.
Transform: Change the scale, placement, size, angle, etc. of the custom post element.
Advanced Tab
Add custom CSS, visibility settings, or advanced conditions for the element.
Need Help?
If you have any questions or need assistance, contact our support team: [email protected]