Timeline

Overview

The Timeline Widget allows you to add timeline to your web page. This widget fulfill your almost all needs of a timeline due to high level of customization. 

Screenshot

The following is a GIF video to show you how to use the timeline widget and the various options available :
timeline

Timeline Widget

The following is a timeline widget :

Timeline

Timeline Item

  • Timeline Text : Set the title of timeline item.
  • Side : Choose which side timeline content box you want.
  • Space Between : Set space between content boxes.

Timeline Center Circle

  • Timeline Circle PosY : Set the vertical position of center circle.
  • Radius : Set the roundness of center circle.
  • Circle Color : Set color of center circle.
  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.
  • Icon : Select any icon from the icon box.
  • Edit Rich Text : Set the circle text and edit it. For more information CLICK HERE.

Left

  • Edit Left Text : Enter title of left content box.
  • Edit Left Rich Text : Set the left content box text.
  • Left Content Align : Select the alignment of content.
  • Width : Set width of left content box.
  • Border Color : Set the border color.
Normal
  • Heading Color : Set the color of left heading.
  • Hover

  • Heading Color : Set the color of left heading.
  • Typography : Set the font and text style of price.
  • Text Shadow : Set title shadow.

Normal

  • Background Type : Set background of left content box. Different types of background you can embed such as color, gradient and image, for more information CLICK HERE.
  • Hover

  • Delay : Set delay on hover.
  • Background Type : Set background of left content box. Different types of background you can embed such as color, gradient and image, for more information CLICK HERE.

Normal

  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.
  • Hover

  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.

Right

  • Edit Right Text : Enter title of right content box.
  • Edit Right Rich Text : Set the right content box text.
  • Right Content Align : Select the alignment of content.
  • Width : Set width of right content box.
  • Border Color : Set the border color.
Normal
  • Heading Color : Set the color of right heading.
  • Hover

  • Heading Color : Set the color of right heading.
  • Typography : Set the font and text style of price.
  • Text Shadow : Set title shadow.

Normal

  • Background Type : Set background of right content box. Different types of background you can embed such as color, gradient and image, for more information CLICK HERE.
  • Hover

  • Delay : Set delay on hover.
  • Background Type : Set background of right content box. Different types of background you can embed such as color, gradient and image, for more information CLICK HERE.

Normal

  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.
  • Hover

  • Border Type : Set the border type.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.
  • Timeline Color : Set the middle timeline color.
  • Space Between Vertically : Set the distance between timeline item.
Was this helpful to you?