Visual Tabs (Divi)
A list of items beside a visual stage, for Divi 5. In switch mode the items swap one stage, on click or hover, with eight transitions. In scroll mode the content stacks and the sticky list follows the reader with a progress line. Each item is an Item child module. On phones both become a plain stacked list.
1. Switch on click
Numbers, a progress line and an arrow on the active item · descriptions reveal on the active item · image stages with captions · cross-fade, 600 ms · 480 px stage · the second item is open on load.
2. Switch on hover, list on the right
Hover an item to switch (tap on touch) · icon prefixes · “New” and “Sale” badges · 3D flip, 800 ms, overshoot easing · slow zoom on the active image (1.1 ×) · list 34 % wide on the right.
3. Scroll mode
The content stacks and the list sticks 80 px from the top, following the reader with a progress line · dot prefixes · descriptions on every item · text panels, an image, and a Divi Library layout (a row with a Text and a Button module) · H4 titles · the address bar follows (#plan, #share …).
Plan the week
Drag tasks onto days and see the whole week at a glance. Recurring work repeats by itself.
Track progress
Charts update as work gets done — by person, by project, or by week.
Any Divi modules can live in a panel
This panel is a Divi Library layout — a row with a Text module and a Button module — chosen in the Item’s Content Type.
4. More transitions
Circle reveal · Wipe · Blur in — each switching on click, with no prefix and descriptions hidden, contained images.
5. Finished design
A dark product tour: rise transition · items grey → white on hover → amber when active, on a faint amber background with a soft shadow · amber numbers and arrow · 22 px titles and slate descriptions · a stage with a 28 px radius, a thin border and a deep shadow · captions in dark glass.
