How to use Timeline Widget by Element Pack

element pack

How to use Timeline Widget 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. The guideline below will get you to walk in the right way to use Timeline Widget offered by Element Pack.

A guide to using Timeline Widget

Content Tab

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 LayoutSkin(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 ButtonRead 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 (

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

Style Tab

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 StyleBackground Color Box shadowLine Color Line widthPaddingBorder TypeBorder Radius and see the output of these. If you wanna add scrolling, just check the Scroll Animation switcher button.

2. Next, come to IconColor (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, DateBackground ColorColor( for text color) ➤ Box Shadow Padding Border TypeWidthColor ➤ 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 ImageImage 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 ButtonHover Animation(for example, Grow).

Thanks for reading.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.