How to Use the Timeline Element

The 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. Go to Add Elements → Select Timeline 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.
• The timeline line & icons provide a visual representation of progress.

Step 3: Adding More Timeline Steps

• Click on an existing tab to access its settings.
• To add new steps, duplicate an existing tab to keep formatting consistent.
• Click Delete if you want to remove any step.

Customizing Timeline Layout & Design

Step 4: Adjusting Layout Settings

• Choose Vertical or Horizontal timeline orientation.
• Select a style where content appears on one side or staggered.
• Adjust column width and 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.
• Use 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.
• Set background colors for the content box and timeline icons.
• Add 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.
• Customizable – 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.