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.
Join Or Upgrade Today For 10% Off!
Today's The Best Day To Get Divi Or Upgrade Your Account To Lifetime
Join the most enthusiastic and loving WordPress theme community on the web and download Divi 3.0 today. Using the new Visual Builder, you can build websites faster than ever before with its incredibly fast and intuitive visual interface. You have to see it to believe it!
Join Today For 10% OFF!
Renew Your Account Today For 10% OFF!
Upgrade Your Account Today For 10% OFF!
While I see this as an added improvement to Divi, I still have a problem with Divi not offering the iPad Pro viewport compatibility. This is a very popular iPad device, so why is there still no support (granted the iPad Pro adopts Desktop styling)? I’m left still customizing for this device’s viewport width/height using CSS. Even if I used the ‘Custom View’ of this feature, I can’t set a custom width/height to even match the iPad Pro viewport dimensions of 1024px x 1366px because of the feature’s limitations.
I’m encouraged that ET is still working towards making substantial improvements for the builder and responsive devices, but the iPad Pro is still not supported.
Nice new feature, for sure.
I did, however, just get off the phone with my client and she’s viewing at 1024×768, and I can’t customize it for that – snaps to 980.
this is basic tech that all developers should already be using through responsinator or google developers….this does not fix any issues, i wish they invested time and money in making the view in the builder the actual view and allowing to edit per screen size rather than just view
THE PEOPLE AT ELEGANT THEMES MUST HAVE BRAINS THE SIZE OF BARRELS! THEY HAVE GOT THIS TECH GAME BOSSED! I WISH I HAD THEM ON SPEED DIAL HAHA
Thank god! FINALLY!! This makes life so much easier!
ALERT! You cannot update GLOBAL MODULES with this latest update. I tried it in 2 different websites and it would save changes to non-global modules and ignore the changes to global modules. Could update perfectly when I rolled back to the previous version.