{"id":20512,"date":"2014-03-05T11:39:55","date_gmt":"2014-03-05T17:39:55","guid":{"rendered":"http:\/\/theme.co\/x\/member\/?p=20512"},"modified":"2016-12-21T04:55:47","modified_gmt":"2016-12-21T10:55:47","slug":"sliders","status":"publish","type":"post","link":"https:\/\/theme.co\/archive\/kb\/sliders\/","title":{"rendered":"Sliders"},"content":{"rendered":"<p><em>This article was last updated on the <strong>December 21, 2016<\/strong>.<\/em><\/p>\r\n\r\n<p>With X, you can add any slider created with the Revolution Slider either above or below the masthead. This functionality allows you to have different sliders above or below the masthead per page. In this article we&#8217;ll primarily cover setting the slider. If you&#8217;d like to learn more about how Revolution Slider is integrated within X you can read our integration <a href=\"https:\/\/community.theme.co\/kb\/integrated-plugins-revolution-slider\/\" target=\"_blank\" alt=\"Slider Revolution Article\">article<\/a>.<\/p>\r\n\r\n<h2>Getting Started<\/h2>\r\n\r\n<p>First up make sure you have created at least one slider in Revolution Slider which you&#8217;ll set to show on your page. If you haven&#8217;t created a slider yet, you can always download and import a demo slider from <a href=\"https:\/\/revolution.themepunch.com\/free-slider-exchange\/\" target=\"_blank\" alt=\"Revolution Slider Free Sliders\">here<\/a>. Once you&#8217;ve downloaded the slider you can import that via <strong>wp-admin > Slider Revolution > Import Slider<\/strong> and pick the zip file you just downloaded with the demo slider.<\/p>\r\n\r\n<h2>Setting Your Slider<\/h2>\r\n\r\n<p>Now you have a slider set up, let&#8217;s explore the options. Go to <strong>wp-admin > pages<\/strong> click on any page you want to edit and add a slide to. Or create a new page<\/p>\r\n\r\n<p>On your page scroll down to the end and you&#8217;ll see two options called <strong>Slider Settings: Above Masthead<\/strong> and <strong>Slider Settings: Below Masthead<\/strong>.<\/p>\r\n\r\n<p class=\"center-text\"><img decoding=\"async\" src=\"https:\/\/community-archive-assets.theme.co\/app\/uploads\/2016\/06\/13131941\/Slider-settings.png\" alt=\"Slider Settings X\"><\/p>\r\n\r\n<p>Click in the drop down box and select which slide you want to use:<\/p>\r\n\r\n<p class=\"center-text\"><img decoding=\"async\" src=\"https:\/\/community-archive-assets.theme.co\/app\/uploads\/2016\/06\/13132019\/Slider-settings-above-masthead.png#\" alt=\"Slider Settings: Above Masthead select\"><\/p>\r\n\r\n<p>Once you&#8217;ve selected the slide you want to use, you&#8217;ll then see additional slide options like this:<\/p>\r\n\r\n<p class=\"center-text\"><img decoding=\"async\" src=\"https:\/\/community-archive-assets.theme.co\/app\/uploads\/2016\/06\/13132049\/Slide-Options.png\" alt=\"Slide Options\"><\/p>\r\n\r\n<p>You don&#8217;t actually need to set any of these options, as long the slider has been setup you can ignore these additional options. Though of course you can configure them as you wish. For the purpose of this article we&#8217;ll going to leave them un-configured.<\/p>\r\n\r\n<p>Before we save our page it looks like this with no slider<\/p>\r\n\r\n<p class=\"center-text\"><img decoding=\"async\" src=\"https:\/\/community-archive-assets.theme.co\/app\/uploads\/2016\/06\/13132122\/No-Slider.png\" alt=\"No Slider\"><\/p>\r\n\r\n<p>Once you&#8217;ve saved your page, you&#8217;ll see the slider now appearing above the masthead section like this:<\/p>\r\n\r\n<p class=\"center-text\"><img decoding=\"async\" src=\"https:\/\/community-archive-assets.theme.co\/app\/uploads\/2016\/06\/13132159\/Slider-Above-Masthead.png\" alt=\"Slider Above masthead\"><\/p>\r\n\r\n<p>If instead you set the below masthead slider option, your page would look like this:<\/p>\r\n\r\n<p class=\"center-text\"><img decoding=\"async\" src=\"https:\/\/community-archive-assets.theme.co\/app\/uploads\/2016\/06\/13132239\/Slider-Below-Masthead.png\" alt=\"Slider below masthead\"><\/p>\r\n\r\n<p>As you can see with the slider below the masthead section, it shows below both the navigation and breadcrumb sections (if enabled).<\/p>\r\n\r\n<p>Congrats! You&#8217;ve now learned how to add and configure your masthead sliders.<\/p>","protected":false},"excerpt":{"rendered":"This article was last updated on the December 21, 2016. With X, you can add any slider created with the Revolution Slider either above or below the masthead. This functionality allows you to have different sliders above or below the masthead per page. In this article we&#8217;ll primarily cover setting the slider. If you&#8217;d like [&hellip;]","protected":false},"author":122,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[30,11],"tags":[],"class_list":["post-20512","post","type-post","status-publish","format-standard","hentry","category-features","category-kb"],"_links":{"self":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/posts\/20512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/users\/122"}],"replies":[{"embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/comments?post=20512"}],"version-history":[{"count":0,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/posts\/20512\/revisions"}],"wp:attachment":[{"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/media?parent=20512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/categories?post=20512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theme.co\/archive\/wp-json\/wp\/v2\/tags?post=20512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}