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!
YES!! This is awesome! I typically would have to do this in the Chrome Developer Tools. It will be super convenient to have this directly in the builder 😍
Yeah it will be NICE not to have to pull up Chrome Dev Tools in a separate window! And excited to hear about the speed improvement as well. Thanks Nick and ET team!
Perfect! Thank you!
I’m afraid I really don’t see the advantage of doing this inside the builder instead of doing this in the Developer Tools (I do believe this is a great feature for folks who have never used the developer tools in their browser). I’m expecting these previews to be somewhat erroneous here and there (as they always are while you’re in the builder mode), so I’ll just continue to work with one tab where I got the visual builder open and change stuff and a second tab where I’ll check out what it looks like for a normal website user and where I’ll be using the developer tools to inspect the page in different screen resolutions.
I’d actually advise people not to make too much use / expect too much from this functionality as the previews inside the builder are sometimes a bit off.
Love it! Thanks a lot.
Another amazing update. You’re the best!
YEAH!! I’ve been waiting for this feature for a long time and am really excited to take it for a test drive! Thank you!
Interesting🤔. I am sensing some good in this. But, does it equate to having extra settings by viewport, the one area that is generally not catered for in WordPress, across the board, tablet in landscape and small laptops for example.
I say this with some empathy for theme developers.
How can you cater for all viewports? The genius that comes up with the solution will be lauded. In the meantime we must prevail with custom css hand rolled in media queries.
My suspicion is that this feature update is a path to some ingenuity relating to the above?
“But, does it equate to having extra settings by viewport, the one area that is generally not catered for in WordPress, across the board, tablet in landscape and small laptops for example.”
Yes, please, I need to know this as well (especially for small laptops).
I feel with you.
Great, amazing update. Thanks
Finally!!! This is awesome! Thank you!
😀
A great addition and one which I asked for just two weeks ago – bet you had it cooking before that though!!
Amazing! Really happy about all of the improvements being embedded into Divi time after time!
One this that is missing, Lets say i am designing a website on my laptop which has a 13inch screen, I am unable to see how it looks on 15inch for instance. Often i designed the website to fit every smaller device but on a Macbook pro it looks really bad.
And i have no way to edit it or see it,
Couldn’t really find a solution to that.
if you do, That would be Amazing.
Appreciate all your hard work, Thanks -Asaf
Have you tried command and minus key to reduce the view size to replicate a larger screen? It’s what I do.
Use Chrome Dev Tools and use responsive view and enter the display width you want to check and it will show you the website on the respective resolution just zoomed out a bit.
Try this extension for chrome: Resolution Test https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal
Amazing!! Really happy about all of the improvements being embedded into Divi time after time!
One this that is missing, Lets say i am designing a website on my laptop which has a 13inch screen, I am unable to see how it looks on 15inch for instance. Often i designed the website to fit every smaller device but on a Macbook pro it looks really bad.
And i have no way to edit it or see it,
Couldn’t really find a solution to that.
if you do, That would be Amazing.
Appreciate all your hard work, Thanks -Asaf
This you can do within Google Chrome though. Inspect your page, turn on the Device Toolbar, and then choose 4K. That should show you what your site looks like on large screens.
Awesome update, this was one of the most time consuming aspects of building. Loving the product development recently
Great
Thank you Guys
Thank you Nick and team, nice update! That should help to speed a bit the workflow when tuning the details for various screen resolutions.
Nick Roach is one of the only people I don’t know personally that I’m happy to see whenever he comes around.
Very cool!!!
This is awesome!!! Thank you!
Very nice Feature!
Oh my gosh! We now have preview for iPad. This will make the responsive design so much easier to set. Thanks!!
Finally!
I presume the next step will be to allow design styling based on the different responsive breakpoints?
Stew
Fingers crosser!!
I am hoping for this next step as well 🙂
That’s exactly what I needed to save more time. Thank you
O M G, i actually can use this for a project i am working on right now! As always, i love my Divi Team!
This is great! Thank you for this tool!
Will it be also possible to add settings to in between resolutions? Or do we still have to do that with manually adding media queries?
THIS WAS VERY NECESSARY! Thank you very much Elegant Themes team. Many of us have had the problem of the responsive and its active tool but this solves it completely.
Thank you very much… keep on surprising us.
Thank You!
Yes man!!!
This is wait I am waiting for since two years!!
THX for that!!
Great update. I’m hoping to see whether setting up the default device size is just, so we can quickly jump back to it for viewing purposes or does this actually change the responsive values for the device? I always have a problem with 1024 resolution that iPad goes into when in landscape mode yet it is still a PC view and looks terrible (especially when you have columns), so it would be great to be able to add additional breakpoints.
Yes, that is the problem I have with my websites. I hope ET will add a additional viewport switch for the ipad pro or landscape viewport.
+1 (Additional breakpoints is a definite need on the page builder)
Same here +1 additional breakpoints also for smaller mobile screens
This is great! Another good reason to stay with DIVI!
FINALLY!FINALLY!FINALLY! This is a long awaited and necessary help for working with Divi. Many thanks!
Awesome stuff!!! Any chance there will be options to set custom breakpoints for sections / rows / modules in the future?
The preview mode is great but I agree with James, I really miss being able to define more custom breakpoints.
+1
We need this! 🙏
oops, I must have been looking forward too soon.
I thought that it was now possible to fix the values, for example in the text module, at more than the three given display sizes.
Now it is unfortunately only a preview… Sad…
This is the single most valuable responsive-first tool that Elegant Themes has made available. Well done. This provides a much needed design lens on the entire Divi process. This, and the relatively new Divi Marketplace, have really upped your game.
I would love to see a built-in Divi feature to write / edit CSS code inside the Builder – in a larger format editor with much improved editing cues and visuals. The window for the CSS utility in the Divi Theme Options is small, hard to see longer CSS edits, and the visual cues are difficult. Scrolling up and down searching this small window is a bit frustrating for me.
I appreciate all of the access points across the Divi Builder for writing CSS. But I have been integrating CSS-grid in some designs (especially to manage layouts on different device sizes) and the small scrolling window is limiting. (I know there are multiple options for writing the CSS, including external style sheets in child themes, but I would really like to see a built-in full-featured CSS editor).
That being said – this new responsive preview system is outstanding!! I have been waiting a long time.
Totally agree, and I have been delving into grid as well by the way.
Having a larger canvas (full screen) for working with css would be a big boon to the whole development process. Being able to call up the main WordPress css style sheet from any page, without having to navigate to the Divi Options would also make sense. And to top it off include a preprocessor for LESS or SASS.
Having a Child theme set up is an option but, if you could access the main style sheet more Elegantly from the Divi UI, I would consider not using child theme at all (I have moved all my main non theme based functions to a standalone plugin).
Thanks Nick ! You felt our pain.
Great work, expect more like slider animations, mobile off-canvas slide in and out mobile menu functionality too. And also pre build header and footer, body sections like 1 column, 2 columns … 5 columns etc etc pre design block designs simply to import it drag a d drop page builder pre build design blocks etc etc Thanks
Excellent new addition to an already great Divi platform. Thanks a lot! 🙂
Amazing update! Just wished it was now possible to make custom design adjustments with any screen size in modules, rows and sections settings.
Also hope it’ll be possible soon to configure the columns breakpoints for different screen sizes. 🙏
Nice now all divi is missing is a 4th media , one would be phone , the other would be tablet , the other would be up to 720p and the last would be 1440p and greater.
The most awaited Divi feature is undoubtedly: Blocks.
A bunch of themes is great, but having the possibility to drag and drop individual blocks will make building with Divi way more pleasant!
+1
I created cheesesteakmuseum.com using Divi in 2015, but now it needs an update. If you need an example to show ET customers what Divi can do, please feel free to help me update this fun website. Granted, it is a bit cheesy.. but we like it like that here in Philadelphia.
YES! What a super update — needed, handy, effective, makes us more effective.
You guys are insanely great!
Thaaaank you!!!
Great feature ! Thanks for all these updates ! You’re a great team 😉
Great update. Thanks, guys!
As a dev that builds sites for people but also help other divi designers that may not know to use Chrome Dev Tools this make me so happy. The requests for simple responsive fixes should drop to an absolute minimum. I never even thought to request this. But I need it so much. Thanks a milion honestly,
This is so good! Thank you 🙂
Cool one update 😉 Mobile first this days !!
Haha, 2 days ago, I thought about rising a feature request for a flexible preview mode – and today you announce it! This is awesome! Guys, I love you so! This is another important update!!!
Super great awesome new feature!!!!!!!! Thanks!!! keep going…………………………………………………with flexbox XD XD
Cheers
Great update! More breakpoint options, please.
Amazing! Excited to check it out. Does this also allow you to customize the responsive break points? I often have issues with designs looking great on a large tablets but not on small tablets or vice versa. It would be cool to either have two tablet and phone sizes that parameters can be set for, or to be able to set the break points yourself.
Wow, thank you guys! This is awsome, but works it better than Chrome inspector, right? because that Google’s tool is not very reliable. I’ll try it!
gr8. thanks, Nick and team!
This is great. I’ve been using Chrome Dev Tools and Sizzy to do this. I’ll run comparisons between all three of these options to see how this new feature performs.
As for the speed increase, that’s great, too. But I have a suggestion. Can you place all the Premade Layouts into the cloud to reduce the Divi load? Plus, whatever else you can place up there.
On another note, it would be a huge help if Divi’s CSS files relied less on !important. This often makes adding custom CSS a pain in the ass.
Otherwise, Jolly good show!
I seriously don’t know why anyone would use any other website builder!!
I LOVE DIVI!!!
And it just keeps getting better.
THANK YOU!!!!
Love this update. Please keep up the great work team.
Best website theme platform ever. 🙂
Thanks for the great feature, awsome.
Another great update!
Divi just keeps getting better and better. Well done team!
Well done, I love it!
Nice work, will help a lot. Thanks guys 🙂
Fantastic! Thanks Divi Team!
I was wondering just a few days ago why there are still no new updates.
Taaaac!
Showtime!
Great Thing from a Great Team
Amazing & such a functional update (as usual)
Thank you
Fantastic feature! This will really make life easier when creating a new site 🙂
This’ll come in really useful. Thank you 🙂
Just: YESSSS! Thank you!
Thank you very much!!!! I was already waiting for this function. Very useful function.
Wow! This is absolut perfect! You are simply the best!
This is a great addition, however, I would like to be able to drag the review window further than 980px. When you select the ipad preset for e.g. the viewport is 768px x 1024px (ipad portrait) but when flipped to landscape the viewport is 980px x 768px not 1024px x 768px (ipad landscape)
Thanks
I was really excited, to only discover it’s for previewing only. There is still only 3 ways to define settings (desktop, tablet and mobile). Yes you you can preview, but i’m still not able to make adjustments specifically for that type of preview. So in my opinion, we are still limited. Especially for settings specifically for tablet as tables nowdays have a wide range of sizes, having just one tablet setting doesn’t cover it anymore.
There is only one preview setting for iPad. I’m missing mini, regular and pro for example so you have a range of different ipad sizes.
Also adding your own pixel sizes doesn’t work. The amount of pixels do not change to what I insert but stays the same as to what I’ve selected before adding my own. The name of the preview does change to “Custom” but other than that, nothing changes. A bug or on purpose?
+1
So glad you have done this, faffing about with the inspect options on chrome and the like was a total pain in the backside. Well done Divi!
What we have been waiting for!!
Nice one, A step in the right direction. Been asking and asking for more emphasis on Mobile First. I hope the themes and premade layouts will not also reflect this going forward. Keep it UP!!!
This is very cool. With all the different phone screen sizes now in use, this will ensure we can optimise for phones that visit our website the most. Thanks ET!
Trying it out briefly..
It seems intuitive that dragging padding/margin adjustments in tablet/phone views would set the value, per that view.
It just sets the last drag value to desktop, inherited by tablet/phone.
I hadn’t done any dragging as such before this, so I don’t know that this wasn’t the case before.
Shouldn’t this be the default functionality?
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.
Yes, I noticed that as well. Huge bug, costs me a few hours to find out yesterday 🙁
Thank god! FINALLY!! This makes life so much easier!
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
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
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.
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.