Smart Stacking

What is Smart Stacking?#

Smart Stacking allows you to position elements relative to other elements automatically. When the target element moves, resizes, or changes content, the stacked element adjusts its position accordingly.

Video Tutorial#

How It Works#

• Dynamic Positioning: Elements maintain their relative position to a target element
• Real-time Updates: Stacked elements move automatically when target elements change
• Multipage Support: Works seamlessly across all pages in multipage templates
• Chain Stacking: Elements can stack to other stacked elements, creating dependency chains

Setting Up Smart Stacking#

• Enable Stacking: Toggle "Smart Stacking" in the element editor
• Select Target: Choose which element to stack relative to
• Choose Position: Pick from 9 position options (top-left, center, bottom-right, etc.)
• Add Offsets: Fine-tune with X and Y pixel offsets

Position Options#

• Top Row: top-left | top-center | top-right
• Middle Row: middle-left | middle-center | middle-right
• Bottom Row: bottom-left | bottom-center | bottom-right

Working with Text Elements#

• Content-Aware: Stacking calculates based on actual text content size, not container size
• Font Changes: Automatically adjusts when target text font, size, or content changes
• Text Modes: Works with all text modes (overflow, truncate, fit)
• Vertical Alignment: Stacking position respects text vertical alignment settings

Advanced Features#

• Circular Dependency Prevention: System prevents elements from stacking to themselves in loops
• Performance Optimized: Uses DOM measurement caching for smooth interactions
• Offset Controls: Precise positioning with X/Y pixel offsets
• Multi-Selection Compatible: Works with bulk operations and element alignment tools

Best Practices#

• Use bottom-center for captions under images
• Use right positioning for labels next to form elements
• Combine with vertical alignment for precise text positioning
• Use offset values for breathing room between elements