Confused about how your site is structured in Grigora? This guide will explore the Layers Editor and show you how it helps you view all website elements in a clean, organized structure, easily select and manage nested elements, and build complex layouts faster and more efficiently.
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 powerful 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: Move through sophisticated website structures without confusion or guesswork
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