Timeline is a wonderful tool to create a timeline on a website. Showcase your organization’s journey, progress, and more with the help of this tool. 

Video Instruction #

Using Timeline #

To use the Timeline and design your website creatively, follow the steps mentioned below. 

Step 1 #

From the menu bar on the left-hand side, select Timeline. Drag and drop the widget on the area you want it to be. 

Step 2  #

In this step, you can see the three options of the tool. The Content, Style, and Advanced to get you started with customizing the web page. 

Timeline widget on Elementor page builder

Step 3  #

Below the Content section, the first option is the preset. From preset, you can pick from 4 different styles of displaying the timeline on your webpage. 

Timeline widget's preset menu

Step 4 #

In the Content section, you can add the title and description of the contents that will be displayed in the timeline. 

Timeline widget's content settings tab

Step 5  #

From the Option menu, you can pick whether you want to display title, description, date, and time or not. You can show and omit specific items. You can also pick the format of the data you will prefer. 

Timeline widget's options tab

Step 6 #

The Slider speed will determine the speed and duration of the sliding transition for the timeline. You can pick slider position, space and more in this section. You will have the full freedom to customize the timeline as per your preference. 

Timeline widget's slider options

Step 7 #

In this section, you can customize the navigation of the timeline. You can pick whether you want the navigation to be visible or not. Droit Elementor Addons gives you the freedom to keep the navigation generic or based on hover as well. You can pick color, background color, position and borders, and more from this section. 

Timeline widget's navigate settings tab

Step 8 #

In the Style section, you will have the flexibility to style and design in four different scope. General, icon, border line, and content are the options you have to style and customize the timeline. 

Timeline widget's style settings menu

General  #

In the General section, you can either keep a boxed background or you can use different shades of color. If you use different colors, you will have the option to customize it further. You can pick the location of the gradient, angle and type of gradient you want to apply. 

Timeline widget's general style settings tab

Icon #

This option gives you the chance to edit the size of the icon. You can also add color to the icons in the timeline, keep a plain background or use gradient to make it visually stunning. 

Timeline widget's icon settings tab

Border Line #

From the Border Line option, you can customize the border. Pick from the different types of borders, give color, increase width, edit position and more to make the web pages a visual masterpiece. 

Timeline widget's border line settings tab

Content #

From the Content section, you can bring variation in design by editing the typography, color and offset of title, content, date, and time of the timeline. 

Timeline widget's content style settings tab

Step 9  #

In the Advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Timeline widget's advanced style settings tab

You will also get the chance to edit and customize the following options: Motion Effects, Background, Border, Positioning, Responsive, Attributes, Custom CSS. 

Motion Effects #

From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your widget look different. 

Timeline widget's motion effects settings tab

Background #

If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type and more.

Timeline widget's background settings tab

Border #

If you want to add any line, box, dots and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Timeline widget's border style settings tab

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings

Timeline widget's positioning settings tab

Responsive #

You can check the responsiveness of the widget if you toggle through the available options. However the change of the widget will be only visible on the live page or preview, not in the Elementor.

Timeline widget's responsive menu

Attributes #

With Attributes, you can add custom HTML attributes to any elements. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Powered by BetterDocs