Below is a list of all the custom settings and features in the Divi Responsive Helper plugin. The additional standard Divi module settings are also included. All settings are marked as already available in current version or planned and in progress for future versions.
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.
Theme Options Export/Import
The Divi Theme Options have a portability feature that allows you to export and import settings from one site to another. Our plugin settings are added to the Divi Theme Options panel, and the Divi Responsive Helper settings will export and import as well. This is a really great way to save time by using the export file as a preset of Divi Theme Option settings that can be used on all your new sites.
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.
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.
Shop Module Number of Columns 2.0
Enable this feature to activate the additional settings located in the Content tab of the Divi Shop 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.
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
Enable Settings In Menu Module 2.2
Choose to enable all the menu related settings in the Divi Menu module.
Show/Hide Menu Items Per Device 2.0
Enable this feature to add new checkmarks in the WordPress navigation menu items to show or hide the menu items on Desktop, Tablet, or Phone.
Default Header Menu
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.
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
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.
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.
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
Section Default Top/Bottom Padding On Desktop (%) 2.0
Set the default top and bottom padding percentage value to apply to all sections across the entire website on Desktop.
Section Default Top/Bottom Padding On Tablet (px) 2.0
Set the default top and bottom padding pixel value to apply to all sections across the entire website on Tablet.
Section Default Top/Bottom Padding On Phone (px) 2.0
Set the default top and bottom padding pixel value to apply to all sections across the entire website on Phone.
Row Default Top/Bottom Padding On Desktop (%) 2.0
Set the default top and bottom padding percentage value to apply to all rows across the entire website on Desktop.
Row Default Top/Bottom Padding On Tablet (px) 2.0
Set the default top and bottom padding pixel value to apply to all rows across the entire website on Tablet.
Row Default Top/Bottom Padding On Phone (px) 2.0
Set the default top and bottom padding pixel value to apply to all rows across the entire website on Phone.
Row Default Width On Desktop (%) 2.0
Set the default width percentage value to apply to all rows across the entire website on Desktop.
Row Default Width On Tablet (%) 2.0
Set the default width percentage value to apply to all rows across the entire website on Tablet.
Row Default Width On Phone (%) 2.0
Set the default width percentage value to apply to all rows across the entire website on Phone.
Row Default Max Width On Desktop (px) 2.0
Set the default max-width pixel value to all rows across the entire website on Desktop.
Row Default Max Width On Tablet (px) 2.0
Set the default max-width pixel value to apply to all rows across the entire website on Tablet.
Row Default Max Width On Phone (px) 2.0
Set the default max-width pixel value to apply to all rows across the entire website on Phone.
Miscellaneous
Blog Module Post Count 2.2
Enable this setting to activate responsive options in the Blog module for setting the post count on Desktop, Tablet, and Phone.
Gallery Module Image Count 2.2
Enable this setting to activate responsive options in the Gallery module for setting the image count on Desktop, Tablet, and Phone.
Portfolio Module Project Count 2.2
Enable this setting to activate responsive options in the Portfolio and Filterable Portfolio modules for setting the project count on Desktop, Tablet, and Phone.
Woo Products Module Product Count 2.2
Enable this setting to activate responsive options in the Woo Products module for setting the product count on Desktop, Tablet, and Phone.
Auto Open Responsive Tabs 1.0
Enable and this feature to automatically open the responsive Desktop, Tablet and Phone tabs in the Visual Builder.
Disable Hover Effects On Touch Devices 2.1
Enable this feature to disable hover effects on touch devices.
Parallax On Mobile Devices 2.0
Enable this feature to automatically add support for parallax effect on mobile devices whenever the Use Parallax Effect setting is enabled within any Divi section, row, column, or module.
Disable Animations On Mobile 2.0
Enable this feature to disable animations on mobile to improve performance.
Prevent Horizontal Scroll 2.0
Enable this feature to prevent a common issue with Divi which causes the mobile site to scroll sideways with a horizontal scroll bar.
Mobile Pinch Zooming 2.0
Enable this feature to allow users to pinch and zoom on mobile.
Mobile Logo 2.0
Set a different logo image to appear in the default header menu on tablet and phone devices.
Mobile Header Bar Color 2.0
Set a color for the mobile address bar header for Android devices using the Chrome browser.
Tabs Module Tab Layout 2.0
Enable this feature to show settings in the Design tab of the Divi Tabs module for setting the tab stacking layout on Tablet and Phone.
Blurb Image/Icon Position On Phone 2.0
Enable this feature to activate new settings in the Design tab of the Divi Blurb module settings for setting the blurb image/icon position on Phone devices when the default placement is set to left.
Back To Top Button Visibility Phone 2.0
Choose on which devices to show the Back To Top Button. This feature first requires the main Back To Top Button to be enabled in Divi>Theme Options>General.