{"id":11867,"date":"2016-12-30T08:55:03","date_gmt":"2016-12-30T08:55:03","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=11867"},"modified":"2017-02-08T14:48:22","modified_gmt":"2017-02-08T14:48:22","slug":"dfd-tours","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/dfd-tours","title":{"rendered":"DFD Tours"},"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]DFD Tours module is the excellent module for stylish presentation of the information and saving the page space at once.<\/p>\n<p>You may\u00a0add as many tours as you want.<\/p>\n<p>More examples can be found on <a href=\"http:\/\/nativewptheme.net\/shortcodes\/tours\/\" target=\"_blank\">Tours page<\/a>.<\/p>\n<p>This is a nested shortcode \u2013 module that includes other modules. You may style the container and then fill it in with elements.<\/p>\n<h5>Watch the video tutorial on <a href=\"https:\/\/youtu.be\/lOqNXYc1scQ\" target=\"_blank\">DFD Tours module creation<\/a> for more details.<\/h5>\n<p>[\/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 wp-image-2097 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-settings.jpg\" width=\"978\" height=\"478\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-settings.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-settings-300x147.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/General-settings-768x375.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Style<\/strong> &#8211; select the style of the Tour section for your site.\n<ul>\n<li><strong>Classic<\/strong> \u2013 the tour sections have the transparent background color set for each of them, except for the active tour section, the background color for which can be set in module settings.<\/li>\n<li><strong>Underline<\/strong> \u2013 the tour sections are displayed with underline decoration. The underline\u00a0color is different\u00a0for the active tour section.<\/li>\n<li><strong>Active tour border<\/strong> \u2013 the inactive tour sections are displayed with underline decoration while the active tour section has the transparent background color with the border around.<\/li>\n<li><strong>Active tour background\u00a0<\/strong>\u2013\u00a0the inactive tour sections are displayed with underline decoration while the active tour section has the transparent background color with the shadow decoration effect.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\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;Tour style&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Tour style<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2100 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Tour-section.jpg\" width=\"978\" height=\"850\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Tour-section.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Tour-section-300x261.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Tour-section-768x667.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Position<\/strong> &#8211; select tour sections position. They can be displayed on the\u00a0<strong>left<\/strong> or <strong>right<\/strong> side.<\/li>\n<li><strong>Background color<\/strong> &#8211; set the background color for the tour section. The background is not set by default. For <strong>Classic<\/strong> style only.<\/li>\n<li><strong>Hover background color<\/strong> &#8211; select the background hover color for inactive tours. The background is not set by default. For <strong>Classic<\/strong> style only.<\/li>\n<li><strong>Active tour background color<\/strong> &#8211; set the background color for the active tour. The default background color for style <strong>Classic<\/strong> is inherited from <del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Second site color<\/del>. The color for the styles <strong>Active tour border<\/strong> and <strong>Active tour background\u00a0<\/strong>is not set by default.<\/li>\n<li><strong>Border color<\/strong> &#8211; specify the border color for the tour. The default border color is inherited from\u00a0<del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Second site color<\/del>.<\/li>\n<li><strong>Border hover color<\/strong>\u00a0&#8211;\u00a0specify the border color for the tour on hover. The default border color is inherited from\u00a0<del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Second site color<\/del>.<\/li>\n<li><strong>Active tour border color<\/strong> &#8211; choose the border color for the active tour. For the style <strong>Underline<\/strong> it is set as underline color for the active tour. The default underline color for the style <strong>Underline<\/strong> is inherited from <del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Main\u00a0site color<\/del>. The default border color for others styles is inherited from <del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Second site color<\/del>.<\/li>\n<li><strong>Border width<\/strong> \u2013 set the border width for the tours.<\/li>\n<li><strong>Border radius\u00a0<\/strong>\u2013 set the border radius for the tabs.<\/li>\n<li><strong>Active tour border width<\/strong> &#8211; set the border width for the active tour. For <strong>Underline<\/strong> style only.<\/li>\n<li><strong>Active tour border radius\u00a0<\/strong>&#8211; set the border radius for the active tour. For <strong>Active tour border<\/strong> and <strong>Active tour background<\/strong> styles only.<\/li>\n<li><strong>Underline on inactive tab<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the underline decoration under inactive tabs. For <strong>Underline<\/strong>,\u00a0<strong>Active tour border <\/strong>and<strong> Active tour background<\/strong><strong>\u00a0<\/strong>styles only.<\/li>\n<li><strong>Underline height<\/strong> \u2013 specify the height of the underline decoration in px. For <strong>Underline<\/strong>,\u00a0<strong>Active tour border <\/strong>and<strong> Active tour background<\/strong><strong>\u00a0<\/strong>styles only.<\/li>\n<li><strong>Underline color<\/strong> \u2013 choose the underline color for the inactive tabs. The default underline color is inherited from\u00a0<del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Second site color<\/del>.\u00a0For <strong>Underline<\/strong>,\u00a0<strong>Active tour border <\/strong>and<strong> Active tour background<\/strong><strong>\u00a0<\/strong>styles only.<\/li>\n<li><strong>Underline hover color<\/strong> \u2013\u00a0choose the underline color for the inactive tabs on hover. The default underline color is inherited from\u00a0<del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Second site color<\/del>.\u00a0For <strong>Underline<\/strong>,\u00a0<strong>Active tab border <\/strong>and<strong> Active tab background<\/strong><strong>\u00a0<\/strong>styles only.<\/li>\n<li><strong>Active section<\/strong> \u2013 enter the number of the section which should be active on page load. Note: to have all sections closed on initial load enter non-existing number\u00a0of the tours in the module used.<\/li>\n<li><strong>Section width <\/strong>&#8211; select the width of the tour section.\n<ul>\n<li><strong>Medium<\/strong> &#8211; the tour will take\u00a030% of the container width it is inside (row\/column).<\/li>\n<li><strong>Auto<\/strong> &#8211;\u00a0the tour will take\u00a030% of the container width it is inside (row\/column).<\/li>\n<li><strong>Extra large<\/strong> &#8211;\u00a0the tour will take 50% of the container width it is inside (row\/column).<\/li>\n<li><strong>Large<\/strong> &#8211;\u00a0the tour will take 40% of the container width it is inside (row\/column).<\/li>\n<li><strong>Small<\/strong> &#8211;\u00a0the tour will take 20% of the container width it is inside (row\/column).<\/li>\n<li><strong>Extra small<\/strong> &#8211;\u00a0the tour will take 10% of the container width it is inside (row\/column).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Autorotate<\/strong> \u2013\u00a0enable the automatical tabs rotation, choose the periodicity of tours rotation in seconds.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Title style&#8221; tab_id=&#8221;1486545573068-02c117a6-3d50&#8243;][vc_column_text]<\/p>\n<h3>Title style<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2105 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Title-style-2.jpg\" width=\"978\" height=\"215\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Title-style-2.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Title-style-2-300x66.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Title-style-2-768x169.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<p>These settings are inherited directly from theme files and are as follows: font-family: \u201cMontserrat\u201d, \u201cOpen Sans\u201d, \u201cPT Sans\u201d, sans-serif, font-size: 11px, letter-spacing: 0.6pt,\u00a0color: #28262b.<\/p>\n<ul>\n<li><strong>Alignment<\/strong> \u2013 set the tour title alignment. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<li><strong>Font size<\/strong> \u2013 set the font size for the tour title.<\/li>\n<li><b>Title color\u00a0<\/b>\u2013 set the color for the tour title. The default color is #28262b.<\/li>\n<li><strong>Active tour title color<\/strong> &#8211;\u00a0set the color for the active tour title. The default color is #28262b.<\/li>\n<li><strong>Title hover color<\/strong> &#8211; select the color of the tour title on hover. The default color is inherited\u00a0from\u00a0<del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Main\u00a0site color<\/del>.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Icon style&#8221; tab_id=&#8221;1486545573311-423c930f-c6e7&#8243;][vc_column_text]<\/p>\n<h3>Icon style<\/h3>\n<h4>Set the style of the icon used in the tour section. Each icon can be set in <strong>Section settings<\/strong> of the tour.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2108 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icon-style-3.jpg\" width=\"978\" height=\"215\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icon-style-3.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icon-style-3-300x66.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Icon-style-3-768x169.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Icon color<\/strong> &#8211; set\u00a0the icon color. The default color is #28262b.<\/li>\n<li><strong>Icon hover color\u00a0<\/strong>&#8211;\u00a0set the icon color on hover. The default color is inherited from <del class=\"support-arrow-right\">Theme Options<\/del><del class=\"support-arrow-right\">Styling Options<\/del><del>Main\u00a0site color<\/del>.<\/li>\n<li><strong>Active tour icon color\u00a0<\/strong>&#8211; choose the icon color for the active tour. The default color is #28262b.<\/li>\n<li><strong>Icon size\u00a0<\/strong>&#8211; choose the size for the icon\u00a0set for the tour section.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Content style&#8221; tab_id=&#8221;1486564249182-3c62ba93-d2ed&#8221;][vc_column_text]<\/p>\n<h3>Content style<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2109 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Content-style.jpg\" width=\"978\" height=\"500\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Content-style.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Content-style-300x153.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/Content-style-768x393.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Separator line under content<\/strong> &#8211; set it to <strong>Enable<\/strong> to display the separator line below each tour content.<\/li>\n<li><strong>Separator color<\/strong> &#8211; select the color for the separator decoration.The default color is #28262b with opacity 20%.<\/li>\n<li><strong>Pagination<\/strong> &#8211;\u00a0set it to <strong>Enable<\/strong> to display the pagination dots for your tours<\/li>\n<li><strong>Pagination style<\/strong> &#8211; select the best suitable pagination style for your tours section.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Section settings&#8221; tab_id=&#8221;1486564297158-0eb08157-b74f&#8221;][vc_column_text]<\/p>\n<h3>Section settings<\/h3>\n<h4>By clicking on edit icon of each section you can set the icons for it and customize it to your needs.<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2111 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/section-settings.jpg\" width=\"978\" height=\"800\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/section-settings.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/section-settings-300x245.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/section-settings-768x628.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Title<\/strong> \u2013 enter the title of the section.<\/li>\n<li><strong>Section ID<\/strong>\u00a0\u2013 enter section ID. Note: make sure it is unique and valid according to <a href=\"http:\/\/www.w3schools.com\/tags\/att_global_id.asp\" target=\"_blank\">W3c specification<\/a>.<\/li>\n<li><strong>Icon<\/strong> \u2013 set it to <strong>Enable<\/strong> to show the icon in the tour.<\/li>\n<li><strong>Icon position<\/strong> \u2013 select position of the icon in the tour. It can be set <strong>before<\/strong> and <strong>after<\/strong>\u00a0the\u00a0title.<\/li>\n<li><strong>Icon library<\/strong> \u2013\u00a0choose the icon library for the module.<\/li>\n<li><strong>Select icon<\/strong>\u00a0\u2013 select the icon to be displayed in the module.<\/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][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>DFD Tours module is the excellent module for stylish presentation of the information and saving the page space at once.<\/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,22,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11867"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=11867"}],"version-history":[{"count":2,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11867\/revisions"}],"predecessor-version":[{"id":11875,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/11867\/revisions\/11875"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=11867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=11867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=11867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}