Layers

Windframe Layers is a powerful feature that allows you to organize and manage different elements of your design in a hierarchical structure. With Layers, you can easily control the visibility, position, and interaction of elements, making it easier to work with complex designs and layouts.

Accessing the Layers Panel

To access the Layers panel in Windframe, follow these steps:

Step 1: Open Windframe editor.

Step 1: upload or choose any template you want to work on.

Step 3: Select any section of the template, you will see on the left sidebar the layer section.

Understanding Layers

In Windframe, each element on the canvas is represented as a layer in the Layers panel. Layers are organized in a hierarchical structure, with parent and child relationships. This structure allows you to control the stacking order and positioning of elements in your design.

By default, elements added to the canvas are placed at the top level of the layer hierarchy. You can then organize them into groups or nested structures by creating parent-child relationships between layers.

Working with Layers

To work with layers in Windframe, you can use the following functionalities:

• Selecting Layers: Clicking on a layer in the Layers panel will select the corresponding element on the canvas. This allows you to edit the properties and styles of the selected element.

• Reordering Layers: You can change the stacking order of elements by dragging and dropping layers within the Layers panel. Layers higher in the list appear visually above layers lower in the list on the canvas.

• Nesting Layers: Layers can be nested within other layers by dragging and dropping them onto a parent layer in the Layers panel. This allows you to create hierarchical structures and control the visibility and positioning of elements within groups.

• Hiding/Showing Layers: You can hide or show layers by toggling the visibility icon next to each layer in the Layers panel. This allows you to focus on specific elements or temporarily hide elements during the design process.

• Deleting Layers: To remove a layer from your design, select it in the Layers panel and press the delete key.

Reordering layers

Follow the steps below to reorder layers:

Step 1 Open the Windframe editor and navigate to your project.

Step 2 Select the component you wish to edit it's layer.

Step 3 Locate the Layers panel, which is located on the left side of the editor interface after selecting an element.

Step 4. Find the layer you want to move and While holding down the mouse button, drag the layer to the desired position within the Layers panel and release the mouse in the new position.

.

The moved layer is shown below.

.

Renaming a layer

To change a layer's name from its default, triple-click the layer name, enter the new name, and either press Enter or click outside the layer name input field to save the changes

.