By default, the Divi Blog module offers a choice between a full-width stacked layout and a masonry grid layout. While both look great out of the box, many development projects demand a classic editorial row structure: a crisp post thumbnail locked to the left side, with the title, post meta, and excerpt cleanly aligned to its right.
Surprisingly, Divi doesn’t feature an explicit toggle switch to change the standard full-width layout into a row-based list. Fortunately, achieving this styling doesn’t require modifying template files or overriding PHP files in a child theme. Instead, we can implement modern CSS Grid rules to transform the layout instantly while preserving mobile responsiveness.
Step 1: Assign a Custom CSS Class to the Blog Module
To avoid unintentionally altering other Blog modules deployed across the site, apply a custom target class to the specific module you wish to modify:
-
Launch the Divi Visual Builder on your page.
-
Open the Blog Module Settings by clicking the gear icon.
-
Navigate to the Advanced tab.
-
Expand the CSS ID & Classes drop-down.
-
In the CSS Class field, add exactly:
custom-blog-list -
Save the module adjustments.
Step 2: Apply the Responsive CSS Grid Styling
Next, add the layout rules to handle the structural rearrangement. Navigate to Divi > Theme Options > General and paste the following snippet into the Custom CSS input section at the bottom of the page (or paste it inside your child theme’s style.css file):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* Divi Blog Module - Image Left, Content Right */ @media (min-width: 768px) { /* Target the individual post article element */ .custom-blog-list article.has-post-thumbnail { display: grid; grid-template-columns: 30% 1fr; /* 30% width for image, remainder for text */ gap: 0 30px; /* Precise horizontal gutters between columns */ align-items: start; margin-bottom: 40px; } /* Make the featured image container span seamlessly on the left */ .custom-blog-list article.has-post-thumbnail .entry-featured-image-url { margin-bottom: 0 !important; grid-row: span 4; } } |
How it Works Under the Hood
The @media (min-width: 768px) breakpoint wrapper protects mobile viewports, allowing elements to stack naturally on smaller phone screens to prevent narrow, squished columns.
On tablet and desktop views, the grid system separates the article structure into two precise vertical tracks, handling the structural stacking of the post title, meta row, and description automatically alongside the thumbnail.
Once you save your changes and clear any active caching layers, refresh the frontend. Your blog layout will cleanly realign, presenting a polished, native list view across your desktop and tablet layout break lines.
