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.
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.
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.
Step 4 #
In the Content section, you can add the title and description of the contents that will be displayed in the timeline.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.