{"id":11945,"date":"2016-12-27T13:00:08","date_gmt":"2016-12-27T13:00:08","guid":{"rendered":"http:\/\/rnbtheme.com\/documentation\/?p=11945"},"modified":"2023-07-31T11:37:17","modified_gmt":"2023-07-31T11:37:17","slug":"side-by-side-slider-module","status":"publish","type":"post","link":"https:\/\/rnbtheme.com\/documentation\/wpbackery\/side-by-side-slider-module","title":{"rendered":"Side By Side Slider 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]You have to combine the module with certain page template to get it work properly. Please, select the\u00a0<strong>For side by side page template<\/strong> in <strong>Page Attributes<\/strong> section.<\/p>\n<p>This is a nested shortcode &#8211; module that includes other modules. You may style the container and then fill it in with elements.<\/p>\n<p>You may see the example on the\u00a0<a href=\"http:\/\/rnbtheme.com\/elements\/side-by-side\/\">Side by Side<\/a>\u00a0page.<\/p>\n<p><strong>Please note! On mobile devices,\u00a0the scripts for creating side by side sites are working in the following way:<\/strong><br \/>\n<strong>Side by Side module displays left column modules (from top to bottom) first, and then it displays the modules from the right column \u2013 top to bottom.<\/strong>[\/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;][vc_column_text]<\/p>\n<h3>\u00a0Side by Side Containers<\/h3>\n<h4>Add the needed elements to make up the structure.<\/h4>\n<p>[\/vc_column_text][dfd_hotspot tooltip_width=&#8221;300&#8243; image=&#8221;14117&#8243; hotspot_data=&#8221;%5B%7B%22index%22%3A2%2C%22x%22%3A50.055082256169214%2C%22y%22%3A14.341590612777052%2C%22Title%22%3A%22Side%20by%20Side%20slider%20Settings%22%2C%22Message%22%3A%22Here%20you%20may%20add%20extra%20class%20name%20for%20the%20slider.%22%7D%2C%7B%22index%22%3A3%2C%22x%22%3A52.992802585193886%2C%22y%22%3A16.558018252933508%2C%22Title%22%3A%22Side%20by%20Side%20Left%2FRight%20Container%20Settings%22%2C%22Message%22%3A%22In%20this%20section%20you%20my%20add%20extra%20class%20names%20for%20the%20left%20and%20right%20containers%20correspondingly.%22%7D%2C%7B%22index%22%3A4%2C%22x%22%3A55.57248824911868%2C%22y%22%3A19.045387874837026%2C%22Title%22%3A%22Side%20by%20Side%20Slider%20Item%201%20Settings%22%2C%22Message%22%3A%22Style%20the%20containers%20according%20to%20your%20needs%20in%20this%20section%20by%20adding%20custom%20padding%2Fborder%2Fmargin%20for%20the%20container.%20You%20may%20select%20the%20background%20scheme%20used%20for%20the%20container%20and%20adjust%20the%20responsive%20settings%20as%20well.%22%7D%2C%7B%22index%22%3A5%2C%22x%22%3A56.40055816686251%2C%22y%22%3A83.31160365058669%2C%22Title%22%3A%22Side%20by%20Side%20Slider%20Item%202%20Settings%22%2C%22Message%22%3A%22Style%20the%20containers%20according%20to%20your%20needs%20in%20this%20section%20by%20adding%20custom%20padding%2Fborder%2Fmargin%20for%20the%20container.%20You%20may%20select%20the%20background%20scheme%20used%20for%20the%20container%20and%20adjust%20the%20responsive%20settings%20as%20well.%22%7D%5D&#8221; box_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; tutorials=&#8221;&#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;][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][\/vc_row][vc_row][vc_column css=&#8221;.vc_custom_1504265380554{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;][vc_column_text]<\/p>\n<h3>Side by Side Slider<\/h3>\n<h4>Select the Side by Side module to create slider.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14120\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/side-by-side-.png\" alt=\"\" width=\"978\" height=\"141\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/side-by-side-.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/side-by-side--300x43.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/side-by-side--768x111.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Side by Side Slider Settings<\/strong> \u00a0&#8211; allows you to add extra class name for the slider.\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<\/li>\n<\/ul>\n<h5>Side by Side Left\/Right Container<\/h5>\n<h6>Select the left or right container to fill it with content.<\/h6>\n<ul>\n<li><strong>Side by Side Left\/Right Container<\/strong> &#8211; add the container to distinguish the columns division &#8211; left and right columns respectively. After that you&#8217;ll be able to fill them with content.<br \/>\nNote, that the slider items from different columns are aligned respectively. And the first Side by Side Slider Item of left column will always be aligned with the first item in the right column.<br \/>\nMake sure that the quantity of the slider items in both columns is equal for proper module functioning.<\/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<\/li>\n<\/ul>\n<h5>Side by Side Slider Item<\/h5>\n<h6>Style the containers according to your needs.<\/h6>\n<ul>\n<li><strong>Side by Side Slider Item<\/strong> &#8211; style the containers according to your needs.<\/li>\n<\/ul>\n<h5>Design options<\/h5>\n<h6>The settings are similar to the Design tab of the row options. You may check the settings in <strong><a href=\"http:\/\/rnbtheme.com\/documentation\/visual-composer\/row-options\" target=\"_blank\" rel=\"noopener\">this post<\/a><\/strong> of the theme documentation.<\/h6>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14121\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item.png\" alt=\"\" width=\"978\" height=\"571\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-300x175.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-768x448.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>CSS Box<\/strong> &#8211; add paddings for the content of the inner container.<\/li>\n<li><strong>Border<\/strong> &#8211; set the border for the container, if needed.<\/li>\n<li><strong>Background<\/strong> &#8211; set the background image for the column section.<\/li>\n<\/ul>\n<h5>General settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14123\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-2.png\" alt=\"\" width=\"978\" height=\"218\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-2.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-2-300x67.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-2-768x171.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Select slide background style<\/strong> \u2013 choose the background style for the slide. The text colors will be changed according to the style you choose to make it more readable. <strong>Light<\/strong> and <strong>dark<\/strong> variants are available.<\/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<h5>Responsive options<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-14124\" src=\"http:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-3.png\" alt=\"\" width=\"978\" height=\"627\" srcset=\"https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-3.png 978w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-3-300x192.png 300w, https:\/\/rnbtheme.com\/documentation\/wp-content\/uploads\/2016\/12\/item-3-768x492.png 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Responsive options<\/strong>\u00a0\u00a0\u2013 \u00a0switch it to\u00a0<strong>Enable<\/strong>\u00a0to customize the slide settings for different devices.\n<ul>\n<li><strong>Desktop<\/strong>\u00a0\u2013 set the desired margins, borders, and paddings for the slide for the screen resolutions from 1280px to 1025px.<\/li>\n<li><strong>Tablet<\/strong>\u00a0\u2013 set the desired margins, borders, and paddings for the slide\u00a0for the screen resolutions from 1024px to 800px.<\/li>\n<li><strong>Mobile<\/strong>\u00a0\u2013 set the desired margins, borders, and paddings for the slide for the screen resolutions less than 800px.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Create stunning vertically scrolling page on your site.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[47,43,22,38,33],"_links":{"self":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11945"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/comments?post=11945"}],"version-history":[{"count":16,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11945\/revisions"}],"predecessor-version":[{"id":15606,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/posts\/11945\/revisions\/15606"}],"wp:attachment":[{"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/media?parent=11945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/categories?post=11945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rnbtheme.com\/documentation\/wp-json\/wp\/v2\/tags?post=11945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}