Overview
Gallery layouts that look clean and balanced on desktop often fall apart on smaller screens, either by showing too many images in a long scroll or by squeezing images into awkward grids. Divi’s Gallery module applies the same image count and the same column layout across all devices, which limits your ability to create layouts that feel intentional on tablet and phone.
The Divi Responsive Helper plugin extends the Gallery module with responsive controls for both image count and column layout. You can choose how many images are displayed and how many images appear side by side at each breakpoint. These features work together to help you create gallery layouts that are easier to browse, better spaced, and more visually consistent across all screen sizes.
The GIF below demonstrates the Gallery number of columns feature (shown in Divi 4):
How To Use
Step 1: Enable Gallery Module Features Globally Divi 4
To start using the responsive Gallery 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:
- Gallery Module Number of Columns
- Gallery Module Image Count
Enabling these global settings does not change any layouts on its own. It only activates the necessary settings inside the Gallery module so they can be configured per module.
Step 1: Enable Gallery Module Features Globally Divi 5
To start using the responsive Gallery 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:
- Gallery Module Number Of Columns
- Gallery Module Image Count
Enabling these global settings does not change anything on its own. It only activates the necessary settings inside the Gallery module in the Divi Builder so they can be configured there.
2. Select The Number Of Columns In The Gallery Module Divi 4
Once the Gallery Module Number of Columns setting is enabled in Divi Theme Options, a new set of settings will appear in every Gallery module in the Divi Builder.
- Open up the Gallery 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 Gallery Columns on Desktop
- Number of Gallery Columns on Tablet
- Number of Gallery 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 images shown.
Step 2: Select The Number Of Columns In The Gallery Module Divi 5
Once the Gallery Module Number Of Columns setting is enabled globally, a new set of settings will become available in every Gallery module in the Divi Builder.
- Open up the Gallery 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 images 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 Gallery Module Image Count Divi 4
After enabling the Gallery Module Image Count setting globally in Theme Options, a new responsive editor option will become available for the Image 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 Gallery module settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content toggle.
- Hover over the Image 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 images shown, while the other setting from step 2 controls the number of columns.
Step 3: Configure Gallery Module Image Count Divi 5
After enabling the Gallery Module Image Count setting globally, a new responsive editor option will become available for the Image 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 Gallery module settings by clicking the gear icon.
- Go to the Content tab.
- Open the Content toggle.
- Hover over the Image 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 images shown, while the other setting from step 2 controls the number of columns.
