The guideline below will get you to walk in the right way to use the Elementor Timeline Widget offered by Element Pack. A timeline is a visual representation of a sequence of events, especially historical events. You will also be able to represent your history.
A guide to using Timeline Widget
1. Go to Elementor dashboard ➤ Timeline(search in the search field) ➤ drag & drop to the new section.
2. See Layout, Query, Readmore Button, and Additional Options section under Content Tab.
3. To work with the tabs, first, you need to go Layout ➤ Skin(Default or Olivier) ➤ Source(Post or custom) ➤Layout ( for showing the timeline Left, Right or Center).
4. If you need to add your own image, you can use Custom (from the Source field of layout section) ➤ Then, Custom Content (to add layout as you need) ➤ just hit the button Add Item(as you need).
5. To add your own Title, Date, or Image, just follow the flow Custom Content ➤ Timelines Items ➤ Title ( to set title) ➤ Date (to set date) ➤ Image (to set image)
6. Under the Content section, you can add Paragraph, Button Link, or Icon
7. Moreover, for the read more button, go to ➤ Readmore Button ➤ Read More Text ( for instance, See Details) ➤ Button Size (Small, Extra Small, Medium, Large, or Extra Large) ➤ and Button Icon (Icon Library, or
Upload SVG) ➤ then, set Icon Position(After, or before) ➤ Icon Spacing.
8. The Button plays a very important role to refer something to somewhere. And, for that, only need to add a link with the button. just follow Custom Content ➤ Content ➤ Button Link (https://bdthemes.com)
9. Additional Options beneath Content will give you the confidence to leave some options like Image, Title, Title Link, Meta Data, Excerpt and Read. Just check them and work with the switcher button.
10. Look, the timeline is also possible skipping anything of Additional Options
It is time to work with Style Tab. The tab holds Item, Icon, Date, Title, Excerpt and Readmore Button section.
1. To begin with, follow Style ➤ Background Color ➤ Box shadow ➤ Line Color ➤ Line width ➤ Padding ➤ Border Type ➤ Border Radius and see the output of these. If you wanna add scrolling, just check the Scroll Animation switcher button.
2. Next, come to Icon ➤ Color (to set icon color) ➤ Background Color (to set background color) ➤ Box Shadow (to effect shadow all around) ➤ Width ( to widen the icon background)
3. Whether you use an icon or not, you have to check out the Yes/ No switcher button from the Icon section. Show Icon (YES/NO) ➤ Icon Size(as you need) ➤ Border Type( Solid, Double, Dotted, Dashed, Grove), to have a border around ➤ Width( to set border width) ➤ Color (for border color) ➤ Border Radius.
4. The action of the Date section is to show the date of a page creating or editing. This section is also possible to style.
Therefore, Date ➤ Background Color ➤ Color( for text color) ➤ Box Shadow ➤ Padding ➤ Border Type ➤ Width ➤ Color ➤ Border Radius ➤ and finally Typography.
5. You know an image is one of the most important web elements. In the Timeline section, you’ll be able to modify the image.
Simply Image ➤ Image Size(Thumbnail, Large, Extra-large, Full etc.) ➤ Image Height(0 -500) ➤ Opacity ( 0 – 1) ➤ Padding (Top, Right, Bottom, Left) ➤ Border Type (Solid, Dotted, Dashed, Groove, or None) ➤ Border Radius(Top, Right, Bottom, Left)
6. To edit Title, Meta, and Excerpt respectively, go to Title(Color, Typography) ➤ Meta(Color, Typography, Spacing) ➤ Excerpt(Color, Typography, Spacing )
7. Then, to make a button, Look Readmore Button ➤ Text Color, Background Color, Box Shadow, and Typography, you’ve already known about these. Feel free to edit.
8. The amination in the button is nice to see. To set hover animation on the button, Readmore Button ➤ Hover ➤ Animation(for example, Grow).
Thanks for reading.