{"id":8822,"date":"2020-06-25T15:10:48","date_gmt":"2020-06-25T13:10:48","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=8822"},"modified":"2021-10-06T13:21:03","modified_gmt":"2021-10-06T11:21:03","slug":"slider-revolution-static-layers","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-static-layers\/","title":{"rendered":"How to Make Static Layers in Slider Revolution"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<em>This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our <a href=\"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-tutorial\/\">Comprehensive Slider Revolution Guide<\/a>. <\/em>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]One of the best things about <a href=\"https:\/\/www.sliderrevolution.com\/?utm_source=qodeinteractive.com&amp;utm_medium=content\" target=\"_blank\" rel=\"noopener\">Slider Revolution<\/a> is that it <strong>helps you streamline certain processes that might otherwise take up too much time<\/strong>. One such process is adding static layers &#8211; elements that remain the same throughout all slides.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s say you want to add a button that will appear on each slide in your slider. The images change, even the text may change, but your button stays the same. That button is not added manually to each slide &#8211; instead, it is added as a <strong>static layer using Global Layers<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">What Are Static Layers?<\/h2>\n<p>[\/vc_column_text][vc_column_text]In short, Slider Revolution static layers are <strong>layers that appear on all slides in a slider<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Our <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/aoki-creative-design-agency-theme\/\">Aoki theme<\/a> has a great example of a static layer created using Slider Revolution. The smartphone image was added as a static layer, with no animations. While everything else on the slider changes and slides in and out, the phone stays put throughout the slides, creating an interesting effect.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/What-Are-Static-Layers.gif\" class=\"attachment-full size-full\" alt=\"What Are Static Layers\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">About Global Layers<\/h2>\n<p>[\/vc_column_text][vc_column_text]Global Layers is an option that <strong>allows users to add static content to each of the slides in a single action, without having to repeat it<\/strong>. Let\u2019s say you have a slider with the same text appearing on each slide. Images change, but the text stays the same. Adding the text layer manually to each slide (whether you type it in each time or copy\/paste it) is rather time-consuming, and there is a chance your slides won\u2019t turn out identical, ruining your slider.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But if you use Global Layers instead, you can create a single static layer with this text. Such a layer will then appear on all slides and you won\u2019t have to repeat the process.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s see how this feature works and how you can use it on your sliders. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">How to Add a Static Layer<\/h2>\n<p>[\/vc_column_text][vc_column_text]In your Dashboard, go to Slider Revolution. The feature we\u2019re discussing today is located under <em><strong>Slides &gt; Global Layers<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Global-Layers.jpg\" class=\"attachment-full size-full\" alt=\"Global Layers\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Global-Layers.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Global-Layers-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/1-Global-Layers-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This would be a good time to point out that <strong>the layer you add as a static layer will by default appear in front of other layers<\/strong>. But, depending on your needs, you may want it to come in behind. To change this, navigate to <em><strong>Z position<\/strong><\/em> in <em><strong>Slide Options &gt; Global Layers<\/strong><\/em>. Here, you can send the layer in question to the back.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Slide-Options.jpg\" class=\"attachment-full size-full\" alt=\"Slide Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Slide-Options.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Slide-Options-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/2-Slide-Options-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Note that <strong>your global layer set to \u201cback\u201d is not going to be visible if your other slides have any sort of background<\/strong> (colored, background image\u2026). This option only works with sliders with transparent backgrounds.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here you also have the option of choosing whether you want the <em><strong>Overflow<\/strong><\/em> of your static layer to be <em><strong>Visible<\/strong><\/em> or <em><strong>Hidden<\/strong><\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Overflow-of-your-static-layer.jpg\" class=\"attachment-full size-full\" alt=\"Overflow of your static layer\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Overflow-of-your-static-layer.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Overflow-of-your-static-layer-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/3-Overflow-of-your-static-layer-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Another thing you can decide here is <strong>when you want your static layer to appear<\/strong> (on which slide, to be more precise). It can start from the first slide, or from the second or third, and so on. You can also make it stop (or disappear) on the second, third, fourth slide, etc. That way you can, for instance, have the same layer on two out of three slides.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"380\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-When-you-want-your-static-layer-to-appear.jpg\" class=\"attachment-full size-full\" alt=\"When you want your static layer to appear\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-When-you-want-your-static-layer-to-appear.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-When-you-want-your-static-layer-to-appear-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/06\/4-When-you-want-your-static-layer-to-appear-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Everything else is pretty much the same as for any other layer. You can (and should!) make your static global layer responsive for every single device, and you can even choose to hide it on certain devices. You can link it, animate it, and so on. [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;81px&#8221;][vc_widget_sidebar sidebar_id=&#8221;slider-revolution-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]You can play around with the Slider Revolution static layers to make your sliders more interesting and engaging, or you can keep them strictly functional, with social icons, text, links, etc. It\u2019s completely up to you. What\u2019s important is that you won\u2019t have to waste time copying layers from slide to slide, thanks to the Global Layers feature. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Slider Revolution static layers are layers that remain the same throughout your slider. These can be set up very easily thanks to the Global Layers feature. <\/p>\n","protected":false},"author":6,"featured_media":8830,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,53,4,13],"class_list":["post-8822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-slider-revolution","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=8822"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/8822\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/8830"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=8822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=8822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=8822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}