Overview

Responsive breakpoints define how your layouts adapt across different screen sizes, and Divi’s default values are designed to work for most sites. However, modern devices vary widely, and a single set of breakpoint values does not always produce the best results for every design.

The features in the Divi Responsive Helper plugin give you more control over how breakpoints behave at a sitewide level, allowing you to tailor responsive behavior to your specific design needs. By adjusting breakpoint values and availability, you can create layouts that feel more natural on tablets, phones, and large screens while maintaining consistency across your site.

Even small changes to the Desktop/Tablet (981px) or Tablet/Phone (776px breakpoints can make a big difference. For example, increasing the Desktop/Tablet breakpoint to 1024px improves layout on larger tablets like iPads, while reducing the Tablet/Phone breakpoint to 420px ensures smaller smartphones display content cleanly. Customizing breakpoints lets your designs adapt to real devices, avoiding awkward stacking or cramped layouts, and ensures a consistent experience across all screens.

How To Use

Configure The Settings Divi 4

Responsive breakpoints in Divi 4 are global and limited, which can make it harder to fine-tune layouts for specific devices. Divi Responsive Helper extends Divi 4 by giving you direct control over the core breakpoint values, allowing you to better adapt your designs to modern tablets and phones without relying on trial and error.

To start using the custom breakpoints feature 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 Custom Breakpoints subtab and adjust the settings as needed.

Main Breakpoints

• Tablet to Desktop Breakpoint (Default: 981px)
  Use the input field to set a custom value, such as 1024px for iPads.
• Tablet to Phone Breakpoint (Default: 776px)
  Adjust this value to fit your needs, such as setting it to 420px for smaller smartphones.

Secondary Breakpoints

In addition to the main breakpoints, you can adjust one of Divi’s secondary breakpoints:

• 480px Breakpoint: This affects specific modules like the Gallery module and other elements controlled by design settings.

Divi also has other secondary breakpoints that generally function well with their defaults, but the 480px breakpoint offers an additional layer of customization if needed.

Configure The Settings Divi 5

Responsive breakpoints in Divi 5 can be customized per site, but setting them up repeatedly or keeping them consistent across projects can be time-consuming. Divi Responsive Helper solves this by letting you define the default pixel values and default enabled status for every Divi 5 breakpoint, so your preferred setup is already in place when you open the builder.

To start using the custom breakpoints feature 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 Breakpoints tab from the left sidebar.

From there, you will see a list of all the breakpoints in Divi 5. Each one has an input field to define the default pixel width for that breakpoint, as well as a dropdown to enable or disable that breakpoint status (the toggle will be on or off) in the builder breakpoint settings.