| 1 |
# Content Toggle - Widget Guide |
| 2 |
|
| 3 |
## Overview |
| 4 |
Content Toggle lets you present two states of content (primary and secondary) behind a simple switcher, reducing scroll and keeping comparisons or alternatives in a single space. Each state can show text or imagery, and the toggle is fully styleable. |
| 5 |
|
| 6 |
## Free Features |
| 7 |
- Primary and secondary areas with text or image sources. |
| 8 |
- Custom labels and default active state. |
| 9 |
- Switch alignment, sizing, colors, and label typography. |
| 10 |
- Pane styling for background, padding, borders, radius, and shadows. |
| 11 |
|
| 12 |
## Pro Features |
| 13 |
- Use Elementor saved templates for primary and secondary content. |
| 14 |
- Add icons to primary and secondary labels. |
| 15 |
- Slide or fade animation styles for pane changes. |
| 16 |
- Sync external CSS selectors to show/hide per state with custom active/hidden classes. |
| 17 |
|
| 18 |
## How to Use |
| 19 |
1. Drop “Content Toggle” onto your page. |
| 20 |
2. Set Primary/Secondary labels and choose the default state. |
| 21 |
3. Pick a source for each side (Text or Image; Templates in Pro) and add your content. |
| 22 |
4. Style the switch (size, colors, typography) and the content panes (background, padding, borders). |
| 23 |
5. In Pro, add label icons and configure external selectors to show/hide when states change. |
| 24 |
|
| 25 |
## Tips |
| 26 |
- Keep labels short so the switch remains compact. |
| 27 |
- When syncing external selectors (Pro), use simple class or ID selectors and ensure your active/hidden classes exist in your stylesheet. |
| 28 |
- For imagery, set consistent sizes to avoid layout shift when toggling. |
| 29 |
|
| 30 |
|
| 31 |
|
| 32 |
|
| 33 |
|
