| 1 |
## Unfold Widget Guide |
| 2 |
|
| 3 |
### What it does |
| 4 |
Creates a collapsible content area with a fade overlay and toggle button. Initial state can be folded or unfolded, and content can come from the editor (free) or Elementor templates (pro). |
| 5 |
|
| 6 |
### Free vs Pro |
| 7 |
- **Free:** Editor content, title toggle, fade overlay, shared animation timing/easing, outside button placement, responsive fold height (percent). |
| 8 |
- **Pro:** Elementor template source, fixed (px) fold height, inside button placement, separate fold/unfold duration and easing, max-height animation mode, adjustable fade height, scroll after unfold with offset. |
| 9 |
|
| 10 |
### Controls (Content tab) |
| 11 |
- Content Source: Editor (free) or Elementor Template (pro). |
| 12 |
- Title Enable, Title text, Title HTML Tag. |
| 13 |
- Content (Editor) or Template selector (pro). |
| 14 |
- Alignment for title/content. |
| 15 |
- Button: Enable, Unfold/Fold texts, icons, icon position, size, position (pro for inside), alignment. |
| 16 |
- Fade: Enable, Fade Height (pro), Fade Only When Folded. |
| 17 |
- Advanced: Initial State, Fold Height Unit (percent free / px pro), Fold Height, Animation Duration & Easing (shared), Fold/Unfold duration & easing (pro), Animate Height Type (pro), Scroll After Unfold + Offset (pro). |
| 18 |
|
| 19 |
### Controls (Style tab) |
| 20 |
- Box: background, border, radius, shadow, padding, margin. |
| 21 |
- Title: typography, color, margin bottom. |
| 22 |
- Content: typography, text color, link/hover color, paragraph spacing. |
| 23 |
- Button: typography, normal/hover colors, background, border, radius, shadow, padding, icon spacing, hover animation. |
| 24 |
- Fade Overlay: color (gradient uses transparent to color). |
| 25 |
|
| 26 |
### Usage |
| 27 |
1) Add the Unfold widget. |
| 28 |
2) Enter content in the editor (or choose a template in Pro). |
| 29 |
3) Set fold height (percent in free, px in pro) and initial state. |
| 30 |
4) Toggle fade and adjust overlay behavior. |
| 31 |
5) Style box, text, button, and fade. |
| 32 |
6) In Pro, optionally place the button inside, tune per-direction timing/easing, pick animation mode, and enable scroll-after-unfold. |
| 33 |
|
| 34 |
### Notes |
| 35 |
- The button is optional; if disabled you can control height externally by custom JS. |
| 36 |
- Fade overlay hides in the unfolded state when “Fade Only When Folded” is on. |
| 37 |
- Responsive fold height is read from the current breakpoint (desktop/tablet/mobile). |
| 38 |
|
| 39 |
|
| 40 |
|
| 41 |
|
| 42 |
|
| 43 |
|
