Skip to content

Divi Post Grid Pro

Divi Post Grid Pro is the flagship blog module in Divi Blog Pro. It displays your WordPress posts in a clean, fully responsive grid — perfect for blog pages, magazine homepages, and category archives built with the Divi Visual Builder. You control exactly which posts appear, how many columns they fill on every device, and how each card is styled.

Key Features

  • 5 template layouts — pick the card design that fits your site, then fine-tune every part of it.
  • True CSS grid columns with independent horizontal and vertical gaps, responsive per device.
  • Powerful query controls — post types, categories, custom taxonomies, include/exclude by ID, offset, and ordering.
  • Equal-height cards for a perfectly aligned grid regardless of content length.
  • Pagination built in — numbered pages or Previous/Next navigation, fully styleable.
  • No-featured-image fallback — show a placeholder icon, a custom image, or hide the image area entirely.

Adding the Module

  1. Edit a page with the Divi Visual Builder.
  2. Add a new module and search for Post Grid Pro.
  3. The grid renders immediately with your latest posts — open the module settings to configure the query, layout, and design.

Content Settings

Query

The Query toggle controls which posts appear in the grid.

  1. Post Type – Choose the content type to display: Posts, Pages, or any public custom post type (default: Post).
  2. Included Categories – Show only posts from the selected categories.
  3. Custom Taxonomy – Filter by a custom taxonomy (for example, a portfolio or product taxonomy).
  4. Taxonomy Terms – The terms (IDs or slugs) to match within the chosen custom taxonomy.
  5. Order By – Sort posts by Date, Title, ID, Author, Random, or Parent (default: Date).
  6. Sort Order – Ascending or Descending direction for the chosen criteria.
  7. Post Limit – How many posts to show per page, from 1 to 50 (default: 6).
  8. Date Format – Customize how the post date is displayed using standard WordPress date formats.
  9. Post Offset Number – Skip a number of posts before the grid starts (0–100, default: 0). Useful when another module already shows the newest posts.
  10. Include Posts by IDs – Display only the posts whose IDs you list.
  11. Exclude Posts by IDs – Hide specific posts even when they match the query.

Layout Settings

The Layout Settings toggle controls the grid structure and which elements each post card shows.

  1. Template Layout – Choose from 5 card layouts, Layout 1 to Layout 5 (default: Layout 4).
  2. Number of Columns – Columns in the grid (default: 3). This is a responsive setting — set it separately for desktop, tablet, and phone.
  3. Column Gap Left/Right – Horizontal spacing between cards (default: 20px, responsive).
  4. Column Gap Top/Bottom – Vertical spacing between rows (default: 20px, responsive).
  5. Equal Height – Force all cards in a row to the same height (default: On).
  6. Show Image – Toggle the featured image (default: On).
  7. Image Size – Thumbnail, Medium, Large, or Full.
  8. Show Title – Toggle the post title (default: On).
  9. Title Heading Level – Render titles as H1–H6 for correct on-page SEO hierarchy.
  10. Show Excerpt – Toggle the post summary (default: On).
  11. Excerpt Length – Number of characters shown in the excerpt, 0–1000 (default: 150).
  12. Show Categories – Display the post's category labels.
  13. Show Single Category – Show only the first category instead of all of them.
  14. Show Author – Display the author name.
  15. Show Date – Display the publish date.
  16. Show Avatar – Display the author's Gravatar photo next to the meta.
  17. Show Read More – Display a Read More button on each card.
  18. Button Text – The Read More label (default: "Read More").

Design Settings

The Design tab styles every part of the grid. Each group offers Divi's full set of typography, color, spacing, border, and shadow controls.

  • Grid Style – Overall grid appearance, alignment, and spacing.
  • Thumbnail Style – Featured image fit, height/width, hover effect, and the When No Featured Image fallback: show a placeholder icon, a custom fallback image, or hide the image area.
  • Content Box – Background, padding, border, and shadow of the card body.
  • Post Title – Typography, color, size, and hover styling for titles.
  • Post Excerpt – Typography and spacing for the summary text.
  • Category – Style the category labels, including background and hover colors.
  • Author and Date – Typography and color for the meta line.
  • Readmore – Full button styling for the Read More link, including hover effects.
  • Pagination – Pagination Type (None, Numbers, or Previous/Next), alignment, text color, background, and active-page colors.

Tips & Notes

Responsive columns
Number of Columns and both Column Gap settings are responsive. Use the device icons in the Visual Builder to set different values for desktop, tablet, and phone — for example 3 / 2 / 1 columns.

Author avatar
Avatars come from Gravatar. The author's WordPress email must exactly match their account at gravatar.com, otherwise the photo will not appear.

Missing featured images
Posts without a featured image use the fallback you choose under Design → Thumbnail Style → When No Featured Image — placeholder icon, custom image, or hidden image area.

FAQ

How do I make the post grid responsive?

Open Layout Settings → Number of Columns and click the device icons to set separate column counts for desktop, tablet, and phone. The two Column Gap settings accept per-device values the same way.

Can I show custom post types in the grid?

Yes. Choose your post type under Query → Post Type, and use Custom Taxonomy with Taxonomy Terms to filter by taxonomies other than categories.

How do I add pagination?

Set Design → Pagination → Pagination Type to Numbers or Previous/Next. The number of posts per page is controlled by Query → Post Limit.

Why do my cards have different heights?

Enable Layout Settings → Equal Height to align all cards in a row. If you prefer naturally staggered heights, use the Divi Post Masonry Pro module instead.

Loading...