Timeline
What is the Timeline section?
Since v2.4.0
The Timeline section displays a vertical sequence of content blocks, each representing a step, milestone, or feature. It combines a numbered time heading, an image, a heading, and a text description — making it ideal for showcasing processes, services, or brand stories in a structured, visually engaging layout.
Main Settings
General
- Heading — Add an optional heading displayed above the timeline.
- Dot icon — Upload a custom icon to replace the default dot marker on the timeline line. Recommended size: 64×64px.
- Make section full width — Enable this toggle to stretch the section to the full width of the screen.
- Text style — Choose between Headline and Body text styling for the section heading.
Large Screen Version
- Gap between blocks — Adjust the vertical spacing between individual timeline items on desktop.
- Max block content width — Set the maximum width of the content area within each timeline block on desktop.
- Time heading scale — Adjust the font size of the time heading (e.g. step number) on large screens.
- Heading scale — Adjust the font size of the block heading on large screens.
Mobile Version
- Gap between blocks — Adjust the vertical spacing between individual timeline items on mobile.
- Time heading scale — Adjust the font size of the time heading on mobile devices.
- Heading scale — Adjust the font size of the block heading on mobile devices.
Progress Bar
- Active color — Set the color of the progress bar segment that marks completed or active timeline items. Defaults to the value set in global settings.
- Inactive color — Set the color of the progress bar segment for upcoming timeline items. Defaults to the value set in global settings.
Colors
- Heading color — Customize the color of the section heading.
- Background color — Set the background color of the entire section.
- Background opacity — Adjust the opacity of the section background color.
- Text color — Define the global text color for the section.
Section Spacing
- Distance from the top — Adjust the spacing above the section.
- Distance from the bottom — Adjust the spacing below the section.
- Show custom mobile spacing — Enable this toggle to set custom spacing values specifically for mobile devices.
- Distance from the top mobile — Adjust the spacing above the section on mobile. Applied only when Show custom mobile spacing is enabled.
- Distance from the bottom mobile — Adjust the spacing below the section on mobile. Applied only when Show custom mobile spacing is enabled.
Timeline Item
Each Timeline item is an individual block within the Timeline section. It contains a time heading, an optional image, a heading, and a body text — displayed side by side with the vertical timeline line running between them.
Settings
- Time heading — Enter the label displayed on the timeline line for this item, such as a step number or year.
- Time heading text style — Choose between Headline and Body text styling for the time heading.
- Show image — Enable this toggle to display an image within the timeline item.
- Image — Upload the image to be displayed for this timeline item.
- Heading — Enter the title of this timeline item.
- Heading text style — Choose between Headline and Body text styling for the item heading.
- Content — Add the descriptive body text for this timeline item.
Large Screen Version
- Reverse sides — Enable this toggle to swap the layout — moving the content to the left and the time heading to the right.
Colors
- Heading color — Customize the heading color for this individual timeline item. Defaults to the value set in global settings.