Introduction
Use the timeline shortcode to create your own vertical list of events. You can also use the timeline layout in many of the post types. Find out more at the Blog shortcode page.
There are four different layout options to choose from:
- dual – events are staggered left and right with the date line centered
- left – events will float left with the date line on the right
- right – events will float right with the date line on the left
- center – events will be full-width with the date line centered
You can animate the event as it comes into view on scroll. There are a number of options to choose from when creating your list of events.
Dual
The first item in this list is “featured”, so it stretches the full-width, while the others float left or right.
John Doe
Left
This timeline is set to show the year, with no “featured” events.
Right
This timeline is set to not show the year, with the second event set as a “featured” event.
Center
Explore More Shortcodes
- Alert
- Animated Popular
- Animated Image
- Animated Scroll New
- Audio
- Badge
- Blockquote
- Blog
- Blur New
- Books
- Button
- Chart
- Clients
- Code
- Collapsibles
- Content Box
- Content Section Popular
- Counter
- Coupons
- Custom Post Type
- Definitions
- Device Mockups
- Divider Popular
- Dropcap
- Emphasis
- Events
- FAQ
- Filler
- Flip Box Popular
- Fullscreen Video
- Gallery Popular
- Google Docs Viewer
- Guests
- Heading
- Highlight
- Hover Box
- Horizontal Ruler
- Icon Popular
- Icon List
- If New
- Image
- Image Compare
- Jobs
- Label
- Lead
- Lightbox
- Locations
- Map
- Masonry
- Members
- Menu
- Post Meta Data
- Movies
- Music
- News
- Overlay Popular
- Panel New
- Parallax Scene Popular
- Permalink
- Person
- Popover
- Portfolio
- Post Fields
- Post Media
- Pricing Table
- Progress
- Project
- Promotional Box
- QR Code
- Quotes
- Recent Books
- Recent Clients
- Recent Coupons
- Recent Events
- Recent Jobs
- Recent Locations
- Recent Movies
- Recent Music
- Recent News
- Recent Portfolios
- Recent Posts
- Recent Projects
- Recent Quotes
- Recent Recipes
[intense_content_section]
<h2>Introduction</h2>
Use the timeline shortcode to create your own vertical list of events. You can also use the timeline layout in many of the post types. Find out more at the [intense_permalink id="593"]Blog shortcode[/intense_permalink] page.
There are four different layout options to choose from:
<ul>
<li>dual - events are staggered left and right with the date line centered</li>
<li>left - events will float left with the date line on the right</li>
<li>right - events will float right with the date line on the left</li>
<li>center - events will be full-width with the date line centered</li>
</ul>
You can animate the event as it comes into view on scroll. There are a number of options to choose from when creating your list of events.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Dual</h2>
The first item in this list is "featured", so it stretches the full-width, while the others float left or right.
[intense_row padding_top="10"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_timeline show_year="1" column_mode="dual"]
[intense_timeline_event type="blog_post" featured="1" title="Post" date="2014-06-07" images="706,705" image_size="postWide" color="#e8e8e8" readmore_text="Check it out"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra.
[/intense_timeline_event]
[intense_timeline_event type="slider" featured="0" date="2013-08-22" images="721,718,717" color="#e8e8e8"][/intense_timeline_event]
[intense_timeline_event type="custom" featured="0" date="2013-03-15" color="#cccccc"]
[intense_testimonies type="slider"]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra. Aliquam pharetra, risus vel mattis luctus, tortor nibh pulvinar est, ac venenatis nunc justo a nulla. Nam enim arcu, consectetur eget vestibulum.
[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" image="http://1.gravatar.com/avatar/929b8350708873d9e87c9dbd164add5d?s=50&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G"]John Doe[/intense_testimony_author]
[/intense_testimony]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate metus id dolor ornare vel ullamcorper augue ultrices. Ut posuere arcu eu velit cursus id ultricies purus condimentum. Duis sagittis, sem a dictum porttitor, urna lacus rutrum lectus, quis rutrum.[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" link="#"]Jane Doe[/intense_testimony_author]
[/intense_testimony]
[/intense_testimonies]
[intense_slider transition="fade"]
[intense_slide]
[intense_image imageid="359" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="358" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="357" size="postWide" /]
[/intense_slide]
[/intense_slider]
[/intense_timeline_event]
[intense_timeline_event type="custom" date="2013-01-15" color="#e8e8e8" featured="0"]
[intense_person imageid="2146" imageposition="top" size="medium640" name="Jane Doe" title="CFO" facebook="#" twitter="#" imageshadow="10"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra.
[/intense_person]
[/intense_timeline_event]
[/intense_timeline]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section]
[intense_row padding_top="0"]
[intense_column size="6" medium_size="6"]
<h2>Left</h2>
This timeline is set to show the year, with no "featured" events.
[intense_timeline show_year="1" column_mode="left"]
[intense_timeline_event type="blog_post" featured="0" title="Post" date="2014-06-07" images="706,705" image_size="postWide" color="#e8e8e8" readmore_text="Check it out"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra.
[/intense_timeline_event]
[intense_timeline_event type="slider" featured="0" date="2013-08-22" images="721,718,717" color="#e8e8e8"][/intense_timeline_event]
[intense_timeline_event type="custom" featured="0" date="2013-03-15" color="#cccccc"]
[intense_testimonies type="slider"]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra. Aliquam pharetra, risus vel mattis luctus, tortor nibh pulvinar est, ac venenatis nunc justo a nulla. Nam enim arcu, consectetur eget vestibulum.
[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" image="http://1.gravatar.com/avatar/929b8350708873d9e87c9dbd164add5d?s=50&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G"]John Doe[/intense_testimony_author]
[/intense_testimony]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate metus id dolor ornare vel ullamcorper augue ultrices. Ut posuere arcu eu velit cursus id ultricies purus condimentum. Duis sagittis, sem a dictum porttitor, urna lacus rutrum lectus, quis rutrum.[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" link="#"]Jane Doe[/intense_testimony_author]
[/intense_testimony]
[/intense_testimonies]
[intense_slider transition="fade"]
[intense_slide]
[intense_image imageid="359" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="358" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="357" size="postWide" /]
[/intense_slide]
[/intense_slider]
[/intense_timeline_event]
[/intense_timeline]
[/intense_column]
[intense_column size="6" medium_size="6"]
<h2>Right</h2>
This timeline is set to not show the year, with the second event set as a "featured" event.
[intense_timeline show_year="0" column_mode="right"]
[intense_timeline_event type="blog_post" featured="0" title="Post" date="2014-06-07" images="706,705" image_size="postWide" color="#e8e8e8" readmore_text="Check it out"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra.
[/intense_timeline_event]
[intense_timeline_event type="slider" featured="1" date="2013-08-22" images="721,718,717" color="#e8e8e8"][/intense_timeline_event]
[intense_timeline_event type="custom" featured="0" date="2013-03-15" color="#cccccc"]
[intense_testimonies type="slider"]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra. Aliquam pharetra, risus vel mattis luctus, tortor nibh pulvinar est, ac venenatis nunc justo a nulla. Nam enim arcu, consectetur eget vestibulum.
[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" image="http://1.gravatar.com/avatar/929b8350708873d9e87c9dbd164add5d?s=50&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G"]John Doe[/intense_testimony_author]
[/intense_testimony]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate metus id dolor ornare vel ullamcorper augue ultrices. Ut posuere arcu eu velit cursus id ultricies purus condimentum. Duis sagittis, sem a dictum porttitor, urna lacus rutrum lectus, quis rutrum.[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" link="#"]Jane Doe[/intense_testimony_author]
[/intense_testimony]
[/intense_testimonies]
[intense_slider transition="fade"]
[intense_slide]
[intense_image imageid="359" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="358" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="357" size="postWide" /]
[/intense_slide]
[/intense_slider]
[/intense_timeline_event]
[/intense_timeline]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Center</h2>
[intense_row padding_top="0"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_timeline show_year="1" column_mode="center"]
[intense_timeline_event type="blog_post" featured="0" title="Post" date="2014-06-07" images="706,705" image_size="postWide" color="#e8e8e8" readmore_text="Check it out"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra.
[/intense_timeline_event]
[intense_timeline_event type="slider" featured="0" date="2013-08-22" images="721,718,717" color="#e8e8e8"][/intense_timeline_event]
[intense_timeline_event type="custom" featured="0" date="2013-03-15" color="#cccccc"]
[intense_testimonies type="slider"]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices tempor tristique. Curabitur convallis fermentum ante rutrum viverra. Aliquam pharetra, risus vel mattis luctus, tortor nibh pulvinar est, ac venenatis nunc justo a nulla. Nam enim arcu, consectetur eget vestibulum.
[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" image="http://1.gravatar.com/avatar/929b8350708873d9e87c9dbd164add5d?s=50&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D50&r=G"]John Doe[/intense_testimony_author]
[/intense_testimony]
[intense_testimony]
[intense_testimony_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate metus id dolor ornare vel ullamcorper augue ultrices. Ut posuere arcu eu velit cursus id ultricies purus condimentum. Duis sagittis, sem a dictum porttitor, urna lacus rutrum lectus, quis rutrum.[/intense_testimony_text]
[intense_testimony_author company="Intense Visions" link="#"]Jane Doe[/intense_testimony_author]
[/intense_testimony]
[/intense_testimonies]
[intense_slider transition="fade"]
[intense_slide]
[intense_image imageid="359" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="358" size="postWide" /]
[/intense_slide]
[intense_slide]
[intense_image imageid="357" size="postWide" /]
[/intense_slide]
[/intense_slider]
[/intense_timeline_event]
[/intense_timeline]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]