Home Forums WoodMart – Premium Template Timeline element

This topic contains 1 reply, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 week, 5 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #197362

    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

    Private Content Hidden
    #197437

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.