5. Examples

INTRODUCTIONTimeline examples

List of several timeline layouts from our demo:

Example 01

https://documentation.bold-themes.com/bold-timeline/wp-content/uploads/sites/53/2019/11/timeline-example.jpg

Each timeline item has an icon added to it. All other settings are set to inherit the ones from Timeline element.

Demo 1

Timeline general settings:

Line position – center overlap,
Line style – solid,
Line thickness – normal,
Line color – #eeeeee.

Timeline item settings:

Style – outline,
Shape – hard rounded,
Frame thickness – normal,
Frame color – #eeeeee,
Animation – fade in,
Content display – show,
Connector style – line,
Connector color – #eeeeee,
Marker style – dot,
Marker color – #008ed4,
Icon shape – hard rounded,
Icon style – outline,
Icon position – on the line,
Icon color – #008ed4,
Media position – bottom,
Media image gallery columns – 2,
Title size – normal,
Supertitle style – sticker,
Sticker color – #27b6fd,
Title font – Montserrat,
Body font – Barlow,
Item alignment – left.

Timeline group settings:

Group shape – hard rounded,
Group style – filled,
Group frame color – #181818,
Group frame thickness – normal,
Group title size – small,
Group content display – show.

Timeline buttons settings:

Buttons style – outline,
Buttons shape – square,
Buttons size – small.

Example 02

https://documentation.bold-themes.com/bold-timeline/wp-content/uploads/sites/53/2019/12/timeline-example-2.jpg

Each timeline item has an icon added to it, as well as custom frame, connector, and icon color. All other settings are set to inherit the ones from Timeline element.

Demo 4

Timeline general settings:

Line position – left,
Line style – solid,
Line thickness – thick,
Line color – #eeeeee.

Timeline item settings:

Style – filled header with outline,
Shape – square,
Frame thickness – normal,
Frame color – #008ed4,
Animation – fade in,
Content display – show,
Connector style – triangle,
Connector color – #008ed4,
Marker style – small circle,
Marker color – #181818,
Icon shape – square,
Icon style – filled,
Icon position – opposite to the line,
Media position – bottom,
Media image gallery columns – 2,
Title size – normal,
Supertitle style – default,
Title font – Montserrat,
Body font – Barlow,
Item alignment – default.

Timeline group settings:

Group shape – square,
Group style – filled,
Group frame color – #181818,
Group frame thickness – normal,
Group title size – normal,
Group content display – show.

Timeline buttons settings:

Buttons style – outline,
Buttons shape – square,
Buttons size – small.

Example 03

https://documentation.bold-themes.com/bold-timeline/wp-content/uploads/sites/53/2019/12/timeline-example-3.jpg

Timeline has custom CSS added to it to adjust the display of timeline group and its headline.

Each timeline item has image(s) added to it with different media position selected (bottom, left, top, etc.). Every other timeline item has custom item frame color added (#795548). All other settings are set to inherit the ones from Timeline element.

Demo 6

Timeline general settings:

Line position – center overlap,
Line style – solid,
Line thickness – normal,
Line color – #181818.

Timeline item settings:

Style – filled header with outline,
Shape – hard rounded,
Frame thickness – normal,
Frame color – #181818,
Animation – fade in/move up,
Content display – hide,
Connector style – line,
Connector color – #181818,
Marker style – dot,
Marker color – #795548,
Icon shape – hard rounded,
Icon style – outline,
Icon position – on the line,
Icon color – #181818;
Media position – bottom,
Media image gallery columns – 2,
Title size – normal,
Supertitle style – default,
Title font – Playfair Display,
Body font – Lato,
Item alignment – left.

Timeline group settings:

Group shape – circle,
Group style – filled,
Group frame color – #181818,
Group frame thickness – normal,
Group title size – large,
Group content display – show.

Timeline buttons settings:

Buttons style – outline,
Buttons shape – square,
Buttons size – small.

Example 04

https://documentation.bold-themes.com/bold-timeline/wp-content/uploads/sites/53/2019/12/timeline-example-4.jpg

This is the example with Timeline Item Posts element. The element is displaying all posts, and the following are settings in Design tab:

Show date – supertitle,
Show categories – subtitle,
Show comments – subtitle,
Show excerpt – yes,
Show featured image – yes.

Demo 9

Timeline general settings:

Line position – left,
Line style – solid,
Line thickness – normal.

Timeline item settings:

Style – outline,
Shape – soft rounded,
Frame thickness – normal,
Animation – fade in,
Content display – show,
Connector style – line,
Marker style – dot,
Icon shape – soft rounded,
Icon style – filled,
Icon position – opposite to the line,
Media position – right,
Media image gallery columns – 2,
Title size – default,
Supertitle style – sticker.

Timeline group settings:

Group shape – circle,
Group style – filled,
Group frame color – #008cd2,
Group frame thickness – normal,
Group title size – default,
Group content display – show.

Timeline buttons settings:

Buttons style – outline,
Buttons shape – soft rounded,
Buttons size – normal.

Example 05

https://documentation.bold-themes.com/bold-timeline/wp-content/uploads/sites/53/2019/12/timeline-example-5.jpg

This is the example of timeline with slider. In order for timeline items to display as slider make sure to select Line position to be Top or Bottom (horizontal timeline).

Demo 1 horizontal

Timeline general settings:

Line position – top (horizontal timeline),
Line style – dotted,
Line thickness – thick,
Line color – #eeeeee.

Timeline item settings:

Style – clear,
Shape – square,
Frame thickness – thick,
Frame color – #008ed4,
Background color – #f1f1f1,
Animation – fade in,
Content display – show,
Connector style – line,
Connector color – #eeeeee,
Marker style – dot,
Marker color – #008ed4,
Icon shape – hard rounded,
Icon style – outline,
Icon position – on the line,
Icon color – #008ed4;
Media position – bottom,
Media image gallery columns – 1,
Title size – normal,
Supertitle style – default,
Title font – Montserrat,
Body font – Barlow,
Item alignment – left.

Timeline group settings:

Group shape – square,
Group style – filled,
Group frame color – #008ed4,
Group frame thickness – normal,
Group title size – normal,
Group content display – show.

Timeline buttons settings:

Buttons style – outline,
Buttons shape – soft rounded,
Buttons size – normal.

Timeline slider settings:

Height – auto,
Animation – default,
Navigation arrows style – outline,
Navigation arrows shape – circle,
Navigation arrows size – large,
Dots navigation – show,
Number of slides to show – 3,
Slider autoplay interval – 0,
Slider horizontal gap – normal,
Slider navigation color – #008ed4.