Timeline Widget Guide

The Timeline Widget lets you showcase events, milestones, or step-by-step processes in a clear, structured way. It’s great for highlighting a brand journey, project roadmap, event schedule, or any sequence of information. By visually mapping out points in time, you make it easier for visitors to understand progress and key stages.

1. Start with a Template

What you’ll see:

• Layout options like Vertical Timeline, Horizontal Timeline, Step-by-Step Process, or Minimal Milestones

• A Continue with this template button

What to do:

• Click a layout to preview how your timeline will appear

• Select your preferred style and click Continue to start customizing

2. Use the Editing Tabs

After selecting your layout, you’ll work with these three tabs:

• Content – Add timeline items, dates, and descriptions

• Style – Adjust how it looks

• Settings – Fine-tune how it behaves on your site

3. Customize Your Timeline

Content Tab

Add and manage your timeline details here:

• Event Title – Give each milestone a short heading

• Date/Time – Add the relevant date for each step (optional)

• Description – Provide more context for each event

• Icons or Images – Use visuals to represent stages or achievements

This tab helps you define the story or sequence your timeline presents.

Style Tab

Match the timeline design to your website:

• Font & Size – Adjust headings and descriptions

• Colors – Customize text, background, and connector lines

• Layout Style – Choose vertical, horizontal, alternating, or compact

• Spacing & Alignment – Control positioning and spacing between events

This ensures your timeline looks clean and matches your site’s branding.

Settings Tab

Adjust how the widget functions:

• Animation – Add transitions as users scroll through

• Visibility Options – Choose where and when the timeline shows

• Mobile Behavior – Make sure it’s responsive for all screens

• Custom Code – Add extra tweaks if needed

These options give you full control over presentation and usability.

Helpful Tips

• Use the Content tab to outline your story or steps clearly

• Use the Style tab to keep your design consistent with your site

• Use the Settings tab to manage behavior and user experience

• Always click Save after editing