Story telling

Story Telling Feature

Let's see how storytelling works in virtualCMS

Change elements

In the Settings module you can organize the structure of the elements of the storytellig. You are using the Story Telling Template you can change the order of the elements. The template has composed by classies that indentify the elements. The edit will be apply to the content.

Let's see all the elements that you can insert. The classes are:

vc_story_telling_pagination 

This class allows you to set the pagination with the attribute data-nav-enable:

-If it set as true, show two buttons (Next and Prev) for navigate among stories

- If it set as false, it show single block pagination where it also show the numeration of stories.

< div class="vc_story_telling_pagination" data-nav-enable="false" >< / div >

vc_story_telling_media

This class identify the media of the stories (photo, video). You can manage the dimensions in pixel: data-image-width, data-image-height, data-video-width, data-video-height.

< div class="vc_story_telling_media" data-image-width="100" data-image-height="100"
data-video-width="100"
data-video-height="100" >< /div >

vc_story_telling_title

This class identify the Single Story's headline.

< p class="vc_story_telling_title" >< /p >

vc_story_telling_banner 

This class identify the banner to insert in the single story. You can set the attribute data-format with a valid banner format.

< div class="vc_story_telling_banner" data-format="rectangle_300x250_1" >< /div >

vc_story_telling_text

This class identify the single Story's text.

You can include banners inside the text, using the following attributes data-banners and force-banner-on-bottom

data-banners: It specify the format of the banner and its position on the text. The number after the format of banner indicate the word offset in the text; in this way you can indicated how many word after to print the banner indicated. You can insert more banners. (ex. vc300x250,150;vc100x100,150)

data-force-banner-on-bottom: If true the banner will be printed on bottom even if the text doesn't meet the required offset, default true

< div class="vc_story_telling_text" data-banners="vc300x250,150;vc100x100,150"
data-force-banner-on-bottom="true" >< / div >

vc_story_telling_nav 

This class identify the nav of the stories. You can insert the menu of the stories in the storytelling. 

< div class="vc_story_telling_nav" >< / div >