Divi CPT Grid Module Overview

The DiviGear CPT Grid module gives you a flexible way to present custom post types in an organized and visually appealing grid.

Version Update: The CPT Grid module has been updated to v5.0.0 with full Divi 5 compatibility and Divi 4 backward compatibility.

Let’s take a quick look at the available settings and how you can use them effectively.

Content Tab

This tab contains all the essential settings to select, arrange, and configure the post elements in your CPT Grid.

Add New Item

Choose which post elements you want to display inside each CPT Grid item. Click + Add New Item to open the CPT Element Settings. From there, you can add elements such as the featured image, title, content, author, publication date, and more.

To learn more about customizing individual post elements, click here.

CPT Settings

• Post Type: Choose the post type you want to display. Available options may include Posts, Projects, Products, and any custom post types registered on your website.
• Post Count: Set the total number of posts displayed in the grid.
• Display Post By: Choose how the module should select posts. You can use the default selection or filter posts by taxonomy.
  • Select Taxonomy: Choose the taxonomy used to filter the selected post type. The available taxonomies will depend on the Post Type you select. This option appears when By Taxonomy is selected.
    • Select Terms: Select Tags as taxonomy will reveal additional options to select terms.
• Orderby: Select how the posts should be arranged. Available options may include newest to oldest, oldest to newest, and more.
• Posts Offset Number: Choose some posts to be excluded from the display, starting from the latest ones.
• On Scroll Load: Enable this option to load additional posts automatically as visitors scroll down the page.
• Show Pagination: Enable pagination so visitors can navigate through additional posts.
  • Use Number Pagination: Enable this option to display numbered pages.
  • Use Icon Only in next and Previous Button: Display only icons instead of text in the previous and next pagination buttons.
  • Older Entries Button Text: Enter the text displayed on the previous or older entries button.
  • Next Entries Button Text: Enter the text displayed on the next entries button.
• Use Image as Background: Use each post’s featured image as the background behind the post elements.
  • Background Image Scale on Hover: Apply a scaling effect to the background image when a visitor hovers over the CPT Grid item. This option is available when Use Image as Background is enabled.
•  Clickable Entire Item: Enable this option to make the entire CPT Grid item clickable and link it to the original post.

Background: Add a background color, gradient, image, video, pattern, or mask to the module.

Element Label: Assign a custom label to the module so it is easier to identify and organize inside the Divi Builder. This label is visible only to you.

Design Tab

Use the Design tab to customize the layout and appearance of the CPT Grid module.

Alignment: Set the alignment of the post elements inside each CPT Grid item.

Layout

• Layout: Choose between a traditional Grid layout and a Masonry layout.
• Column: Select how many columns should appear in the CPT Grid.
• Space Between: Adjust the space between individual grid items.
• Equal Height: Enable this option to make all CPT Grid items the same height. This is mainly used with the Grid layout.

Item Outer Wrapper: Customize the border, background, spacing, shadow, and other styles of the outer wrapper surrounding each CPT Grid item.

Item Inner Wrapper: Customize the inner wrapper that contains the post elements.

Pagination Button Styles

• Pagination Alignment: Set the horizontal alignment of the pagination controls.
• Next & Prev Icon: Choose from four available icon sets for the previous and next pagination buttons.

Additional settings let you customize the pagination background, spacing, typography, borders, rounded corners, and box shadow.

Active Pagination Number: Customize the background, typography, border, and other styles of the currently active pagination number. You can enable number pagination from the Content tab > Show Pagination to use these settings.

Overflow

• Outer Wrapper Overflow: Control what happens when content extends beyond the boundaries of the outer wrapper.
• Inner Wrapper Overflow: Control how overflowing content is handled inside the inner wrapper.

Sizing: Adjust the width, height, maximum width, and alignment of the CPT Grid module.

Spacing: Adjust the margin and padding of the module and its individual components.

Transform: Change the scale, position, rotation, and other transform properties of the module.

Animation: Apply a reveal animation to the CPT Grid module. You can control the animation style, duration, delay, intensity, and other available settings.

Advanced Tab

This tab contains additional settings for advanced users who need more control through custom code, conditions, and other advanced options.

CPT Element Item settings

Each post element added to the CPT Grid can be configured separately. Settings applied at the child-item level will override related styles or settings inherited from the main CPT Grid module.

Content Tab

Element:

Type: Choose the post element you want to display. 11 built-in element types are available:

If you choose “Image”

• Outside Inner Wrapper: Place the featured image outside the inner wrapper while keeping it inside the outer wrapper.

If you choose “Title”

• Title Tag: Choose the HTML heading tag used for the post title.

If you choose “Content” 

• Post Content: Choose whether to display the complete post content or a shortened excerpt.
• Use Post Excerpt: Enable this option to use the excerpt manually added to the post.
• Excerpt Length: Set the maximum character length of the automatically generated excerpt.

Note: If a post does not have a manually written excerpt, Divi will generate one from the beginning of the post content. The Excerpt Length setting controls the length of this automatically generated excerpt. It does not affect excerpts entered manually.

If you choose the “Read More Button”

• Read More Text: Enter the text displayed on the Read More button.

If you choose “Author”

• Outside Inner Wrapper: Place the author information outside the inner wrapper but within the outer wrapper.
• Show Author Image: Display the author image beside the author name.
  • Author Image Size: Adjust the size of the author image.
  • Hide Author Text: Hide the author name and display only the author image.
• Display: Choose how the author element appears. Available options include Inline, Inline Block, and Block.
• Align: Set the horizontal alignment of the author element. This option is unavailable when Block is selected as the display type.

If you choose “Publish Date”

• Outside Inner Wrapper: Place the post publication date outside the inner wrapper but inside the outer wrapper.
• Date Format: Define how the publication date should appear. You can use any supported WordPress date format.
• Display: Choose whether the date appears as Inline, Inline Block, or Block.
• Align: Set the horizontal alignment of the date. This option is unavailable when Block is selected.

If you choose “Taxonomy”

• Post Type: Choose the post type whose taxonomy you want to display. Available options include Posts, Projects, and Products. After selecting one you will find the following option:
  • Select Taxonomy: Choose the taxonomy you want to show. The available options will change according to the selected post type.
• Custom Separator: Enable this option to place a custom separator between taxonomy terms.
  • Separator Text: Enter the symbol or text used as the separator.
  • Before Text: Add text before the taxonomy terms.
  • After Text: Add text after the taxonomy terms.
• Outside Inner Wrapper: Place the taxonomy outside the inner wrapper while keeping it inside the outer wrapper.
• Display: Choose whether the taxonomy appears as Inline, Inline Block, or Block.
• Align: Set the horizontal alignment of the taxonomy. This option is unavailable when Block is selected.

If you choose “Custom Text”

• Custom Text Field: Enable or configure dynamic custom text from a custom post type or ACF field.
• Outside Inner Wrapper: Place the custom text outside the inner wrapper but inside the outer wrapper.
• Display: Choose whether the custom text appears as Inline, Inline Block, or Block.
• Align: Set the horizontal alignment of the custom text. This option is unavailable when Block is selected.

If you choose “Icon”

• Outside Inner Wrapper: Place the icon outside the inner wrapper while keeping it within the outer wrapper.
• Display: Choose whether the icon appears as Inline, Inline Block, or Block.
• Align: Set the horizontal alignment of the icon. This option is unavailable when Block is selected.

If you choose “Divider”

You will find additional options under the Divider Line section to customize the Divider element:

• Divider Line Height: Adjust the thickness or height of the divider.
• Divider Color Primary: Choose the starting color of the divider gradient.
• Divider Color Secondary: Choose the ending color of the divider gradient.
• Divider Color Direction: Adjust the direction of the divider gradient.
• Starting Position: Set where the first divider color begins.
• Ending Position: Set where the second divider color ends.

If you choose “ACF Fields”

• Post Type: Choose the post type containing the ACF field. Available options include Posts, Projects, and Products.
• Select ACF Field: Choose the ACF field value you want to display.
• Before Text: Add text before the ACF field value.
• After Text: Add text after the ACF field value.
• Display: Choose whether the ACF field appears as Inline, Inline Block, or Block.
• Align: Set the horizontal alignment of the ACF field. This option is unavailable when Block is selected.

Overlay and Scale

This section appears when Image is selected as the element Type.

• Overlay: Enable a gradient overlay that appears over the image on hover.
  • Overlay Primary Color: Choose the first color of the overlay gradient.
  • Overlay Secondary Color: Choose the second color of the overlay gradient.
  • Overlay Gradient Direction: Adjust the direction of the overlay gradient.
• Use Icon: Display an icon over the image overlay.
  • Icon Color: Choose the color of the overlay icon.
  • Icon Size: Adjust the size of the icon.
  • Icon Reveal Type: Choose the animation used to reveal the overlay icon.
• Image Scale Type: Select how the image should scale or move when a visitor hovers over it.

Icon Settings

This section appears when you select supported element types such as Read More Button, Author, Publish Date, Taxonomy, Icon, or ACF Fields.

• Use Icon: Enable an icon for the selected post element.
  • Icon Color: Choose the icon color.
  • Icon Size: Adjust the icon size.

• Image: Upload an image to display instead of an icon.
  • Image Width: Set the width of the uploaded image.
  • Vertical Align: Adjust the vertical alignment of the element relative to the image.

Settings For ACF

These settings control how supported ACF field types appear inside the CPT Grid.

• Link Text: Enter the text used in place of the complete URL for a custom URL field.
• Link Target: Choose whether the URL opens in the same tab or a new tab.
• Email Text: Enter the text displayed instead of the complete email address.
• Image Max Width: Set the maximum width of an image displayed from a custom image field.

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

Use the Design tab to customize the appearance of the selected CPT element.

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 additional section will show up.

• Image Size: Choose the image dimensions used for the featured image. Available options include Original, 1080 X 675, 400 X 250.
• Force Full Width: Enable this option to make the post image fill the available width.

Body Text: Customize the typography of text-based post elements, including the font, size, color, line height, letter spacing, alignment, and other text styles.

Before After Text: Customize the typography of text placed before or after taxonomy terms, ACF values, and other supported post-meta elements.

Spacing: Adjust the margin and padding around the selected post element.

Sizing: Control the width, height, maximum width, and alignment of the element.

Border: Customize the border radius, width, color, and style of the post element. You can style all sides together or configure each side separately.

Box Shadow: Apply a shadow effect to the post element.

Filters: Apply visual filter effects such as hue, saturation, brightness, contrast, opacity, and blur.

Transform: Adjust the scale, position, rotation, and other transform properties of the post element.

Advanced Tab

Use the Advanced tab to add custom CSS, assign CSS IDs and classes, configure visibility settings, apply conditions, and access other advanced options for the selected CPT element.

Need Help?

If you have any questions or need assistance, contact our support team at [email protected].