How to Use the Timeline Element

这 Timeline Element is a powerful content container that allows you to display events, steps, or a structured process in a visually engaging format. It can be used for company histories, step-by-step guides, or progress tracking.

Adding the Timeline Element

Step 1: Insert a Timeline

1. Open your page editor。
2. 转至 添加元素 → Select 时间线 under Content Elements.
3. Drag and drop it onto your page。

Structuring Your Timeline

Step 2: Understanding Tabs & Content Areas

• Each timeline step is called a "Tab."
• Each tab contains a content area where you can add text, images, icons, and other elements.
• 这 timeline line & icons provide a visual representation of progress.

Step 3: Adding More Timeline Steps

• 点击 an existing tab to access its settings.
• To add new steps, duplicate an existing tab to keep formatting consistent.
• 点击 删除 if you want to remove any step.

Customizing Timeline Layout & Design

Step 4: Adjusting Layout Settings

• 选择 Vertical 或者 Horizontal timeline orientation.
• Select a style where content appears on one side or staggered.
• Adjust column width 和 spacing between steps.
• Enable or disable step labels (the text at the top of each step).

Step 5: Adding & Customizing Icons

• Click on any icon to change it.
• 使用 pre-set icons or upload a custom SVG。
• Adjust icon size, background shape, and border styling。

Step 6: Styling Text & Colors

• Customize titles & descriptions using typography settings.
• 放 background colors for the content box and timeline icons.
• 添加 borders, shadows, or gradient effects for a unique look.

Optimizing for Mobile & Tablet

Step 7: Making Your Timeline Responsive

• Check how your timeline appears on tablet & mobile views。
• If it looks too squished, consider:
• Switching to a horizontal layout。
• Reducing the content width for better spacing.
• Hiding the timeline on mobile and using a simple list instead.

Why Use the Timeline Element?

• Perfect for process visualization – Showcase events, steps, or progress.
• 可定制 – Adjust icons, colors, text, and layout.
• Interactive – Allows users to engage with step-by-step content.
• Mobile-friendly – Can be optimized for different devices.

With these settings, the Timeline Element helps create an engaging, structured way to display information on your website.