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
- Paragraph corresponds to the
- Header corresponds to the
- Image corresponds to the
- Navigation menu corresponds to the
- Heading corresponds to the
<h6>HTML elements, depending on the type of heading added.
- A (a link) corresponds to the
- Button corresponds to the
- Form corresponds to the
- Maps corresponds to the
- 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
- Ul (an unordered list) corresponds to the
- Li (an ordered list) corresponds to the
- Quote corresponds to the
- PayPal Button corresponds to the
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.
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