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