Preview Size Overview
Why Do We Need This
Divi comes with three main responsive breakpoints. Those are Desktop (above 981px), Tablet (980px – 768px), and Phone (767px and down). The problem is, these preview sizes are very limiting. To check how your Divi layout would look on any other screen width, you would need to exit the Divi Builder and go to your browser development tools. The endless back and forth is a hassle, and not efficient at all. This is where our plugin comes to the rescue!
What This Feature Does
Our plugin gives you live custom preview sizes. To be clear, the custom preview sizes are not additional breakpoints. In fact, most of the time you do not actually need more breakpoints. Instead, you should use our plugin’s custom preview size to find the perfect Divi setting for each of the existing Desktop, Tablet, and Phone breakpoints. Remember, don’t adjust the Divi settings for each of the presets or for every custom value expecting it to act like a breakpoint. Instead, use the customizable preview size as a live view within the Divi Builder to see how the layout will look at any screen size.
NOTE: You probably know by now that Divi released their own built-in preview size feature after our plugin became popular. However, the new feature is limited and frustrating. Because of these limitations and frustrations, we created a setting in the Divi Responsive Helper to completely disable this Divi feature. Please check how to Disable The Divi Responsive Views feature which will make thing smuch easier.
How To Use The Custom Divi Builder Preview Size Settings
How To Enable The Feature
To begin using the custom preview size settings, simply go to the Divi>Theme Options. There you will see a new tab that our plugin adds called “Divi Responsive Helper.” Once you click on that, you will see more tabs. Click on the “Preview Size” tab to begin configuring the settings.
Preview Size Presets
If you would like to use predefined values for the Divi Builder preview size, you can enable the toggle called “Preview Size Presets.” As soon as you enable this, a new list of input fields appears. Here you can customize three preset values for each Divi breakpoint. These will then show up on in the Divi Builder page settings beside the three icons for Desktop, Tablet, and Phone.
Keep in mind the preset values would need to be within the range of that particular breakpoint. The values you enter need to be 981p or higher for Desktop, 768px – 980px for Tablet, and 767px and lower for Phone. So for example if you set a preset value of 1145px in one of the Phone presets, it would not show on the frontend because that value is not relevant to that breakpoint.
Preview Size Custom Value
If you would like to use a custom value for the Divi Builder preview size, you can enable the toggle called “Preview Size Custom Value.” This adds an input field in the Divi Builder page settings besides the three icons for Desktop, Tablet, and Phone. You can enter any value and the preview size will instantly change to that match the pixel width you enter.
Example Of The Preview Size In Action
Below is a GIF demonstrating the presets and custom value preveiw size settings.
NOTE: Be sure to check your device size! We made a list of the popular device viewport sizes that you can use to reference and then set the preview accordingly.