Why Customizable Breakpoints Matter
Gone are the days when “mobile, tablet, and desktop” were enough. With screens coming in all shapes and sizes, rigid breakpoints can lead to awkward layouts—cut-off text, misaligned images, or worse… a site that just looks bad on certain devices.
Here’s why Divi 5’s new customizable breakpoints are a game-changer:
✅ Design for Ultra-Wide Screens – Your content will look fantastic on 4K+ displays.
✅ Fine-Tune Mobile Layouts – No more guessing how your design will look on landscape-mode smartphones.
✅ Streamline Testing & Debugging – Toggle breakpoints on and off to focus on the most important devices.
✅ Future-Proof Your Website – Adapt to new devices as they hit the market—without waiting for a theme update.
Essentially, you’re in charge of your site’s responsiveness now—not your theme’s default settings.
How to Set Custom Breakpoints in Divi 5
1. Open the Breakpoint Editor
First, launch the Divi Visual Builder and click the responsive mode icon (the little phone/tablet/desktop toggle) in the top toolbar. This opens the new Sitewide Responsive Breakpoints panel.
From here, you’ll see the default breakpoints for phone, tablet, and desktop—but now, you can tweak them however you like!
2. Adjust Existing Breakpoints
Want to change Divi’s default breakpoints? Here’s how:
- Click on any existing device icon (e.g., desktop, tablet, or mobile).
- Adjust the width directly by dragging the slider or entering a custom value (e.g., setting desktop to
1500px). - Changes apply instantly, so you can see the effect in real time.
- Need a reset? Just hit the “Reset to Default” button.
3. Add Custom Breakpoints
This is where things get exciting. Divi 5 introduces seven breakpoints, including:
✅ Phone Wide – For larger mobile screens.
✅ Tablet Wide – Perfect for tablets in landscape mode.
✅ Widescreen & Ultra-Widescreen – Ideal for high-resolution monitors and TVs.
Want to customize further? You can:
- Enable or disable specific breakpoints (simplifying your workflow).
- Set exact width ranges (e.g., defining Ultra-Wide Screens as
1600px–2400px). - Click Update to save your settings.
4. Toggle Breakpoints On/Off
Don’t need certain breakpoints? Disable them! This keeps your workflow clean and prevents unnecessary layout adjustments. For example, if tablet view isn’t relevant for your audience, you can hide it and focus on mobile + desktop.
5. Optimize for Landscape Mode
Many users hold their phones sideways for videos, photography, or web apps. Instead of designing one-size-fits-all mobile layouts, create a dedicated landscape breakpoint—this ensures better scaling, readable text, and a polished experience for horizontal screens.
Divi 5 vs. Divi 4: What’s Changed?
🚀 More Breakpoints – Divi 4 had only three (Desktop, Tablet, Mobile). Divi 5 expands this to seven for greater precision.
🚀 Custom Widths – No more rigid defaults—you can fine-tune each breakpoint to match your needs.
🚀 Smarter Editing – Adjusting styles per device is way easier now (e.g., tweak font sizes directly in the design panel—no more digging through settings!).
🚀 Better Performance – The Divi 5 alpha is blazing fast, making responsive design smoother than ever.
🛠 Heads up: Since Divi 5 is still in public alpha, some features (like layout imports) are still in progress. If something looks off, refresh the page—it usually fixes minor styling glitches.
Pro Tips for Using Custom Breakpoints
✅ Test in a Staging Site First – Since Divi 5 is still in alpha, experiment before making live changes.
✅ Check Your Audience’s Devices – Use Google Analytics to see which breakpoints matter most to your visitors.
✅ Keep It Simple – More breakpoints doesn’t mean better design. Focus on key screen sizes instead of over-complicating layouts.
✅ Use Canvas Scaling – Designing on a small laptop? Enable canvas scaling to simulate larger screen sizes in Divi 5.
Final Thoughts
Divi 5’s custom breakpoints are a huge leap forward for responsive web design. Whether you’re optimizing for massive screens, split-screen tablets, or foldable devices, this feature gives you total control over your layout.
Yes, it’s still in public alpha, so expect a few quirks—but if you’re comfortable experimenting, the benefits far outweigh the bugs.
🎯 Want to try it out? Download the Divi 5 Public Alpha and start playing around!
🚀 Happy designing!
