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.
NOTE: All of the settings are turned off by default, so please remember to turn on each of the settings you want to use.
Preview Size
The following is a list of all the settings related to the custom preview size feature along with images and descriptions of each item.
FULL GUIDE: Using The Preview Size Settings
Automatically Open/Close Responsive Tabs 1.0
Enable this feature to automatically open and close the responsive settings icon for the Desktop, Tablet and Phone tabs in the Visual Builder.
FULL GUIDE: Automatic Responsive Tabs
Here is an example of this feature in the Divi Builder settings:
Enable this feature to show the preview size preset buttons in the Visual Builder page settings (located in the bottom left corner by default).
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.
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.
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.
Widow Fixer
The following is a list of all the settings related to the widow fixer feature along with images and descriptions of each item.
FULL GUIDE: Using The Widow Fixer Settings
Widow Fixer 1.1
Enable this feature on your website.
Paragraphs 1.1
Enable this feature to remove the widow words on the last line of paragraph text.
Minimum Number of Widow Words on Last Line 1.1
Select the minimum number of words allowed on the last line of each paragraph.
Exclude Pages 1.3
Enable to excluded the widow fixer on specific pages.
Select Pages To Exclude 1.3
Choose to remove pages from the widow fixer. All pages marked with an X will be excluded.
Column Stacking
The following is a list of all the settings related to the Column Stacking features along with images and descriptions of each item.
FULL GUIDE: Using The Column Stacking Settings
Row Column Stacking Order
Divi>Theme Options>Divi Responsive Helper>Column Stacking
Row Column Stacking Order 1.2
Enable this feature in the Advanced tab of the Divi Builder columns settings.
Row>Column Settings>Advanced Tab>CSS IDs & Classes
Stacking Order on Tablet 1.3
Select a number to designate the order in which the columns will stack on Tablet.
Stacking Order on Phone 1.3
Select a number to designate the order in which the columns will stack on Phone.
Row Number of Columns
Divi>Theme Options>Divi Responsive Helper>Column Stacking
Row Number of Columns 1.2
Enable this feature in the Advanced tab of the Divi Builder rows settings.
Row>Advanced Tab>CSS IDs & Classes
Number of Columns on Tablet 1.2
Select the number of columns on Phone.
Number of Columns on Phone 1.2
Select the number of columns on Phone.
Gallery Module
Divi>Theme Options>Divi Responsive Helper>Column Stacking
Divi Gallery Module Number of Columns 2.0
Enable this feature in the Advanced tab of the Divi Gallery module settings.
Gallery>Advanced Tab>CSS IDs & Classes
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.
Blog Module
Divi>Theme Options>Divi Responsive Helper>Column Stacking
Divi Blog Module Number of Columns 2.0
Enable this feature in the Advanced tab of the Divi Blog module settings.
Blog>Advanced Tab>CSS IDs & Classes
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.
Portfolio & Filterable Portfolio Modules
Divi>Theme Options>Divi Responsive Helper>Column Stacking
Divi Portfolio Modules Number of Columns 2.0
Enable this feature in the Advanced tab of both the Divi Portfolio module and Divi Filterable Portfolio module settings.
Portfolio/Filterable Portfolio>Advanced Tab>CSS IDs & Classes
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.
Shop Module
Divi>Theme Options>Divi Responsive Helper>Column Stacking
Shop Module Number of Columns 2.0
Enable this feature in the Advanced tab of the Divi Shop module settings.
Shop>Advanced Tab>CSS IDs & Classes
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.
Text Sizes
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.
Heading H1 For Desktop 2.0
Set the H1 heading text size value and unit to apply across the entire website on Desktop.
Heading H1 For Tablet 2.0
Set the H1 heading text size value and unit to apply across the entire website on Tablet.
Heading H1 For Phone 2.0
Set the H1 heading text size value and unit to apply across the entire website on Phone.
Heading H2 For Desktop 2.0
Set the H2 heading text size value and unit to apply across the entire website on Desktop.
Heading H2 For Tablet 2.0
Set the H2 heading text size value and unit to apply across the entire website on Tablet.
Heading H2 For Phone 2.0
Set the H2 heading text size value and unit to apply across the entire website on Phone.
Heading H3 For Desktop 2.0
Set the H3 heading text size value and unit to apply across the entire website on Desktop.
Heading H3 For Tablet 2.0
Set the H3 heading text size value and unit to apply across the entire website on Tablet.
Heading H3 For Phone 2.0
Set the H3 heading text size value and unit to apply across the entire website on Phone.
Heading H4 For Desktop 2.0
Set the H4 heading text size value and unit to apply across the entire website on Desktop.
Heading H4 For Tablet 2.0
Set the H4 heading text size value and unit to apply across the entire website on Tablet.
Heading H4 For Phone 2.0
Set the H4 heading text size value and unit to apply across the entire website on Phone.
Heading H5 For Desktop 2.0
Set the H5 heading text size value and unit to apply across the entire website on Desktop.
Heading H5 For Tablet 1.4
Set the H5 heading text size value and unit to apply across the entire website on Tablet.
Heading H5 For Phone 1.4
Set the H5 heading text size value and unit to apply across the entire website on Phone.
Heading H6 For Desktop 1.4
Set the H6 heading text size value and unit to apply across the entire website on Desktop.
Heading H6 For Tablet 1.4
Set the H6 heading text size value and unit to apply across the entire website on Tablet.
Heading H6 For Phone 1.4
Set the H6 heading text size value and unit to apply across the entire website on Phone.
Paragraph For Desktop 1.4
Set the paragraph text size value and unit to apply across the entire website on Desktop.
Paragraph For Tablet 1.4
Set the paragraph text size value and unit to apply across the entire website on Tablet.
Paragraph For Phone 1.4
Set the paragraph text size value and unit to apply across the entire website on Phone.
CSS Media Queries
The following is a list of all the settings related to the CSS Media Queries feature.
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).
Menu
The following is a list of all the settings and features related to the menu.
Change the mobile menu hamburger icon to an X when the dropdown menu it is toggled open.
Show/Hide Menu Items 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.
Mobile Menu Breakpoint 2.0
Enter the screen width pixel value for the responsive breakpoint for for when the menu changes between desktop and mobile versions.
Miscellaneous
The following is a list of all the miscellaneous settings that were not easily categorized and tend to be smaller but helpful features.
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 Advanced tab of the Divi Tabs module for setting the tab stacking layout.
Blurb Image/Icon Placement On Mobile 2.0
Enable this feature in the Advanced tab of the Divi Blurb module settings.
Mobile Content Width 2.0
Enable this setting to set a custom row width for your entire website.
When the Mobile Content Width setting is enabled, a new field appears below:
Custom Row Width 2.0
Enter a percentage value to set the default width of all rows across your entire site on tablet and mobile devices.