Using Divi Layer View

Divi Layer View provides an efficient way to navigate the items on your page while designing.

The Divi Layers Viewadds a very fast and simple way to view, rearrange, edit and rename your elements.

This is especially useful when you have elements with transition effects or negative margins that would normally be difficult to select in the traditional way.

The Power of Divi Layer View

The Divi Layers Viewgives you easy access to any item within your page. It's small, so you can keep it open in a corner or where it is most convenient for you during the design process.

In addition, layer view works great to help you access items in complex designs with overlapping elements or modified transformation controls.

When the layer view is active, you can click on any section, row, column, or module to edit it easily.

Access the Layer View Panel

There are two ways to access the Divi Layer View Panel:

Option 1

Option 2

1. Right-click on any item on the page to open the options menu.
ClickGo to the layer"
2. When the dashboard appears, you will have access to each section and all the items on the page.

How to Use the Layer View Panel

The Divi Layer View Panel interface is easy to navigate and allows for many actions, including:

• Expand layers

• Collapse layers

• Drag and drop

• Filter

• Multiple layer selection

• Search Layers: Look for items, named layers, or any item on the page.

• Filter Layers: Filter by element, module, rows and more, typing in the filter field.

• Open/Close All Layers: Click to open or close all layers at once for a clearer view.

• Alternate Layer Section: Click the alternate icon to expand or close a single section.

• Edit: Click the gear icon to edit the item.

• Duplicate Layer: Click the duplicate icon to duplicate sections, rows, columns, or modules.

• Remove Layer: Click the trash can icon to remove the selected layer.

• Layer Menu: Click the three-dot icon to open the extended layer menu, which includes options for:

  • Save to library or Divi Cloud

  • Test A/B

  • Disable

  • Block

  • Expand section

  • Copy section

  • Copy styles

  • View modified styles

  • Extend styles

  • Preset options

Expand and Collapse Layers

You can easily expand and collapse layers. Click the icon to open/close all or individual layers to control the items within each section.

Drag and Drop Layers

Within the Divi Layers view, you can drag and drop items, rows, or sections to rearrange them into your page. This makes much easier to move elements than drag them directly into the Visual Builder.

Drag a Layer to the Visual Builder

You can add a layer to your page by dragging many types of files from your desktop to the Visual Builder. Text files, images, custom code, video and audio are easily imported.

When your files are imported, Divi will automatically create a section at the bottom of your page and assign it to the corresponding module within a section.

See our written documentation for more information on drag-and-drop files into Divi.

Using the Filter Option

The Divi Layer View Dashboard lets you filter the content into your Divi pages.

This is useful for locating a specific module or element, especially on pages with a lot of content. To use the filter option:

1. Click on the filter button+ +to activate the filter field.
2. You can explore the available items or write your criteria in the field provided.
Divi will filter all the items on the page to show only what meets your criteria.

Multiple Layer Selection

When you need to select more than one layer in the dashboard, it's pretty simple:

• To select multiple non-consecutive layers: press and holdShift + Option(on Mac) orShift + Ctrl(on PC), then click on the layers.

• To select consecutive layers: press and holdShift + Command(on Mac) orShift + Alt(on PC), then click to select.

Rename Elements

To rename items in Divi Layer View:

• Click on an item

• Enter the name you want

• Press the keyEnterto save the changes
  

Search for Elements

Searching for items works similarly to the filtering option. However, you only need to type the name of the item you want to look for.

Divi will show only those layers containing the desired item.
For example,textwill display all the text modules on the page.

Delete, Duplicate and Add New Elements

As in other layer view functions, deleting elements is very easy:

• Click on thetrash canto delete an item or layer

• Click on theduplicateto duplicate an element. The new item will appear just below

• Click on the icon+ +together with an existing element. Alternatively, you can add an item to the traditional way by clicking on the icon+ +inside the builder. Either way, the new item will appear in layer view

Tips and Good Practices for Using Layer View

Edit Overlapping Elements

The layer view panel is very useful when working with complex designs and overlapping elements.

If you already have experience using Divi, you know that clicking on a layer with absolute position or negative margins can be frustrating.
With the layer view, editing these items is much easier. Activate the dashboard to select and edit the layer directly.

Reposition Rows and Sections

Dragging sections and rows into the Visual Builder can be tedious and sometimes lead to unwanted results.
Using the layer view makes moving elements within your design much easier.

Consider using it to rearrange your rows and sections. You will save time and have greater control over the design.

Name Your Elements

Most Divi users already know how to use administrator tags to name their modules.
Since the launch of the Divi Visual Builder, there are new ways to do so.

Layer view lets you easily rename your modules and elements.
In addition, naming your elements is important to differentiate them without going directly to the module.

In addition to clicking on your section, row, column, or module to assign an administrator tag, you can also rename it from layer view.
However,it is better not to double click on the labelas this will open the relevant section.