Divi Responsive Helper

Divi Responsive Helper

Quickly make Divi responsive on all devices with custom preview sizes, column stacking, handy design settings, and our automatic widow fixer!

The Divi Responsive Helper is the ultimate Divi responsive toolkit with awesome features and settings to help make your website look great and function well on all devices!

Over 30 Main Features And Counting!

Choose The Number of Row Columns

If you want to have two columns side-by-side on mobile…what do you do? You can’t! But with the Divi Responsive Helper, you can! Our super helpful column number feature allows you to choose the number of columns that stack side-by-side on Desktop and Phone device sizes.

Set Row Column Stacking Order

You no longer have to add crazy code or pull your hair out trying to change the column stacking order. This feature allows you to manually choose the order in which the columns stack on top of each other on Desktop and Phone device sizes.

Choose The Number of Blog Columns

The Divi Blog module uses a default number of columns based on the column width or device size, but has no setting to change it. The Divi Responsive Helper settings allow you to choose the number of blog post columns that stack side-by-side in the Blog module on Desktop, Tablet, and Phone device sizes.

Choose The Number Of Gallery Image Columns

The Divi Gallery module shows four images by default on Desktop, three on Tablet, and one on Phone. There is no setting to change these numbers. The Divi Responsive Helper settings allow you to choose the number of image columns that stack side-by-side in the Gallery module on Desktop, Tablet, and Phone device sizes.

Choose The Number of Portfolio Project Columns

The Divi Portfolio module and Divi Filterable Portfolio module has four columns by default on Desktop, two on Tablet, and one on Phone. But there is no way to change these numbers. The Divi Responsive Helper settings allow you to choose the number of portfolio project columns that stack side-by-side on Desktop, Tablet, and Phone device sizes.

Choose The Number Of Shop WooCommerce Product Columns

The Divi Shop module has four columns by default on Desktop, two on Tablet, and most recently updated to two on Phone as well. This almost always looks terrible, and there are no settings to change it. The Divi Responsive Helper settings allow you to choose the number of WooCommerce product columns that stack side-by-side in the Shop module on Desktop, Tablet, and Phone device sizes.

Automatically Solve Widow Words On The Last Line Of Text

Are you getting annoyed by those pesky single words at the end of a heading or paragraph that sit on their own line? This happens a lot on Divi sites, especially on mobile, and many users don’t even realize it. Many Divi users find themselves trying all kinds of tricks to eliminate these widows, including soft-returns, resizing text, or CSS methods that simply don’t work.

The Divi Responsive Helper makes this easy with a real solution that prevents widows throughout your website. The plugin checks your paragraph and heading text to see how many words are on the last line at any screen size and automatically forces the words to match the desired setting that you choose.

Preview How Your Site Will Look On Any Device Size Directly In The Builder

The Divi Responsive Helper plugin adds custom preview sizes directly in the Divi Visual Builder. The new set of options allows you to quickly choose one of the customizable presets, or enter custom value. Take advantage of the full power of the three default responsive breakpoints in Divi by using our instant, customizable preview size, enabling you to make your Divi website responsive down to the pixel!

Completely Disable The Built-In Divi Responsive Views Feature

You probably know by now that Divi released their own built-in preview size feature after our plugin became popular. However, the new feature is limited and frustrating. Because of these limitations and frustrations, we created a setting in the Divi Responsive Helper to completely disable this Divi feature and use ours instead!

Quickly Set Global Sitewide Text Sizes For Desktop, Tablet, And Phone

The Divi Responsive Helper gives you input fields in the Divi Theme Options to set each of your heading (H1-H6) and paragraph (text, body text, etc) text on each device. Every module on your website will now have consistent text sizes and it only takes a few minutes to set up! You can use whatever value you prefer, like px, em, rem, etc! And the best part is that you can override any of these settings at any time in any of the module settings!

Convenient Custom CSS Media Queries For Any Device Size

Divi comes with only one main Custom CSS input area, but if you want your CSS to only apply on certain device sizes you would need to specifically write your own custom media queries. This can be difficult and intimidating, especially for beginners. The Divi Responsive Helper plugin provides you with several new custom CSS input boxes that correspond to all of the built in Divi breakpoint sizes.

Enable Parallax Effect On Mobile

Divi has a parallax background effect feature within any section, row, column, or module. However, the built-in feature only works on Desktop! The Divi Responsive Helper plugin solves that limitation and applies it to all devices. Once you enable the feature, it automatically adds support for the parallax effect on mobile devices whenever the Use Parallax Effect setting is enabled.

Automatically Open The Desktop, Tablet, And Phone Tabs

Use the Divi Responsive Helper to automatically toggle open the three responsive tabs for Desktop, Tablet, and Phone in the Divi Builder. This annoying task is made easy with a switch of a toggle! Now when you are ready to make your site responsive you can adjust the Divi settings for each device without clicking to open the tabs for every setting!

Change The Blurb Image/Icon Position On Phone

When you use a Blurb module with an icon or image on the left, the mobile version gets really awkward with spacing. The title and text get really narrow, and this looks very unprofessional. To remedy this, some would say to duplicate the module and adjust the visibility settings, but that is not recommended at all. The easier solution is to use our setting in the Design tab of the Divi Blurb module to move the icon or image to the top on mobile, but keep the desktop version the same. Much better!

Choose Navigation Menu Per Device In Menu Module

The Divi Menu module is limited because it only allows you to select one WordPress navigation menu, and that menu shows on all devices. So we hacked the Divi Menu module and added responsive settings to the menu selection dropdown! Now you can choose a completely different navigation menu to show on Desktop, Tablet, and Phone!

Show/Hide Menu Items Per Device

WordPress navigation menus do not have any way to control which items show on which device. This Divi Responsive Helper feature allows you to control which menu items to show or hide on Desktop, Tablet, or Phone. Once enabled, each menu item in Appearance>Menus will have checkmark boxes which allow you to choose on which device sizes you want that particular menu item to be visible.

Tabs Module Tab Layout

By default, the tabs in the Divi Tabs module are horizontal on Tablet and only stack vertically on Phone. But what if you want them to stack vertically on Tablet, or maintain a horizontal layout on Phone? With the Divi Responsive Helper plugin, you now have the options in the Design tab of the Divi Tabs module to stack the tabs vertically on Tablet, and horizontally on Phone.

Section Default Top/Bottom Padding

These three settings allow you to easily set the default top and bottom padding on Desktop, Tablet, and Phone for all the sections on your website. The new settings in Theme Options correspond to those found in the Customizer, and each location updates when you change the other. It is important to note which settings use percentage units and which ones use pixel units. The Divi Customizer uses a percentage value for the top and bottom padding on Desktop, and a pixel value for the top and bottom padding on Tablet and Phone. Also note that these global settings are default but can be overridden by adjusting the padding in any section.

Row Default Top/Bottom Padding

These three settings allow you to easily set the default top and bottom padding on Desktop, Tablet, and Phone for all the rows on your website. The new settings in Theme Options correspond to those found in the Customizer, and each location updates when you change the other. It is important to note which settings use percentage units and which ones use pixel units. The Divi Customizer uses a percentage value for the top and bottom padding on Desktop, and a pixel value for the top and bottom padding on Tablet and Phone. Also note that these global settings are default but can be overridden by adjusting the padding in any row.

Set The Row Default Width

These three settings allow you to easily set the default width on Desktop, Tablet, and Phone for all the rows on your website. The new settings in Theme Options correspond to those found in the Divi Builder in the Row settings in the Design tab in the Sizing toggle. Note that Divi uses percentage units by default. Also note that each of these global settings can be overridden by adjusting the width setting in any row.

Row Default Max Width

These three settings allow you to easily set the default max width on Desktop, Tablet, and Phone for all the rows on your website. The new settings in Theme Options correspond to those found in the Divi Builder in the Row settings in the Design tab in the Sizing toggle. Note that Divi uses pixel units by default. Also note that each of these global settings can be overridden by adjusting the max width setting in any row.

Mobile Menu Opened Icon

Enable this feature to change the mobile menu hamburger icon to an X when the dropdown menu is toggled open. An X gives the visitor a visual indication that the menu has been opened, and can be clicked to close it again. This is a simple feature that improves the user experience.

Mobile Menu Breakpoint

Enter the screen width pixel value for the responsive breakpoint for when the menu changes between desktop and mobile versions. This is helpful especially when you have a larger number of menu items that start to overlap due to space issues. Increasing the breakpoint higher than the default 981px allows the hamburger menu to appear on larger device sizes to prevent the ugly and unprofessional stacking issue.

Disable Animations On Mobile

The Divi animation effects do not have responsive settings to change them or turn them off per device, so we included this feature to disable animations on mobile. Usually, animations increase the website load time and are sometimes annoying to view on a phone, so we hope this allows you to improve site performance and user experience.

Prevent Horizontal Scroll

Enable this feature to prevent a common issue with Divi which causes the mobile site to scroll sideways with a horizontal scroll bar. Many Divi websites have this problem and it often goes unnoticed, so we recommend using this on all your sites.

Mobile Pinch Zooming

Enable this feature to allow users to pinch and zoom on mobile. By default, Divi does not allow you to do this. This can be really helpful for visitors who are struggling to read text or to click links, or who may need to enlarge the screen to see images, charts, etc.

Different Mobile Logo

This feature allows you to set a different logo image to appear in the default header menu on tablet and phone devices. This is great if you need your logo to have a different size or shape for desktop and mobile. (Keep in mind this is for the default header, not the Menu module since that module already has this ability.)

Mobile Header Bar Color

Set a color for the mobile address bar header for Android devices using the Chrome browser. This is a really nice effect to add that extra touch of branding and personalization.

Back To Top Button Visibility

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. This feature is very handy and practical. For example, if your layouts are fairly short on desktop and the button is not needed, the layout may get really long on mobile when all the content is stacked. This would cause the user to need to scroll and scroll just to get back to the top. In this use case, you may want to only show the Back To Top Button on Phone.

New Features Always In Development!

Our plugin roadmap is always full of even more amazing new features for future updates! Check our roadmap here: https://www.peeayecreative.com/docs/divi-responsive-helper/roadmap/

Ease The Pain. Enjoy The Benefits!

Very Simple To Use

We have integrated the features of this plugin beautifully into the normal Divi environment, including the Divi Theme Options and within all the Sections, Rows, Columns, and Modules. Easily enable or disable the individual features!

A Remarkable Time Saver

The Divi Responsive Helper was created to save time and improve efficiency. Spend less time opening and closing responsive settings and closing the builder constantly to test the responsive screen sizes in the browser tools. Instead of confusion and hassle, spend more time being creative with your design layouts and getting stuff done!

Avoid Costly Mistakes

The default Divi responsive settings are cumbersome, awkward, and very limited. Worst of all, this can lead to embarrassing mistakes with long-term revenue loss. For example, a poorly designed mobile experience leads to much less search engine visibility which means fewer visitors and ultimately less money in your pocket. Our solutions clear up the confusion so you can edit your Divi websites to perfection.

5 Star Reviews From Our Current Customers

Tah Terence T-Boi

“Woow, Awesome plugin Nelson, Pee-Aye Creative is indeed creative.”

Antoine Morales

“I was hating Divi, because of the bad mobile preview, really too wide. I’m really happy I found this plugin, it’s really very helpful for creating responsive pages without switching every minute to the Google developer page. The developers are very responsive too and correct minor bugs when reported. Is really a must for creating a website.”

Ron Linders

“Hi Nelson, what a great job man! This is really a big step forward in designer responsive websites! Love it and use it all the time when developing me websites but also to review older ones. Keep up the good work!”

Greg Merriman

“Nelson’s Divi Responsive Helper plugin works really well and makes designing your site with great responsiveness at ANY size really simple. I love the fact that the team behind it seems determined to keep improving and adding to the plugin. I’m really pleased that I discovered PEE-AYE Creative and I hope that they design and release lots more plugins to help overcome Divi’s quirkiness and shortcomings.”

Sharyn Fraser

“Brilliant plugin! Especially as I am not that technical, so this saved my bacon with launching a new site that had columns and were displaying the images out of order on mobile. It does all the work and saves me so much time ensuring that the mobile view of my Divi sites is optimal – 5 stars!”

Barrie Simpson

“Column stacking – what a time saver. Nelson, you are the man – the column stacking feature certainly makes for speeding up page displays and without the need for creating three sets of modules for each – desktop, tablet and phone.“

Michael Gerontides

“I really like your plugin and I must say that it helps a lot in designing a truly responsive site. I really like the ability to define your own size, a fantastic feature. Great job, great plugin most definitely saves time and frustration. Thank you.”

Christoph Neis

“I just started using the Divi Responsible Helper – and it’s a fine little tool that has a big impact on my work. Saves me lots of time because finally I can build my pages responsive in one-stop. Thanks a lot.”

Stephane

“What a top plugin ! I use it for all my client’s websites! Thank you so much.”

WR Mercier

“Nelson takes a simple approach to create programs that solve common sense issues and time related problems. His program, Divi Responsive Helper eliminates excessive time spent creating websites that look and perform GREAT on all devices. Nelson is also ultra quick to respond to questions and/or problems. Great work Nelson!”

Alan McDonald

“Definitely solves a couple usage problems with Divi and helps streamline new builds!”

Jacques Vreugdenhil

“Another great plugin from Nelson. This one is really going to help save time in developing sites for mobile screens.”

Nick Morgan

“Hey Nelson, just wanted to say that I love The Divi Responsive Helper plugin I just purchased. It has helped my workflow as well as saved me time. I can see how you came up with the name. Lol”

Anna Stansbie

“What a fantastic plugin, from the most SUPER-HELPFUL company – PEE-AYE CREATIVE! Instant, polite and informative answers to any questions. Just the best, thank you so much Nelson!”

Vera Schafer

“Responsiveness is my main concern when I deliver a website. Design may look beautiful on a desktop but we all know this is not the device most people browse and evaluate our work. It is good to find developers that listen to our priority requests and work on it first. Thank you, Nelson! You made my day today!”

Frequently Asked Questions

What about the new Divi responsive preview update?

You probably know by now that Divi released their own built-in preview size feature after our plugin became popular. However, the new feature is limited and frustrating. Because of these limitations and frustrations, we created a setting in the Divi Responsive Helper to completely disable this Divi feature. Here are a few things to keep in mind as you consider this decision in comparison to the features our plugin had first and still has today:

How does this plugin work?

The plugin adds new features directly in the existing Divi Visual Builder in the settings for modules, rows, columns, and sections. You must be using the Divi Theme or Divi Builder Plugin. Please check out our documentation page for more info on all the features.

Does this plugin add more breakpoints?

Our plugin gives you live custom preview sizes. The custom preview sizes are not CSS breakpoints. Most of the time you do not actually need more breakpoints. Instead, you should use our plugin’s custom preview size or presets to find the perfect balance of settings for the existing Desktop, Tablet, and Phone breakpoints.

Why do we need a custom preview size?

Divi comes with three main responsive breakpoints. Those are Desktop (above 981px), Tablet (980px – 768px), and Phone (767px and down). The problem is, these preview sizes are very limiting. To check how your Divi layout would look on any other screen width, you would need to exit the Divi Builder and go to your browser development tools. The endless back and forth is a hassle, and not efficient at all. Our plugin gives you live custom preview sizes directly in the Divi Builder. To be clear, the custom preview sizes are not additional breakpoints. In fact, most of the time you do not actually need more breakpoints. Instead, you should use our plugin’s custom preview size to find the perfect Divi setting for each of the existing Desktop, Tablet, and Phone breakpoints. Remember, don’t adjust the Divi settings for each of the presets or for every custom value expecting it to act like a breakpoint. Instead, use the customizable preview size as a live view within the Divi Builder to see how the layout will look at any screen size.

Why do we need the Auto-Open Responsive Tabs feature?

Making your Divi website responsive is easy, but at first it can be very confusing. Many users assume that changing the preview size for Desktop, Tablet, and Phone and then adjusting the settings is applying different unique settings to each device. But this is misleading. To apply different settings to each device, you need to have the three main responsive tabs open under each Divi setting.

After you create a beautiful Divi layout on desktop and are ready to go through your site and make it responsive, it is annoying to have to click the little responsive icon on every setting to open the responsive Desktop, Tablet, and Phone tabs. This feature opens these tabs automatically for you, saving you time and hassle.

What does the widow fixer do?

The widow fixer feature checks your paragraph and heading text (depending which settings you are using) and checks how many words on the last line. It automatically forces the words to match the desired setting. For example, if you set the minimum to no less than three words on the last line, it will automatically bump words down so that there are three words on the last line. This helps your text look more professional on all devices.

Documentation

Please be sure to browse all the documentation before submitting a support request. We have everything you need to know about installing and using the plugin in our full documentation area. Please reference everything there and if you have any issues you can submit a support ticket from there. https://www.peeayecreative.com/docs/divi-responsive-helper/

By Pee-Aye Creative