Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Use Responsive Design Settings In Divi 5

Nelson Miller Profile Orange
In this tutorial, I will show you how to use responsive design settings in Divi 5 and compare it with Divi 4 to highlight the major differences.

Divi 5 has introduced a fundamental change in how responsive design settings are handled, and it’s crucial for anyone familiar with Divi 4 to understand these updates. In this tutorial, I will show you how to use responsive design settings in Divi 5 and compare it with Divi 4 to highlight the major differences.

▶️ Please watch the video above to get all the exciting details! 👆

FYI: Check our other guide on the new Divi 5 interface, which covers other important changes in Divi 5.

Divi 4: The Old Way of Responsive Editing

In Divi 4, making responsive edits required a multi-step process that often led to confusion, particularly for new users. To make adjustments for desktop, tablet, or phone views, you had to click the responsive icon on each setting, then manually switch between the tabs for each device and adjust the values of the specific setting within those tabs.

In Divi 4, there were device icons located in the bottom left corner of the builder to toggle between desktop, tablet, and phone views, this feature only affected the preview size. Even though you could see the layout for each device, you still had to open the responsive tabs for each individual setting in order to make changes specific to that device size. This separation between previewing and editing added complexity to the workflow and was something I often saw asked in Divi Facebook groups from new Divi users who were feeling confused. 

Divi 5: A Simplified Approach to Responsive Editing

Divi 5 introduces a more intuitive and efficient way to handle responsive editing. Now, any changes you make while viewing a specific device size—whether it’s desktop, tablet, or phone—are instantly applied to that size. This eliminates the need for the separate responsive tabs used in Divi 4, streamlining the process and making it easier to design for multiple devices.

Here are the key changes to responsive editing in Divi 5:

  • No More Responsive Tabs: Divi 5 removes the need for individual tabs on every setting, simplifying the process of making device-specific adjustments.
  • Seamless Device-Specific Editing: You can now switch between desktop, tablet, and phone views using either the responsive icons at the top center of the page or the dropdown menu located in the top right corner of the settings window. Once you’ve selected a view, any edits you make will automatically apply to that device size, reducing complexity and speeding up the workflow.

In the example screenshot below, if you adjust the Text Size value, it will update the text based on whichever size—whether it’s desktop, tablet, or phone—you are currently previewing.

To switch between device breakpoints, you can use two options:

  • The responsive dropdown located in the top right corner of the settings window
  • The responsive icons in the top center of the page settings

These controls let you quickly toggle between views and ensure that your edits are applied directly to the device you’re working on. This new approach reduces confusion and makes responsive editing faster and more efficient.

NOTE: Keep in mind that at this point, Divi still only has the three main responsive device breakpoints: Desktop (above 981px), Tablet (980px – 768px), and Phone (767px and down). So even if you were to change the preview size of Phone from 467px to 400px, the value would apply to the Phone breakpoint, which is up to 467px.

Conclusion

Whether you’re a seasoned Divi user or just getting started, Divi 5 offers a more efficient way to adjust the layout, content, or style for each device breakpoint.

With the controls centralized and fully integrated into the interface, Divi 5 streamlines the workflow by making responsive editing faster, simpler, and more intuitive.

💭 I would also love to hear your thoughts on all the changes, so let’s discuss it in the comments!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

8 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

Comments By Others

  1. Dick

    Hi Nelson,

    Nice video, well done. What I missed (or was hoping to see) was what would be the best approach for columns on mobile in Divi 5. I’ve been a long-time Divi user, and in <5, it was always a mix of settings and CSS. I was hoping Divi 5 would be a bit easier to do this.

    How would you set up columns on mobile in Divi 5?

    Reply
  2. Faulkner Lewis

    Hey Nelson—
    Thanks for this post. I have had some issues and confusion with this. Very helpful! Thanks…

    Reply
  3. Jeff Moyer

    Very good tutorial, I’m so used to Divi 4 that I’m reluctant to take the plunge and upgrade to Divi 5. That being said once you get used to things it must make life much easier. Appreciate the clarification on how it works thanks!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

      Hi Jeff,
      I know exactly how you feel! I don’t like change, but I think if we embrace it we will end up liking the final outcome, and we can alway share feedback now too during Alpha and Beta.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart