Divi Essential Documentation

⌘K
  2. Home
  4. Divi Essential Documentat...
  6. Modules
  8. Post Grid

Post Grid

Overview

The Post Grid module displays your WordPress posts in a beautiful, customizable grid layout. Choose from Card, Overlay, Horizontal, or Masonry layouts and control which posts appear by post type, category, order, and more. It includes a built-in category filter bar, multiple pagination options (Load More, Numbered, Infinite Scroll), and extensive styling controls for every element.

Content Settings

Post Settings

Post Layout  (Dropdown)

Choose the layout style for your blog grid posts.

  • Available options: Card, Overlay, Horizontal, Masonry
  • Default: Card

Post Type  (Dropdown)

Choose posts of which post type you would like to display. Options are dynamically loaded from your site (e.g., Posts, Pages, Products, etc.).

  • Default: Posts

Post Count  (Text Field)

Choose how many posts you would like to display per page.

  • Default: 6

Post Offset  (Text Field)

Choose how many posts you would like to skip. These posts will not be shown in the feed.

  • Default: 0

Included Categories  (Checkboxes)

Choose which categories you would like to include in the feed.

  • Available options: All Categories, Current Category, (plus categories from your site)
  • Only appears when the selected post type has categories.

Order By  (Dropdown)

Choose the ordering criteria for your posts.

  • Available options: Date, Author, ID, Parent, Random, Title
  • Default: Date

Shorted By  (Dropdown)

Choose the sort order for your posts.

  • Available options: Ascending, Descending
  • Default: Ascending

Date Format  (Text Field)

If you would like to adjust the date format, input the appropriate PHP date format here.

  • Default: M j, Y

Content Display  (Dropdown)

Choose whether to show excerpt or full content.

  • Available options: Show Excerpt, Show Content
  • Default: Show Excerpt

Excerpt Length Type  (Dropdown)

Choose whether to limit excerpt by words or characters.

  • Available options: Words, Characters
  • Default: Words
  • Only appears when Content Display is set to Show Excerpt.

Excerpt Length  (Text Field)

Define the excerpt length (words or characters based on type).

  • Default: 12
  • Only appears when Content Display is set to Show Excerpt.

Content Length (words)  (Text Field)

Limit the number of words displayed when showing full content. Set to 0 for no limit.

  • Default: 20
  • Only appears when Content Display is set to Show Content.

Elements

Show Featured Image  (Toggle)

Toggle the featured image visibility.

  • Default: On

Featured Image Size  (Dropdown)

Choose the size of the featured image.

  • Available options: Thumbnail (150px x 150px), Medium (300px x 300px), Large (1024px x 1024px), Full (Original Image), Custom
  • Default: Full (Original Image)
  • Only appears when Show Featured Image is enabled.

Featured Image Width  (Slider)

Set a custom width for the featured image.

  • Range: 0 to 400
  • Default: 100
  • Only appears when Featured Image Size is set to Custom.

Featured Image Height  (Slider)

Set a custom height for the featured image.

  • Range: 0 to 400
  • Default: 100
  • Only appears when Featured Image Size is set to Custom.

Show Title  (Toggle)

Toggle the post title visibility.

  • Default: On

Show Date  (Toggle)

Toggle the post date visibility.

  • Default: On

Show Date Icon  (Toggle)

Toggle the date icon visibility.

  • Default: On
  • Only appears when Show Date is enabled.

Date Icon  (Icon Picker)

Choose an icon to display before the date.

  • Only appears when both Show Date and Show Date Icon are enabled.

Show Author  (Toggle)

Toggle the post author visibility.

  • Default: On

Show Author Avatar  (Toggle)

Toggle the author avatar visibility.

  • Default: On
  • Only appears when Show Author is enabled.

Show Categories  (Toggle)

Toggle the post categories visibility.

  • Default: Off

Show Category Icon  (Toggle)

Toggle the category icon visibility.

  • Default: Off
  • Only appears when Show Categories is enabled.

Category Icon  (Icon Picker)

Choose an icon to display before the categories.

  • Only appears when both Show Categories and Show Category Icon are enabled.

Category Count  (Slider)

Set the maximum number of categories to display per post.

  • Range: 1 to 10
  • Default: 3
  • Only appears when Show Categories is enabled.

Show Excerpt  (Toggle)

Toggle the post excerpt visibility.

  • Default: Off

Show Read More  (Toggle)

Toggle the read more button visibility.

  • Default: Off

Read More Text  (Text Field)

Text entered here will appear as the read more button text.

  • Default: Read More
  • Only appears when Show Read More is enabled.

Show Comment Count  (Toggle)

Toggle the comment count visibility.

  • Default: Off

Show Comment Icon  (Toggle)

Toggle the comment icon visibility.

  • Default: On
  • Only appears when Show Comment Count is enabled.

Comment Icon  (Icon Picker)

Choose an icon to display before the comment count.

  • Only appears when both Show Comment Count and Show Comment Icon are enabled.

No Results Text  (Text Field)

Text displayed when no posts are found.

  • Default: No posts found.

Grid

Columns  (Slider)

Set the number of columns for the grid layout. Supports separate values for desktop, tablet, and phone.

  • Range: 1 to 6
  • Default: 3 on desktop, 2 on tablet, 1 on phone

Column Gap  (Slider)

Set the gap between columns.

  • Range: 0 to 100 (in px)
  • Default: 30px

Row Gap  (Slider)

Set the gap between rows.

  • Range: 0 to 100 (in px)
  • Default: 30px

Filter Bar

Show Filter Bar  (Toggle)

Toggle the filter bar visibility. When enabled, a row of category tabs appears above the grid so visitors can filter posts by category.

  • Default: On

All Label  (Text Field)

Text for the “All” filter tab.

  • Default: All
  • Only appears when Show Filter Bar is enabled.

Pagination

Pagination Type  (Dropdown)

Choose the pagination type for the blog grid.

  • Available options: Load More, Numbered, Infinite Scroll, None
  • Default: Load More

Load More Text  (Text Field)

Text for the load more button.

  • Default: Load More
  • Only appears when Pagination Type is Load More.

Loading Text  (Text Field)

Text displayed while loading more posts.

  • Default: Loading…
  • Only appears when Pagination Type is Load More or Infinite Scroll.

Mid Size  (Slider)

Number of page numbers to show on each side of the current page.

  • Range: 1 to 5
  • Default: 2
  • Only appears when Pagination Type is Numbered.

Link

Post Link Target  (Dropdown)

Choose whether post links open in the same or a new window.

  • Available options: In The Same Window, In The New Window
  • Default: In The Same Window

Category

Background color and gradient options for category labels (solid color and gradient only).

Post Item

Background color and gradient options for the content wrapper area (solid color and gradient only).

Image

Background color and gradient options for the image hover overlay (solid color and gradient only). Default is a purple tint.

Background

Standard Divi background options including solid color, gradient, image, and video backgrounds.

Design Settings

Image

Image Width  (Slider)

Set the width of the featured image.

  • Range: 1 to 100 (in %, px, em, rem, vh, vw, and more)
  • Default: 100%

Image Height  (Slider)

Set the height of the featured image.

  • Range: 1 to 1000 (in px, %, em, rem, vh, vw, and more)

Image (continued)

Border and box shadow options for the featured image.

Image Hover Effect

Hover Effect  (Dropdown)

Choose a hover effect for the post image.

  • Available options: None, Zoom, Grayscale

Object Fit  (Dropdown)

Choose how the image should fit within its container.

  • Available options: Cover, Contain

Horizontal Image Width

Width  (Slider)

Set the width of the image in horizontal layout.

  • Range: 50 to 500 (in px)
  • Default: 200px
  • Only appears when Post Layout is set to Horizontal.

Card

Background, border, and box shadow options for each post card.

Post Text

Show Underline on Hover  (Toggle)

Show an underline effect when hovering over the post title.

  • Default: Off
  • Shown under the Title tab.

Post Text (continued)

Font styling for Title (with heading level option) and Body text, accessible via Title and Body tabs.

Category

Font styling and border options for category labels.

Meta

Alignment  (Alignment Buttons)

Define the alignment of meta information.

  • Available options: Left, Center, Right
  • Default: Left

Separator  (Dropdown)

Define the character used to separate meta items.

  • Available options: | Pipe, / Slash, – Dash, • Dot, · Middle Dot, None
  • Default: | Pipe

Separator Color  (Color Picker)

Define the color of the meta separator.

Separator Size  (Slider)

Define the font size of the meta separator.

  • Range: 8 to 40 (in px)
  • Default: 14px

Author

Font styling options for the author name.

Date

Font styling options for the post date.

Filter Bar

Active Background  (Color Picker)

Define the background color for the active filter tab.

  • Default: Purple (#7c3aed)

Active Color  (Color Picker)

Define the text color for the active filter tab.

  • Default: White (#ffffff)

Inactive Background  (Color Picker)

Define the background color for inactive filter tabs.

  • Default: Transparent

Inactive Color  (Color Picker)

Define the text color for inactive filter tabs.

  • Default: Slate (#475569)

Border Radius  (Slider)

Set the border radius for filter tabs.

  • Range: 0 to 50 (in px)
  • Default: 20px

Spacing  (Slider)

Set the gap between filter tabs.

  • Range: 0 to 50 (in px)
  • Default: 8px

Alignment  (Alignment Buttons)

Define the alignment of the filter bar.

  • Available options: Left, Center, Right
  • Default: Left

Filter Bar (continued)

Font styling options for filter tab text.

Pagination

Background  (Color Picker)

Define the background color for pagination.

  • Default: Transparent

Color  (Color Picker)

Define the text color for pagination.

  • Default: Slate (#475569)

Border Radius  (Slider)

Set the border radius for pagination buttons.

  • Range: 0 to 50 (in px)
  • Default: 24px

Alignment  (Alignment Buttons)

Define the alignment of pagination.

  • Available options: Left, Center, Right
  • Default: Center

Pagination (continued)

Border and font styling options for pagination buttons.

Read More

Button Alignment  (Alignment Buttons)

Define the alignment of the Read More button.

  • Available options: Left, Center, Right
  • Default: Left

Read More (continued)

Standard Divi button styling options (background, text color, border, icon, etc.).

Spacing

Individual spacing (margin and padding) controls for Title, Content Wrapper, Content, Image, Author, Date, Categories, and the overall module.

Built-in Style Options

Standard Divi style groups including Sizing, Border, Box Shadow, Filters, Transform, and Animation.

Advanced Settings

  • Custom CSS — Write custom CSS targeting specific parts of the module: Filter Bar, Filter Tab, Active Tab, Grid Container, Card, Card Image, Card Title, Card Meta, Card Excerpt, Read More, and Pagination.
  • HTML Attributes — Add custom data attributes to the module.
  • Conditions — Set conditions for when this module should display.
  • Visibility — Show or hide this module on desktop, tablet, or phone.
  • Transition — Customize hover transition duration and style.
  • Position — Control the module’s positioning (relative, absolute, fixed, sticky).
  • Scroll Effects — Add parallax or scroll-triggered animation effects.

Tips & Best Practices

  • Use the Filter Bar to let visitors browse posts by category without reloading the page — it works great for portfolio or blog pages with multiple topics.
  • The Horizontal layout works well for news or magazine-style pages where you want the featured image beside the text rather than above it. Adjust the horizontal image width in the Design tab to control proportions.
  • For performance on pages with many posts, use the Load More or Infinite Scroll pagination instead of loading everything at once.
  • Customize the meta separator to match your site’s style — try a middle dot (·) or dash (-) for a cleaner look than the default pipe (|).
  • When using the Masonry layout, varying post content lengths will create the characteristic staggered look automatically. Pair it with 3 or 4 columns for the best visual effect.

How can we help?