Below is a list of all the custom settings found within the Divi Responsive Helper plugin. For your convenience, we have listed all the custom settings with their label and descriptive help text for quick reference.
This unique settings list also works as a roadmap and a changelog! Be sure to check the version numbers next to each setting. Items with a green number are already available, and items with a pink number are new features in development or planned and coming soon! As we begin working on new features, we always update the settings list, so be sure to check back often to see what is planned.
Green Version Number = Already In Current Version
Red Version Number = Coming Soon In Future Updates
Divi Theme Options
To begin using the plugin, go to the Divi>Theme Options. There you will see a new tab that our plugin adds called “Divi Responsive Helper.” Once you click on that, you will see more tabs below for each of the plugin’s main features. Take a moment to browse around the settings and get familiar with what is available.
Preview Size
Automatically Open/Close Responsive Tabs 1.0
Enable and disable this feature to automatically open and close the responsive Desktop, Tablet and Phone tabs in the Visual Builder.
Preview Size Presets 1.1
Enable this feature to show the preview size preset buttons in the Visual Builder page settings (located in the bottom left corner by default).
Phone Preset Button One 1.2
Enter a custom value for the 1st preview size preset button in the Phone view.
Phone Preset Button Two 1.2
Enter a custom value for the 2nd preview size preset button in the Phone view.
Phone Preset Button Three 1.2
Enter a custom value for the 3rd preview size preset button in the Phone view.
Tablet Preset Button One 1.2
Enter a custom value for the 1st preview size preset button in the Tablet view.
Tablet Preset Button Two 1.2
Enter a custom value for the 2nd preview size preset button in the Tablet view.
Tablet Preset Button Three 1.2
Enter a custom value for the 3rd preview size preset button in the Tablet view.
Desktop Preset Button One 1.2
Enter a custom value for the 1st preview size preset button in the Desktop view.
Desktop Preset Button Two 1.2
Enter a custom value for the 2nd preview size preset button in the Desktop view.
Desktop Preset Button Three 1.2
Enter a custom value for the 3rd preview size preset button in the Desktop view.
Preview Size Custom Value 1.2
Enable this feature to show the preview size custom value field in the Visual Builder page settings (located in the bottom left corner by default).
Disable Divi Responsive Views Settings 2.0
Enable this feature to completely remove the default Divi Responsive Views settings.
Show Viewport Size 2.3
Enable this feature to add the current viewport width and height size in the Visual Builder page settings.
Show Viewport Size In Admin Bar 2.3
Enable this feature to show the current viewport width and height size in the admin bar in the top right corner.
Widow Fixer
Widow Fixer 1.1
Enable the widow fixer feature.
Paragraphs 1.1
Enable this feature to limit the number of widow words on the last line of each paragraph text throughout the entire website.
Minimum Paragraph Widow Words 1.1
Select the minimum number of widow words allowed on the last line of each paragraph text throughout the entire website.
Headings 1.1
Enable this feature to limit the number of widow words on the last line of each heading text throughout the entire website.
Minimum Heading Widow Words 2.0
Select the minimum number of widow words allowed on the last line of each heading text throughout the entire website.
Exclude Pages 1.3
Enable this feature to excluded the Widow Fixer on selected pages.
Select Pages To Exclude 1.3
Choose which pages you want to include or exclude from the Widow Fixer settings. The Widow Fixer will apply to all pages marked with a checkmark, and all pages marked with an X will be excluded.
Exclude Sections, Rows, or Modules 2.1
This feature requires you to add a CSS class to the section, row, or module that you want to exclude from the Widow Fixer. To do this, simply open the settings of that element and go to the Advanced tab. There you will see a toggle called CSS ID & Classes. Open that toggle and place the CSS class “exclude-drh-widow-fixer” into the CSS Class input field.
Column Stacking
Row Column Stacking Order 1.2
Enable this feature to activate the additional settings located in the Advanced tab of the Divi Builder Row and Column settings for choosing the order in which columns stack on each device.
Enable Column Stacking Order 1.2
Choose which Column Stacking Order option to use.
Stacking Order on Tablet 1.3
Select a number from one to eight to designate the order in which the columns will stack on Tablet.
Stacking Order on Phone 1.3
Select a number from one to eight to designate the order in which the columns will stack on Phone.
Row Number of Columns 1.2
Enable this feature to activate the additional settings located in the Advanced tab of the Divi Builder Row settings for choosing the number of columns to show on each device.
Number of Columns on Tablet 1.2
Select the number of columns on Phone from one to six.
Number of Columns on Phone 1.2
Select the number of columns on Phone from one to six.
Divi Blog Module Number of Columns 2.0
Enable this feature to activate the additional settings located in the Design tab of the Divi Blog module settings when the Grid Layout is used for choosing the number of blog columns to show on each device.
Number of Blog Columns on Desktop 2.0
Select the number of blog columns to show on Desktop.
Number of Blog Columns on Tablet 2.0
Select the number of blog columns to show on Tablet.
Number of Blog Columns on Phone 2.0
Select the number of blog columns to show on Phone.
Divi Portfolio Modules Number of Columns 2.0
Enable this feature to activate the additional settings located in the Design tab of both the Divi Portfolio module and Divi Filterable Portfolio module settings when the Grid Layout is used for choosing the number of portfolio columns to show on each device.
Number of Portfolio Columns on Desktop 2.0
Select the number of portfolio columns to show on Desktop.
Number of Portfolio Columns on Tablet 2.0
Select the number of portfolio columns to show on Tablet.
Number of Portfolio Columns on Phone 2.0
Select the number of portfolio columns to show on Phone.
Divi Gallery Module Number of Columns 2.0
Enable this feature to activate the additional settings located in the Design tab of the Divi Gallery module settings when the Grid Layout is used for choosing the number of image columns to show on each device.
Number of Image Columns on Desktop 2.0
Select the number of image columns to show on Desktop.
Number of Image Columns on Tablet 2.0
Select the number of image columns to show on Tablet.
Number of Image Columns on Phone 2.0
Select the number of image columns to show on Phone.
Woo Products Module Number of Columns 2.0
Enable this feature to activate the additional settings located in the Content tab of the Divi Woo Products module settings for choosing the number of product columns to show on each device.
Number of Product Columns on Desktop 2.0
Select the number of product columns to show on Desktop.
Number of Product Columns on Tablet 2.0
Select the number of product columns to show on Tablet.
Number of Product Columns on Phone 2.0
Select the number of product columns to show on Phone.
Woo Related Products Module Number of Columns 2.3
Enable this feature to activate the additional settings located in the Content tab of the Divi Woo Related Products module settings for choosing the number of product columns to show on each device.
Responsive Setting In Column Layout 2.3
Select the number of product columns to show on Desktop, Tablet, and Phone.
Woo Upsell Products Module Number of Columns 2.3
Enable this feature to activate the additional settings located in the Content tab of the Divi Woo Upsell Products module settings for choosing the number of product columns to show on each device.
Responsive Setting In Column Layout 2.3
Select the number of product columns to show on Desktop, Tablet, and Phone.
Woo Cross Sells Module Number of Columns 2.3
Enable this feature to activate the additional settings located in the Content tab of the Divi Woo Cross Sells module settings for choosing the number of product columns to show on each device.
Column Layout 2.3
Select the number of cross sell product columns to show on Desktop, Tablet, and Phone.
Typography
Text Sizes 2.0
Enable this feature to set the heading (H1, H2, H3, H4, H5, H6) and paragraph text sizes to apply across the entire website on Desktop, Tablet, and Phone.
H1 Heading Text Size – For Desktop 2.0
Set the H1 heading text size value and unit to apply across the entire website on Desktop.
H1 Heading Text Size – Tablet 2.0
Set the H1 heading text size value and unit to apply across the entire website on Tablet.
H1 Heading Text Size – Phone 2.0
Set the H1 heading text size value and unit to apply across the entire website on Phone.
H1 Heading Line Height 2.2
Set the H1 heading line height value and unit to apply across the entire website.
H2 Heading Text Size – Desktop 2.0
Set the H2 heading text size value and unit to apply across the entire website on Desktop.
H2 Heading Text Size – Tablet 2.0
Set the H2 heading text size value and unit to apply across the entire website on Tablet.
H2 Heading Text Size – Phone 2.0
Set the H2 heading text size value and unit to apply across the entire website on Phone.
H2 Heading Line Height 2.2
Set the H2 heading line height value and unit to apply across the entire website.
H3 Heading Text Size – Desktop 2.0
Set the H3 heading text size value and unit to apply across the entire website on Desktop.
H3 Heading Text Size – Tablet 2.0
Set the H3 heading text size value and unit to apply across the entire website on Tablet.
H3 Heading Text Size – Phone 2.0
Set the H3 heading text size value and unit to apply across the entire website on Phone.
H3 Heading Line Height 2.2
Set the H3 heading line height value and unit to apply across the entire website.
H4 Heading Text Size – Desktop 2.0
Set the H4 heading text size value and unit to apply across the entire website on Desktop.
H4 Heading Text Size – Tablet 2.0
Set the H4 heading text size value and unit to apply across the entire website on Tablet.
H4 Heading Text Size – Phone 2.0
Set the H4 heading text size value and unit to apply across the entire website on Phone.
H4 Heading Line Height 2.2
Set the H4 heading line height value and unit to apply across the entire website.
H5 Heading Text Size – Desktop 2.0
Set the H5 heading text size value and unit to apply across the entire website on Desktop.
H5 Heading Text Size – Tablet 2.0
Set the H5 heading text size value and unit to apply across the entire website on Tablet.
H5 Heading Text Size – Phone 2.0
Set the H5 heading text size value and unit to apply across the entire website on Phone.
H5 Heading Line Height 2.2
Set the H5 heading line height value and unit to apply across the entire website.
H6 Heading Text Size – Desktop 2.0
Set the H6 heading text size value and unit to apply across the entire website on Desktop.
H6 Heading Text Size – Tablet 2.0
Set the H6 heading text size value and unit to apply across the entire website on Tablet.
H6 Heading Text Size – Phone 2.0
Set the H6 heading text size value and unit to apply across the entire website on Phone.
H6 Heading Line Height 2.2
Set the H6 heading line height value and unit to apply across the entire website.
Paragraph For Desktop 2.0
Set the paragraph text size value and unit to apply across the entire website on Desktop.
Paragraph For Tablet 2.0
Set the paragraph text size value and unit to apply across the entire website on Tablet.
Paragraph For Phone 2.0
Set the paragraph text size value and unit to apply across the entire website on Phone.
Paragraph Line Height 2.2
Set the paragraph line height value and unit to apply across the entire website.
Menu
Default Header Menu
Enable Settings For Default Header Menu 2.4 Choose to enable all the menu related settings in the Divi Menu module. Show X Icon When Opened 2.0 Change the mobile menu hamburger icon to an X when the dropdown menu it is toggled open. Show A Hamburger Menu On Desktop 2.2 Choose to replace the open Desktop menu with a hamburger menu instead. Add Text Beside Hamburger Menu Icon 2.2 Add custom text to the left side of the hamburger menu icon. Hamburger Menu Text 2.2 Enter custom text to show on the left side of the hamburger menu. Collapse Mobile Menu Submenus 2.2 Choose to collapse the submenu by default. Collapsible Submenu Icon Color 2.4 Pick a color for the collapsible submenus icon. Collapsible Submenu Icon Background Color 2.4 Pick a color for the collapsible submenus icon background. Collapse Submenu When Another Is Opened 2.3 Choose to collapse the open submenu when another submenu is opened. Open/Close Submenus By Clicking Parent Menu Item 2.2 Choose to open and close the submenu by clicking the parent menu item. This effectively disables the parent menu link. Fixed Navigation Bar On Mobile 2.3 Enable this setting to make the header menu navigation bar stay fixed at the top of the screen on Tablet and Phone device sizes. Menu Breakpoint 2.0 Enter the screen width pixel value for the responsive breakpoint for when the menu changes between desktop and mobile versions. The default value in Divi is 981px.Menu Module
Enable Settings In Menu Module 2.2 Choose to enable all the menu related settings in the Divi Menu module. Choose Navigation Menu Per Device In Menu 2.0.2 Enable this setting to activate additional responsive settings in the Menu module for choosing a different navigation menu for Desktop, Tablet, and Phone. Show A Hamburger Menu On Desktop 2.2 Choose to replace the open Desktop menu with a hamburger menu instead. Menu Closed Icon 2.3 Choose an icon for the menu when it is closed. Menu Opened Icon 2.3 Choose an icon for the menu when it is opened. Show X Icon When Opened 2.2 Change the mobile menu hamburger icon to an X when the dropdown menu it is toggled open. Add Text Beside Hamburger Menu Icon 2.2 Add custom text to the left side of the hamburger menu icon. Hamburger Menu Text 2.2 Enter custom text to show on the left side of the hamburger menu icon. Show An Open Menu On Phone 2.1 Choose to replace the Phone hamburger menu with an open menu instead. Collapse Mobile Menu Submenus 2.2 Choose to collapse the submenu by default. Collapsible Submenu Icon Color 2.4 Pick a color for the collapsible submenus icon. Collapsible Submenu Icon Background Color 2.4 Pick a color for the collapsible submenus icon background. Collapse Submenu When Another Is Opened 2.3 Choose to collapse the open submenu when another submenu is opened. Open/Close Submenus By Clicking Parent Menu Item 2.2 Choose to open and close the submenu by clicking the parent menu item. This effectively disables the parent menu link. Mobile Menu Breakpoint 2.2 Enter the screen width pixel value for the responsive breakpoint for for when the menu changes between desktop and mobile versions. The default value in Divi is 981px. Make Mobile Menu Height Scrollable 2.3.1 Choose to make the mobile menu scrollable to solve the situations when the menu is too tall and goes off the bottom of the screen. Mobile Menu Scrollable Max Height 2.3.1 Set the maximum height of the mobile menu. A scrollbar will be used if the menu is taller than this height.CSS Media Queries
Custom CSS For Desktop Only 2.0
Place any custom CSS here that you want to apply on Desktop device sizes only (981px and up).
Custom CSS For Tablet Only 2.0
Place any custom CSS here that you want to apply on Tablet device sizes only (767px – 980px).
Custom CSS For Phone Only 2.0
Place any custom CSS here that you want to apply on Phone device sizes only (0px – 767px).
Custom CSS For Desktop And Tablet Only 2.0
Place any custom CSS here that you want to apply on Desktop and Tablet device sizes only (0px – 767px).
Custom CSS For Tablet and Phone Only 2.0
Place any custom CSS here that you want to apply on Tablet and Phone device sizes only (0px – 767px).
Custom CSS Media Queries 1-5 2.1
Custom Min-Width Value 2.1
Enter a custom value to set the minimum device size for the code to take effect in the custom media query.
Custom Max-Width Value 2.1
Enter a custom value to set the maximum device size for the code to take effect in the custom media query.
Code Boxes 2.1
Place any custom CSS here that you want to apply only on device sizes between the custom min-width and max-width values.
Layout
Miscellaneous
Plugin Data
Render Scripts Inline 2.3.6
Choose how you want scripts to load. When this setting is disabled, scripts will render from a URL by default. When this setting is enabled, scripts will render inline.
Remove Plugin Data When Uninstalled 2.3
This setting will remove all plugin data and saved settings when you uninstall the plugin. Please use this setting carefully with the understanding that if you enable the setting you will lose all saved settings if you uninstall the plugin.