Timeline and Split Screen Tabs widget settings

Two Showcase widgets for content in steps: a Timeline of dated milestones and Split Screen Tabs, where tabs on one side swap the card on the other. Both fill from the shared Manage window (add items by hand or From a collection), explained in Widget Design panel basics. Both end with Spacing (margin) and Animations & Effects (Entrance and Scroll; see Animations and effects).

For ordinary tabs, see Accordion, Tabs and List widgets or Advanced Tabs, Accordion and Grid.

Timeline

Milestones along a line. As the visitor scrolls, a marker moves down the line and the item nearest the middle of the screen lights up. Each item can open a Read more window with the full story.

How to add it

1. Click Add, open Showcase and drag Timeline onto the page. It starts with three sample items.
2. Click Manage Timeline, then Add Item.
3. For each item, fill in Title, Date (YYYY-MM-DD, or any text), Short description and Full description (Read more window), and add an image with Focal point.
4. Under the list:
   • Show dates: default on.
   • Date format: Mar 15, 2026, 03/15/2026, March 2026, Q1 2026, 2026 or As typed. Default Mar 15, 2026. Dates that don't start with a year (YYYY-MM-DD, YYYY-MM or YYYY) show as typed.
   • Images: On the timeline and in Read more, Only on the timeline, Only in Read more or Hide images. Default On the timeline and in Read more.
   • Read more text: the link that opens the window. Default "Read more".
5. Click Done.

The Read more link shows on items that have a full description.

Layout

• Layout: Alternating sides or Line on the left. Default Alternating sides.
• Marker follows the scroll: the glowing marker moves along the line. Default on.
• Fade items not in view: items away from the middle of the screen are dimmed. Default on.

Colors

• Line: default light gray.
• Dots: default gray.
• Marker & active item: default your theme's primary color.
• Dates: default gray.
• Card background: default white.
• Card corner radius: 0–32 px. Default 10.

Title and Description

• Title: text style controls. Default 22 px, bold. Titles are always H3 headings.
• Description: text style controls, size up to 32. Default 15 px.

Read More Window

Two sets of text style controls: the window's title (default 28 px, bold) and the window's text (up to 32, default 16 px).

Split Screen Tabs

A title and a list of tabs in a left column, and a card with an image, title, text and button in the right column. Choosing a tab swaps the card.

How to add it

1. Open Add > Showcase and drag Split Screen Tabs onto the page. It starts with three sample tabs.
2. Click Manage Tabs, then Add Tab.
3. For each tab, fill in Tab label, Card title and Card description, add an image with Focal point, and optionally a button (Show button, Button text, link).
4. Under the list, fill in Left column title (default "Explore Our Features") and Left column description.
5. Click Done.

Keyboard users move between tabs with the arrow keys, Home and End.

Layout

• Widget height: 200–1200 px. Default 600. Per screen size.
• Left column width: 20–60%. Default 35%.
• Card width (of right column): 30–100%. Default 100%.
• Card height (0 = fit content): 0–1000 px. Default 0.
• Card horizontal alignment: Left, Center or Right. Default Left.
• Card vertical alignment: Top, Middle or Bottom. Default Top.

The columns stack into one when the widget is narrower than 1024px. That's the widget's own width, not the screen's, so a Split Screen Tabs in a narrow column stacks even on a big screen.

Tabs

• Tab style: Underlined, Framed, Filled or Minimal. Default Underlined.
• Tab direction: Vertical (a list) or Horizontal (a row). Default Vertical.
• Switch tabs on: Click or Hover. Default Click. Hover only applies on devices that can hover; phones always use a tap.
• Active tab accent: default your theme's primary color.
• Active tab text: color of the selected tab's text.
• Tab text: text style controls, size up to 32.

Cards

• Card glass: No glass, Light glass, Dark glass or Alternate (light and dark in turn). Default No glass.
• Card background (No glass only): default light gray.
• Card corners: 0–40 px. Default 16.
• Image max height: 100–800 px. Default 400.
• Right column background: behind the cards.
• Card title tag: H2, H3, H4 or Text. Default H3.
• Card title: text style controls, size up to 64.
• Card description: text style controls, size up to 32.
• Button: Primary or Secondary.

Left Column

• Background: default white.
• Title tag: H1, H2, H3 or Text. Default H2.
• Title: text style controls, size up to 72.
• Description: text style controls, size up to 32.

Examples

• A family business's story: Timeline, Alternating sides, Date format 2026 (years only), with "Read more" windows telling each chapter.
• A builder's project stages: Timeline, Line on the left, Images Only in Read more, dates As typed ("Week 1", "Week 4").
• A software firm's features: Split Screen Tabs, Vertical tabs, Underlined, Dark glass cards over a dark right column.
• A salon's treatments: Split Screen Tabs, Switch tabs on Hover, Horizontal tabs, one tab per treatment with a booking button.

Limits and what it can't do

• Neither widget has Connect to Data. Use From a collection in the Manage window instead.
• Timeline items can't link anywhere; extra detail goes in the Read more window. The Read more text is in the page, so search engines can read it.
• Split Screen Tabs always stack below 1024px of widget width; you can't turn that off.
• Only one tab's card shows at a time. All tabs' content is still in the page for search engines.
• Clients with only Widget content can change items, but not the Design panel.

Who can use it

Anyone in your agency with the Mount Olympus tool. Client people need Editor to add, move, design or delete these widgets, or Widget content to change their items.

Troubleshooting

• My dates show the wrong way: type them as YYYY-MM-DD (2026-03-15) so Date format can change them. Anything else shows as typed.
• There's no Read more link: the item has no Full description (Read more window).
• Timeline items look faded: Fade items not in view dims the items away from the middle of the screen. Turn it off to show them all at full strength.
• Split Screen Tabs are stacked on Desktop: the widget is narrower than 1024px. Put it in a full-width section or a wider column.
• Hover doesn't switch tabs on a phone: phones can't hover, so they switch on tap.
• The card looks empty at the bottom: set Card height (0 = fit content) to 0, or change Card vertical alignment.