Overview
The Divi Responsive Helper plugin includes several features that are very helpful individually, but do not fit into any of the main feature categories with their own navigation tabs in the plugin settings. There are many small but mighty features designed to make it easier for you to make your Divi website responsive. This document serves as an index of those features, listing each with an overview and a link to the relevant documentation guide, as needed.
How To Use
Access The Miscellaneous Settings Divi 4
To start using the miscellaneous 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 Miscellaneous subtab and adjust the settings as needed.
Access The Miscellaneous Settings Divi 5
To start using the miscellaneous 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 Miscellaneous tab from the left sidebar.
Preview Size Presets And Custom Values Divi 4
Divi has three main responsive breakpoints: Desktop (above 981px), Tablet (980px – 768px), and Phone (767px and below). However, these preview sizes are limited. To see your layout on different screen widths, you usually need to exit the Divi Builder and open your browser’s developer tools. This process is cumbersome and inefficient. Our plugin solves this problem by offering live custom preview sizes. These sizes are not new breakpoints; in most cases, you don’t need additional breakpoints. Instead, use our plugin’s custom preview sizes to find the best settings for the existing Desktop, Tablet, and Phonebreakpoints. Remember, don’t change the Divi settings for each preset or custom value, expecting it to act as a breakpoint. Use the customizable preview size within the Divi Builder to see your layout at any screen size.
Check Our Full Guide!
Check the full documentation guide and learn how to set a custom preview size!
Disable Responsive Views Divi 4
Divi introduced its own built-in preview size feature after our plugin gained popularity. However, this new feature is quite limited and can be frustrating to use. Due to these drawbacks, we added an option in the Divi Responsive Helper to fully disable this Divi feature.
Check Our Full Guide!
Check the full documentation guide and learn how to disable the Divi responsive views feature!
Disable Hover Effects On Touch Devices
Hover effects do not work well on devices without a mouse, and this has always been an issue in Divi. Now with our new toggle, you can simply disable any hover effects added in Divi modules on devices that are touchscreens. So now hover effects will not awkwardly appear after touching something on tablets and phone.
If you want to disable this feature on any element, simply add the CSS class “pac_drh_responsive_hover_effect” in the section, row, or module.
Parallax On Mobile Devices
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. By default, parallax only works on Desktop in Divi, so this settings solves that and applies it to all devices.
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.
Quickly Set Global Sitewide Text Sizes & Line Height Divi 4
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 sizes and line height on each device. Every module on your website will now have consistent text sizes and line height, 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!
Check Our Full Guide!
Learn how to set global text sizes across each breakpoint in Divi 4!
Automatically Open Responsive Tabs Divi 4
Users might think changing preview sizes for Desktop, Tablet, and Phone applies different unique settings to each device, but this is misleading. To set different options for each device, you must have the three main responsive tabs open under each Divi setting. After creating a layout on desktop and reviewing responsiveness, clicking the responsive icon on each setting is tedious. This feature automatically opens these tabs, saving time. When enabled, opening a setting toggle will keep it open until manually closed, affecting all toggles viewed.
Check Our Full Guide!
Learn how to automatically open responsive tabs for quick access to mobile and tablet settings.
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.
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 Address Bar Color
Set a color for the mobile address bar header for Android devices using the Chrome browser. I have also been told it works on other browsers like Safari Browser on iMac. This is a really nice effect to add that extra touch of branding and personalization.
Tabs Module Tab Layout
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. 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 our plugin, you now have the option to stack the tabs vertically on Tablet, and horizontally on Phone.
Blurb Image/Icon Position On Phone
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. The reason we added this is because 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 to move the icon or image to the top on mobile, but keep the desktop version the same.
Back To Top Button Visibility Phone
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.
