Layers Panel & Document Hierarchy
Navigate complex email layouts, reorder blocks via drag-and-drop tree view, rename sections, and lock elements to prevent accidental edits.
Key Takeaways
- Tree-View Navigation: Visualizes the entire MJML hierarchy from Body down to Sections, Columns, and individual content blocks.
- Effortless Reordering: Drag and drop items in the tree view to reposition blocks across columns or long sections without awkward canvas dragging.
- Custom Section Renaming: Label sections with meaningful names (e.g. "Hero Header", "Product Grid", "Footer Disclaimer") for clear team navigation.
- Lock & Hide Controls: Lock finalized sections to prevent accidental edits and toggle visibility to preview variations.
The PostBrix Document Hierarchy#
Every email template follows a strict, predictable structural tree:
The Layers Panel (accessible from the left navigation rail) displays this exact hierarchy, allowing you to see which elements belong to which parent containers at a glance.
Fast Drag-and-Drop Tree Reordering#
In long email templates with dozens of blocks, dragging an element from the bottom of the canvas to the top can be difficult.
With the Layers Panel:
- Expand the target section or column in the tree view.
- Click and drag the block handle directly inside the tree list.
- Drop it between any adjacent elements or into a completely different column.
- The visual canvas updates immediately with zero layout distortion.
Locking Elements & Visibility Toggles#
Maintain complete control over multi-author design projects:
- Locking Elements (Padlock Icon): Lock approved brand headers, legal footers, or complex pricing tables. When locked, an element cannot be moved, resized, or accidentally deleted on the canvas until unlocked by a team editor.
- Visibility Toggle (Eye Icon): Temporarily hide a promotional banner or seasonal block during drafting. Hidden elements remain in your project AST but are skipped during MJML compilation and HTML export.
- Custom Renaming: Double-click any layer name in the tree to assign custom labels like "Black Friday Promo Banner" or "Customer Service Phone Link".
Frequently Asked Questions
If I hide a block in the Layers panel, will it appear in the exported HTML?
No. Hidden blocks are completely omitted from the compiled HTML and MJML export, functioning as draft-only components that remain safely stored in your project history.
Can I lock an entire Section at once?
Yes. Locking an outer Section locks all child columns, text blocks, images, and buttons inside it simultaneously.
How do I select deeply nested columns that are hard to click on the canvas?
Clicking any node in the Layers tree automatically selects that exact element on the canvas and opens its corresponding properties panel in the right sidebar.