The Versatile New Layers Panel
Build Visually And Quickly Navigate Your Content In The Layers Panel At The Same Time. It's The Best Of Both Worlds!
Today we are excited to introduce Divi Layers View, a brand new editing panel in the builder that allows you to quickly view, navigate, organize and edit your pages inside a nested layers interface. You can explore your content inside the layers panel while at the same time editing your page visually. This brings the simplicity and efficiency of block-based editing and combines it with the intuitive nature of the visual builder, giving you the best of both worlds! The layers panel consolidates long and complex pages and allows you to navigate and edit them with a new found efficiency.
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.
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!
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.
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?
This is just amazing! One of the features I was really waiting for! Thanks guys.
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!
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…