Overview
Portfolio layouts that look well-spaced on desktop often become difficult to browse on smaller screens, either by displaying too many projects in a long vertical list or by compressing items into crowded grids. By default, the Divi Portfolio and Filterable Portfolio modules use the same project count and the same column layout across all devices, which limits your ability to tailor the experience for tablet and phone users.
The Divi Responsive Helper plugin extends both the Portfolio and Filterable Portfolio modules with responsive controls for project count and column layout. You can define how many projects are displayed and how many projects appear side by side at each breakpoint. These features work together to help you create portfolio layouts that feel intentional, readable, and visually balanced across all screen sizes.
NOTE: The instructions in this document also apply exactly the same for the Filterable Portfolio module, which is not mentioned or shown separately.
The GIF below demonstrates the Portfolio number of columns feature (shown in Divi 4):
How To Use
Step 1: Enable Portfolio Module Features Globally Divi 4
To start using the responsive Portfolio 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:
- Portfolio Module Number of Columns
- Portfolio Module Project Count
Enabling these global settings does not change any layouts on its own. It only activates the necessary settings inside the Portfolio module so they can be configured per module.
Step 1: Enable Portfolio Module Features Globally Divi 5
To start using the responsive Portfolio 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:
- Portfolio Module Number Of Columns
- Portfolio Module Project Count
Enabling these global settings does not change anything on its own. It only activates the necessary settings inside the Portfolio module in the Divi Builder so they can be configured there.
2. Select The Number Of Columns In The Portfolio Module Divi 4
Once the Portfolio Module Number of Columns setting is enabled in Divi Theme Options, a new set of settings will appear in every Portfolio module in the Divi Builder.
- Open up the Portfolio 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 Portfolio Columns on Desktop
- Number of Portfolio Columns on Tablet
- Number of Portfolio 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 projects shown.
Step 2: Select The Number Of Columns In The Portfolio Module Divi 5
Once the Portfolio Module Number Of Columns setting is enabled globally, a new set of settings will become available in every Portfolio module in the Divi Builder.
- Open up the Portfolio 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 projects 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 Portfolio Module Project Count Divi 4
After enabling the Portfolio Module Project 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 image 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 Portfolio 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 projects shown, while the other setting from step 2 controls the number of columns.
Step 3: Configure Portfolio Module Project Count Divi 5
After enabling the Portfolio Module Project 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 project 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 Portfolio 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 projects shown, while the other setting from step 2 controls the number of columns.
