Overview
Blog layouts that look balanced on desktop often become overwhelming on smaller screens, showing too many posts or squeezing content into tight grids. By default, the Divi Blog module applies the same post count and layout across Desktop, Tablet, and Phone, which may not produce the best results on different screen sizes.
The Divi 4 Blog module offers very limited layout control. Aside from choosing between Fullwidth and Grid, there are no settings to control how many columns appear when using the Grid layout, and the post count setting is not responsive. This makes it difficult to create blog layouts that feel readable on mobile without duplicating modules or relying on custom code.
The Divi Responsive Helper plugin extends the Blog module with responsive controls for both post count and column layout. You can choose how many posts are displayed and how many posts appear side-by-side at each breakpoint, allowing blog layouts to adapt naturally across devices. These features work together to create cleaner layouts, shorter mobile pages, and more balanced designs while keeping everything managed within a single Blog module.
The GIF below demonstrates the Blog number of columns feature (shown in Divi 4):
How To Use
Step 1: Enable Blog Module Features Globally Divi 4
To start using the responsive Blog module features in Divi 4, go to the Divi > Theme Options menu in your WordPress backend, then select the Divi Responsive Helper tab, which our plugin adds. Select the Column Stacking subtab and enable the following settings:
- Blog Module Number of Columns
- Blog Module Post Count
Enabling these global settings does not change any layouts on its own. It only activates the necessary settings inside the Blog module so they can be configured per module.
Step 1: Enable Blog Module Features Globally Divi 5
To start using the responsive Blog module features in Divi 5, go to the Pee-Aye Creative menu in your WordPress backend, then select Divi Responsive Helper. In the plugin settings interface, open the Module Item Counts & Columns tab from the left sidebar. From there, enable the following settings:
- Blog Module Number Of Columns
- Blog Module Post Count
Enabling these global settings does not change anything on its own. It only activates the necessary settings inside the Blog module in the Divi Builder so they can be configured there.
2. Select The Number Of Columns In The Blog Module Divi 4
Once the Blog Module Number of Columns setting is enabled in Divi Theme Options, a new set of settings will appear in every Blog module in the Divi Builder.
- Open up the Blog module Settings by clicking the gear icon.
- Go to the Design tab.
- Open the Layout Toggle.
- Set the layout to Grid.
There you will see three new options appear:
- Number of Blog Columns on Desktop
- Number of Blog Columns on Tablet
- Number of Blog Columns on Phone
These are all set to default, so to change them simply choose a number from the dropdown menu for Desktop, a number for Tablet, and another number for Phone.
Keep in mind that this setting only controls the number of columns, while the other setting from step 3 controls the number of posts shown.
Step 2: Select The Number Of Columns In The Blog Module Divi 5
Once the Blog Module Number Of Columns setting is enabled globally, a new set of settings will become available in every Blog module in the Divi Builder.
- Open up the Blog module settings by clicking the gear icon.
- Go to the Design tab.
- Open the Layout toggle.
- Set the Layout Style dropdown to Block.
Two settings, Number Of Columns and Space Between Columns, will appear. Both settings are added by our plugin.
NOTE: The Number Of Columns setting and Space Between Columns setting, which are added by our plugin, only become available when the Layout Style dropdown is set to Block. The Layout Style is a new feature in Divi 5. Block is usually not selected by default.
This setting can be adjusted per breakpoint using Divi 5’s responsive editing controls, allowing you to define how many columns remain side-by-side on each breakpoint. Keep in mind that this setting only controls the number of columns, while the other setting from step 3 controls the number of posts shown.
In Divi 5, the module layout behavior is controlled by a Layout Style setting using one of the following layout modes:
- Block
- Flex
- Grid
The number of columns feature in Divi Responsive Helper is designed to work with the Block layout style, which matches the behavior in Divi 4.
Step 3: Configure Blog Module Post Count Divi 4
After enabling the Blog Module Post Count setting globally in Theme Options, a new responsive editor option will become available for the Post Count setting in the Divi Builder. This allows you to set the post count for each breakpoint. The setting itself is technically already there, but it is not responsive, meaning it does not have the options to set the number for each breakpoint as expected. Our plugin enables this ability.
- Open up the Blog module settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content toggle.
- Hover over the Post Count setting and click the responsive phone icon.
- Enter the desired number for Desktop, a number for Tablet, and another number for Phone.
Keep in mind that this setting only controls the number of posts shown, while the other setting from step 2 controls the number of columns.
Step 3: Configure Blog Module Post Count Divi 5
After enabling the Blog Module Post Count setting globally, a new responsive editor option will become available for the Post Count setting in the Divi Builder. This allows you to set the post count for each breakpoint. The setting itself is technically already there, but it is not responsive, meaning it does not have the options to set the number for each breakpoint as expected. Our plugin enables this ability.
- Open up the Blog module settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content toggle.
- Hover over the Post Count setting and click the responsive phone icon, which opens a Responsive Editor
- Enter the desired number for each breakpoint.
Keep in mind that this setting only controls the number of posts shown, while the other setting from step 2 controls the number of columns.
