Elementor Timeline Widget

Key Features

• Dynamic Timeline Display: Present events or milestones with customizable dates, icons, and text.
• Visual Enhancements: Add unique colors, typography, icons, and background styles for each event.
• Flexible Layout Options: Easily set left or right alignment and choose from multiple formatting options for timeline items.

What’s Needed?

To use the Elementor Timeline Widget, ensure the following are installed and activated:

• Vertex Addons Free Version
• Elementor Free Version

Activate the Elementor Timeline Widget

To activate this widget, please refer to our Widget Activation Guide.

How to Configure the Elementor Timeline Widget

Once the widget is activated, you can add it to any page built with Elementor. Here’s a structured guide to configuring the Timeline Widget for your needs, focusing on customization to create a cohesive and visually appealing design.

Content Tab: Setting Up Your Timeline

Timeline Section

The Timeline section allows you to add, manage, and reorder each item on your timeline. Begin by clicking the “Add Item” button to create your first event. Each item can be customized with unique elements to enhance visual storytelling.

1. Items: Each item in the timeline can represent a significant event, date, or step in a process. You can add, delete, or rearrange items by dragging and dropping.
   • Date: Enter the date relevant to the event. You can choose to display or hide this date based on the design preferences.
   • Icon: Add a meaningful icon to represent the event visually.
   • Title: This is the headline of your event, summarizing the content that follows.
   • Text: Use this section to provide details about the event or step, elaborating on its significance or context.
2. Show Date: Toggle this option on or off to display or hide the date on your timeline items.
3. Box Alignment: Choose between Left or Right alignment for each item to create a flowing visual arrangement.
4. Custom Colors:
   • Date Color: Set the color of the date text to create contrast or match your site’s theme.
   • Icon Background Color: Customize the background color behind each icon.
   • Icon Color: Select the color of the icon itself.
   • Title Color: Define the color of the event title.
   • Text Background Color: Set the background color for the text area to improve readability.
   • Text Color: Adjust the main text color for optimal contrast and visibility.
   • Item Background Color: Customize the background color of each item box to differentiate individual events.

Style Tab: How to Style the Vertex Timeline Widget

In the Style Tab, customize the visual elements to ensure that your timeline is cohesive with your website’s design.

Line Section

• Background Color: Select the color for the line connecting your timeline items, adding a distinct visual flow.

Marker Section

• Background Color: Set the background color for the markers between events.
• Border Type: Choose from a range of border styles, like solid, dotted, or dashed, to suit your aesthetic.
• Border Radius: Adjust the border radius to make the markers appear rounded or square.

Date Section

• Background Color: Set a background color for the date section.
• Text Color: Customize the color of the date text.
• Typography: Use typography settings to adjust font, size, and weight.
• Margin & Padding: Adjust these values to control spacing around the date.
• Border Options: Choose a border type and radius to stylize the date section further.
• Box Shadow: Add a shadow effect to give depth to the date section.

Items Section

• Background Color: Set the background color of each timeline item.
• Margin & Padding: Adjust for the spacing between items and around each item’s content.
• Border Options: Customize borders to create separation or unify the items.
• Box Shadow: Add a shadow to make the items stand out on the page.

Icon Section

• Background Color: Customize the background color of the icons.
• Text Color: Set the icon color to match the theme.
• Margin & Padding: Adjust spacing around icons.
• Border Options: Define the border style and radius for icons.
• Box Shadow: Add shadow for a more layered effect.

Title Section

• Background Color: Set the title section’s background color.
• Text Color: Choose a color for the title text.
• Typography: Customize the font, size, and weight of the title.
• Spacing Options: Adjust margins, padding, and add a border or shadow for a defined look.

Text Section

• Background Color: Set the text area’s background color.
• Text Color: Customize text color to ensure readability.
• Typography: Adjust font and size for the text content.
• Spacing Options: Define margins, padding, and add borders or shadows as desired.

Advanced Tab

In the Advanced Tab, you can further refine your widget by adding custom CSS, adjusting margins, padding, motion effects, and other global settings for responsive design. This section is standard across all Vertex Addons widgets, allowing you to maintain consistency and streamline customization.

Final Outcome

With the Vertex Elementor Timeline Widget, you can create a visually captivating timeline that keeps your audience engaged while providing essential information in a structured format. Customize colors, layout, and content to achieve the perfect timeline for your website, ensuring a seamless blend with your existing design.

For additional support, please visit our Support Page. You can also find in-depth guidance on our Documentation Page for more advanced configuration options.