Better Responsive Previews
Preview Your Designs On Different Devices And Customize Your View Modes
Today we are excited to announce the new and improved responsive preview system for Divi. Now it’s much easier to see how your website will look on different devices and different screen sizes using both portrait and landscape orientations. You can manually adjust the preview size, change your default phone and tablet preview widths and toggle between popular device presets. Using Divi’s responsive editing options, you can adjust your website so that it looks great on all devices.
Adjust Your Responsive View Modes
When you enter a responsive preview mode in Divi, you will see some new options above your page content. You can adjust the width and height of the current preview mode using the available input fields or you can manually drag the width and height of the preview window using its draggable anchors. You will also notice that switching between view modes and adjusting view mode widths is much faster than before thanks to some smart rendering improvements.
Preview On Popular Device Presets
In addition to the default phone and tablet view modes, you can also select from various device presets to get a better idea how your design will look on each. The preview width will be adjusted accordingly and a height indicator will appear so that you can see what content will sit above the fold on that particular device.
Customize Your Default View Mode Widths
You can also change your default phone and tablet preview widths so that each time you enter a preview mode, or each time you toggle between responsive editing options, the size of your preview window will reflect your desired width. Simply click the “make default” button, and the next time you switch to that view mode, your custom preview size will be reflected.
The New Responsive Preview System Is Available Today
The new and improved responsive preview system is available today, including all of the following new features:
- Drag To Resize – Change your responsive preview mode widths on the fly using the draggable anchors to see how your design breaks down as the screen size changes.
- Custom Default View Mode Widths – Set a custom width for your phone and tablet preview mode widths. Each time you switch to phone or tablet view, and each time you adjust a responsive setting, the preview width will reflect your custom value.
- Popular Device Presets – In addition to standard Phone and Tablet view modes, you can also select from various device previews to see how your design will look on each.
- Above The Fold Indicator – When using device previews, a new height indicator will appear so that you can see what content will sit above the fold.
- Portrait / Landscape Modes – On each device preview, you can also switch between portrait and landscape mode so that you can see how your design will look when the device is held different ways.
- Improved Speed – Switching view modes is faster than before thanks to some rendering speed improvements.
Download Divi and take it for a spin. Let us know what you think in the comments and don’t forget to check back soon for even more great Divi features coming your way.
