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.