The Layers Editor shows your website elements and how they are nested. Use it to locate and select elements when working on a layout.
Accessing the Layers Panel
Open the Grigora editor and look at the left panel. At the bottom, you'll find the "Layers" option. Click on it to open the layers panel. This tool gives you a bird's-eye view of your entire website structure.
Understanding the Layer Structure
Once opened, you'll see the main page with all your website elements organized in a hierarchical structure. All the layers of your website are displayed in a tree-like format that shows how elements are nested within each other.
You can expand each layer to explore the internal structure of your website and see which containers hold which columns or where specific elements are located within your design hierarchy.
Interactive Layer Navigation
When you click on any element in your design, the layers automatically expand to show you the complete hierarchy of that element.
This gives you a clear understanding of how your elements are nested and helps you visualize the parent-child relationships between different design components.
Benefits of Using Layers
Layers help you understand element hierarchy and website structure, making designing much easier because you can:
Quickly Locate Any Element: Find specific content blocks or design elements instantly, even in complex layouts
Understand Parent-Child Relationships: See how elements are connected and organized within containers and sections
Navigate Complex Layouts Efficiently: Locate elements in nested layouts
Troubleshoot Design Issues Faster: Identify layout problems and understand why elements behave in certain ways
Manage Overlapping Blocks: Handle complex designs with multiple overlapping elements without visual confusion