Timeline Mode

Plan: Pro and above
Best for: Product history, manufacturing processes, brand stories, step-by-step journeys

What It Does

Each H2 heading becomes a timeline node connected by vertical lines. Content is displayed in a chronological, visual format that tells a story from top to bottom.

Timeline Styles

Left-aligned — all content on the left with a vertical line
Alternating — content alternates left/right for visual variety
Center — content centered with the timeline line in the middle

Key Settings

Timeline Style — Left, Alternating, or Center
Line Color — color of the connecting vertical line
Dot Color — color of the circle markers at each node
Dot Size — size of timeline markers
Animation on Scroll — fade/slide in as user scrolls
Accent Color — highlight color for active nodes

Creative Use Cases

Product Origins: "1920 – Founded in Florence → 1965 – First leather collection → 2024 – Global brand"
Manufacturing Process: "Step 1: Harvest → Step 2: Process → Step 3: Craft → Step 4: Ship"
Brand Story: Key milestones of your business
Product Evolution: Show how a product improved over generations

Tips

Use short, descriptive H2 headings as timeline labels (e.g., years, steps)
Alternating style looks best with 4+ sections
Add images/icons to make each node more visual
Enable scroll animations for a dynamic, engaging experience
Works great on both desktop and mobile (stacks vertically)

Example

  ● 2020 — Founded
  │  Started in a small workshop...
  │
  ● 2022 — First Collection  
  │  Launched our signature line...
  │
  ● 2024 — Global Expansion
     Now shipping to 50+ countries...