Divi Responsive Helper

Documentation & Support

Miscellaneous settings of the Divi Responsive Helper Plugin by Pee Aye Creative


Divi Responsive Helper Miscellaneous Settings 1

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.

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.

mobile address bar color setting in the Divi Responsive Helper plugin

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.

Divi Responsive Helper Tabs Module Tab Layout Settings
Divi Responsive Helper Tabs Module layout on Tablet
Divi Responsive Helper Tabs Module layout 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.

Divi Responsive Helper setting for Blurb Image Icon Positon on Phone devices

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.

Back to top button visibility options per device in the Divi Responsive Helper plugin
Last updated January 23, 2024

Your Cart