Visual Composer Integration

There are few things that we will explain to you on this section :

1. JNews – Element
2. JNews – Module
3. JNews – Hero
4. JNews – Slider
5. JNews – Carousel

1. JNews – Element

As you can see on the image below, on JNews – Element group tab we provide several Visual Composer elements that you can use to optimize your website’s look.

Please check the following explanation below about Visual Composer element on JNews – Element group tab :

JNews – Ads Block

General Tab

1. Ads Type
   Choose ads type that you want to use.
2. [Image Ads] Ads Image
   Choose an image for image ads.
3. [Image Ads] Ads Image Link
   Insert url link for image ads.
4. [Image Ads] Image Alternate Text
   Insert alternate text for image ads.
5. [Image Ads] Open New Tab
   Check this option to open the page in new tab when image ads clicked.
6. [Google Ads] Publisher ID
   Insert data-ad-client / google_ad_client content.
7. [Google Ads] Ads Slot ID
   Insert data-ad-slot / google_ad_slot content.
8. [Google Ads] Desktop Ads Size
   Choose ads size to show on desktop.
9. [Google Ads] Tab Ads Size
   Choose ads size to show on tablet.
10. [Google Ads] Phone Ads Size
    Choose ads size to show on phone.
11. [Script Code] Ads Code
    Insert ads script code.

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this ads block. 1 Block represents  4 column.
2. CSS Box
   Set css attributes for ads block.

JNews – News Ticker

General Tab

1. News Ticker Title
   Insert title for news ticker.
2. Choose Date Format
   Choose date format for content of news ticker.
3. Custom Date Format
   Set custom date format for content of news ticker. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.
4. News Ticker Icon
   Choose which font icon that is best to describe your news ticker.
5. Enable Autoplay
   Check this option to enable auto play news ticker.
6. Autoplay Delay
   Set auto play delay of news ticker in mili second. Please note, this option will appear and work if you enable auto play slider option above.
7. Animation Direction
   Choose news ticker animation direction.
8. News Ticker Title Background
   Choose news ticker title background. If you leave it empty, default theme scheme color will be used.
9. News Ticker Text Color
   Choose news ticker title text color. If you leave it empty, default theme scheme color will be used.

Content Filter Tab

1. Include Post Type
   Choose post type for content of the news ticker.
2. Number of Post
   Set number of post for content of the news ticker.
3. Post Offset
   Set number of post offset (start of content) of news ticker.
4. Include into Unique Content Group
   If you choose unique content option, this news ticker will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content of the news ticker. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content of news ticker. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for the content of news ticker.
8. Exclude Category
   Exclude which post category that you don’t want to show for the content of news ticker.
9. Author
   Choose which post author that you want to show for the content of news ticker.
10. Include Tags
    Include which post tags that you want to show for the content of news ticker.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for the content of news ticker.
12. Sort By
    Choose the sorting method for the content of news ticker.

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this news ticker. 1 Block represents  4 column.
2. CSS Box
   Set css attributes for news ticker.

JNews – Header Module

General Tab

1. Title
   Insert text for the main title of header module.
2. Second Title
   Insert text for the secondary title of header module.
3. Title URL
   Insert url link for the title of header module.
4. Header Type
   Choose a header type for header module.
5. Header Align
   Choose the alignment of header module.
6. Header Background
   Set the background color of header module. Please note, this option may not work on certain header type.
7. Header Text Color
   Set the text color of header module. Please note, this option may not work on certain header type.

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this header module. 1 Block represents  4 column.
2. CSS Box
   Set css attributes for header module.

JNews – Video Playlist

General Tab

1. Video Playlist Layout
   Choose video playlist layout.
2. Video Playlist Scheme
   Choose video scheme color.

Content Filter Tab

1. Include Post Type
   Choose post type for content of the video playlist.
2. Number of Post
   Set number of post for content of the video playlist.
3. Post Offset
   Set number of post offset (start of content) of the video playlist.
4. Include into Unique Content Group
   Choose unique content option, and this video playlist will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content of video playlist. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content of video playlist. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content of video playlist.
8. Exclude Category
   Exclude which post category that you don’t want to show for content of video playlist.
9. Author
   Choose which post author that you want to show for content of video playlist.
10. Include Tags
    Include which post tags that you want to show for content of video playlist.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content of video playlist.
12. Sort By
    Choose sorting method for content of video playlist.

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this video playlist. 1 Block represents  4 column.
2. CSS Box
   Set css attribute for video playlist.

JNews – YouTube / Vimeo Playlist

General Tab

1. Video Playlist Layout
   Choose video playlist layout.
2. Video Playlist Scheme
   Choose video scheme color.
3. YouTube / Vimeo Video
   Enter your youtube / vimeo video separated by comma (Ex : https://www.youtube.com/watch?v=IvcE4o36cAo, https://vimeo.com/180337696).

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this playlist block. 1 Block represents  4 column.
2. CSS Box
   Set css attribute for this playlist block.

JNews – Block Link

General Tab

1. Title
   Insert text for main title of block link.
2. Second Title
   Insert text for secondary title of block link.
3. Title URL
   Insert url link for title of block link.
4. Open New Tab
   Check this option to open link on a new tab.
5. Background Image
   Choose an image for block background.
6. Use Video Background
   Check this option to use video as block background.
7. YouTube Link
   Add YouTube video link to used as video background.

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this block. 1 Block represents  4 column.
2. CSS Box
   Set css attribute for block link.

JNews – Split Navigation

General Tab

• Menu to Include
  Include menu into split navigation.

Design Tab

1. Block / Column Width
   Please choose width of column you want to use on this split navigation. 1 Block represent 4 column.
2. CSS Box
   Set css attribute for split navigation.

2. JNews – Module

As you can see on the image below, on JNews – Module group tab we provide several Visual Composer elements that you can use.

Please check the following explanation below about Visual Composer element on JNews – Module group tab :

General Option of JNews – Module Block

Header Tab

1. Title
   Insert text for main title of module block.
2. Second Title
   Insert text for secondary title of module block.
3. Title URL
   Insert url link for title of module block.
4. Header Type
   Choose header type for module block.
5. Header Background
   Set background color of header module block. Please note, this option may not work on certain header type.
6. Header Text Color
   Set text color of header module block. Please note, this option may not work on certain header type.

Header Filter Tab

1. Category
   Add category filter for header module block.
2. Author
   Add author filter for header module block.
3. Tags
   Add tag filter for header module block.
4. Default Text
   Insert text for first filter item of heading filter.

Content Filter Tab

1. Include Post Type
   Choose post type for content of module block.
2. Number of Post
   Set number of post for content module block.
3. Post Offset
   Set number of post offset (start of content) of module block.
4. Include into Unique Content Group
   Choose unique content option, and this module will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content module block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content module block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content module block.
8. Exclude Category
   Exclude which post category that you don’t want to show for content module block.
9. Author
   Choose which post author that you want to show for content module block.
10. Include Tags
    Include which post tags that you want to show for content module block.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content module block.
12. Sort By
    Choose sorting method for content of module block.

Content Setting Tab

1. Content Date Format
   Choose date format for content of module block.
2. Custom Date Format
   Set custom date format for content of module block. Please note, this option will appear and work if you choose Custom Format on Content Date Format option above.
3. Excerpt Length
   Set the number of word length for post excerpt.

Pagination Tab

1. Choose Pagination Mode
   Choose pagination mode for module block.
2. Pagination Post
   Set the number of post to load during pagination request. Please note, this option will appear and work if you’re not choose No Pagination on Choose Pagination Mode option above.
3. Auto Load Limit
   Set the limit of auto load when scrolling. Set to zero (0) to always load until end of content. Please note, this option will appear and work if you’re not choose Auto Load on Scroll on Choose Pagination Mode option above.

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this block. 1 Block represents 4 column.
2. CSS Box
   Set css attribute for slider.

3. JNews – Hero

As you can see on the image below, on JNews – Hero group tab we provide several Visual Composer element that you can use.

Please check the following explanation below about Visual Composer element on JNews – Hero group tab :

General Option of JNews – Hero Block

Hero Setting Tab

1. Hero Margin
   Set margin for each hero item. Please note, this option not available for JNews – Hero 14.
2. Hero Style
   Choose style for the current hero. Please note, this option not available for JNews – Hero 14.
3. Choose Date Format
   Choose date format for content of slider.
4. Custom Date Format
   Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

1. Include Post Type
   Choose post type for content of hero block.
2. Number of Post
   Set number of post for content hero block.
3. Post Offset
   Set number of post offset (start of content) of hero block.
4. Include into Unique Content Group
   Choose unique content option, and this hero will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content hero block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content hero block. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content hero block.
8. Exclude Category
   Exclude which post category that you don’t want to show for content hero block.
9. Author
   Choose which post author that you want to show for content hero block.
10. Include Tags
    Include which post tags that you want to show for content hero block.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content hero block.
12. Sort By
    Choose sorting method for content of hero block.

Hero Design Tab

1. Hero Height on Desktop
   Set height on pixel in px for desktop, leave empty to use default number.
2. Hero Height on 1024px Width Screen
   Set height on pixel in px for 1024px width screen, leave empty to use default number.
3. Hero Height on 768px Width Screen
   Set height on pixel in px for 768px width screen, leave empty to use default number.
4. Hero Height on 667px Width Screen
   Set height on pixel in px for 667px width screen, leave empty to use default number.
5. Hero Height on 568px Width Screen
   Set height on pixel in px for 568px width screen, leave empty to use default number.
6. Hero Height on 480px Width Screen
   Set height on pixel in px for 480px width screen, leave empty to use default number.

Design Tab

1. Block / Column Width
   Please choose width of column you want to use on this hero block. 1 Block represents 4 column.
2. CSS Box
   Set css attribute for hero.

4. JNews – Slider

As you can see on the image below, on JNews – Slider group tab we provide several Visual Composer element that you can use.

Please check the following explanation below about Visual Composer element on JNews – Slider group tab :

JNews – Slider 1 – 2

General Tab

1. Enable Autoplay
   Check this option to enable auto play slider.
2. Autoplay Delay
   Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
3. Choose Date Format
   Choose date format for content of slider.
4. Custom Date Format
   Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

1. Include Post Type
   Choose post type for content of slider.
2. Number of Post
   Set number of post for content slider.
3. Post Offset
   Set number of post offset (start of content) of slider.
4. Include into Unique Content Group
   Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content slider.
8. Exclude Category
   Exclude which post category that you don’t want to show for content slider.
9. Author
   Choose which post author that you want to show for content slider.
10. Include Tags
    Include which post tags that you want to show for content slider.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
12. Sort By
    Choose sorting method for content of slider.

Design Tab

1. Block / Column Width
   Please choose width of column you want to use on this slider. 1 Block represents 4 column.
2. CSS Box
   Set css attribute for slider.

JNews – Slider 3

General Tab

1. Number of Column
   Set number of carousel item column on each slide.
2. Enable Autoplay
   Check this option to enable auto play slider.
3. Autoplay Delay
   Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
4. Choose Date Format
   Choose date format for content of slider.
5. Custom Date Format
   Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

1. Include Post Type
   Choose post type for content of slider.
2. Number of Post
   Set number of post for content slider.
3. Post Offset
   Set number of post offset (start of content) of slider.
4. Include into Unique Content Group
   Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content slider.
8. Exclude Category
   Exclude which post category that you don’t want to show for content slider.
9. Author
   Choose which post author that you want to show for content slider.
10. Include Tags
    Include which post tags that you want to show for content slider.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
12. Sort By
    Choose sorting method for content of slider.

Design Tab

1. Block / Column Width
   Please choose width of column you want to use on this slider. 1 Block represents 4 column.
2. CSS Box
   Set css attribute for slider.

JNews – Slider 4

General Tab

1. Enable Autoplay
   Check this option to enable auto play slider.
2. Use Full-Size Image
   Check this option to enable full-size image instead of cropped version.
3. Autoplay Delay
   Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
4. Choose Date Format
   Choose date format for content of slider.
5. Custom Date Format
   Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

1. Include Post Type
   Choose post type for content of slider.
2. Number of Post
   Set number of post for content slider.
3. Post Offset
   Set number of post offset (start of content) of slider.
4. Include into Unique Content Group
   Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content slider.
8. Exclude Category
   Exclude which post category that you don’t want to show for content slider.
9. Author
   Choose which post author that you want to show for content slider.
10. Include Tags
    Include which post tags that you want to show for content slider.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
12. Sort By
    Choose sorting method for content of slider.

Design Tab

1. Block / Column Width
   Please choose width of column you want to use on this slider. 1 Block represents 4 column.
2. CSS Box
   Set css attribute for slider.

JNews – Slider Overlay

General Tab

1. Enable Fullscreen
   Check this option to enable full screen slider.
2. Show Navigation
   Check this option to show next and prev button to navigate slider.
3. Overlay Option
   Choose overlay type that you want to use for slider.
4. Normal Overlay Color
   Set overlay color for slider. Please note, this option will appear and work if you choose Normal Overlay on Overlay Option above.

Content Filter Tab

1. Include Post Type
   Choose post type for content of slider.
2. Number of Post
   Set number of post for content slider.
3. Post Offset
   Set number of post offset (start of content) of slider.
4. Include into Unique Content Group
   Choose unique content option, and this slider will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content slider. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content slider.
8. Exclude Category
   Exclude which post category that you don’t want to show for content slider.
9. Author
   Choose which post author that you want to show for content slider.
10. Include Tags
    Include which post tags that you want to show for content slider.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content slider.
12. Sort By
    Choose sorting method for content of slider.

Design Tab

1. Block / Column Width
   Please choose width of column you want to use on this slider. 1 Block represents 4 column.
2. CSS Box
   Set css attribute for slider.

5. JNews – Carousel

As you can see on the image below, on JNews – Carousel group tab we provide several Visual Composer element that you can use.

Please check the following explanation below about Visual Composer element on JNews – Carousel group tab :

General Option of JNews – Carousel

General Tab

1. Show Nav
   Check this option to show navigation on carousel.
2. Number of Item
   Set number of carousel item to show on each slide.
3. Item Margin
   Set margin for each slider item.
4. Enable Autoplay
   Check this option to enable auto play slider.
5. Autoplay Delay
   Set auto play delay of slider in mili second. Please note, this option will appear and work if you enable auto play slider option above.
6. Choose Date Format
   Choose date format for content of slider.
7. Custom Date Format
   Set custom date format for content of slider. Please note, this option will appear and work if you choose Custom Format on Choose Date Format option above.

Content Filter Tab

1. Include Post Type
   Choose post type for content of carousel.
2. Number of Post
   Set number of post for content carousel.
3. Post Offset
   Set number of post offset (start of content) of carousel.
4. Include into Unique Content Group
   Choose unique content option, and this carousel will be included into unique content group. It won’t duplicate content across the group. Ajax loaded content won’t affect this unique content feature.
5. Include Post ID
   Include post id that you want to show for content carousel. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
6. Exclude Post ID
   Exclude post id that you don’t want to show for content carousel. It can be done firstly by searching post id by inputing title, then clicking the search result, and finally you will have your post id. You can also directly insert your post id, and click enter to add it on the list.
7. Include Category
   Include which post category that you want to show for content carousel.
8. Exclude Category
   Exclude which post category that you don’t want to show for content carousel.
9. Author
   Choose which post author that you want to show for content carousel.
10. Include Tags
    Include which post tags that you want to show for content carousel.
11. Exclude Tags
    Exclude which post tags that you don’t want to show for content carousel.
12. Sort By
    Choose sorting method for content of carousel.

Design Tab

1. Block / Column Width
   Please choose width of the column you want to use on this carousel. 1 Block represents 4 column.
2. CSS Box
   Set css attribute for carousel.