AI Timeline addon provides a visually appealing way to showcase events or milestones on your website. It allows you to create a timeline with customizable design elements, such as dates, descriptions, icons, and images. The timeline addon is ideal for presenting historical events, project progress, company achievements, or any other information in a clear and engaging manner, enhancing the user experience and storytelling on your website.
How to set up the AI Timeline:
Step 1: Search and find Timeline in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section.
Step 2: This is how the element will look after inserting the AI Timeline addon.
How to set up content for AI Timeline?
Under the content tab, you will be able to configure the AI Timeline section.
The Timeline Style selection lets you apply various styles to the Timeline Box. Additionally, the layout can be aligned to the right or left and will then be in default mode. Set style to the line in the dropdown menu as Solid, Dotted, or Dashed based on your preference.
To provide visual signals to indicate the progress and position of scrolling on a webpage, enable the Scroll indicator. Additionally, you can choose to have the flow go from Top to Bottom or Bottom to Top.
Timeline: In the Timeline section, you can add as many layouts as you want by clicking +Add Item.
Timeline Position: Align the Timeline layout in different positions either same side or opposite side.
Timeline Title, Subtitle: Set the title to suit your needs and according to your demands, add a subtitle.
Separator shape, Type, Color, Bg Color: Select the shape you want from the dropdown that holds an icon. In the Type, select the separator model either like an Image or Icon or Text. Set the value in accordance with the choice. Choosing the desired icon from the icon library or uploading it via SVG is an option if the icon is selected. If it is an image, select it from the media library or by URL. Enter the text value if Text is the selected option. The Separator Colour and its backdrop colour can also be customised.
How to add Styles to the Timeline?
General Section: You can adjust the margin and padding for the timeline box here. Set the layout section’s background colour and alter the font color and typography.
You can modify the background colour, font colour, margin, padding, border radius, and box shadow in the Timeline Content and Title area. Additionally, both Normal Mode and Hover Mode can be individually customised.
You can change the colour of the Separator Title, Content, Shape, and Background of the Timeline Separator independently.
Caret: It is a small symbol used to indicate the insertion point or cursor position within a text and enable the toggle to see the caret and you can alter the color here.
