Timeline Showcase

Author: Charlotte Tran 3154 views

The Timeline Showcase element helps you present a story or process in a clear, step-by-step timeline layout. It is ideal for displaying how a product is made, how your brand has grown over time, or how an important journey has unfolded.

You can use this element to highlight key milestones, such as the history of your store from its beginning to the present, product development stages, business achievements, or future goals. By combining text, images, and dates, the Timeline Showcase makes your content more engaging and easier for visitors to follow.

In this guide, we’ll show you how to use the Timeline Showcase element and customize it to match your page design.

1. Add Timeline Showcase to Your Page

From the left sidebar, open the Advanced tab, then drag & drop the Timeline element to the desired position on your page. Please refer to the screenshot below:

2. Customize Timeline

2.1. Content

Layout: Choose the timeline layout that best fits your design, such as Horizontal Alternating, Horizontal Standard, Vertical Separated, or Vertical Side.
Point style: Customize the timeline point to display information clearly, such as a date, icon, or other visual indicator.
Edit the Items: Update the content of each timeline item, including the title, text, date, image, icon, and links. You can also click the Add Items button to add more timeline entries.
Appearance animation: : Enable this option to make each timeline item and image appear with an animation effect as visitors scroll through the page.
Dynamic line: When enabled, the timeline line will appear dynamically as visitors scroll.
Loop animation: Enable this option to repeat the animation effect when visitors scroll up and down. This helps the timeline content and images appear more interactive.

Note: The Dynamic Line and Loop Animation choices only appear when you utilize the Appearance Animation.

2.2. Design

Item Content: Customize the item container, including border, box shadow, border radius, inner padding, and outer spacing.
Dynamic line: Adjust the style of the dynamic timeline line, such as its size, color, and other visual settings.
Thumbnail: Customize the thumbnail image size using options such as width, max width, height, and image fit. For Normal and Hover states, you can also adjust opacity, CSS filter, box shadow, border, border radius, and spacing.
Date/ Title/ Content: Customize the design of the item’s date, title, and content. You can adjust settings such as alignment, typography, text color, text gradient, text shadow, and spacing.
Line: Modify the timeline line settings, including line type, inside or outside style, normal color, active color, and thickness.
Point: Customize the timeline point style. You can choose the point type such as Standard or Diamond, and adjust its border radius, color, width, and height for Normal, Hover, and Active states.

3. Common Use Cases

The Timeline Showcase element can be used in many different ways to present information in a clear and engaging timeline format. Below are some common examples:

Brand Story or Company History

Use Timeline Showcase to present your brand journey, from the beginning of your business to the present. You can highlight important milestones such as when your store was founded, when new collections were launched, or when your brand reached major achievements.

Product Development Process

This element is useful for showing how a product is created step by step. For example, you can display stages such as idea creation, design, production, quality checking, and final launch.

Project or Service Workflow

You can use Timeline Showcase to explain a process or workflow clearly. This is helpful for service-based stores that want to show customers how their service works, such as consultation, order confirmation, production, delivery, and after-sales support.

Campaign or Event Timeline

Timeline Showcase is also suitable for displaying important dates in a promotion campaign, event schedule, product launch plan, or seasonal sale. This helps visitors understand what will happen at each stage.

Store Achievements or Future Goals

Use the timeline to highlight your store’s key achievements or upcoming goals. For example, you can show sales milestones, new market expansion, customer growth, or future plans for your business.