April 4, 2017
Timeline Wrapper
VISUALCOMPOSER
Timeline wrapper is the main shortcode for wrapping all of the timeline elements, in this shortcode you can define the layout of the element and the direction of the timeline alignment.
Shortcode Formats
The following format example can be invoked manually outside the VisualComposer to generate the element.
Note : Wordpress doesn't allow new line inside the shortcode, you must remove all new lines and replace them with space when using the shortcode.
[timeline
class="some class"
id="someid"
align="left|right|center|top|bottom"
layout="vertical|horizontal"
]
[timemajor
css="valid css class separated by empty space"
id="valid css id"
direction="left|right|top|bottom|center"
]
Some text to represent major events
[/timemajor]
[timeevents
datetime="YYYY-MM-DDTHH:MM"
date="the date text"
time="the time text"
icon="fontawesome icon name"
text="the event title"
direction="left|right" // only applicable if the parent didn't specify align (centered)
]
Some content representing the event content
[/timeevents]
[timeend
css="valid css class separated by empty space"
id="valid css id"
direction="left|right|top|bottom|center"
]
Some text to represent major events
[/timeend]
[/timeline]
Shortcodes Attributes
The shortcode above will accepts the following attributes.
Attributes | Value | Description |
---|---|---|
layout | vertical|horizontal | define the major layour for the timeline elements, vertical layout will stack all timeline elements vertically and horizontal layout will stack the timeline elements horizontally. |
align | left|right|center|top|bottom | The timeline line alignment, left, right and center only works with vertical layout while top and bottom only works with horizontal layout |
class | valid css class separated by empty space | You can inject additional css class by specifing the valid css class separated by empty space |
id | valid css id | You can define custom css id by specifying valid css / html id string |