{"id":14428,"date":"2017-10-06T12:15:46","date_gmt":"2017-10-06T12:15:46","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=14428"},"modified":"2017-10-06T13:22:22","modified_gmt":"2017-10-06T13:22:22","slug":"news-scroller-module","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/news-scroller-module","title":{"rendered":"News Scroller Module"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]In order to display posts within this module, you have to create blog posts in the corresponding section of the admin panel. Check the <a href=\"http:\/\/rnbtheme.com\/documentation\/post-types\/single-post-creation\">Blog post creation<\/a> section of the theme documentation for more information.<\/p>\n<p><strong>This module is used in beta version, and is being under development now.<\/strong><\/p>\n<p>It allows to display single post in the carousel which consists of top and bottom container.<\/p>\n<p>The single posts and their number can be set directly in the module settings.[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14432\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/new-scroller.png\" alt=\"\" width=\"978\" height=\"528\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/new-scroller.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/new-scroller-300x162.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/new-scroller-768x415.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Number of slides in top container<\/strong>\u00a0&#8211; select the number of slides to be show in top part of module. You may set from 2 to 4 slides.<\/li>\n<li><strong>Number of slides in bottom container<\/strong>\u00a0 &#8211;\u00a0select the number of slides to be show in bottom part of module. You may set from 3 to 5 slides.<\/li>\n<li><strong>Top container height<\/strong> &#8211;\u00a0set the height of the top container in px.<\/li>\n<li><strong>Bottom container height<\/strong> &#8211; set the height of the bottom container in px.<\/li>\n<li><strong>Prev\/next navigation arrows<\/strong> &#8211; set it to <strong>Enable<\/strong> to display the navigation arrows for the module.\n<ul>\n<li><strong>Arrows color<\/strong> &#8211; set the color for the navigation arrows in the module.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Items offset<\/strong> &#8211; set the space between the single posts in module in px.<\/li>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Animation settings&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Animation<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-13595\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/08\/animation.png\" sizes=\"(max-width: 990px) 100vw, 990px\" srcset=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/08\/animation.png 990w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/08\/animation-300x40.png 300w, http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/08\/animation-768x102.png 768w\" alt=\"\" width=\"990\" height=\"132\" \/><\/p>\n<ul>\n<li><strong>Animation<\/strong>\u00a0\u2013 choose between 14 preset animation effects.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Top\/Bottom Container settings&#8221; tab_id=&#8221;1486557863586-b94e6c49-93f4&#8243;][vc_column_text]<\/p>\n<h3>Top\/Bottom Container settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14435\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/custom-css.png\" alt=\"\" width=\"978\" height=\"112\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/custom-css.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/custom-css-300x34.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/custom-css-768x88.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Custom CSS class<\/strong>\u00a0\u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type\u00a0<strong>custom-style<\/strong>class and then go to\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del>\u00a0<del>Custom CSS<\/del>\u00a0field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Post item settings&#8221; tab_id=&#8221;1506088486110-0cf46fe9-ca8a&#8221;][vc_column_text]<\/p>\n<h3>Post item settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14437\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-1.png\" alt=\"\" width=\"978\" height=\"626\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-1.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-1-300x192.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-1-768x492.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Post to show<\/strong> &#8211; select the single post to be shown in the module.<\/li>\n<li><strong>Title<\/strong> &#8211; set it to <strong>Enable<\/strong> to display the single pots&#8217;s title.\n<ul>\n<li><strong>Tag<\/strong> &#8211; select the tag for title typography.<\/li>\n<li><strong>Title alignment<\/strong> &#8211; select the horizontal alignment for the title. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Date and author<\/strong>\u00a0&#8211; set it to <strong>Enable<\/strong> to display the date of publication and author of the post.<\/li>\n<li><strong>Categories<\/strong> &#8211;\u00a0\u00a0switch it to <strong>Enable<\/strong> to display the categories assigned for the post.<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14438\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-2.png\" alt=\"\" width=\"978\" height=\"386\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-2.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-2-300x118.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2017\/10\/post-item-2-768x303.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><b>Post style\u00a0<\/b>&#8211;\u00a0\u00a0choose the blog style.\n<ul>\n<li><strong>Simple <\/strong>&#8211;\u00a0the post content will be displayed near the post featured image.\n<ul>\n<li><strong>Content alignment<\/strong> &#8211;\u00a0select the horizontal alignment for the blog content. <strong>Left<\/strong> and <strong>right<\/strong> positions are available.<\/li>\n<li><strong>Content background<\/strong> &#8211;\u00a0set the background color for the content. The default value is #f4f4f4.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Advanced<\/strong> &#8211; the post content is set over the post&#8217;s featured image.\n<ul>\n<li><strong>Mask by default<\/strong> &#8211; set it to <strong>Enable<\/strong> to\u00a0display the mask effect by default.<\/li>\n<li><strong>Image mask style<\/strong> &#8211; select the style for the mask.\n<ul>\n<li><strong>Color<\/strong> &#8211; select this style to set the simple color for the mask.<\/li>\n<li><strong>Image mask color<\/strong> &#8211;\u00a0set the color for the image mask. The default color is rgba(27,27,27,0.5)<\/li>\n<li><strong>Gradient<\/strong> &#8211;\u00a0select this style to set the gradient color for the mask.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Custom CSS class<\/strong>\u00a0\u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type\u00a0<strong>custom-style\u00a0<\/strong>class and then go to\u00a0<del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del>\u00a0<del>Custom CSS<\/del>\u00a0field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Display blog posts on the site to create stylish news section with amazing scrolling effect.<\/p>\n","protected":false},"author":29,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[10,37,22,33],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/14428"}],"collection":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=14428"}],"version-history":[{"count":9,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/14428\/revisions"}],"predecessor-version":[{"id":14441,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/14428\/revisions\/14441"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=14428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=14428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=14428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}