Layers serve as an interface representing the tree-like structure of a web page, where each node represents a corresponding HTML element. Some elements (children) are nested inside other elements (parents). 

Using the Layers, you can:

  • See a web page’s structure and the relations between elements on the canvas. 
  • Easily find and select a specific element (in case another element overlaps it on the canvas.)
  • Cut, copy/paste, duplicate, and delete elements on the page.

To start working with the structure (layers) of the page, click the layers icon on the Left Panel in the Boxmode editor. Here you can see all the layers included in the page’s structure (for example, the main container, header, and other containers). If no element is selected initially, all nodes are collapsed.

Nodes and HTML counterparts

The node names in the Layers and their HTML counterparts are different. You can use the tooltip option next to each node to see which HTML element it represents:

  • Container corresponds to the <div> HTML element.
  • Paragraph corresponds to the <p> HTML element.
  • Header corresponds to the <header> HTML element.
  • Image corresponds to the <div> with nested <img> HTML element.
  • Navigation menu corresponds to the <nav> HTML element.
  • Heading corresponds to the <h1>/<h2>/<h3>/<h4>/<h5>/<h6> HTML elements, depending on the type of heading added.
  • A (a link) corresponds to the <a> HTML element.
  • Button corresponds to the <button> HTML element.
  • Form corresponds to the <form> HTML element.
  • Maps corresponds to the <div> HTML element.
  • Video corresponds to either the <div> with a nested <video> HTML element in case the video was uploaded from a computer, or to the <div> with a nested <iframe> HTML element if the video was embedded from a third-party service (e.g., Youtube, Vimeo, etc.).
  • Footer corresponds to the <footer> HTML element.
  • Ul (an unordered list) corresponds to the <ul> HTML element.
  • Li (an ordered list) corresponds to the <li> HTML element.
  • Quote corresponds to the <blockquote> HTML element.
  • PayPal Button corresponds to the <form> HTML element.
Tip:

You can also embed specific custom elements using the HTML iFrame widget. Learn more about the widget in our HTML iFrame article.

When a specific element is selected, the path to this element is highlighted with blue downward arrows.

Finding an element

To find a given element, enter its name in the search bar at the top. If the element is located in a folded container, the arrow before the container will be highlighted in blue.

Picking the format of displaying layers

You can also choose the format of displaying the layers in the Layers menu. To do that, click on the Expand all or Collapse all button next to the search bar.

Customizing the Layers menu elements

If you want to cut, copy/paste, duplicate or delete an element, click the right mouse button, and the panel with these options will appear.

When you duplicate an element, it will be added as the last child of its parent container.

To paste an element, click with the right mouse button on the parent container and paste it. It will be added as the last child of this parent container.

Tip:

You can also customize some of the CSS properties of selected elements using the CSS panel in the editor.

We hope this article helped you understand how to use the Layers menu.

Now, it’s time to try the Layers menu’s options and customize your website’s structure according to your requirements.

Go to Editor