Table Of Contents

Elementor Timeline Widget by element pack

How to use Elementor Timeline Widget by Element Pack

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

Content Tab

Elementor Timeline Widget by element pack

1.  Go to Elementor dashboard  ➤ Timeline(search in the search field) ➤ drag & drop to the new section.

shot 4 - BdThemes

2.  See Layout, Query, Readmore Button, and Additional Options section under Content Tab.

shot 2 1 - BdThemes

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).

shot 5 - BdThemes
shot 3 - BdThemes

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).

shot 6 - BdThemes

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)

shot 7 - BdThemes

6. Under the Content section, you can add Paragraph, Button Link, or Icon

shot 9 - BdThemes

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.

shot 8 - BdThemes

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)

shot 10 - BdThemes

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.

shot 11 - BdThemes

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.

Screenshot - BdThemes

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.

shot 2 2 - BdThemes

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.

shot 3 1 - BdThemes

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.

shot 4 1 - BdThemes

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)

shot 5 1 - BdThemes

6. To edit Title, Meta, and Excerpt respectively, go to Title(Color, Typography) ➤ Meta(Color, Typography, Spacing) ➤ Excerpt(Color, Typography, Spacing )

shot 6 2 - BdThemes

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.

shot 8 1 - BdThemes

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.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.