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!
this is pretty cool!
Yes it is, I’m excited for this change!