{"id":8585,"date":"2020-10-22T10:48:40","date_gmt":"2020-10-22T05:48:40","guid":{"rendered":"https:\/\/portal.stylemixstage.com\/wp\/?p=8585"},"modified":"2022-06-16T14:01:11","modified_gmt":"2022-06-16T09:01:11","slug":"slider-revolution-plugin-one-the-ultimate-guide","status":"publish","type":"post","link":"https:\/\/portal.stylemixstage.com\/wp\/slider-revolution-plugin-one-the-ultimate-guide\/","title":{"rendered":"Slider Revolution: The Ultimate Guide"},"content":{"rendered":"<p><span style=\"font-weight: 400\">Slider Revolution is literally one of the most popular WordPress plugins today. With over 400 thousand sales and an average rating of 4.75 the plugin has proven its effectiveness and greatness.&nbsp;<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Revolution Slider: What makes the plugin so great<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Slider Revolution was developed by Themepunch. This plugin is a builder for creating rich, dynamic content for web pages. The emphasis is on &ldquo;dynamic&rdquo;, as it allows you to build thrilling slides adding motion to the pages.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The plugin is supplied with an easy-to-use builder and tons of options. Well worked out packs of settings let the user adjust every single detail of the slider and allows working with absolutely different types of content. Sliders can be created for separate posts, for the whole pages and their small parts. To be more precise with the plugin you can create:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">image sliders and carousels<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">featured posts sliders<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">social media feeds<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">media galleries<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">hero blocks and front pages<\/span><\/li>\n<\/ul>\n<p>[adrotate group=&rdquo;2&Prime;]<\/p>\n<h2><span style=\"font-weight: 400\">Reasons you should use Slider Revolution with your website<\/span><\/h2>\n<p><span style=\"font-weight: 400\">You can&rsquo;t go wrong with Slider Revolution. A comprehensive plugin with user-friendly tools is a perfect solution for creating beautiful sliders, and here are the reasons why.&nbsp;<\/span><\/p>\n<h3><strong>Bundled Plugin<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">Today almost every WordPress theme comes with a Slider Revolution plugin. Usually, the theme package includes the free version of the plugin. The bundled plugin is limited to very basic features, but still, it is very convenient to get the theme along with the slider builder.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">However, if you would like to access a lot of the plugin&rsquo;s features you have an option of purchasing the independent plugin. The regular license will cost you $29 and you can get it in the Codecanyon marketplace.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">For the extended license, you will have to pay around $150, and get a year of technical support just for 9$.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Yes, the plugin can cost you some money, but you can still create great sliders even with the regular license of the plugin.&nbsp;<\/span><\/p>\n<h3><b>Templates<\/b><\/h3>\n<p><span style=\"font-weight: 400\">The amazing plugin will not only impress you with the tools and features, but it also has a collection of good-looking premade layouts. A wonderful collection of pre-made templates and the library of free media objects that you can use on your slide will simplify and speed up the slide creation. You can select the template for any projects of yours and instead of building a slider from scratch you can save yourself the time and go ahead with the pre-built layout.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Simply import the template you chose and begin creating right away.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Besides this, you&rsquo;ll get access to the big free library of different objects such as font icons,&nbsp; background images, transparent PNG objects, SVG, and others. You can use them and easily insert them into your slides.<\/span><\/p>\n<h3><b>Visual editor<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Slider Revolution is supplied with an amazing WYSIWYG editor that makes it very simple to create and modify slider templates. Many website owners find it difficult to write complex codes or hire a separate team for that task. Thanks to the slider editor you can save your time and enjoy the drag and drop feature to build outstanding slides.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">The slider plugin allows you to be more creative with the sliders you build and present them easily on your website. You will have tons of custom options like building custom slider location, choosing slider delay, adding transitions, adding media layers, and so on. this can be done in no time using the drop-down list. Moreover, the plugin has many navigation features that allow you to change the style of navigation and add arrows, bullets, tabs, and thumbnails.<\/span><\/p>\n<h3><b>High-Speed performance<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Slider Revolution is well coded to load fast. All aspects of the sliders are optimized, and it uses advanced debugging options to address any issues, loads core files automatically, and scales with features used. It also employs intelligent lazy loading and is SEO optimized.<\/span><\/p>\n<h3><b>Responsive Layouts<\/b><\/h3>\n<p><span style=\"font-weight: 400\">One of the biggest problems that many web developers experience is that sliders lack responsiveness. As a result, those sliders do not work well on small devices or are not displayed at all. Responsiveness is an essential component of user experience. With the huge amount of traffic coming from mobiles, it will be a shame for your sliders to not perform well on other devices.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Slider Revolution is not just a simple slider. The plugin is responsive ready, so whatever slides you create, you can be sure that they will be optimized for whatever device they will be used on.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Slider Revolution has made sure to set the responsive breakpoints for each slider, making any design look great on different devices and small screens. Whatever option you choose &mdash; single, carousel or standard slider, you can be sure it looks just perfect on any device.&nbsp;<\/span><\/p>\n<h3><b>Customizing Options<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Another advantage of the Slider Revolution plugin is its diverse customizing options. You can set slide delays, choose navigation arrows, parallax backgrounds, add media layers, insert buttons, set custom fonts, add margins, and many others.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Slider Revolution plugin allows you to customize anything. In order to save time, you can save presets to use them later in the slide transitions, font styles, and layer animations.<\/span><\/p>\n<h3><b>Slider Revolution Addons<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Want to make your sliders more complex and diverse it with transition effects, animations?&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">You are good to go! Slider supports different content types, like blog posts and current posts, it allows you to use feeds from social platforms like Twitter, Facebook, Vimeo, YouTube, and Instagram. You can add links, videos, images, and text in no time. With the help of the Variations feature, you can build a feature-rich and information-studded slide that visitors can use.<\/span><\/p>\n<h3><b>Security<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Security is one of the most significant aspects when it comes to websites. You might hear that there war vulnerability affected by Slider Revolution some years ago. From that time Themepunch has increased the protection of the software and is now using a third-party organization to audit the plugin issues regularly. So you can be sure that the plugin is highly secure.&nbsp;<\/span><\/p>\n<h3><b>Technical Support<\/b><\/h3>\n<p><span style=\"font-weight: 400\">The plugin comes with the detailed documentation and big FAQ section with the most popular questions about the plugin. That is why it is very easy to get started with the slider revolution even if you have no experience working with it. Availability of the detailed tutorials make it simple to create the slide for the website for everyone.&nbsp;<\/span><\/p>\n<h3><b>Content Sources<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Plugin successfully handles the creation of sliders for various content sources. Whether it is a WooCommerce product or a common post, Slider Revolution has the tools.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Powerful features make this plugin a number 1 choice for everyone. Its primary advantage is that it presents the category of an all-in-one solution. You do not need any extra plugins, everything is inside the plugin.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">We also should mention that it is affordable. The regular license will cost you $26. Considering the number of features you get for the price, the Slider Revolution is the most affordable slider plugin in the industry.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In this ultimate guide, we will cover everything from the installation of the plugin to adding a new slide and placing it on the website.&nbsp;<\/span><\/p>\n<h2><strong>Installation of the plugin and primary setup<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">Many of the theme developers include Slider Revolution in the package of the themes.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If you have purchased one of the premium WordPress Themes from StylemixThemes you don&rsquo;t have to install the plugin manually. Slider Revolution will be installed automatically with the demo import.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">If the package of the theme you are using does not include the plugin, you need to download and install it manually. To get a copy of Slider Revolution follow this <\/span><a href=\"https:\/\/codecanyon.net\/item\/slider-revolution-responsive-wordpress-plugin\/2751380?irgwc=1&amp;clickid=wmb3GLTX9xyOTS5wUx0Mo3EWUkiVdSSNDXnrRo0&amp;iradid=275988&amp;irpid=204534&amp;iradtype=ONLINE_TRACKING_LINK&amp;irmptype=mediapartner&amp;mp_value1=&amp;utm_campaign=af_impact_radius_204534&amp;utm_medium=affiliate&amp;utm_source=impact_radius\"><span style=\"font-weight: 400\">link<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">You will need to buy the plugin. Log into your Envato account and place your purchase.&nbsp; After that download the file &mdash;&nbsp; <\/span><span style=\"font-weight: 400\">select the download option for &ldquo;Installable WordPress file only.&rdquo;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Now you need to add a new plugin to your site. Go to your dashboard &mdash; <\/span><b>Plugins &gt; Add New<\/b><span style=\"font-weight: 400\">. Once the installation is finished, <\/span><b>activate <\/b><span style=\"font-weight: 400\">the plugin.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Congratulations, you are all set and you can start creating your first slider!<\/span><\/p>\n<h3><strong>How to update Slider Revolution<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">Themepunch releases regular updates of the slider plugin. To update it open Slider Revolution from your dashboard and follow the Updates tab. On this page you can find a small section with the title &ldquo;Plugin Updates&rdquo;. It is specified here what version of the plugin is currently installed on your website and an available version for update.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8588 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/1-1-69x41.png\" alt=\"\" width=\"691\" height=\"414\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/1-1.png\"><\/p>\n<p><span style=\"font-weight: 400\">Also, you can use the standard way and go to Dashboard &gt; Updates and install the new version of the plugin from there.&nbsp;<\/span><\/p>\n<h2><strong>Slider Revolution: Getting started<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">If you are using the slider for the first time, it might not be clear enough with all the terminology used in there. There are three major elements that you can be confused with. They are modules, slides and layers. Each of them can be part of another as well as work individually.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">For instance, you can create a module designed to act as a slider and it will contain slides. Besides this, you can make modules such as navigation menus or headers, which are not sliders at all, but they will still contain slides. The reason for that is Slider Revolution was initially created as a slider builder, however, now it is also used as a complete website editor. So with the help of it, you are able to build much more than simple slides.&nbsp;<\/span><\/p>\n<h3><b>Relationship Between Modules, Slides &amp; Layers<\/b><\/h3>\n<p><span style=\"font-weight: 400\">Modules are containers for Slides which are containers for Layers.<\/span><\/p>\n<p><span style=\"font-weight: 400\"><strong>Modules<\/strong> exist to contain slides. Every module must have at least one slide. When you create a blank module an empty slide is added automatically. You can create additional slides, or add everything just to a single slide. It fully depends on the type of content you are creating.&nbsp;&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">The <strong>Slide<\/strong> is a container for layers. Every slide must have at least one layer. When a new slide is created a background layer is added automatically. This layer is always there, it can be renamed and made invisible, but it cannot be removed. This background area can be filled with layers.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\"><strong>Layers<\/strong> contain visual, audio, or layout items and are added to slides. Text, button, image, audio, video, group, and row are all types of layers. Each layer represents a single piece of media. Layers can be animated in a way that performs your idea the best.<\/span><\/p>\n<h2><strong>How to use Slider Revolution: Global settings<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">As we already mentioned, Slider Revolution has tons of options, and this is not an exaggeration. That is why, before starting to build the slider we recommend you look through the global settings first and learn the main principles of working with the plugin.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">If you click on the Slider Revolution from your dashboard you will be able to open the setup screen of the plugin.&nbsp;<\/span><\/p>\n<h4><b>Setup screen<\/b><\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8589 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/2-62x7.png\" alt=\"\" width=\"624\" height=\"67\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/2.png\"><br><span style=\"font-weight: 400\">On the top of the screen you can find the tab with the following options:&nbsp;<\/span><\/p>\n<p><i><span style=\"font-weight: 400\">Modules, Updates, Activation, News, Globals, FAQs, Support.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400\">On this stage, we will be working only with the two of them:<\/span><b> Modules <\/b><span style=\"font-weight: 400\">&mdash; to create a new one, and <\/span><b>Globals<\/b><span style=\"font-weight: 400\"> &mdash; to look at the global plugin settings.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8590 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/3-102x47.png\" alt=\"\" width=\"1024\" height=\"471\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/3-1024x471.png\"><\/p>\n<h4><strong>Global Settings<\/strong><\/h4>\n<p><span style=\"font-weight: 400\">We will start with the <\/span><b>Globals<\/b><span style=\"font-weight: 400\">. The global settings are mainly divided into several sections of:&nbsp;<\/span><\/p>\n<ul>\n<li>General<\/li>\n<li>Default Layout Grid Breakpoints<\/li>\n<li>Fonts<\/li>\n<li>Miscellaneous<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8591 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/4-79x57.png\" alt=\"\" width=\"790\" height=\"573\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/4.png\"><\/p>\n<p><span style=\"font-weight: 400\">These settings are responsible for default responsive grid options that apply when building a new slider, custom font loading, database creation, and more.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are only several options you will need to focus on. First, is the responsiveness, to make sure your future sliders look good on any devices. Here is a quick guide about devices and their sizes.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In the<\/span><b> Default layout grid breakpoint<\/b><span style=\"font-weight: 400\"> section, you can set the width in pixels for different types of devices: desktop, notebook, tablet, and mobile.<\/span><\/p>\n<p><span style=\"font-weight: 400\">As long as every device has its own size, enter the exact width for each type to ensure the correct display of a slider.&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Standard Desktop monitors have a width of 1920px.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Notebook devices, which include all laptops, MacBooks, and horizontally oriented tablets are about 1600px width.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Vertically oriented tablets have a width of not above 778px (based on the iPad).<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">And mobile devices. This is an important part, as nowadays more than half of all internet traffic is generated through mobile devices and it won&rsquo;t be satisfying if users can&rsquo;t see the sliders on your website properly. However, this can be confusing, and the reason for that is that modern smartphones have absolutely different sizes. We suggest you use the number, not above 500px.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">The second thing you might want to control is access to the slider. The <\/span><b>Permission<\/b><span style=\"font-weight: 400\"> option allows you to deny access to the plugin for other users except for admins and editors.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8593 aligncenter stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/5-27x13.png\" alt=\"\" width=\"265\" height=\"130\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/5.png\"><\/p>\n<p><span style=\"font-weight: 400\">Now you can start building your sliders! There are three options you can use. You can begin from scratch and build a new slider, you can export a file from the Slider Revolution templates or import sample sliders included with your theme.<\/span><\/p>\n<p><span style=\"font-weight: 400\">In our article, we will be reviewing the first option and building a new slider from scratch. This will let us explore more plugin&rsquo;s possibilities.&nbsp;<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Creating a new slider<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Now when we are done with some primary setups we can proceed to create a new slide. Open the Slider Revolution settings and click on the <\/span><b>New Blank Module.<\/b><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8595 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/6-102x29.png\" alt=\"\" width=\"1024\" height=\"288\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/6-1024x288.png\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8596 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/7-102x52.png\" alt=\"\" width=\"1024\" height=\"517\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/7-1024x517.png\"><\/p>\n<p><span style=\"font-weight: 400\">You will be offered to go through the quick guide. Click on Start Guide if you&rsquo;d like to take a short lesson. Or quit the guide to skip this step.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8597 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/8-102x46.png\" alt=\"\" width=\"1024\" height=\"463\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/8-1024x463.png\"><br><span style=\"font-weight: 400\">Your screen will be divided into several areas: from you left there is a frame where all the content is displayed, from the right &mdash; it is a working space with sections and settings.&nbsp;<\/span><\/p>\n<h2><strong>General options<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">Let&rsquo;s start with the <\/span><b>General Options<\/b><span style=\"font-weight: 400\">. Click on the <\/span><b>Gear<\/b><span style=\"font-weight: 400\"> icon to open the settings. First of all, we need to name our module. In the <\/span><b>Title<\/b><span style=\"font-weight: 400\"> section enter the name and duplicate it for the Alias in lowercase and with dashes between the words instead of spaces.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Alias is needed to add the slider to a page. You can also use the provided shortcode by copying it and placing it on the page or post you want to display your slider.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8598 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/9-29x32.png\" alt=\"\" width=\"288\" height=\"318\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/9.png\"><\/p>\n<p><span style=\"font-weight: 400\">After that, we can customize the type and the desktop layer area height and width. These settings are located under the Layout tab.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8602 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/10-29x46.png\" alt=\"\" width=\"287\" height=\"456\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8603 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/11-26x54.png\" alt=\"\" width=\"256\" height=\"538\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/11.png\"><\/p>\n<p><span style=\"font-weight: 400\">For the<\/span><b> type<\/b><span style=\"font-weight: 400\"> you have three options to choose from:&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Slider &mdash;&nbsp; several animated slides that rotate to display one by one.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Scene &mdash;&nbsp; a single slide that can be used as a content module.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Carousel &mdash; many slides with multiple visible at the same time.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">The next setting we need to specify is sizing. There are also three options available:&nbsp;<\/span><\/p>\n<p><b>Auto<\/b><span style=\"font-weight: 400\"> &mdash; this is the default parameter that stretches your slider to the main container width as defined by your WordPress theme.<\/span><\/p>\n<p><b>Full-width<\/b><span style=\"font-weight: 400\"> &mdash;&nbsp; a full-width slider option stretches across from left to right (you still need to define the height)<\/span><\/p>\n<p><b>Full-screen &mdash; <\/b><span style=\"font-weight: 400\">for large sliders filling the entire screen, no matter the size of your browser or device.<\/span><\/p>\n<p><i><span style=\"font-weight: 400\">With the Slider Revolution plugin, you can animate every part of the page on the website. Please consider, when doing so the weight of your page will be increased and thus, it will take more time to load your page. As a result, it may negatively affect SEO ranking.&nbsp;<\/span><\/i><\/p>\n<h4><b>Resize settings<\/b><\/h4>\n<p><b>Classic or linear resizing <\/b><span style=\"font-weight: 400\">makes sure that your slider will compress accordingly after configuring your main screen size settings (for example, a 1000x400px slider will compress to a 500x200px slider with the fonts, images and other slider elements).<\/span><\/p>\n<p><b>Intelligent inheriting<\/b><span style=\"font-weight: 400\"> enable the automated device sizes creation based on the desktop settings you choose, with the option to adjust.<\/span><\/p>\n<p><b>Custom or manual setup <\/b><span style=\"font-weight: 400\">lets you set your slider size using exact pixels, with the ability to set the slider sizes at different screen width &mdash; desktop, laptop, tablet and phone.<\/span><\/p>\n<h2><strong>Responsiveness of the slides<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">Moving on. We are not done with the responsiveness yet. There is a <\/span><b>Layer area size<\/b><span style=\"font-weight: 400\"> where you can specify the browser width.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8604 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/12-29x38.png\" alt=\"\" width=\"287\" height=\"375\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/12.png\"><\/p>\n<p><span style=\"font-weight: 400\">Usually, the options are set by default to Auto Sizes, and only the desktop parameters are specified. You can do the same for other options by switching them on.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Also, if you switch on the specific device, your working area (slide container) will be adjusted to the parameters of the selected device, meaning you can control the display of the slider for the concrete device.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For each device, there will be specified grid sizes from global settings. The grid is the area in which your slider layers are located. There are no strict numbers that you should enter. You will figure out what works for you best after you try and explore several options.<\/span><span style=\"font-weight: 400\">&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">This was just the beginning, some general options that will ease your further work with the slider. And once you are done with this part you can switch to the next step.&nbsp;<\/span><\/p>\n<h3><strong>A closer look at the options<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">Besides the General options, there are three other tabs you will be interacting with a lot. We want to guide you through the main settings you will be operating with. Basically, the creation of the slides considers several components that are involved in the process. These are general options, navigation settings, slide options, and layers.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8605 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/13-29x29.png\" alt=\"\" width=\"292\" height=\"287\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/13.png\"><\/p>\n<p><span style=\"font-weight: 400\">We were not joking when saying Slider Revolution has tons of options. There are too many elements to cover, let&rsquo;s slightly describe all of them and then review in a more detailed way the most important ones.<\/span><\/p>\n<h4><strong>1. General options&nbsp;<\/strong><\/h4>\n<p><span style=\"font-weight: 400\">We already touched on some elements from the General Options like Title and Layout. However, besides these, there are other things you need to adjust.<\/span><\/p>\n<p><span style=\"font-weight: 400\">All in all,<\/span> <span style=\"font-weight: 400\">General options allow you to set up the following:<\/span><\/p>\n<p><b>Title<\/b><span style=\"font-weight: 400\"> &mdash; to provide the slider&rsquo;s name.&nbsp;<br><\/span><b>Layout <\/b><span style=\"font-weight: 400\">&mdash; select the slider type (slider, scene, or carousel) and sizing (auto, full-width, or full-screen). This helps to edit the widths and heights for the layer area, the position of your module, a default background color or image, and more.<br><\/span><b>Content<\/b><span style=\"font-weight: 400\"> &mdash;&nbsp; identifies the way of adding the content to the slider. You can choose from&nbsp; 9 content sources.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8606 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/14-25x27.png\" alt=\"\" width=\"253\" height=\"271\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/14.png\"><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Defaults &mdash; here we suggest concentrating on one important parameter &mdash; Slide Duration (how long each slide will last).&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">General &mdash;&nbsp; this section includes slideshow settings for auto-rotate, stop on hover, looping slides, and selecting a designated first slide. Here also you can hide or disable your slider on mobile or under specified pixel widths.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">On Scroll &mdash; this one allows users to select scroll effects such as parallax, 3D depths, timeline, fade, blur, grayscale and more. All effects go with customizable settings.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Spinner &mdash; or preloader, and the plugin has 15 spinner options to choose from.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Advanced options allow you to enable lazy loading, select a fallback image, or simplify your slider on old browsers.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">CSS\/jQuery &mdash; here you can add your own custom code to sliders. Note that this one is better to be used by professionals or users familiar with the concept of programming and coding.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">As Modal &mdash; this particular option is needed in case you want to create a slider that appears as a popup or lightbox and it provides you with the options for slider position, cover color, and the shortcode to use when inserting your modal slider in pages.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Skin &mdash;&nbsp; skin presents the preset that you can create and assign to text layers (specifies the color of the highlight, heading, content text).<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8607 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/15-31x30.png\" alt=\"\" width=\"309\" height=\"300\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/15.png\" srcset=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/15-31x30.png 31w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/15-300x291.png 300w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/15-150x146.png 150w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/15-50x50.png 50w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/15.png 309w\" sizes=\"auto, (max-width: 309px) 100vw, 309px\" \/><\/p>\n<p><span style=\"font-weight: 400\">Addons &mdash; here you will find addons (note &ndash; addons are only available if you purchased your own slider license).<\/span><\/p>\n<h4><strong>2. Navigation Options<\/strong><\/h4>\n<p><span style=\"font-weight: 400\">If you are planning to include more than one slide, the navigation options will help you to add navigation tools to the slider such as bullets, arrows, and buttons.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">All the options include easy to customize settings for position\/alignment, sizing, visibility and global styling\/presets.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8608 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/16-25x25.png\" alt=\"\" width=\"252\" height=\"254\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/16.png\"><\/p>\n<p><span style=\"font-weight: 400\">The Navigation elements include:&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Progress &mdash; progress bar or circle that visualizes current slide progress.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Arrows &mdash; make it easy for visitors to click through your slides.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Bullets &mdash;&nbsp; 14 styles of navigation dots to add to your slide.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Tabs &mdash; very useful for content sliders where the tab navigation is needed.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Thumbs &mdash; is required to display a thumbnail image as a navigation option. There are 5 options available.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Prev Size &mdash; specifies the size of the preview image.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Touch &mdash;&nbsp; includes options for block scroll, velocity and direction.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Keyboard &mdash; you can enable keyboard navigation (recommended for accessibility).<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Mouse &mdash; enables the mouse control such as a carousel function or reverse scroll.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Nav Editor &mdash;&nbsp; this section is for customizing arrows, bullets, tabs or thumbs with your own custom code.&nbsp; <\/span><\/li>\n<\/ul>\n<h4><strong>3. Slide Options<\/strong><\/h4>\n<p><span style=\"font-weight: 400\">The next part of the settings is related to the slide options.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8609 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/17-25x25.png\" alt=\"\" width=\"250\" height=\"245\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/17.png\"><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Background: Choose the background for your slide. Choose from transparent, colored (you can add a gradient), image, external image, or a video (YouTube, Video or HTML5).<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Thumbnail: Define the thumbnail visible by the admin and the thumbnail used for navigation.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Animation: Choose the transition animation for your slides.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Filters &mdash; 22 of different filters to add to your slides.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Progress &mdash; allows customizing the slide length, pause, and visibility on a slide.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Publish Rules &mdash;&nbsp; control whether your slide is published or unpublished.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Tags &amp; Link &mdash; helps to add custom class, ID, and HTML data for your slide as well as a link.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Parameters &mdash; add up to 10 custom parameters to use within your slides and navigation.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Loop Layers &mdash;&nbsp; manage loop settings if your slider only has one slide.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">On Scroll &mdash;&nbsp; customize your parallax and scroll effects per slide.<\/span><\/li>\n<\/ul>\n<h2><strong>Adding new slides<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">After you finish setting the slider and adjusting all options, it is time to add a new slide to the project. You can see the frame, which displays the slide content when you add it. Now it&rsquo;s transparent. You can change the background option and add an image or set the color.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">You can upload an image from your computer, or use external source (by adding a link). Also, you are able to set the color as a background instead of an image. It can be done pretty easily.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Just select the Colored option from the Type dropdown in the Source panel, and then click the BG Color button to choose your color. If you want to use the video simply add the source.&nbsp;<\/span><\/p>\n<h2><strong>Adding a new layer to the slide<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">At the top of the screen, you will find the <\/span><b>+Add Layer <\/b><span style=\"font-weight: 400\">option. Use it to add a new layer to the slide. There are <\/span><b>8 different <\/b><span style=\"font-weight: 400\">options.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8610 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/18-16x33.png\" alt=\"\" width=\"161\" height=\"325\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/18.png\"><\/p>\n<p><span style=\"font-weight: 400\">The most popular options, however, are images and texts with the support of buttons if you need to add some navigation tools to the slider.&nbsp;<\/span><\/p>\n<h4><strong>Layer options: how to use<\/strong><\/h4>\n<p><span style=\"font-weight: 400\">The flexibility of Slider Revolution is based on the availability of multiple options and the ability to set up every detail separately as well as adjust the whole slider project. Layers are not an exception. Every time you add a new layer to the slide, you can control every option for it. In the example of adding a new image to the slide, we will review all the parameters that layer options allow you to change.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">When you want to add an image layer to your slide, simply click on Image in the <\/span><b>Add Layer<\/b><span style=\"font-weight: 400\"> dropdown. Then upload the desired image.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Next to the frame, you&rsquo;ll find various Layer Options (Content, Style, Size &amp; Pos, etc.).<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8611 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/19-26x25.png\" alt=\"\" width=\"256\" height=\"253\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/19.png\"><\/p>\n<p><span style=\"font-weight: 400\">Layer <\/span><b>Content<\/b><span style=\"font-weight: 400\"> displays some basic information about the layer. You can set lazy loading and change its source type.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8612 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/20-25x40.png\" alt=\"\" width=\"252\" height=\"397\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/20.png\"><\/p>\n<p><span style=\"font-weight: 400\">Using the layer<\/span><b> Style<\/b><span style=\"font-weight: 400\"> options you will be able to add a color background.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">The next option is the <\/span><b>Spacing<\/b><span style=\"font-weight: 400\">. Spacing helps us move the layer from up to down, from left to right, from down to up, and from left to right. They are marked with the letter &lsquo;M&rsquo;.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8613 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/21-26x21.png\" alt=\"\" width=\"255\" height=\"210\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/21.png\"><\/p>\n<p><b>Pos and Size. <\/b><span style=\"font-weight: 400\">Set align as well as the position and size of the image layer. Both vertical and horizontal alignment can be changed easily, simply click on one of the alignment icons.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8614 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/22-25x22.png\" alt=\"\" width=\"254\" height=\"216\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/22.png\"><br><span style=\"font-weight: 400\">After that, you can set the position with Vertical Offset from Aligned Position options. Play with X and Y parameters to move your layer on the slide.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8615 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/23-25x15.png\" alt=\"\" width=\"252\" height=\"154\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/23.png\"><\/p>\n<h4><span style=\"font-weight: 400\">Layer Advanced Options<\/span><\/h4>\n<p><span style=\"font-weight: 400\">Advanced Style options allow you to <\/span><b>Rotate<\/b><span style=\"font-weight: 400\"> a layer horizontally, vertically, and centrally and let you add shadows to the layers.<\/span><\/p>\n<h4><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8616 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/24-26x32.png\" alt=\"\" width=\"258\" height=\"316\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/24.png\"><br><br><span style=\"font-weight: 400\">Layer Animation Options<\/span><\/h4>\n<p><span style=\"font-weight: 400\">Animation is the major option in the Slider Revolution. The main idea of the plugin is to add to your site animated elements instead of static, standard visuals.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Animation options add motion to your slides, using this action you are able to animate the slides and set appear and exit animations.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are two lines for appear and exit options: IN and OUT.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8617 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/25-25x13.png\" alt=\"\" width=\"254\" height=\"127\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/25.png\"><\/p>\n<p><span style=\"font-weight: 400\">Each line is provided with a dropdown menu with different types of animations. By default, the fade-in option is set for all layers. Try some animations to see how it looks on your slide and choose the best one.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8619 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/26-25x43.png\" alt=\"\" width=\"253\" height=\"433\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/26.png\"><\/p>\n<p><span style=\"font-weight: 400\">The section below is used for <\/span><i><span style=\"font-weight: 400\">Animation Duration, Animation Easing, and for defining animation Start<\/span><\/i><span style=\"font-weight: 400\">. The <\/span><b>Duration<\/b><span style=\"font-weight: 400\"> defines how long it takes for the animation to finish, <\/span><b>the Start<\/b><span style=\"font-weight: 400\"> option defines the duration of time after which the animation will start once the slide is loaded. Easing defines the speed at which the animation will progress.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8620 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/27-25x24.png\" alt=\"\" width=\"252\" height=\"243\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/27.png\"><\/p>\n<h4><span style=\"font-weight: 400\">Animation Timeline<\/span><\/h4>\n<p><span style=\"font-weight: 400\">If you have multiple layers added to your slide, you probably do not want them all to appear at the same time. The Slider Revolution Animation Timeline can help you to handle this issue. It is located right below our work-frame.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The default frame start for each layer is set to 0 milliseconds, meaning that layers will appear on the screen after 0 milliseconds the is loaded. The appearing duration is usually set to 3 seconds which means that a layer becomes fully visible in 3 seconds. To change the options, choose the layer and edit it by specifying a different value.&nbsp;<\/span><span style=\"font-weight: 400\">&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Make sure you set different values for different layer, so they appear not at once and look messy.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8622 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/28-102x49.jpg\" alt=\"\" width=\"1024\" height=\"490\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/28-1024x490.jpg\"><\/p>\n<p><span style=\"font-weight: 400\">Now, let&rsquo;s have a closer look at the options of Timeline<\/span><\/p>\n<p><strong>1.List View<\/strong><\/p>\n<p><span style=\"font-weight: 400\">These icons can be used in order to hide or show the Layers and hide or show the Rows based on the vertical alignment. Only the admin of the website has access to these options.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8623 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/29-54x17.png\" alt=\"\" width=\"541\" height=\"174\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/29.png\"><\/p>\n<p><b>2. Timeline Duration<\/b><span style=\"font-weight: 400\"><br><\/span><span style=\"font-weight: 400\">The Timeline total duration is defined in the Module General Options &gt; Defaults. Also, it can be set individually in Slide Options &gt; Progress.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8624 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/30-26x49.png\" alt=\"\" width=\"259\" height=\"487\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/30.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8625 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/31-26x37.png\" alt=\"\" width=\"258\" height=\"372\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/31.png\"><\/p>\n<p><span style=\"font-weight: 400\">By dragging the block in the Timeline left and right you can easily adjust the slide length. Another option you can do is to click the clock icon and edit it in percentage.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8627 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/32-94x14.png\" alt=\"\" width=\"937\" height=\"140\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/32.png\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8628 aligncenter stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/33-37x19.png\" alt=\"\" width=\"366\" height=\"185\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/33.png\"><\/p>\n<p><b>3. Preview Timeline<\/b><\/p>\n<p><span style=\"font-weight: 400\">In order to <\/span><b>Preview<\/b><span style=\"font-weight: 400\"> the timeline, you need to click the Play icon or simply drag the idle block.&nbsp;<\/span><\/p>\n<p><b>4. Rename Layers<\/b><\/p>\n<p><span style=\"font-weight: 400\">To rename the layer double-click the layer&rsquo;s text in the Timeline and rename it. Also, you can edit the title of the layer at the top center of the Editor.&nbsp;<\/span><\/p>\n<p><b>5. Layers z-index \/ Stacking Order<\/b><\/p>\n<p><span style=\"font-weight: 400\">To set the z-index\/stacking order you just need to drag layers in the timeline.<\/span><\/p>\n<p><b>6. Animations<\/b><\/p>\n<p><span style=\"font-weight: 400\">For every layer, there is an in and out animation and additional Keyframe animations.&nbsp; All the animations are presented in the timeline.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8630 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/34-95x18.png\" alt=\"\" width=\"947\" height=\"176\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/34.png\"><\/p>\n<p><span style=\"font-weight: 400\">Drag an animation block to adjust the starting-point of animation in the Timeline. And edit the duration of the animation by dragging the endpoint of the block<\/span><\/p>\n<h3><strong>Layer Loop Options<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">The Loop tab lets you create looping animations. You can choose an animation type, define the loop speed and easing, and set a start and end time for the loop.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8631 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/35-25x46.png\" alt=\"\" width=\"252\" height=\"457\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/35.png\"><\/p>\n<p><span style=\"font-weight: 400\">There are 8 types that you can choose from: Custom, Pendulum Loops, Effect Loops, Wave, Wiggles, Rotating, Slide and Hover, and Pulse. Each loop animation has its own set of options.<\/span><\/p>\n<p><b>Pendulum<\/b><span style=\"font-weight: 400\"> makes your layer swing from side to side. Among the options you can set up is the end and start degree &mdash; this identifies the degrees between which the animation will occur, and X and Y origin point &mdash; this parameter determines the axis point from which the layer will rotate, you can specify it in percentages.<\/span><\/p>\n<p><b>Effect Loops<\/b><span style=\"font-weight: 400\"> allows you to choose from several options &mdash; Grayscale, Blink, Flattern, and Lithing. All the effects look differently, so we recommend you look at every option to choose which one is best for you.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">The <\/span><b>Wave <\/b><span style=\"font-weight: 400\">animation makes your layer rotate in a motion similar to the wave. It rotates around an axis outside the layer. You can set a Rotation X and Y Point to determine the position of the axis around which the layer will rotate, a Start Angle to identify the starting position of the animation and a Radius for the orbit of the rotation.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The <\/span><b>Wiggle loop<\/b><span style=\"font-weight: 400\"> will make your layer wiggle from side to side &ndash; from up to down, from left to right, and vice versa. Use the dropdown to choose the option you like.<\/span><\/p>\n<p><span style=\"font-weight: 400\">The <\/span><b>Rotating <\/b><span style=\"font-weight: 400\">loop makes your layer rotate around the set axis point. The layer will rotate and make a full circle if you choose the first item from the Rotating dropdown &ndash; the Rotate item.<\/span><\/p>\n<p><span style=\"font-weight: 400\">To make your layer move left to right, right to left, up to down, diagonally, you can use the Slide and Hover animation. You can set a start and end position for the animation.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">The <\/span><b>Pulse<\/b><span style=\"font-weight: 400\"> animation makes your layer continuously zoom in and out. Specify the Zoom Start and Zoom End. The default values here are 1 for both start and end. This means that the layer will remain at 100% of its size. In other words, it won&rsquo;t animate. If you enter 0.5 for the Zoom Start, your layer will start at 50% of its size and zoom in to 100% of its size, then back to 50%, etc.<\/span><\/p>\n<h3><strong>Layer Hover Options<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">Hover effects are the staples of good UX. Hover effects usually indicate that the action is required or performed, especially since this method is actively used with the sliders. With the Slider Revolution, you can make layers, texts and images change on hover.<\/span><\/p>\n<p><b>Adding Hover Effects in Slider Revolution<\/b><\/p>\n<p><span style=\"font-weight: 400\">First, you need to turn the layer hover on. Select the layer you want to add the effect to, and,&nbsp; click on Hover under Layer Options. Click on the Enabled to turn it on.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8632 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/37-51x27.jpg\" alt=\"\" width=\"512\" height=\"274\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/37.jpg\"><\/p>\n<p><span style=\"font-weight: 400\">In the neath, you&rsquo;ll find all the options you need for setting your layer behavior on hover. If you leave all as it is, the layer will not show any changes.<\/span><\/p>\n<p><b>Hover Settings<\/b><\/p>\n<p><span style=\"font-weight: 400\">The first thing you can set here is the Cursor. In the dropdown menu, you can find different options for the Cursor. Auto and Default perform the same functions and will not reflect any difference. The Crosshair and Pointer define the shape of your mouse cursor on the screen.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are even more cursor styles here. Some of them are pretty unusual, however, most of them indicate the action the layer has when triggered. For instance, if you are linking the layer to the Support center you can choose the Help cursor.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8633 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/38-26x26.png\" alt=\"\" width=\"256\" height=\"259\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/38.png\"><\/p>\n<p><b>Pointer Event <\/b><span style=\"font-weight: 400\">by default is set to Auto. None option is used when there is no linked content.&nbsp;<\/span><span style=\"font-weight: 400\">This section allows you to choose the Cursor look on layer hover, enable animation, and set it up.&nbsp;<\/span><\/p>\n<p><b>Hover Animation<\/b><\/p>\n<p><span style=\"font-weight: 400\">Next, there is a Hover Animation which you can set depending on your preferences. There are several things you should be aware of. First, it doesn&rsquo;t look good when the layer changes on hover and the transition happens at a moment. Always better when the transition happens with the delay. . By default, the delay is set to 300ms, leave it like that if that suits you, or change the value.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8634 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/39-26x43.png\" alt=\"\" width=\"255\" height=\"425\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/39.png\"><\/p>\n<p><span style=\"font-weight: 400\">Also, you can set the easing for the transition. You have several options to choose from.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8635 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/40-25x30.png\" alt=\"\" width=\"246\" height=\"296\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/40.png\" srcset=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/40-25x30.png 25w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/40-150x180.png 150w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/40-50x60.png 50w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/40.png 246w\" sizes=\"auto, (max-width: 246px) 100vw, 246px\" \/><\/p>\n<p><b>Filter<\/b><\/p>\n<p><span style=\"font-weight: 400\">To your layer, you can add Filter. In other words, you can blur up the lyre to a certain extent. The option is expressed in pixels. The higher the value, the &ldquo;thicker&rdquo; the blur.<\/span><\/p>\n<p><b>Style<\/b><\/p>\n<p><span style=\"font-weight: 400\">There is also a Style part where you can set up the background color and adjust the border, namely change their color and select the border style.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8636 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/41-25x27.png\" alt=\"\" width=\"254\" height=\"274\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/41.png\"><\/p>\n<h3><strong>On Scroll Layer Options<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">On Scroll options make it possible for the slide to move on mouse scroll. There are three options &ndash; <\/span><b>Parallax<\/b><span style=\"font-weight: 400\">, <\/span><b>Timeline Scroll Based<\/b><span style=\"font-weight: 400\">, and <\/span><b>Filter Effect Scroll Based<\/b><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8637 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/42-25x37.png\" alt=\"\" width=\"250\" height=\"368\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/42.png\"><\/p>\n<h3><strong>Layer Action Options<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose <\/span><b>the type of action that you would like to occur<\/b><span style=\"font-weight: 400\">. There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8638 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/43-72x45.png\" alt=\"\" width=\"720\" height=\"450\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/43.png\"><\/p>\n<p><span style=\"font-weight: 400\">After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8639 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/44-71x41.png\" alt=\"\" width=\"709\" height=\"409\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/44.png\"><\/p>\n<h3><strong>Layer Visibility Options<\/strong><\/h3>\n<p><span style=\"font-weight: 400\">If you want your layer<\/span><b> to be visible on all devices<\/b><span style=\"font-weight: 400\">, then make sure the switches shown in the image below are all turned <\/span><b>ON<\/b><span style=\"font-weight: 400\"> under the<\/span><b> Visibility <\/b><span style=\"font-weight: 400\">section<\/span><b>.<\/b><span style=\"font-weight: 400\"> 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.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If you don&rsquo;t want your slider to be shown on some devices, simply turn off this option.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8641 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/45-25x21.png\" alt=\"\" width=\"252\" height=\"210\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/45.png\"><\/p>\n<h2><strong>Text layer&nbsp;<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">After we review most of the options that we need for the layer setup, let&rsquo;s move to the other type of layer and try to add some text to our slide.<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8642 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/46-26x9.png\" alt=\"\" width=\"260\" height=\"86\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/46.png\"><br><br><\/p>\n<p><span style=\"font-weight: 400\">Let&rsquo;s just point out some primary options you need to set for the text layer. They are the following:&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">In the Content section, we add our text, and aligned it.&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">In Style changed the font and its size, weight, line-height&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Customized the Size &amp; Pos to change the location of the layer within the slider<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">In Animation, we add some effects and speed for our text.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8644 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/47-70x43.png\" alt=\"\" width=\"701\" height=\"425\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/47.png\"><br><span style=\"font-weight: 400\">Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8645 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/48-25x42.png\" alt=\"\" width=\"254\" height=\"423\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/48.png\"><\/p>\n<p><span style=\"font-weight: 400\">Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.<\/span><\/p>\n<p><span style=\"font-weight: 400\">You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.<\/span><\/p>\n<h2><strong>How to create a parallax effect with slider revolution&nbsp;<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">Parallax is one of the most popular effects that make s the website more impressive and dynamic. You have probably seen lots of websites and themes integrated with that particular effect. And now we are going to show how you can build one on your own using the Slider Revolution plugin.&nbsp;<\/span><\/p>\n<h3><span style=\"font-weight: 400\">What is Parallax?<\/span><\/h3>\n<p><span style=\"font-weight: 400\">The parallax effect can be defined as an effect where elements in the background and the elements in the foreground, move at different speeds and create the illusion of depth. Usually, the elements of the background move slower<\/span><\/p>\n<p><span style=\"font-weight: 400\">There are different ways of how you can achieve this effect on your website. Luckily for us, the Slider Revolution has all the functionality to help you achieve the parallax effect.&nbsp;<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Creating Parallax in Slider Revolution<\/span><\/h3>\n<p><span style=\"font-weight: 400\">First <\/span><b>turn the parallax on<\/b><span style=\"font-weight: 400\">. Go to <\/span><b><i>Module General Options &gt; On Scroll &gt; Scroll Based Features &gt; Parallax<\/i><\/b><span style=\"font-weight: 400\"> and turn the Parallax Enabled switch to <\/span><b>On<\/b><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8646 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/49-26x47.png\" alt=\"\" width=\"261\" height=\"473\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/49.png\"><\/p>\n<p><span style=\"font-weight: 400\">There are a lot of various depth values that the plugin offers. Select the one that is best for you. You can also enter your own values.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8647 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/50-25x28.png\" alt=\"\" width=\"252\" height=\"281\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/50.png\"><\/p>\n<h3><span style=\"font-weight: 400\">Adding Parallax to Background Images<\/span><\/h3>\n<p><span style=\"font-weight: 400\">To add the parallax effect to your background image, go to <\/span><b><i>Slide Options &gt; On Scroll &gt; Parallax &amp; 3D Settings<\/i><\/b><span style=\"font-weight: 400\">, and choose the preferred depth from the dropdown.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8648 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/51-25x34.png\" alt=\"\" width=\"254\" height=\"342\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/51.png\"><\/p>\n<p><span style=\"font-weight: 400\">There are strict rules when selecting depth. It is better if you try different values and see which one works better with your slider. Different depths directly affect and create different effects. That is why we recommend you try them to see the result.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Adding Parallax to the Layers<\/span><\/h3>\n<p><span style=\"font-weight: 400\">In the Slider Revolution, the parallax effect can be added not just to the background images but to the individual layers as well. What is great about this effect is that it gives users an illusion if they control the parts of the slider on the page just by moving their mouse. This looks really nice on the website and what is more, it&rsquo;s very easy to set up.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Select your layer, go to the <\/span><b><i>Layer Options &gt; On Scroll &gt; Parallax &amp; 3D tab<\/i><\/b><span style=\"font-weight: 400\">, and choose the desired level of depth.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8649 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/52-25x47.png\" alt=\"\" width=\"253\" height=\"465\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/52.png\"><\/p>\n<p><span style=\"font-weight: 400\">As the result, you will get the layer with parallax that activates on the mouse movement.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Whether it is a background image or an individual layer, adding the Slider Revolution parallax effect is extremely easy. Although, not every slider needs parallax.&nbsp; Use it mostly for simple sliders, as the dynamic ones with lots of animation will probably do better without this effect.<\/span><\/p>\n<h2><strong>Adding a Button Layer<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">With the Slider Revolution, you can create and design the button to add to your slider for navigation. To do so, first, we need to add a button layer to the slider work-frame.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8650 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/53-58x34.png\" alt=\"\" width=\"579\" height=\"337\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/53.png\"><\/p>\n<p><span style=\"font-weight: 400\">When you add the button it will appear in the text form, you just need to customize it. On the right side of the screen, you can find lots of options for predesigned buttons. You can select one of them for your button.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8651 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/54-95x46.png\" alt=\"\" width=\"954\" height=\"464\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/54.png\"><br><br><span style=\"font-weight: 400\">Moreover, you can go with something original as there are variations of play buttons, switchers, and others. Also, it is possible to add a shadow effect and make the button look more interesting.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Once you chose the style, you can change the advanced settings and customize its look. All the settings can be found under the Layer Options tab.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8652 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/55-76x42.png\" alt=\"\" width=\"762\" height=\"419\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/55.png\"><br><br><span style=\"font-weight: 400\">You can change the initial look of the button, change the text, change its display on hover, and set up animations.<\/span><\/p>\n<h2><strong>How to make Slider Responsive<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">In the very beginning, we have already set up some parameters to make our slides responsive. That is not enough. For that, you also need to make sure that each layer in each of your slides seamlessly adapts to all devices and screen sizes.<\/span><\/p>\n<p><span style=\"font-weight: 400\">So, once you add all your slides and layers to your slider, it&rsquo;s time to fine-tune them for all the other available devices.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">When editing slides in the work frame, you&rsquo;re primarily setting them up to look good on desktop devices. When you&rsquo;re certain everything looks perfect on desktop, you can start playing around with layouts for other devices.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Now you can choose the device you would like to emulate from the dropdown. Turn on the device you want to check the display of the slider. Available devices are: Desktop, Notebook, Tablet, Mobile.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8653 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/56-24x14.png\" alt=\"\" width=\"235\" height=\"143\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/56.png\"><\/p>\n<p><span style=\"font-weight: 400\">You can modify everything for every single device. For example, for text layers you can set different font size, line-height, font-weight, and color, all depending on the device your slider is viewed on. For the image layer, in order to change the size of it, you need to add a different width and the height of the image will be adjusted automatically according to the width.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Pay attention to 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 layers.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8655 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/57-90x44.jpg\" alt=\"\" width=\"900\" height=\"440\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/57.jpg\"><br><span style=\"font-weight: 400\">Finally, save your slider, and check out how it looks live.<\/span><\/p>\n<h2><strong>Adding the Slider to the page<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">You have done a good job and now it is the time to see how your slider looks on the page. To do so use the Slider Revolution shortcode that you created earlier. This shortcode can be found under the Title tab of the General Options section.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">Or if you open Slider Revolution from your dashboard. Find the current module and select the option Embed.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8656 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/58-49x37.png\" alt=\"\" width=\"487\" height=\"368\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/58.png\"><\/p>\n<p><span style=\"font-weight: 400\">In the pop-up window select the option For the pages and Posts and copy the shortcode.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8658 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/59-70x49.png\" alt=\"\" width=\"702\" height=\"490\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/59.png\"><\/p>\n<p><span style=\"font-weight: 400\">The shortcode should look like <code><strong>[rev_slider alias=&rdquo;title&rdquo;][\/rev_slider]<\/strong><\/code> with the &ldquo;title&rdquo; based on the alias you gave the slider.<\/span><\/p>\n<h2><strong>Displaying Slider with Elementor<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">Using the shortcode method to display the slider on the page is simple enough. However, there is a way that could be even easier. All the sliders you build with the Slider Revolution plugin can be inserted on the page using the Elementor widget. Select the page you want to display the slider on and open it via the Elementor editor. Then simply drag and drop the element onto the working frame. On the widgets panel, search for the Slider Revolution 6 widget and add to the page. When you drag the widget you will need to choose the slider you want to use.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8659 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/60-102x64.jpg\" alt=\"\" width=\"1024\" height=\"641\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/60-1024x641.jpg\"><\/p>\n<p><span style=\"font-weight: 400\">Use this way as an alternative to shortcode, as some website owners find it easier working with page builder widgets.<\/span><\/p>\n<h2><strong>How To Export Sliders<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">To export the slider go to Slider Revolution by clicking on the relevant tab from your dashboard menu. All the sliders you have imported or created will be displayed there.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-8660 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/61-102x52.png\" alt=\"\" width=\"1024\" height=\"523\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/61-1024x523.png\"><\/p>\n<p><span style=\"font-weight: 400\">Mouse over the thumbnail of the module you want to export. Click the small arrow in the bottom right corner. Among all appeared options select the Export and click on it.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8661 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/62-23x19.png\" alt=\"\" width=\"229\" height=\"191\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/62.png\"> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8662 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/63-23x30.png\" alt=\"\" width=\"229\" height=\"302\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/63.png\" srcset=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/63-23x30.png 23w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/63-227x300.png 227w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/63-150x198.png 150w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/63-50x66.png 50w, https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/63.png 229w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><span style=\"font-size: inherit\">&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400\">You will see the confirmation dialog which will notify you that the export may take some time. Click on &lsquo;Yes, Export Slider&rsquo; and the download will begin. When the downloading is finished, you will have a .ZIP file of your slider.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8663 stm-blurred-image lazy\" src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/64-41x26.png\" alt=\"\" width=\"412\" height=\"262\" data-src=\"https:\/\/portal.stylemixstage.com\/wp\/wp-content\/uploads\/sites\/2\/2020\/10\/64.png\"><\/p>\n<h2><strong>To conclude&nbsp;<\/strong><\/h2>\n<p><span style=\"font-weight: 400\">Almost all the themes developed by StylemixThemes include the Slider Revolution plugin in the package. We love this powerful software that gives us a chance to make websites more appealing, attractive, and interactive.<\/span><\/p>\n<p><span style=\"font-weight: 400\">We hope our guide helped to understand better the process of building the slider with this amazing plugin. If you are looking for more information please follow the <a href=\"https:\/\/revolution.themepunch.com\/\">main page of Slider Revolution<\/a>.&nbsp;<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">FURTHER READING<\/h3>\n\n\n\n<hr>\n<ul style=\"list-style-type: square\">\n<li><a href=\"https:\/\/portal.stylemixstage.com\/wp\/make-money-wordpress\/\"><span data-sheets-value='{\"1\":2,\"2\":\"how to make money with wordpress themes\"}' data-sheets-userformat='{\"2\":4227,\"3\":{\"1\":0},\"4\":{\"1\":2,\"2\":16750848},\"10\":2,\"15\":\"Arial\"}'>How To Make Money With WordPress Themes<\/span><\/a><\/li>\n<li><a href=\"https:\/\/portal.stylemixstage.com\/wp\/guide-to-w3-total-cache\/\"><span data-sheets-value='{\"1\":2,\"2\":\"w3 total cache settings\"}' data-sheets-userformat='{\"2\":4227,\"3\":{\"1\":0},\"4\":{\"1\":2,\"2\":16750848},\"10\":2,\"15\":\"Arial\"}'>W3 Total Cache Settings<\/span><\/a><\/li>\n<li><a href=\"https:\/\/portal.stylemixstage.com\/wp\/10-captcha-alternatives-to-keep-your-site-spam-free\/\"><span data-sheets-value='{\"1\":2,\"2\":\"recaptcha alternative\"}' data-sheets-userformat='{\"2\":4227,\"3\":{\"1\":0},\"4\":{\"1\":2,\"2\":16750848},\"10\":2,\"15\":\"Arial\"}'>ReCaptcha Alternative<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>FURTHER READING<\/p>\n","protected":false},"author":1,"featured_media":8586,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,3],"tags":[],"class_list":["post-8585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-plugins"],"_links":{"self":[{"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/posts\/8585","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/comments?post=8585"}],"version-history":[{"count":0,"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/posts\/8585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/media\/8586"}],"wp:attachment":[{"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/media?parent=8585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/categories?post=8585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portal.stylemixstage.com\/wp\/wp-json\/wp\/v2\/tags?post=8585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}