How To Access Layers View


To use the new layers panel, simply click the new layers icon or right click on any element and choose โ€œGo To Layerโ€ to locate that element within the layers window. This will give you an organized view of your entire page content within a condensed window.

View Your Page Structure & Quickly Navigate To Any Element


The layers panel gives you a structured view of your page content that is organized and easy to understand. You can dig down inside each section to reveal nested rows, columns and modules. You can also search the layers panel to quickly find what you are looking for or filter the layers panel to reveal specific sections, rows or modules. If you click on something in the layers panel, it will automatically scroll your page to where that element is located so that you can edit it using the Visual Builder.

  • View Your Page Structure – The layers panel displays all elements in an organized, nested list that clearly showcases your page structure.
  • Search Elements – Looking for a particular element on a long and complex page? Simply search the layers panel to find it quickly, navigate to its position on the page and start editing.
  • Filter Elements By Type – Want to quickly locate all the button modules on your page? Filter the layers panel by “button” to see them all in an organized list!
  • Quickly Navigate Your Page – Somethings it’s hard to find what you are looking for a long a page. Instead of scrolling up and down the page in search, simply click on the section in the layers panel to navigate to its position instantly.

Organize Elements And Quickly Rename Layers


Elements can be easily organized within the layers panel. Sections, rows, columns and modules can all be rearranged using drag and drop. The condensed and ordered view of the layers panels makes moving certain elements around much easier. You can also quickly rename elements in the layers panel. Simply click the name of any element to adjust its admin label.

  • Easily Rename Elements – No need to open a settings modal to change admin labels. Just click on the name of the element in the layers panel to change its name and keep your page organized.
  • Drag & Drop To Move Elements – Moving elements is easy in the layers panel. Do you need to drag a section from the very bottom of a long page all the way to the top? That’s easy in layers view!

You Can Do Everything In Layers View


The layers panel is so much more than just a navigation/organization tool. Itโ€™s a full-blown, feature-rich building tool that gives you the full power of the Divi Builder inside a compressed window that is always available. You can drag and drop to move elements around. You can delete, duplicate or add new elements. You can copy, paste, extend styles and find and replace. You can do everything right inside this little window. Whenever you edit something in the layers panel, those changes are reflected instantly on your page.

Pro Tip: You can even drag and drop columns between different rows in the layers panel!

The layers panel makes certain tasks way easier. Are you having trouble accessing overlapping elements due to advanced use of negative margin, position and z-index? Simply locate and edit those elements in the layers panel instead. Layers View is simple and unambiguous.

Premade Layouts

Check Out These Related Posts

Introducing The Divi Marketplace

Introducing The Divi Marketplace

Posted on July 30, 2020 by in Theme Releases

The Best Place To Find Divi Modules, Child Themes & Layouts Today we are excited to release the Divi Marketplace. The Divi Marketplace is a repository of third party Divi Modules, Child Themes and Layouts. Itโ€™s a place where Divi developers and designers can upload their creations and make...

View Full Post

79 Comments

  1. Wonderful nick really i love divi
    Great work from elegant team

  2. But they aren’t actual “layers” though, right? I got all excited thinking we could now actually layer elements like some sliders do, but that’s not really what it is, is it? Why did you decide to call it layers? It’s a little deceiving…

    • …layers of the page in a visual builder is not something I find “deceiving”. Your content is “layered” in a manner of speaking. Really disappointed the first comment on the page had to be something negative. Nice work, Divi devs! And thanks for this awesome new feature!

    • I agree… it seems like they should have called it Sections…

      • @Donna: Very strong language … did you have to pull out the big guns? Couldn’t you just have said, that you are not entirely happy with the term? Or that you would have wished for the name to be different? Why start by claiming someone is trying to “decieve” someone?

        I agree with Pamela: It’s a great new thing and I’m happy it’s there, so, thanks for adding it!

        Besides:”Layers” is what most people are used to from PhotoShop, so everyone knows what it means and what it does.
        Objects or Modules would have worked too, but honestly, I don’t care what it’s called as long as I understand it.

    • I agree with Donna. I was pretty excited to have an easy way to manage graphic layers, which are often an issue. I do love Divi, and I do think this is a great new tool. I don’t think saying the name is a little deceiving is implying malice – it wouldn’t even be a topic of discussion if it wasn’t at least confusing. I imagine there was some debate about what to call the new tool. Since “layers” has multiple meanings especially with a user base that includes graphic designers, it was probably not the best choice, but I can certainly see how it makes sense from the code developer perspective. I remain hopeful that the new tool will someday include some graphic layer management.
      Ironically, those who find the term “a little deceiving” to be overly strong are simply adding their perspective to a word choice, not unlike “layers”. I would never complain that Divi is well beyond being just an elegant theme. ๐Ÿ™‚

    • I have to agree with Donna, Layers is not really an apt name. It should have been called “Tree View” since it behaves exactly the same as tree menus which we’re all used to using in Windows Explorer etc. Layers implies it maybe has something to do with z-index.

      Name aside, it’ll still be a handy feature at times. Thanks ET.

  3. This one is awesome. Love this feature

  4. Excelent feature !!!!!!!!!

  5. Wow! A feature I’d never thought of but which will save so much time!

    Thank you Nick and the team as ever!

    • I agree! And being able to click on those hard-to-select things easily with the WYSIWIG interface still visible.

    • Wow this is magic!! Especially for one page sites that are becoming more common! This is so handy, something I didnโ€™t know i needed until i saw it! Well done again guys

  6. I’m amazed at the flow of so many new and interesting features, but I wonder about their impact on website speed… Will you comment on this?

    • Enhancements to the builder UI have absolutely no effect on your website’s loading speed. The Builder is not loaded for your visitors.

      • I didn’t even know how much I needed this in Divi until now ๐Ÿ˜‚ I absolutely loooooove this! You guys are the best!

      • Hello Nick

        Amazing job undertaken by you and your team, kudos, sorry though this is not a good platform to talk about this.

        tried connecting and explaining to the support staff the below results

        But i am really concerned with this results from https://yellowlab.tools/result/fla5cbpn4o – plain vanilla WordPress no plugins and plain Divi template

        01. CSS complexity
        Rules count – 4638 & Complex selectors – 2826

        02. Bad CSS
        Uses of !important – 788, Old prefixes – 338 & Redundant tags selectors – 648

        03. Web fonts
        Webfonts number – 6

        04. DOM manipulations
        Queries without result – 179 & Duplicated DOM queries – 247

        is there any code cleanup or fixes for the above-mentioned concerns?

        • You won’t get answer for this.

  7. Great feature! Using the visual builder, I’ve had issues sometimes being able to click on the settings for an element because it was hidden behind another element. Problem solved!

  8. Divi is just knocking it out of the park, over and over again!!

  9. OHHHHHH!!!! Winner.

  10. YES! This solves a pain point of Divi! ty!

  11. Crongrats Nick and ET Team !

    That one was promised long long long long time ago ๐Ÿ˜€
    We will make good use of it.
    Thanks.
    Cheers

  12. Great feature. Going to improve the whole editing experience.

    • I didn’t like to work with the visual builder as there was no overview on the page … it now seems as you have solved this … I have to try this!!!

  13. This is an excellent feature. Thank you.

    It would be great if the next thing would be a tightening / improvement of the overall visual builder experience. There are definitely some areas for improvement that would enhance the tools.

    Keep up the great work.

  14. Excellent and thanks for this update. Its work too for z-index position ? Like the photoshop layer system, that to place over an object you only need to place the layer above the other.

    And please please please, People need a better contact form and new modules are already necessary.

    Thanks again, DIVI it’s awesome !

  15. Guess what Nick? 5 years Divi owner here, I always praise Divi everywhere or with everyone (I sound like a Jehovah Witness or Herbalife member) I made all my friends and clients buy Divi…
    but last week I was doing a mobile Menu and I have to accept that this Module/Feature needs more work ๐Ÿ™
    it’s very difficult to work with

  16. I continue to be amazed by the development in Divi but, a small point, would it be possible to slow down the on-screen demos so that they are easier to follow.

  17. Great addition to one of the best builders.
    For me this is only a cosmetic feature, what about realy needed features like:
    Nested rows, columns.
    Visual resize columns.
    Preload google fonts
    And many more

  18. Such a simple but hugely effective addition.

    This will make life much simpler when dealing with sites full of negative margins and having the ability to change the layout/order of each section via the layers tab will be awesome.

    Well done Nick and the rest of the team once again.

  19. Fantastic addition to DIVI. Thanks!

  20. When Linkedin, Youtube and TikTok icons will be integrated as a social network on divi them options configuration? or have an option to add custom from that same panel

  21. This is great – thanks!

    Love to see the regular release of new features. So glad I chose Divi for my agency.

  22. Oh oh oh … I’ve been wanting this so much since it was teased ages ago. Elementors got its navigation panel. In Oxygen its structure panel. The layers was a long time in the making, but as always it seems well thought, flexible and just nice..
    VERY happy with this one.

  23. Nice! But why is the button to open the layer pane on the right? To me it seems more logical to add it to the left floating bar where you also have the visual/wireframe toggle and the different screen sizes.

    • Kind of agree !

    • in fact, i think the divi layers is more a navigation menu than a real view. with the different “views” you have access to the real “layouts”, while divi layers is more to access quickly to an element and make minor editing. just my opinion.

  24. Divi just keeps getting better! Thanks Nick.

  25. Great new, and needed feature and functionality!

  26. Wow! Exactly what I need!

    Do I need to make some updates to get the feature into my Divi-sites? As far as I can see I have not updates to be triggered.

  27. how was the beach, nick ?
    xD

    • Good, haha. I have been trying to spend more time outside lately. I guess it shows.

      • ๐Ÿ˜€
        I was hesitating thinking it was a light issue.
        ๐Ÿ˜€
        You are right ! Enjoy the nature !

      • you do look bronzed in this video ๐Ÿ™‚

  28. It is like photoshop for building websites lol

    • YES! I absolutely love this feature!

  29. It seems a nice navigating tool. Good work though.

  30. Nice feature. Also it is Very useful.
    I request you to make Idea book to submit end users ideas / suggestion.

  31. Cool great work

  32. My long pages are going to be a lot less hassle to manage now. Seems to work well ๐Ÿ™‚
    ctrl + l doesn’t seem to work for me as the shortcut tho? just me?

    • For me too, thank you)

  33. really really amazing information, thanks for us

  34. love this feature. but also work on column custom width like elementor page builder. we can set custom width to each column.

  35. When will more fundamental updates be made to the builder, such as updating/cleaning up existing modules? Also, what about the addition of the class-based system that’s been alluded to in the past and moving settings from the theme customizer to the builder itself?

  36. Another time saving feature, great stuff!

  37. Divi Divi DiviDiviDivi Divi Divi Divi . That s’ what the world is saying today. Congratulations to Divi team members for such a great achievement.

  38. OMG divi theme is the best i have also used this theme in many of my website

  39. This is a productivity game-changer. I know and appreciate where this inspiration came from. As someone who builds A LOT of websites using Divi, these are the types of additions that bring huge value. These features save us time and I can’t say thank you enoug.

  40. Nice features, Great job, Great update DIVI is the Best.

  41. You guys know what I don’t know that I need ๐Ÿ˜‰ Thanks for that! You just made my workday even more effective.

    Best, Rikke

  42. I’m absolutely loving this new feature. So handy to have the layers pop-out in one place, makes editing so much easier!

    Thanks a million!

  43. That’s actually awesome!

  44. Another great feature that allow us to organize and implement more easily – thank you!!
    Gregg

  45. A much-needed feature. You guys never cease to amaze. I have only recently joined the Divi family and the updates these past few months have made me a firm believer.

  46. wow great , thank you so much

  47. Thanks DIVI Guys
    now looks like that you guys are working on making DIVI more efficient and easy to work with, now this new features makes life lot easier for people like me and will save a lot of time.

    you guys are on right track keep doing the great works.

    Thanks Again

  48. Great work, DIVI team, as always! Your builder gets better and better! I was creating a long sales page last week and was really struggling with changing the order of sections so this will be perfect! Also, very similar to how Photoshop works so very intuitive for most designers. Great work, thank you for making DIVI better for us!

  49. Amazing. Thanks. I am really hoping for more dynamic data features (repeater elements, relation elements from ACF!) as long as there is no dynamic.oo for Divi..

  50. Not a game changer but definitely a cool feature.

  51. Nice Update, which saves a lot of time. Thanks.
    Looking forward to use it.

  52. Cool, now we have triple loading of the builder and few timeouts… it improves greatly, before the update was only double loading and no timeout…

    • An along-waited feature, along with the one that allows us to use a Divi module in Gutenberg. This feature would be very handy for those working on a long page.

  53. I am excited about this new feature. Whatever you call it (I understood what you mean as the video progressed) it will be a great tool for moving things around – something I do often and get lost in long pages :D.

    Thanks for this!

  54. This is just amazing! One of the features I was really waiting for! Thanks guys.

  55. Need more “Individual Page Templates” sample stocks for Instant use in Single Page or Single Post or Single Product Like Elementor. If I want that my “Home Page” and “About Us Page” Templates Should different but I did’t work it “From Scratch Option” then it will not possible now whereas Elementor provides that. And I am not able to change “Module Width” By Cursor like Elementor. When will you rectify this all?

  56. Hello, not really sure if this is the place to raise my request but I think it is time Divi becomes more adaptable with woocommerce- that means Cart Icon, (for example showing count in the menu bar, drop down menu with order total), as well as styling options for Cart and Checkout pages as right now we have NONE. I’m a total newbie to CSS, luckily I have been able to customize the Cart page with some CSS, the Checkout page not so much as it’s more complicated/not as much tutorials to be found. There should be custom buttons, fields, each element of the module should be able to be customized individually as is the case when using “Theme Builder” to make product pages, although not ideal there is much more freedom of the layout there. I bought Divi because I DIDN’T intend to learn CSS. While I do love Divi I am a little dissapointed as I was expecting to have full control over the appearance, including woocommerce without any need for CSS. This is not just my personal request but I beleive many users want to have more control of the woocommerce features.

Join To Download Today

Pin It on Pinterest