{"id":3521,"date":"2019-07-20T16:00:22","date_gmt":"2019-07-20T14:00:22","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=3521"},"modified":"2023-05-05T10:41:16","modified_gmt":"2023-05-05T08:41:16","slug":"slider-revolution-5-tutorial","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-5-tutorial\/","title":{"rendered":"Getting Started with Slider Revolution (up to v5.4.)"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]<strong>*Please note that this guide applies to versions of the Slider Revolution plugin prior to v6. For our tutorial for Slider Revolution v6+, check out <a href=\"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-tutorial\/\">this link<\/a>.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you want to create beautiful sliders for your website, you can\u2019t go wrong with <a href=\"https:\/\/www.sliderrevolution.com\/?utm_source=qodeinteractive.com&amp;utm_medium=content\" target=\"_blank\" rel=\"noopener noreferrer\">Slider Revolution<\/a>. A plethora of powerful features have made this plugin the #1 choice for thousands of WordPress professionals. However, if you\u2019ve never used Slider Revolution before, you might be a bit confused by all the options it has to offer.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since Qode Interactive has a large number of <a href=\"https:\/\/qodeinteractive.com\/theme-plugin\/slider-revolution-wordpress-themes\/\">WordPress themes with Slider Revolution<\/a>, we\u2019ve created this comprehensive guide to help you get started. We\u2019ll cover everything from the plugin\u2019s installation and basic setup to adding layers to your slides, creating stunning animations, and more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But before we hit the ground running, we should mention that Slider Revolution isn\u2019t a free WordPress plugin. It can be purchased on CodeCanyon for $109. However, all Qode Interactive themes that come with Slider Revolution include the plugin <strong>completely free<\/strong>. So when you purchase a theme from Qode Interactive that has Slider Revolution included, you also get a copy of this awesome plugin with no extra cost.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We\u2019d also like to mention that there\u2019s a simpler, more customizable and definitely more elegant alternative to the popular Slider Revolution: our own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> plugin. With 100+ flexible, easy-to-use Elementor widgets, this plugin is an all-around solution for basically any page element you can think of, sliders included. And it packs a stunning variety of slider widgets, too many to list here in detail, but let\u2019s just say that with Qi Addons you get to create advanced slider elements like the <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/divided-slider-reveal\/\" target=\"_blank\" rel=\"noopener\">Divided Slider Reveal<\/a>, <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/hover-aware-slider\/\" target=\"_blank\" rel=\"noopener\">Hover-Aware Slider<\/a> or even a <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/vertical-circled-slider\/\" target=\"_blank\" rel=\"noopener\">Vertical Circled Slider<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you prefer Gutenberg for editing your website, you\u2019ll be happy to hear we have some terrific slider blocks as part of our <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg<\/a> collection. There\u2019s a simple yet stunning <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-slider\/\" target=\"_blank\" rel=\"noopener\">Image Slider<\/a> and the engaging <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/before-after-comparison-slider\/\" target=\"_blank\" rel=\"noopener\">Before\/After Comparison slider<\/a>. Then there\u2019s an interesting <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/cards-slider\/\" target=\"_blank\" rel=\"noopener\">Cards Slider<\/a> and <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/device-frame-slider\/\" target=\"_blank\" rel=\"noopener\">Device Frame Slider<\/a>, plus several other modern and strikingly designed slider solutions for your content that will liven up your pages and engage your visitors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These plugins may even be a better solution since they are cheaper than Slider Revolution and pack much more functionalities besides sliders. Still, we\u2019re here today to walk you through the Slider Revolution setup and use, so let\u2019s get back to it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this guide, <strong>we\u2019ll cover the following topics<\/strong>:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][vc_column_text]<\/p>\n<ol>\n<li><a href=\"#installing\">Installing Slider Revolution<\/a><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;3px&#8221;][vc_column_text]<\/p>\n<ol start=\"2\">\n<li><a href=\"#first-steps\">First Steps with Slider Revolution<\/a><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;3px&#8221;][vc_column_text]<\/p>\n<ol start=\"3\">\n<li><a href=\"#creating-and-customizing-your-first-slider\">Creating and Customizing Your First Slider<\/a><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;3px&#8221;][vc_column_text]<\/p>\n<ol start=\"4\">\n<li><a href=\"#displaying-slider-on-a-page\">Displaying Your Slider on A Page<\/a><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;3px&#8221;][vc_column_text]<\/p>\n<ol start=\"5\">\n<li><a href=\"#adding-slides-and-working-with-layers\">Adding Slides and Working With Layers<\/a><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;3px&#8221;][vc_column_text]<\/p>\n<ol start=\"6\">\n<li><a href=\"#making-your-layers-responsive\">Making Sure Your Layers Are Fully Responsive<\/a><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;3px&#8221;][vc_column_text]<\/p>\n<ol start=\"7\">\n<li><a href=\"#animating-your-slides\">Animating Your Layers<\/a><\/li>\n<\/ol>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, we\u2019ll show you how to install Slider Revolution on your WordPress website.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"installing\"><\/a>1. Installing and activating the plugin<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Installing Slider Revolution with Qode Interactive themes<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;14px&#8221;][vc_column_text]<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/oSY2MDPIt3w\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]If you have purchased one of the Qode Interactive themes with Slider Revolution, below are the required steps for installing and activating the free version of Slider Revolution that comes included with your theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Navigate to <em>Plugins<\/em>. At the top of the page you\u2019ll see a notification with all the recommended plugins you should install with the theme. One of these plugins is Slider Revolution.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Click on <em>Begin installing plugins<\/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\/2019\/07\/slider-rev-img-80.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-80.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-80-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-80-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the list of plugins, check the box next to Slider Revolution and click the <em>Install<\/em> button.[\/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\/2019\/07\/slider-rev-img-81.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-81.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-81-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-81-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once the plugin has been installed, you will see a notification that says <em>Plugin installed successfully<\/em>. It\u2019s time to return to the required plugins installer.[\/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\/2019\/07\/slider-rev-img-82.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-82.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-82-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-82-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now select the plugin again, and this time click on <em>Activate<\/em> to activate it.[\/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\/2019\/07\/slider-rev-img-83.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-83.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-83-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-83-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Your free version of the Slider Revolution plugin is now installed and activated. Once you refresh the page, you\u2019ll see it in the sidebar of your admin panel.[\/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\/2019\/07\/slider-rev-img-84.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-84.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-84-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-84-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Installing the paid version of Slider Revolution<\/h3>\n<p>[\/vc_column_text][vc_column_text]The process of installing Slider Revolution is not much different from installing any other plugin. Still, it won\u2019t hurt to go through the specific steps.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-1.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first thing you should do after purchasing the plugin is download its file from CodeCanyon. Then, go to your WordPress Dashboard and navigate to <em>Plugins &#8211; Add New<\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-2.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-2.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Click the <em>Upload Plugin<\/em> button near the top of the screen.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-3.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-3.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-3-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-3-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Find the file you downloaded from CodeCanyon and select it. Then click <em>Install Now<\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-4.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-4.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-4-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-4-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once the installation process is complete, all you need to do is activate the plugin, and you\u2019re good to go! That was easy, wasn\u2019t it? [\/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\"><a id=\"first-steps\"><\/a>2. First Steps with Slider Revolution<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that you\u2019ve installed and activated your Slider Revolution plugin, you\u2019re ready to create stunning sliders. But before you start making your own magic with this wonderful plugin, there are some basic settings you might want to change.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Basic Responsiveness Settings<\/h3>\n<p>[\/vc_column_text][vc_column_text]You probably know the importance of responsiveness by now. The bottom line is that most website traffic these days comes from mobile devices. So, you want to make sure your slider looks equally good regardless of the device it\u2019s viewed on. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To set up the basic responsiveness options for Slider Revolution, navigate to <em>Slider Revolution &gt; Global Settings<\/em> from your WordPress dashboard.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-5.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-5.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-5-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-5-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will find a lot of settings here, but we\u2019ll only focus on the ones related to making your sliders responsive:[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-6.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-6.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-6-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-6-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you already know all about responsiveness, feel free to skip the next section. Just make sure to copy the numbers from the image above into their respective fields. Otherwise, read on to learn what those numbers actually mean.[\/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=\"387\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-7.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-7.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-7-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-7-620x338.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;79px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Devices and Their Sizes<\/h3>\n<p>[\/vc_column_text][vc_column_text]Every single device has its own size, represented in pixels. Standard <em><strong>Desktop<\/strong><\/em> monitors have a width of 1920px. So, we enter that number into the Desktop <em>Grid With<\/em> field to ensure that is the maximum width we are working with.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The next field is for <em><strong>Notebook<\/strong><\/em> devices, which include all laptops, MacBooks, and horizontally oriented tablets. To make sure you have them all covered, you should insert the maximum width you expect laptop users to view your site from. Let us assume that it\u2019s 1600px.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now it\u2019s time to set up the width for <em><strong>Tablets<\/strong><\/em>, or more precisely, for vertically oriented tablets. Here, we are assuming that the maximum width won\u2019t be above 778px (the width of an iPad).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Quick note \u2013 <strong>if you want, you can use one width for both horizontally and vertically oriented tablets<\/strong>. In that case, the number you should enter into the<em> Tablet Grid Width<\/em> field is 1025. Personally, I find that separating widths for these two categories works better. This is because laptops and horizontally oriented tablets have more similar proportions than horizontally and vertically oriented tablets.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Last but not least, you need to set up the width for <em><strong>Mobile<\/strong><\/em> devices. This can be tricky since mobile phones come in all sorts of sizes. Entering a number too large or too small can create all sorts of issues. My advice is<strong> not to go above 500px<\/strong> here (I usually go with 480px, which is the default setting). For example, if you decide to go with 600px, and you have text or images that span the entire width of the screen, someone who has a mobile device with a smaller screen might not see the whole page. You need to make sure that your information is visible for all users, especially those on mobile. According to statistics, in 2018, <strong>52.2% of all website traffic worldwide was generated through mobile phones<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have filled out all the fields, <strong>don\u2019t forget to save your changes<\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-8.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-8.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-8-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-8-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;90px&#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\"><a id=\"creating-and-customizing-your-first-slider\"><\/a>3. Creating and Customizing Your First Slider<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now that we\u2019ve configured the global responsiveness settings, we\u2019re ready to create our first slider. Navigate to the <em>Slider Revolution<\/em> tab, and click on <em>New Slider<\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-9.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-9.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-9-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-9-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Naming Your Slider<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now that you\u2019re at the Slider Settings screen, the first thing you should do is <strong>give your slider a name<\/strong>. We\u2019ll name our first slider \u2018My First Slider Revolution\u2019 \u2013 that\u2019s what you need to enter in the first field. The field next to it is reserved for the \u2018Slider Alias\u2019. The name of the slider should also go here, only in <strong>lowercase<\/strong> and <strong>with dashes<\/strong> between the words instead of spaces. You will later use this Slider Alias to add your slider to a page on your website.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-10.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-10.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-10-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-10-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Choosing the Right Type of Slider<\/h3>\n<p>[\/vc_column_text][vc_column_text]The next thing you need to do is choose the type of slider you want to create. Take a look at the image below.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-11.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-11.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-11-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-11-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<em><strong>Standard Slider<\/strong><\/em> &#8211; you should select this type if you have <strong>more than one slide<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<em><strong>Hero Scene<\/strong> <\/em>&#8211; you should choose this type <strong>when you have only one slide<\/strong>. If you select the Hero Scene, navigation bullets and arrows will automatically be hidden.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<em><strong>Carousel Slider<\/strong><\/em> &#8211; choose this type if you want to display multiple slides at the same time. Slides will be rotated radially and with a 3D effect (using distance and depth of field).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]I usually work with the first and second type of slider. In fact, I can\u2019t even remember if I\u2019ve ever needed the third one.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you have chosen the type of slider you\u2019d like to create, there are a few more settings you can customize to make Slider Revolution easier to work with.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting a Slider Layout<\/h3>\n<p>[\/vc_column_text][vc_column_text]This option lets you <strong>choose a default size<\/strong> for each individual slider. First, you need to decide what you\u2019re going to use your slider for. If you plan on creating a small slider, or if you want to animate some specific part of your page, you\u2019ll probably want to choose the \u201cAuto\u201d option. On the other hand, if you want to create a large slider (usually displayed at the top of the page), you should choose either \u201cFull Width\u201d or \u201cFull Screen\u201d, depending on your specific needs.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-12.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-12.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-12-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-12-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Here\u2019s a breakdown of the three available options:[\/vc_column_text][vc_empty_space height=&#8221;6px&#8221;]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Auto<\/strong> \u2013 the slider will inherit the width of its container. This is the perfect option if you want <strong>to animate some smaller part of a page<\/strong>.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;12px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1300\" height=\"694\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-13.gif\" class=\"attachment-full size-full\" alt=\"\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Full Width<\/strong> \u2013 the slider will always take up the<strong> full width of the screen<\/strong>. The height of the slider will automatically adapt, depending on the screen it is viewed on.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;12px&#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=\"387\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-14.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-14.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-14-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-14-620x338.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item \">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Full Screen<\/strong> \u2013 the slider will always fill the <strong>entire screen<\/strong>, regardless of the size of the screen it is viewed on.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;12px&#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=\"387\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-15.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-15.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-15-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-15-620x338.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, Slider Revolution is not reserved just for the top of the page. On the contrary \u2013 you can use it to animate every single part of your page. Just please be aware of the weight of your page. The more sliders you add, the slower your page will load. So don\u2019t go overboard, <strong>as it can reflect on your SEO ranking<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Fine-tuning the Responsiveness Options<\/h3>\n<p>[\/vc_column_text][vc_column_text]When it comes to responsiveness, we are not quite done yet. To make sure your slider looks perfect on absolutely all devices and screen sizes, there are a few additional options you need to fine-tune before you start adding slides to your first Slider Revolution.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You will notice that the layer grid sizes are set to <em>Auto Sizes<\/em> by default for all devices, except for Desktop computers. I recommend changing all of these options by clicking on the <em>Custom Grid Size<\/em> switch beneath each device.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-16.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-16.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-16-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-16-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, instead of the \u201c<em>Auto Sizes<\/em>\u201d button, you will see grid sizes displayed for each separate device. The grid is the area in which your slider layers (text, buttons, etc.) will be displayed. <strong>The first field shows the width of the grid<\/strong> (which you already defined in your<em> Global Settings<\/em>), and <strong>the second shows the height<\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s assume that you are working with a Full Screen slider. Your slider background is <strong>always going to take up the entire visible space on the screen<\/strong>, no matter what you enter in the fields above. However, <strong>these fields will limit the size of the grid in which your layers will be shown<\/strong>. They ensure you have a margin between the edge of the screen and any elements of your slider which are not the actual background image.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-18.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-18.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-18-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-18-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see in the image below, I\u2019ve set the grid for desktop devices to 1920px x 1100px. Since 1920px is the full width of the desktop, this means that the layers in my slider (images, text, illustrations, etc.) can go from edge to edge if I want them to. If I entered, for example, 1820px for my width, I would have limited my layers to that size.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-17-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]I have to note that <strong>there is no strict definition for what you should enter in these fields<\/strong>. You will find out what works best for you as you use and explore your options. For now, feel free to copy the settings I used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you are all set, <strong>don\u2019t forget to click \u201c<em>Save Settings<\/em>\u201d<\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-19.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-19.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-19-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-19-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Please make sure that you have filled all the required fields. Otherwise, you won\u2019t be able to start editing the slider.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">A Few More Useful Settings<\/h3>\n<p>[\/vc_column_text][vc_column_text]You can now head back to the <em>Slider Settings<\/em> panel of your slider. On the right side of the screen you will see a number of neatly arranged dropdowns containing some more useful options. There are too many settings here to cover them all, so we\u2019ll only go through the most convenient ones.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-20.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-20.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-20-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-20-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <em><strong>General Settings &gt; Defaults<\/strong><\/em>, you will see that the<strong> default slide duration is set to 9000ms<\/strong>. That means that every single slide in your slider will last 9 seconds before switching to the next slide. I personally think that\u2019s too much, and that <strong>the slide duration should not be over 4000ms<\/strong>. Otherwise, your users will most likely only see your first slide. I mean, come on, who\u2019s going to wait 9 seconds for a slide change?[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-21.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-21.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-21-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-21-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <strong>Layout &amp; Visual &gt; Spinner<\/strong>, you can change the default spinner (or you can turn it off completely). The spinner will be displayed while your slider loads.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-22.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-22.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-22-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-22-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <em><strong>Layout &amp; Visual &gt; Mobile<\/strong><\/em>, you can prevent your slider from displaying on mobile devices. You can also disable the KenBurn effect from displaying on mobile devices, (and thus greatly improve the performance of your page).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you plan on having more than one slide, you can set your navigation options in the <em><strong>Navigation<\/strong><\/em> dropdown. Here, you can customize settings for arrows, bullets (mostly used for mobile devices), etc.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-23.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-23.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-23-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-23-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <em><strong>Parallax\/3D<\/strong><\/em> dropdown, you can turn on parallax and\/or 3D effects for your background images and individual layers. You can also set the mouse sensibility for Parallax, as well as its various levels of depths.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-24.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-24.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-24-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-24-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em><strong>Scroll Effects<\/strong><\/em> dropdown contains a number of interesting effects that you can apply to your slider when your user starts scrolling down the page. I suggest you play around with these and try them all out.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-25.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-25.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-25-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-25-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/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\"><a id=\"displaying-slider-on-a-page\"><\/a>4. Displaying Your Slider on a Page<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now it\u2019s time to decide where you want to display your slider. To add a slider to a page, you first need to <strong>copy the slider shortcode<\/strong> from the <em>Slider Settings<\/em> panel. In our case, the shortcode is <strong>[rev_slider alias=&#8221;my-first-slider-revolution&#8221;]<\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-26.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-26.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-26-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-26-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, head on over to the backend of your page and paste the shortcode wherever you would like to display the slider. Update the page afterwards, so you can immediately see a live preview of your slider. Once you\u2019ve added the shortcode to a page, every change you make to your slider <strong>will be visible on that page<\/strong>. Just don\u2019t forget to hit the <em>Save Slide<\/em> button every time you make a change![\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]My slider is still blank, since I\u2019ve not added any slides to it yet.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-27.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-27.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-27-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-27-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/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\"><a id=\"adding-slides-and-working-with-layers\"><\/a>5. Adding Slides and Working with Layers<\/h2>\n<p>[\/vc_column_text][vc_column_text]Once you\u2019ve defined and saved all your slider settings, it\u2019s time to start creating your individual slides. Let\u2019s head over to the <em>Slide Editor<\/em> panel.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-28.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-28.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-28-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-28-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You\u2019ll see a <strong>lot of options<\/strong> here, but don\u2019t let that scare you off! I\u2019ll go through <strong>the most useful ones<\/strong>, so stick around![\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you scroll down your page a bit, you\u2019ll see the slide frame. Your slide and all its contents will be displayed within it. Currently the frame is empty.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-29.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-29.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-29-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-29-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding a Background Image<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you don\u2019t want your background to stay transparent, you can easily add a background image. In the options panel above the frame there are many different tabs. One of them is titled <em><strong>Main Background<\/strong><\/em>, and it is selected by default. The <em>Transparent<\/em> option is also chosen by default.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-30.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-30.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-30-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-30-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add a background image, all you need to do is select <em>Main \/ Background Image<\/em> and then click the <em>Media Library<\/em> button. Now you can either upload a new image or choose one from your Media Library. Just make sure to choose an image that corresponds to the size of your slider. I\u2019ve created a <strong>Fullscreen Slider<\/strong>, so <strong>the size of my image will be (at least) 1920&#215;1100 pixels<\/strong> in order to fill the entire space of a desktop screen.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-31.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-31.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-31-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-31-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you choose an image, it will appear below, within your work frame.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-32.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-32.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-32-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-32-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now hit the <em>Save Slide<\/em> button and head back to the page you added your slider to. You\u2019ll see that the image is now displayed in the position you set for the slider.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Don\u2019t forget to press the<em> Save Slide<\/em> button each time you make a change to your slide! Just to be absolutely clear which button we\u2019re talking about, take a look at the picture below.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-33.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-33.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-33-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-33-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-34.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-34.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-34-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-34-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Setting a Background Color<\/h3>\n<p>[\/vc_column_text][vc_column_text]If your slider design requires a <strong>color for the background instead of an image<\/strong>, you can set that up pretty easily. Just select the Colored option from the <em>Main Background Menu<\/em> tab, and then click the <em>Color<\/em> button to choose your color. You can choose the color using the color picker tool, or you can simply input the hex value into the<em> Color Hex Value<\/em> field. You can also play around with the opacity if you like. Setting <em>Opacity<\/em> to 100% will give you a fully saturated color, while lower values will result in a semi-transparent background. Once you\u2019re done, just <strong>hit the green check mark<\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-35.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-35.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-35-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-35-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Other Useful Options<\/h3>\n<p>[\/vc_column_text][vc_column_text]There\u2019s truly a plethora of options for customizing the background of your slides. You can add YouTube Video slides, Vimeo Video slides, etc. Adding a video to Slider Revolution requires a whole separate article, so I\u2019ll skip it for now. But I\u2019ll be back with more on that in the near future.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <em>Main Background<\/em> tab, under <em><strong>Source Settings<\/strong><\/em>, you can find some useful information about your background image (its URL, its size, its alt text &amp; title, its position, etc.). Under <em><strong>Filters<\/strong><\/em>, you can add a filter to your background image if you like.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-36.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-36.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-36-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-36-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under <strong>Parallax\/3D<\/strong> you can customize the <a href=\"https:\/\/qodeinteractive.com\/magazine\/slider-revolution-parallax\/\">parallax effect<\/a> for each slide. Just <strong>make sure Parallax is enabled in your <em>Slider Settings<\/em><\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-37.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-37.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-37-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-37-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you\u2019d like your background image to <strong>zoom in or out<\/strong>, the experts from Slider Revolution have made the <em><strong>Ken Burns<\/strong><\/em> effect, which you can turn on and customize in the dedicated Ken Burns panel.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-38.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-38.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-38-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-38-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Besides the <em>Main Background<\/em> tab, you will also find a number of other tabs for customizing your slides. In the <em><strong>General Settings<\/strong><\/em> tab you have a variety of options regarding your slide behavior and visibility. They all come with a handy explanation, so it is pretty clear what each of them is for. Just be aware that if you insert a value in the <em>Slide \u201cDelay\u201d<\/em> field, <strong>there is going to be a delay before the slide\u2019s background image appears<\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-39.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-39.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-39-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-39-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em><strong>Thumbnail<\/strong><\/em> tab lets you set up a preview thumbnails for each slide. These thumbnails will be displayed next to the navigation arrows and will show users what the previous and next slides look like.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>You can change the way your slide enters the screen<\/strong> under the <em><strong>Slide Animation<\/strong><\/em> tab. The default animation is <em>Fade<\/em>. If you leave the default Fade option, your slider background will simply fade in. Here, you will also find a field for configuring the animation duration, which is set to 300ms by default.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-40.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-40.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-40-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-40-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding Layers to Your Slides<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now that we\u2019ve gone through the basic slide options, we\u2019re ready to start adding layers to our slide. Scroll down to the work frame and hover the <em>Add Layer<\/em> button with your mouse cursor. You\u2019ll see a dropdown with different layer options.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-41.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-41.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-41-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-41-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now let\u2019s <strong>add a new image layer<\/strong>. You may wonder why we\u2019d add an image and not text, to begin with. Truth be told, it\u2019s actually a lot easier to work with image layers than with text layers. But don\u2019t worry, I\u2019ll tackle text layers in a separate section below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, when you want to add an image layer to your slide, simply click on <em>Image<\/em> in the <em>Add Layer<\/em> dropdown. Then proceed to upload the desired image. I\u2019ve uploaded a random free <strong>vector image<\/strong> of a circle as a <strong>.png<\/strong> file with a transparent background.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-42.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-42.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-42-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-42-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now you can save your slider and check if the image is displayed on the page you added the slider to. I\u2019ve just checked my page, and yes, there\u2019s definitely a circle there now.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Layer Settings<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now, we\u2019ll go through some of the options we have for each layer we add. Above your frame, <strong>you\u2019ll find a number of different tabs<\/strong> (Style, Animation, Loop, etc.). I\u2019ll just cover the basics of these tabs for now, but you can expect separate articles in the future in which I\u2019ll go through them in detail.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Style Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]When it comes to <strong>image layers<\/strong>, there aren\u2019t all that many settings we can edit in the <em>Style<\/em> tab. You can choose <strong>how you want your layer to be aligned<\/strong>, both vertically and horizontally. For example, if you need to place your layer on the left side of the screen and in the vertical center, you should choose <em>Layer Align Left<\/em> for the horizontal axis and <em>Layer Align Middle<\/em> for the vertical axis.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-43.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-43.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-43-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-43-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you\u2019ve chosen the alignment, you can set the position of your layer <strong>more precisely<\/strong> using the<strong> Horizontal and the Vertical Offset from Aligned Position<\/strong> options. With the previously chosen horizontal alignment, your layer is stuck on the left side. This basically means that its horizontal offset (X) is currently 0. The same goes for the vertical offset (Y), which means that the layer is exactly in the middle of your screen. If you enter 50 for the X offset, your layer will move to the right by 50px. And if you enter -50 (yes, that is an option, too), your image will move by 50px to the left, and it will go outside the screen boundaries. I entered 200 for the horizontal offset, and 200 for the vertical offset. Let\u2019s save this slide now and check how it looks on the page.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-44.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-44.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-44-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-44-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The layer moved by 200px from its starting point, both vertically and horizontally. By now you can probably guess that if you enter a positive value for the vertical offset, your layer will move down and if you add a negative offset, the layer will go up. Now this isn\u2019t always going to be the case; it actually depends on the<em> Layer Align<\/em> setting you\u2019ve previously defined. You can play around with the alignment and offset options to get a better feel for how they work.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Animation Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <em>Animation<\/em> tab is where you get to <strong>animate your layers<\/strong> and set up your <strong>appear<\/strong> and <strong>exit<\/strong> animations. I always use appear animations, because I think they\u2019re a great way to make the right first <strong>impression<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <em>Animations<\/em> tab, you will find two rows. The first is for appear animations and the second is for exit animations. Each row has a dropdown menu with different types of animations. The default appear animation is <em>Fade-In<\/em> for all layers. I suggest you go and try some of the other animation effects to find one that suits you best.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-45.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-45.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-45-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-45-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The two dropdowns next to these are used for <em>Animation Easing<\/em>.<strong> Easing defines the speed at which the animation will progress<\/strong> (which is not the same as animation duration, which defines how long the animation will last overall), and different easing settings can result in different animation effects. Easing makes sure the animation has a natural, real-life feel to it. The upper dropdown is where you can set the <strong>easing<\/strong> for appear animations, and the one below is, logically, for exit animations. Go ahead and play around with these settings to get a better feel for them![\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-46.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-46.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-46-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-46-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, there are a lot more settings in this tab, but we\u2019ll skip those for now, as they require a more advanced understanding of the principles of animation. [\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Loop Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]The Loop tab, as its name suggests, lets you create looping animations. The settings here are pretty straightforward. You can choose an animation type, define the loop speed and easing, and set a start and end time for the loop. To be honest, I don\u2019t use loop animations much, but you can play around with them to see if you find them useful.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Visibility Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you want your layer <strong>to be visible on all devices<\/strong>, then make sure the switches shown in the image below are all turned <strong>ON<\/strong>. The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones. If, for some reason, you want to hide your layer on any device simply turn off the appropriate switch.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-47.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-47.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-47-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-47-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Behavior Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]Let\u2019s take a look at the Behavior tab now. If you select the <em>Auto Responsive<\/em> option, your layer will become proportionally smaller on all devices with screens smaller than the defined desktop screen size. According to my experience, <strong>it\u2019s always better to turn this option off<\/strong>, so you can <strong>manually define the size<\/strong> for every single device. That way it\u2019s easier to manipulate not just the sizes of your layers, but also their position. The same goes for the <em>Child Elements Responsive<\/em> option, which applies automatic responsiveness to any additional content in the layer (raw HTML, other shortcodes, etc.).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Align<\/em> option lets you override the grid size you previously defined. It\u2019s useful if you\u2019d like to position a layer outside of the grid and let it align to the edges of the slide. If you choose <em>Grid Based<\/em> from the <em>Align<\/em> dropdown,<strong> your layer will be limited to the grid size you set in your slider settings<\/strong>. However, I suggest you go with the <em>Slide Based<\/em> option here, because <strong>it\u2019ll literally give you more space to work with<\/strong>.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-48.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-48.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-48-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-48-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Action Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]This tab lets you<strong> make your layers interactive<\/strong>. For example, you can make a layer open a link when a user clicks on it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Click on the plus icon to choose the type of action you need.[\/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=\"379\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-49.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-49.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-49-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-49-620x331.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first dropdown is where you choose the <strong>user interaction that will trigger your selected action<\/strong>. The most commonly used interaction is <em>Click<\/em>, but you can also select <em>Mouse Enter<\/em> or <em>Mouse Leave<\/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\/2019\/07\/slider-rev-img-50.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-50.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-50-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-50-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The dropdown next to it is where you can choose the <strong>type of action that you would like to occur<\/strong>. There are a lot of options here. I\u2019m going to choose the <em>Simple link<\/em> option, which is located under <em>Link Actions<\/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\/2019\/07\/slider-rev-img-51.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-51.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-51-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-51-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now I can enter the <em>URL<\/em> I would like my layer to link to, choose whether I want my link to <em>open in the same browser tab or in a new tab<\/em>, choose between a<em> jQuery<\/em> or a <em>Tag Link<\/em>, and select whether I want search engines to follow the link or not. I also have the option of setting a <em>Delay<\/em> time between the moment the user clicks on my layer and the moment the link is opened.[\/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\/2019\/07\/slider-rev-img-52.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-52.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-52-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-52-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are also a lot of other action types to choose from here. However, I mainly use this tab to add links to my layers. I suggest you try out a few of the available actions and see what you find useful.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Attributes Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <em>Attributes<\/em> tab lets you add custom <a href=\"https:\/\/www.w3schools.com\/html\/html_id.asp\" target=\"_blank\" rel=\"noopener noreferrer\">IDs<\/a> and <a href=\"https:\/\/www.w3schools.com\/html\/html_classes.asp\" target=\"_blank\" rel=\"noopener noreferrer\">classes<\/a> to your layers. This then enables you to manipulate your layers via custom CSS. You can also use certain options in the <em>Attributes<\/em> tab (<em>Rel<\/em>, <em>Title<\/em>, <em>Tabindex<\/em>, and <em>Alt<\/em>) to enhance the <a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\/\" target=\"_blank\" rel=\"noopener noreferrer\">accessibility<\/a> of your slider and its layers.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since working in the <em>Attributes<\/em> tab requires some basic HTML and CSS knowledge, we\u2019ll skip it for now.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Layer Parallax \/ 3D Tab<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <em>Parallax \/ 3D<\/em> tab is deactivated by default. If you want to use this effect on your layer, you first need to active it in your <em>Slider Settings<\/em> (remember to save your slide before switching back to the <em>Slider Settings<\/em> tab).[\/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\/2019\/07\/slider-rev-img-53.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-53.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-53-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-53-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]With this option enabled, you can now define a <em>Parallax Depth<\/em> for each layer in your slider.[\/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\/2019\/07\/slider-rev-img-54.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-54.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-54-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-54-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Working With Text Layers in Slider Revolution<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now that you know how to add image layers to your slides, let\u2019s take a look at the available options for text layers. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before creating your first text layer, you should make a few decisions. For starters, you need to decide on one of the most important factors \u2013 the <strong>font<\/strong> you will be using. In combination with the right visual, a well-chosen font can do wonders for your online presentation. So, give yourself enough time to find a font family that will perfectly fit your needs and the style of your website. Then, you need to decide on a font size for desktop devices. Also, think about the text color. I suggest you keep it simple. Vibrant colors are great, but only when combined with similar elements. So unless you\u2019re sure of what you\u2019re doing, don\u2019t take too many risks regarding color.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you\u2019ve chosen a font and determined its basic style, you are ready to add your first text layer.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, go to<em> Add Layer<\/em>, and click on <em>Text\/Html<\/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\/2019\/07\/slider-rev-img-55.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-55.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-55-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-55-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]A black box will appear. This is where you should enter your text. Everything you type will also be visible in your work frame.[\/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\/2019\/07\/slider-rev-img-56.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-56.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-56-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-56-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Before you change your text layer\u2019s default settings, hop over to the <em>Behavior<\/em> tab to turn off <em>Auto Responsive<\/em> and set your alignment to <em>Slide Based<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now take a look at the Style tab. You can see that <strong>Open Sans is the default font family<\/strong> for every text layer you add. You can <strong>choose your preferred font<\/strong> from the dropdown. Just a quick reminder \u2013 in order to edit the text layer, you first need to make sure it\u2019s selected.[\/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\/2019\/07\/slider-rev-img-57.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-57.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-57-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-57-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Besides choosing a font family, you can also determine the<em> font-size<\/em>, <em>line-height<\/em>, <em>font weight<\/em>, and <em>letter spacing<\/em> in the<em> Style<\/em> tab. Each of these options will alter the look of your text. So don\u2019t hesitate to play around and find the combination that works best for you.[\/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\/2019\/07\/slider-rev-img-58.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-58.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-58-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-58-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now it\u2019s time to change the color of your text. Click on the <em>Color<\/em> filed to open the color picker tool. It\u2019s up to you to choose the color that fits your visual perfectly.[\/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\/2019\/07\/slider-rev-img-59.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-59.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-59-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-59-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you have determined these basic values, save your slide and see how it looks on your page.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<p>The next thing you should define is the horizontal and vertical alignment of your text layer. A <strong>page ruler extension<\/strong> for your browser can help with setting the offset values for your text. If you don\u2019t already have a ruler extension, you can find a great one for Google Chrome <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/page-ruler\/emliamioobfffbgcfdchabfibonehkme?hl=en\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let assume that your text should start 200px from the left edge of the screen, and 200px from the upper edge. In that case, your horizontal alignment should be set to left, and your vertical alignment to top. The <strong>X<\/strong> and <strong>Y<\/strong> offsets should both be 200px.[\/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\/2019\/07\/slider-rev-img-60.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-60.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-60-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-60-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When you fill in these fields, save your slide and go check it out on your page. You can use your ruler extension to make sure the offsets are precisely set. Sometimes, the 200px you set in the backend is not going to display as 200px on your page. That\u2019s why it\u2019s smart to measure it with a ruler extension.[\/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\/2019\/07\/slider-rev-img-61.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-61.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-61-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-61-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now you can start customizing your text layer using all the same options we went through when talking about image layers. You can add animations, define the visibility, create actions, etc.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It\u2019s interesting to note that <strong>you can also input HTML code into your text layer field<\/strong>. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.[\/vc_column_text][vc_empty_space height=&#8221;81px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;bridge-banner&#8221;][vc_empty_space height=&#8221;48px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;84px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"making-your-layers-responsive\"><\/a>6. Making Sure Your Layers Are Fully Responsive<\/h2>\n<p>[\/vc_column_text][vc_column_text]One of the first things we did when setting up the Slider Revolution plugin was define the global responsiveness options. Then, we enabled custom responsiveness for our slider. However, these options merely make it possible to create a responsive slider. They don\u2019t guarantee full responsiveness. For that, you also need to <strong>make sure that each layer in each of your slides seamlessly adapts to all devices and screen sizes<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]So, once you add all your slides and layers to your slider and confirm <strong>they all look nice on Desktop devices<\/strong>, it\u2019s time to fine-tune them for all <strong>the other available devices<\/strong>. Luckily, not all your layers will need editing for all devices. Some of them will look good by default. But we\u2019ll now cover what you can do for those that need to be tweaked.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Desktop Devices<\/h3>\n<p>[\/vc_column_text][vc_column_text]When editing slides in the work frame, you\u2019re primarily setting them up to look good on desktop devices. When you\u2019re certain everything looks perfect on desktop, you can start playing around with layouts for other devices.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To show you how you can make your layers adapt to various devices, I have added all my layers to my slide. Let\u2019s say I want them to look like this on desktop:[\/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\/2019\/07\/slider-rev-img-62.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-62.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-62-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-62-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Notebooks<\/h3>\n<p>[\/vc_column_text][vc_column_text]There are two ways to check what your slider looks like on other devices. The first (and better) way is to view your website from an actual device. However, if you don\u2019t have access to at least one device of each type, you can also use the <strong>Device Mode option in Google Chrome DevTools<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To activate the device mode, simply <strong>press F12 while in Google Chrome<\/strong> and then click on the icon shown below:[\/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\/2019\/07\/slider-rev-img-85.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-85.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-85-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-85-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now you can choose the device you would like to emulate from the dropdown. If you can\u2019t find a certain device, you can click the <em>edit<\/em> button and then select the check mark beside the devices you would like displayed in the dropdown.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]I already have some custom devices set up, so let&#8217;s see what my slider looks like on those devices.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s how my layers will be rendered on a Mac:[\/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\/2019\/07\/slider-rev-img-63.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-63.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-63-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-63-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And here\u2019s what they look like on a horizontal tablet:[\/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\/2019\/07\/slider-rev-img-64.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-64.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-64-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-64-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]I think that the layers look a bit big for these smaller screens. Whether you agree with me or not depends entirely on your personal preferences. If you want your layers to be displayed in a bigger format on smaller devices, that\u2019s perfectly fine. But, if you want to change how they render from device to device, you can do so easily.<strong> It\u2019s pretty much the same as changing settings for the Desktop<\/strong>. You can <strong>modify everything for every single device<\/strong>. For example, for text layers you can set a different font size, line-height, font-weight, and color, all depending on the device your slider is viewed on.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To start editing the responsiveness settings for laptops, notebooks, and horizontal tablets, you need to select the icon shown below:[\/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\/2019\/07\/slider-rev-img-65.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-65.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-65-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-65-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As long as this icon is selected, you are in the editor for notebook devices. Any settings you modify will only be displayed when your slider is viewed on notebooks.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To change the size of the image layer, you can simply add a different width. The height of the image <strong>will automatically be adjusted to fit the width you set<\/strong>.[\/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\/2019\/07\/slider-rev-img-66.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-66.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-66-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-66-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now save your slider, and check out how it looks live. If anything looks out of place, just go back to the work frame, make sure the notebook view is selected, and customize the settings to perfection.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Vertical Tablets and Mobile Devices<\/h3>\n<p>[\/vc_column_text][vc_column_text]Now that you know how the layer responsiveness settings work, you can easily tweak the settings for all devices. To start editing your slide layout for vertical tablets and mobile devices, just<strong> make sure the appropriate icon is selected<\/strong> above the work frame.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Note the blue grid borders. These define the edges of the device you are currently working with. So, if any of your layers extend outside of the borders, make sure to change the settings for those layer until they are safely within the borders.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In my case, I just adjusted the size of the image layer until it was visible on mobile:[\/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\/2019\/07\/slider-rev-img-67.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-67.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-67-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-67-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once all your layers are adapted to all devices, I assume you don\u2019t want them to just to stand there, motionless. Read on to learn about creating your first animations with Slider Revolution![\/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\"><a id=\"animating-your-slides\"><\/a>7. Animating Your Layers<\/h2>\n<p>[\/vc_column_text][vc_column_text]We\u2019ve finally come to the most powerful functionality of Slider Revolution &#8211; <strong>animating our layers<\/strong>. This is where your get to show off your creativity to the fullest.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">The Animation Timeline<\/h3>\n<p>[\/vc_column_text][vc_column_text]We can probably agree that it\u2019s not ideal for all layers to appear onscreen at the same time. We want to add a bit of variety to our slides. Luckily, Slider Revolution provides a great animation tool called the <em>Animation Timeline<\/em>. It can be found right below our work frame.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ll see that the default frame start value for each layer is set to 10 milliseconds. This means that <strong>each layer will appear onscreen 10 milliseconds after your page loads<\/strong>. The default appearing <strong>duration is 300ms<\/strong>, which means that it will take the layer 300ms (or 3 seconds) to go from invisible to fully visible. To <strong>change these default options<\/strong>, choose the layer you want to edit and simply click the edit button below the number 300.[\/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\/2019\/07\/slider-rev-img-68.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-68.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-68-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-68-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now, you want to make sure that it doesn\u2019t take too long for your first layers to appear. My recommendation is<strong> not to go above 300ms for the frame start value<\/strong>. Also, if you don\u2019t want all your layers to appear at once, make sure to set a different <em><strong>frame start<\/strong><\/em> values for each of them. For example, if you set the first layer to appear at 300ms, you might want to set the next one to 500ms, the third one to 700ms etc. When it comes to duration, it\u2019s up to you, but I usually work with values <strong>between 500 and 800 milliseconds<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Incoming Animations<\/h3>\n<p>[\/vc_column_text][vc_column_text]Once you have set the frame start and duration values for all your layers, it\u2019s time to choose the<strong> type of incoming animation<\/strong> for your layer. To do this, we need to go back to the Animation tab above our work frame. As I previously mentioned, the default animation is <em>Fade-in<\/em>. But for the purposes of this tutorial, let\u2019s assume you want your image to enter from the left to the right side of the screen. In that case, the animation you want to choose is <em>Short-From-Left<\/em>. You can also use <em>Long-From-Left<\/em>, but I\u2019m afraid it is too long by default and doesn&#8217;t look so nice unless you edit it with custom settings. So let\u2019s go with <em>Short-From-Left<\/em> for now.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now that you\u2019ve chosen your preferred animation type, you can change its easing from the <em>Animation Easing<\/em> dropdown:[\/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\/2019\/07\/slider-rev-img-69.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-69.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-69-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-69-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Different easing presets will create different effects, so I suggest you try out a few and see what best fits your needs.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Outgoing Animations<\/h3>\n<p>[\/vc_column_text][vc_column_text]Adding incoming animations is almost a no-brainer, since they help create a great first impression. But, what about outgoing animations? Well, I suggest you approach these with caution, since they <strong>make your layers completely disappear from your slide<\/strong>. Choosing outgoing animations all depends on the purpose of your slide and the last impression you want it to make on your viewer before it leaves the viewport.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The options available for outgoing animations are fairly similar to those for appearing animations. However, to edit the<em> Frame Start<\/em> and <em>Duration<\/em> values for each layer, you now have to click on the edit button toward the end of the animation timeline.[\/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\/2019\/07\/slider-rev-img-70.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-70.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-70-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-70-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Right now the <em>Frame Start<\/em> is set to 9000ms. This is because the <strong>duration of your slide<\/strong> is 9000ms by default. With the <em>Frame Start<\/em> set to 9000ms, <strong>your layer will be visible on screen until the slide changes<\/strong>. To make it disappear before the end of the slide, simply enter a lower value into the<em> Frame Start<\/em> field.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Now you can choose the type of outgoing animation you would like to use, as well as its easing. This is done in the <em>Animation<\/em> panel, and all the options are pretty much the same as for incoming animations.[\/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\/2019\/07\/slider-rev-img-71.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-71.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-71-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-71-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Custom Animations<\/h3>\n<p>[\/vc_column_text][vc_column_text]If you want to customize the default animation presets, you can click on the \u2018+\u2019 icon next to the <em>Animation Template<\/em> field. This will show you the default settings for your selected animation. So, for example, if you think the starting point for the<em> Short-From-Left<\/em> animation is too short (-50px by default), you can easily change it. The -50px value means that the animation starts 50px to the left of the horizontal offset we previously set for our layer. Let\u2019s say we want it to start 30px further to the left: all we need to do is input -80px into the X axis field.[\/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\/2019\/07\/slider-rev-img-72.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-72.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-72-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-72-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you are wondering what the \u201cY\u201d field is for when our animation has nothing to do with the y-axis, here is the explanation: If, for some reason, you want the animation to appear from the left and <strong>diagonally<\/strong>, you just need to insert a value in the Y axis field. If you insert a positive value, your layer will move diagonally <strong>up and to the right<\/strong>. On the other hand, if you decide to enter a <strong>negative<\/strong> value, the layer will move from <strong>down and to the right<\/strong> of the screen.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You\u2019ll notice that as soon as you edit one of these fields, the name of your chosen animation will change to <em>Custom Animation<\/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\/2019\/07\/slider-rev-img-73.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-73.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-73-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-73-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Now take a look at the fields on the right side.[\/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\/2019\/07\/slider-rev-img-74.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-74.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-74-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-74-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]These are useful <strong>only for text layers<\/strong>. You can use the first one if you want to split the animation applied to your text by letter, word, or line. In other words, instead of the entire text being animated at once, you can choose to animate it character by character, word by word, or line by line.[\/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\/2019\/07\/slider-rev-img-75.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-75.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-75-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-75-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The best way to see how this option works is to try it out. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The field next to it lets you choose <strong>the direction of the split animation<\/strong>. For example, if you want it to split <em>Char Based<\/em>, and you choose the <em>Backward<\/em> option from the <em>Split Animation Text Direction<\/em> dropdown, your text will appear <strong>letter by letter<\/strong>, and <strong>from the right side of the screen to the left<\/strong> (backward).[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The third field is for setting an <em><strong>Animation Delay Between Splitted Elements<\/strong><\/em>. The default value is 10ms, but you can try out other values to see what works best.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Loop animations<\/h3>\n<p>[\/vc_column_text][vc_column_text]Slider Revolution also lets you create Loop animations. This is done in the <em>Loop<\/em> tab. Here, you will see that loop animations are disabled by default.[\/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\/2019\/07\/slider-rev-img-76.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-76.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-76-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-76-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can choose from five types of loop animations: <em>Pendulum<\/em>, <em>Rotate<\/em>, <em>Slideloop<\/em>, <em>Pulse<\/em>, and <em>Wave<\/em>. Besides the <em>Loop Speed<\/em> and <em>Easing<\/em> settings, each loop animation has its own set of options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em>Pendulum<\/em> animation makes your layer swing from side to side. You can set a start and end degree, as well as an X and Y origin point. The start and end degree determine the degrees between which the animation will occur. For the Pendulum animation, you should set a negative value (e.g. -20) for the start degree and a positive value (e.g. 20) for the end degree. The X and Y origin points determine the axis point from which the layer will rotate and are expressed in percentages. If you want the axis point to be in the center of the layer, you should set both the X and Y axis to 50%.[\/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\/2019\/07\/slider-rev-img-77.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-77.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-77-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-77-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As its name suggests, the <strong><em>Rotate<\/em> loop<\/strong> makes your layer rotate around the set axis point. However, <strong>your layer will not rotate by default<\/strong>. If you want it to fully rotate by 360 degrees, you need to enter <strong>0 for the <em>Start<\/em> position degree<\/strong>, and <strong>360 for the <em>End<\/em> position degree<\/strong>. But now that it\u2019s rotating, you will probably notice that there is a pause once it turns the full 360 degrees. <strong>If you want it to rotate without any kind of pause<\/strong>, you should choose <strong>the <em>Linear.easeNone<\/em><\/strong> option in the <em>Easing<\/em> dropdown.[\/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\/2019\/07\/slider-rev-img-78.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-78.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-78-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-78-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]If you want your layer to move left to right, right to left, up to down, diagonally, etc. you can use the <em><strong>Slideloop<\/strong><\/em> animation. Here, you can determine a start and end position for the animation in the <em>Start X Offset<\/em>, <em>Start Y Offset<\/em>, <em>End X Offset<\/em>, and <em>End Y Offset<\/em> fields. If you want the animation to start from is the layer\u2019s initial position, you should leave 0 in both the Start Offset fields. To make your layer move from its starting position, let&#8217;s say, 100px horizontally, you need to enter 100 in the <em>End X Offset<\/em> field. Its best to play around with the start and end offset settings, to get a feel for how they work.[\/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\/2019\/07\/slider-rev-img-79.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-79.jpg 710w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-79-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2019\/07\/slider-rev-img-79-620x332.jpg 620w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <em><strong>Pulse<\/strong><\/em> animation makes your layer continuously <strong>zoom in and out<\/strong>. You can determine the <em>Zoom Start<\/em> and <em>Zoom End<\/em>. The default values here are<strong> 1 for both start and end<\/strong>. This means that the layer will remain at <strong>100% of its size<\/strong>. In other words, it won\u2019t animate. If you enter 0.5 for the <em>Zoom Start<\/em>, your layer will start at 50% of its size and zoom in to 100% of its size, then back to 50%, etc. If you want your layer to zoom in above 100% of its size, just enter a value larger than 1 in the <em>Zoom End<\/em> field.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <em><strong>Wave<\/strong><\/em> animation makes your layer rotate in a wave like motion. In other words, it doesn\u2019t rotate around its own axis, but instead around an axis outside the actual layer. You can set a <em>Rotation X<\/em> and <em>Y Point<\/em> which determines the position of the axis around which the layer will rotate, a <em>Start Angle<\/em> which determines the starting position of the circular animation, and a <em>Radius<\/em>, which determines the orbit of the rotation.[\/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\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Well, that\u2019s all for this tutorial. I hope you found it useful. There\u2019s much more to Slider Revolution, and I\u2019ll be back with more advanced tutorials in the future. But you should now at least be able to find your way around the basic settings and start creating spectacular sliders for your website. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you have any thoughts or suggestions about this article, feel free to let me know in the comment section. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Slider Revolution is one of those plugins that\u2019s so powerful it can quickly get confusing. But with the help of our comprehensive guide, you\u2019ll be able to jump right in and start creating impressive sliders in no time.<\/p>\n","protected":false},"author":6,"featured_media":1207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,13],"class_list":["post-3521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/3521","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=3521"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/3521\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/1207"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=3521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=3521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=3521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}