Timeline element

hello

How can I create a timeline with more than 3 steps?
like the example below
https://woodmart.xtemos.com/timeline/

The elements provided with the theme only have 3 steps

Hello,

You can create such by means of Timeline element.

Here is the demo code:

[vc_row css=".vc_custom_1508761207960{margin-bottom: 9vh !important;}"][vc_column css=".vc_custom_1508143071646{padding-top: 0px !important;}"][woodmart_title style="bordered" color="primary" title="<strong>TIMELINE</strong>" subtitle="XTEMOS ELEMENTS" css=".vc_custom_1509094444904{margin-bottom: 30px !important;}"][woodmart_timeline line_style="dashed" dots_color="#84b73d"][woodmart_timeline_breakpoint title="2007" color_bg="#84b73d"][woodmart_timeline_item image_secondary="78" img_size_secondary="full" el_class="text-larger" img_size_primary="full" color_bg="#ffffff"]
<p class="font-alt color-primary" style="font-size: 20px;">Condimentum fames egestas ad potenti</p>

<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Lementum musat dignissim
Mi vestibulum iaculis consectetur</h3>
<h3 class="hidden-md hidden-lg" style="font-size: 22px;">Lementum musat dignissim mi vestibulum iaculis consectetur</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.

<a class="btn btn-color-primary btn-style-link btn-size-default" href="#/demo/christmas/">Read more</a>[/woodmart_timeline_item][woodmart_timeline_breakpoint title="2009" color_bg="#84b73d"][woodmart_timeline_item position="right" image_secondary="78" img_size_secondary="full" el_class="text-larger" img_size_primary="full" color_bg="#ffffff"]
<p class="font-alt color-primary" style="font-size: 20px;">Condimentum fames egestas ad potenti</p>

<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Sed mollis lectus condiment
Facilisis dictumst laoreet adiping</h3>
<h3 class="hidden-md hidden-lg" style="font-size: 22px;">Sed mollis lectus condiment facilisis dictumst laoreet adiping</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.

<a class="btn btn-color-primary btn-style-link btn-size-default" title="" href="#/demo/christmas/">Read more</a>[/woodmart_timeline_item][woodmart_timeline_breakpoint title="2010" color_bg="#84b73d"][woodmart_timeline_item image_secondary="78" img_size_secondary="full" el_class="text-larger" img_size_primary="full" color_bg="#ffffff"]
<p class="font-alt color-primary" style="font-size: 20px;">Condimentum fames egestas ad potenti</p>

<h3 class="hidden-sm hidden-xs" style="font-size: 28px;">Nec gravida conubia morbi
Eleifend ullamcorper aenean quam</h3>
<h3 class="hidden-lg hidden-md" style="font-size: 22px;">Nec gravida conubia morbi eleifend ullamcorper aenean quam</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.

<a class="btn btn-color-primary btn-style-link btn-size-default" title="" href="#/demo/christmas/">Read more</a>[/woodmart_timeline_item][woodmart_timeline_breakpoint title="2012" color_bg="#84b73d"][woodmart_timeline_item position="right" image_secondary="78" img_size_secondary="full" el_class="text-larger" img_size_primary="full" color_bg="#ffffff"]
<p class="font-alt color-primary" style="font-size: 20px;">Condimentum fames egestas ad potenti</p>

<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Lementum musat dignissim
Mi vestibulum iaculis consectetur</h3>
<h3 class="hidden-md hidden-lg" style="font-size: 22px;">Lementum musat dignissim mi vestibulum iaculis consectetur</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.

<a class="btn btn-color-primary btn-style-link btn-size-default" href="#/demo/christmas/">Read more</a>[/woodmart_timeline_item][woodmart_timeline_breakpoint title="2014" color_bg="#84b73d"][woodmart_timeline_item image_secondary="78" img_size_secondary="full" el_class="text-larger" img_size_primary="full" color_bg="#ffffff"]
<p class="font-alt color-primary" style="font-size: 20px;">Condimentum fames egestas ad potenti</p>

<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Sed mollis lectus condiment
Facilisis dictumst laoreet adiping</h3>
<h3 class="hidden-md hidden-lg" style="font-size: 22px;">Sed mollis lectus condiment facilisis dictumst laoreet adiping</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.

<a class="btn btn-color-primary btn-style-link btn-size-default" title="" href="#/demo/christmas/">Read more</a>[/woodmart_timeline_item][woodmart_timeline_breakpoint title="2016" color_bg="#84b73d"][woodmart_timeline_item position="right" image_secondary="78" img_size_secondary="full" el_class="text-larger" img_size_primary="full" color_bg="#ffffff"]
<p class="font-alt color-primary" style="font-size: 20px;">Condimentum fames egestas ad potenti</p>

<h3 class="hidden-sm hidden-xs" style="font-size: 28px;">Nec gravida conubia morbi
Eleifend ullamcorper aenean quam</h3>
<h3 class="hidden-lg hidden-md" style="font-size: 22px;">Nec gravida conubia morbi eleifend ullamcorper aenean quam</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.

<a class="btn btn-color-primary btn-style-link btn-size-default" title="" href="#/demo/christmas/">Read more</a>[/woodmart_timeline_item][woodmart_timeline_breakpoint title="2017" color_bg="#84b73d"][woodmart_timeline_item image_secondary="78" img_size_secondary="full" el_class="text-larger" img_size_primary="full" color_bg="#ffffff"]
<p class="font-alt color-primary" style="font-size: 20px;">Condimentum fames egestas ad potenti</p>

<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Lementum musat dignissim
Mi vestibulum iaculis consectetur</h3>
<h3 class="hidden-md hidden-lg" style="font-size: 22px;">Lementum musat dignissim mi vestibulum iaculis consectetur</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.

<a class="btn btn-color-primary btn-style-link btn-size-default" href="#/demo/christmas/">Read more</a>[/woodmart_timeline_item][/woodmart_timeline][/vc_column][/vc_row][vc_row css=".vc_custom_1508761207960{margin-bottom: 9vh !important;}"][vc_column css=".vc_custom_1508143071646{padding-top: 0px !important;}"][woodmart_title style="bordered" color="primary" title="<strong>TIMELINE ALTERNATIVE</strong>" subtitle="XTEMOS ELEMENTS" css=".vc_custom_1509094457439{margin-bottom: 30px !important;}"][woodmart_timeline line_style="dashed" item_style="shadow" dots_color="#bd6e4f" line_color="#bd6e4f"][woodmart_timeline_breakpoint title="Step One" color_bg="#bd6e4f"][woodmart_timeline_item image_secondary="78" img_size_secondary="full" el_class="text-larger" color_bg="#ffffff"]
<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Lementum musat dignissim
<span style="font-weight: 300;">Mi vestibulum iaculis <span style="color: #bc6d51;">Consectetur</span>.</span></h3>
<h3 class="hidden-md hidden-lg" style="font-size: 22px;">Lementum musat dignissim mi vestibulum iaculis consectetur.</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.[/woodmart_timeline_item][woodmart_timeline_breakpoint title="Step Two" color_bg="#bd6e4f"][woodmart_timeline_item position="right" image_secondary="78" img_size_secondary="full" el_class="text-larger" color_bg="#ffffff"]
<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Sed mollis lectus condiment
<span style="font-weight: 300;">Facilisis dictumst <span style="color: #bc6d51;">Laoreet adiping</span>.</span></h3>
<h3 class="hidden-md hidden-lg" style="font-size: 22px;">Sed mollis lectus condiment facilisis dictumst laoreet adiping</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.[/woodmart_timeline_item][woodmart_timeline_breakpoint title="Step Three" color_bg="#bd6e4f"][woodmart_timeline_item image_secondary="78" img_size_secondary="full" el_class="text-larger" color_bg="#ffffff"]
<h3 class="hidden-xs hidden-sm" style="font-size: 28px;">Nec gravida conubia morbi
<span style="font-weight: 300;">Eleifend ullamcorper <span style="color: #bc6d51;">Aenean quam</span>.</span></h3>
<h3 class="hidden-lg hidden-md" style="font-size: 22px;">Nec gravida conubia morbi eleifend ullamcorper aenean quam</h3>
Scelerisque ullamcorper facilisis nisl a suspendisse elementum musat rasd dignissim at condimentum artas quam ut in. Ars hac posuere luctus vehicula dapibus facilisis commodo curae parturient adipiscing natoque.[/woodmart_timeline_item][/woodmart_timeline][/vc_column][/vc_row]

You can create your own based on this it would save your time.

Create a new page, switch to Backend > text mode, insert, switch to the Backend and edit as per your needs, then save as a template and insert in any page.

Best Regards

[Author]

Posts