Divi 5 introduces a powerful Customizable Breakpoints feature that gives you greater control over how your website adapts to different screen sizes. With seven predefined breakpoints, three of which are enabled by default, and a new Sitewide Responsive Breakpoints modal, Divi 5 makes fine-tuning your design across all devices easier.
Default and Optional Breakpoints
Out of the box, Divi 5 includes seven breakpoints, but only three are active by default:
Phone (Enabled)
Phone Wide
Tablet (Enabled)
Tablet Wide
Desktop (Enabled)
Widescreen
Ultra Wide
You can enable or disable additional breakpoints based on your needs. However, the Desktop breakpoint is always enabled and cannot be edited or disabled.
Managing Breakpoints with the Sitewide Responsive Breakpoints Modal
A new overflow menu next to the device icons in the top bar lets you open the Sitewide Responsive Breakpoints modal.
This tool allows you to:
Enable or disable breakpoints – Activate additional breakpoints or turn off ones you don’t use.
Edit breakpoint widths – Adjust the width values for enabled breakpoints.
Ensure logical widths – Width values cannot be smaller or larger than their adjacent breakpoints, even if those breakpoints are disabled.
This modal can also be accessed through the Settings Modal breakpoint picker.
How to Enable, Disable, or Edit Breakpoints
Open the Responsive Breakpoints Modal
Click the triple dot icon
next to the device icons in the top bar.Select Sitewide Responsive Breakpoints.
Edit Breakpoint Widths
Click on any enabled breakpoint to adjust its width.
The width must stay within the range of its adjacent breakpoints.
Enable or Disable Breakpoints
Toggle breakpoints on or off as needed.
Divi stores its styles when disabling a breakpoint so they can be restored later.
When enabling a previously disabled breakpoint, any saved styles will be reapplied.
Save Your Changes
No changes take effect until you save. Clicking the Save button triggers a confirmation message.
Confirmation Messages When Saving
Divi 5 provides dynamic confirmation messages based on the changes made:
Editing Breakpoint Widths:
"Updating breakpoints will take effect across your entire website."Disabling a Breakpoint:
"When disabling a breakpoint, its styles will be stored for posterity."Enabling a Breakpoint:
"When enabling a breakpoint, any existing styles for that breakpoint will be restored."
Understanding Breakpoint Behavior
Min-Width System
Divi 5 defines breakpoints using a min-width system. For example, setting a breakpoint at 400px means styles will apply at @media (min-width: 400px) {}.
Effects of Enabling or Disabling Breakpoints
Disabling a breakpoint does not delete its styles—they remain stored if the breakpoint is re-enabled.
Enabling a breakpoint immediately adds it to the top toolbar, making it accessible for design adjustments.
Switching Between Breakpoints
Divi 5 offers two ways to switch between breakpoints while editing your design:
1. Using the Top Bar
The device icons in the top bar allow you to switch between breakpoints while working inside the Divi Builder quickly.
Click on a device icon to instantly switch the preview to that breakpoint.
Any changes made will apply only to the selected breakpoint.
This method is ideal for making responsive design adjustments across different screen sizes.
2. Using the Element’s Settings Panel
Open the module’s settings by clicking the gear icon or by clicking on it.
Look for the device selector.
Click on the device icon to choose the breakpoint.
Adjust the values, and the changes will be applied only to that selected breakpoint.
Frequently Asked Questions
What Is A Breakpoint?
What Is A Breakpoint?
A breakpoint is a specific screen width at which your website’s design adjusts to create the best viewing experience on all devices. Breakpoints ensure that your content stays easy to read, looks great, and is simple to navigate, no matter what size screen your visitors use.
How Many Breakpoints Should I Use?
How Many Breakpoints Should I Use?
The number of breakpoints varies by audience device usage. Users visit websites on different screen sizes, from smartphones to desktop screens. Web designers typically use three breakpoints – desktop, tablet, and mobile – but Divi 5 allows up to 7 customizable breakpoints for added flexibility.
Will Enabling More Breakpoints Slow Down My Site?
Will Enabling More Breakpoints Slow Down My Site?
No, enabling more breakpoints in Divi 5 will not slow down your websites. Unlike older methods of handling responsive design, Divi 5’s new framework is optimized for performance, ensuring that additional breakpoints do not add unnecessary load to your site.
Are Breakpoints Enabled On A Website Or Page Level?
Are Breakpoints Enabled On A Website Or Page Level?
Breakpoints in Divi 5 are enabled and applied at the website level, not on a per-page basis. Once you enable and customize breakpoints, they will affect the entire website, ensuring a consistent, responsive design across all pages. Any change you make to breakpoints will universally adjust how your site responds to different screen sizes rather than being limited to individual pages.
Final Thoughts
Divi 5's Customizable Breakpoints feature offers unmatched flexibility in responsive design.
Whether you need fine-tuned control for various devices or a simplified setup with only essential breakpoints, Divi 5 makes creating pixel-perfect designs across all screen sizes easy.