Miscellaneous Settings Overview
The Divi Responsive Helper plugin includes several features that are very helpful by themselves but do not fit into any of the bigger categories:
- Mobile Menu Opened Icon
- Show/Hide Menu Items
- Mobile Menu Breakpoint
The purpose of these features is to make it easier for you to make your Divi website responsive. In this document, we will explain what each of these features are and what they do and how to use them.
To begin using the menu settings, 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. Click on the “Miscellaneous” tab to see all of the miscellaneous features in the plugin.
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.
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.