The latest Divi layers view update adds a new interface that includes nested Divi sections, rows, columns, and modules that allows you to quickly view, navigate, edit, and organize your posts and pages in DIvi.
Divi version 4.4 ( updated 03-05-2020 )
– Added a modal to display a streamlined layers view of every element on your page.
The layers view feature in Divi allows you to continue visually editing your page using the Divi Builder as usual but also adds a faster and more efficient way to work with your Divi sections, rows, columns, and modules.
You now have a hybrid workflow that includes the much loved block-based editing style along with the live-editing of the Visual Builder.
What is the Divi layer view?
If you like using the classic block-based back-end Divi Builder or the wireframe mode then you will love the layers window. The layers window allows you to have the simplicity of the block-based system like the wireframe view but in combination with the live front-end visual builder.
Main features of the Divi Layer view;
- Navigate Your Page – The layers window allows you to click on an element within the window and have the page scroll to that element in the Visual Builder
- Page Structure – The layers window shows the page structure and all sections, rows, columns, and modules in a block-based, nested view.
- Search Elements – The layers window allows you to search all elements on the page by sections, rows, columns, modules, global elements, and by each individual Divi module.
- Filter Elements By Type – The layers window allows you to filter all elements on the page by sections, rows, columns, modules, global elements, and by each individual Divi module.
- Drag & Drop Elements – Drag-and-drop elements in the layers window and the changes are reflected live on your page.
- Rename Elements – Change admin labels by clicking on the element in the layers panel.
- Access unclickable elements – With negative margins it is sometimes really hard to open the settings of an element. Before you would need to open wireframe mode, but then it was hard to find the element you needed.
How to open the Divi layers view window
To use the Divi layers view you will need to open the layers panel by either clicking the icon in the Visual Builder toolbar or by using keyboard shortcut keys.
Option 1 – Use keyboard shortcut keys of Ctrl + l
Option 2 – Open the Visual Builder toolbar (x) and click on the new Layers VIew icon on the right-hand side (see below)
Final thoughts on Divi layer view
The wireframe view has been useful for me in quite a few situations, but not having the live page made it limiting. This new feature essentially gives you the best of both worlds with a live view and wireframe style view combined. Personally, I can see it saving me plenty of time, especially on pages with lots of content.
Like many of the updates from Elegant Themes, it is something you may not know you need until you try it, so give it a go and see how much easier it makes working on your site.
Have you used the new Divi layer view yet? Is it saving you time or would you have preferred another feature or update to Divi instead?
I didn’t think this would be as useful as it is! Im using the shortcut and finding modules on my long pages 10x faster than i was before. Good job Elegant Themes.