Close

Account

Documentation

Forum

Menu

Visual Composer Integration

There’re a few things that we’ll explain to you on this part :

  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 element that you can use.

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 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 column you want to use on this ads block. 1 Block represent 4 column.
  2. CSS Box
    Set css attribute 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 works if you choose Custom Format on Choose Date Format option above.
  4. News Ticker Icon
    Choose which font icon that 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 works 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 empty, you will use default theme scheme color.
  9. News Ticker Text Color
    Choose news ticker title text color. If you leave empty, you will use default theme scheme color.

Content Filter Tab

  1. Include Post Type
    Choose post type for content of news ticker.
  2. Number of Post
    Set number of post for content of news ticker.
  3. Post Offset
    Set number of post offset (start of content) of news ticker.
  4. Include into Unique Content Group
    Choose unique content option, and this news ticker will include 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 news ticker. You can search post id by input title, clicking search title, 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 won’t to show for content of news ticker. You can search post id by input title, clicking search title, 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 news ticker.
  8. Exclude Category
    Exclude which post category that you won’t to show for content of news ticker.
  9. Author
    Choose which post author that you want to show for content of news ticker.
  10. Include Tags
    Include which post tags that you want to show for content of news ticker.
  11. Exclude Tags
    Exclude which post tags that you won’t to show for content of news ticker.
  12. Sort By
    Choose sort type for content of news ticker.

Design Tab

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

 

JNews – Header Module

General Tab

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

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this header module. 1 Block represent 4 column.
  2. CSS Box
    Set css attribute 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 video playlist.
  2. Number of Post
    Set number of post for content of video playlist.
  3. Post Offset
    Set number of post offset (start of content) of video playlist.
  4. Include into Unique Content Group
    Choose unique content option, and this video playlist will include 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. You can search post id by input title, clicking search title, 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 won’t to show for content of video playlist. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content of video playlist.
  12. Sort By
    Choose sort type for content of video playlist.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this video playlist. 1 Block represent 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 column you want to use on this playlist block. 1 Block represent 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 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 column you want to use on this block. 1 Block represent 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 element 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 works on certain header type.
  6. Header Text Color
    Set text color of header module block. Please note, this option may not works 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 include 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. You can search post id by input title, clicking search title, 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 won’t to show for content module block. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content module block.
  12. Sort By
    Choose sort type 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 works 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 works 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 works 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 column you want to use on this block. 1 Block represent 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 works 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 include 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. You can search post id by input title, clicking search title, 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 won’t to show for content hero block. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content hero block.
  12. Sort By
    Choose sort type 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 represent 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 works 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 works 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 include 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. You can search post id by input title, clicking search title, 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 won’t to show for content slider. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content slider.
  12. Sort By
    Choose sort type for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represent 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 works 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 works 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 include 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. You can search post id by input title, clicking search title, 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 won’t to show for content slider. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content slider.
  12. Sort By
    Choose sort type for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represent 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 works 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 works 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 include 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. You can search post id by input title, clicking search title, 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 won’t to show for content slider. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content slider.
  12. Sort By
    Choose sort type for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represent 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 works 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 include 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. You can search post id by input title, clicking search title, 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 won’t to show for content slider. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content slider.
  12. Sort By
    Choose sort type for content of slider.

Design Tab

  1. Block / Column Width
    Please choose width of column you want to use on this slider. 1 Block represent 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 works 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 works 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 include 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. You can search post id by input title, clicking search title, 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 won’t to show for content carousel. You can search post id by input title, clicking search title, 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 won’t 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 won’t to show for content carousel.
  12. Sort By
    Choose sort type for content of carousel.

Design Tab

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

 

Info

If you’re not familiar working with Visual Composer yet, you can follow this link for more complete information above Visual Composer.