* If you’re using an older version of Slider Revolution (prior to v6.0.0), check out our tutorial at this link.

If you want to create beautiful sliders for your website, you can’t go wrong with Slider Revolution. A plethora of powerful features have made this plugin the #1 choice for thousands of WordPress professionals. However, if you’ve never used Slider Revolution before, you might be a bit confused by all the options it has to offer.

Since Qode Interactive has a large number of WordPress themes with Slider Revolution, we’ve created this comprehensive guide to help you get started. We’ll cover everything from the plugin’s installation and basic setup to adding layers to your slides, creating stunning animations, and more.

But before we hit the ground running, we should mention that Slider Revolution isn’t 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 completely free. 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.

We’d also like to mention that there’s a simpler, more customizable and definitely more elegant alternative to the popular Slider Revolution: our own Qi Addons for Elementor 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’s just say that with Qi Addons you get to create advanced slider elements like the Divided Slider Reveal, Hover-Aware Slider or even a Vertical Circled Slider.

If you prefer Gutenberg for editing your website, you’ll be happy to hear we have some terrific slider blocks as part of our Qi Blocks for Gutenberg collection. There’s a simple yet stunning Image Slider and the engaging Before/After Comparison slider. Then there’s an interesting Cards Slider and Device Frame Slider, plus several other modern and strikingly designed slider solutions for your content that will liven up your pages and engage your visitors.

These plugins may even be a better solution since they are cheaper than Slider Revolution and pack much more functionalities besides sliders. Still, we’re here today to walk you through the Slider Revolution setup and use, so let’s get back to it.

In this guide, we’ll cover the following topics:

1. Installing Slider Revolution

2. First Steps with Slider Revolution

3. Creating and Customizing Your First Slider

4. Displaying Your Slider on A Page

5. Adding Slides and Working With Layers

6. Making Sure Your Layers Are Fully Responsive

7. Animating Your Layers

8. Making Vertical Sliders

9. Adding Shortcodes to Slides

10. Adding Buttons to Slides

11. Creating Static Layers

12. Adding Slide Transitions

13. Adding Exit Animations

14. Creating a Parallax Effect

15. Making Layers Change on Hover

16. Adding Frames Around Slides

17. Adding Navigation Arrows and Bullets

First, we’ll show you how to install Slider Revolution on your WordPress website.

1. Installing and activating the plugin

Installing Slider Revolution with Qode Interactive themes

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.

Navigate to Plugins. At the top of the page you’ll see a notification with all the recommended plugins you should install with the theme. One of these plugins is Slider Revolution.

Click on Begin installing plugins.

In the list of plugins, check the box next to Slider Revolution and click the Install button.

Once the plugin has been installed, you will see a notification that says Plugin installed successfully. It’s time to return to the required plugins installer.

Now select the plugin again, and this time click on Activate to activate it.

Your free version of the Slider Revolution plugin is now installed and activated. Once you refresh the page, you’ll see it in the sidebar of your admin panel.

Installing the paid version of Slider Revolution

The process of installing Slider Revolution is not much different from installing any other plugin. Still, it won’t hurt to go through the specific steps.

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 Plugins – Add New.

Click the Upload Plugin button near the top of the screen.

Find the file you downloaded from CodeCanyon and select it. Then click Install Now.

Once the installation process is complete, all you need to do is activate the plugin, and you’re good to go! That was easy, wasn’t it?

2. First Steps with Slider Revolution

Now that you’ve installed and activated your Slider Revolution plugin, you’re 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.

Basic Responsiveness Settings

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’s viewed on.

To set up the basic responsiveness options for Slider Revolution, navigate to Slider Revolution > Globals from your WordPress dashboard.

You will find a lot of settings here, but we’ll only focus on the ones related to making your sliders responsive:

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.

Devices and Their Sizes

Every single device has its own size, represented in pixels. Standard Desktop monitors have a width of 1920px. So, we enter that number into the Desktop Grid With field to ensure that is the maximum width we are working with.

The next field is for Notebook 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’s 1600px.

Now it’s time to set up the width for Tablets, or more precisely, for vertically oriented tablets. Here, we are assuming that the maximum width won’t be above 778px (the width of an iPad).

Quick note – if you want, you can use one width for both horizontally and vertically oriented tablets. In that case, the number you should enter into the Tablet Grid Width 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.

Last but not least, you need to set up the width for Mobile 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 not to go above 500px 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, 52.2% of all website traffic worldwide was generated through mobile phones.

Once you have filled out all the fields, don’t forget to save your changes.

3. Creating and Customizing Your First Slider

Now that we’ve configured the global responsiveness settings, we’re ready to create our first slider. Navigate to the Slider Revolution tab, and click on New Blank Module:

Naming Your Slider

Now that you’re in the workframe, the first thing you should do is give your slider a name. Look for the Module Naming section on the right (under the Title tab). We’ll name our first slider ‘My First Slider Revolution’ – that’s what you need to enter in the Title field. The field below it is reserved for the ‘Slider Alias’. The name of the slider should also go here, only in lowercase and with dashes between the words instead of spaces. You will later use this Slider Alias to add your slider to a page on your website.

Choosing the Right Type of Slider

The next thing you need to do is choose the type of slider you want to create. Take a look at the image below.

There are three types under the Layout tab – Slider, Scene and Carousel.

Slider – you should select this type if you have more than one slide.

Scene – you should choose this type when you have only one slide. If you select the Scene, navigation bullets and arrows will automatically be hidden.

Carousel – 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).

I usually work with the first and second type of slider. In fact, I can’t even remember if I’ve ever needed the third one.

Now that you have chosen the type of slider you’d like to create, there are a few more settings you can customize to make Slider Revolution easier to work with.

Setting a Slider Sizing

The second option under the Layout tab lets you choose a default size for each individual slider. First, you need to decide what you’re 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’ll probably want to choose the “Auto” 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 “Full Width” or “Full Screen”, depending on your specific needs.

Here’s a breakdown of the three available options:

As you can see, Slider Revolution is not reserved just for the top of the page. On the contrary – 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’t go overboard, as it can reflect on your SEO ranking.

Fine-tuning the Responsiveness Options

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.

You will notice that the layer grid sizes are set to Auto Sizes by default for all devices, except for Desktop computers. I recommend changing all of these options by clicking on the switch next to each device.

Now, instead of the auto sizes, you will see grid sizes from the global settings displayed for each separate device. The grid is the area in which your slider layers (text, buttons, etc.) will be displayed. The first field shows the width of the grid (which you already defined in your Global Settings), and the second shows the height.

Let’s assume that you are working with a Full Screen slider. Your slider background is always going to take up the entire visible space on the screen, no matter what you enter in the fields above. However, these fields will limit the size of the grid in which your layers will be shown. 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.

As you can see in the image below, I’ve 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.

I have to note that there is no strict definition for what you should enter in these fields. 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.

Now that you are all set, don’t forget to click “Save”.

Please make sure that you have filled all the required fields. Otherwise, you won’t be able to start editing the slider.

A Few More Useful Settings

You can now head back to the Slider Options panel of your slider on the right. Here, you will see a number of neatly arranged icons containing some more useful options. There are too many settings here to cover them all, so we’ll only go through the most convenient ones.

Under Module General Options > Defaults, you will see that the default slide duration is set to 9000ms. That means that every single slide in your slider will last 9 seconds before switching to the next slide. I personally think that’s too much, and that the slide duration should not be over 4000ms. Otherwise, your users will most likely only see your first slide. I mean, come on, who’s going to wait 9 seconds for a slide change?

Under Module General Options > Defaults > Spinner, you can change the default spinner (or you can turn it off completely). The spinner will be displayed while your slider loads.

Under Module General Options > General > Disable On Mobile, 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).

Under the Module General Options > On Scroll > Scroll Based Features, 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.

The Scroll Based Effects 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.

If you plan on having more than one slide, you can set your navigation in the Navigation Options. Here, you can customize settings for arrows, bullets (mostly used for mobile devices), etc.

4. Displaying Your Slider on a Page

Now it’s time to decide where you want to display your slider. To add a slider to a page, you first need to copy the slider shortcode from Module General Options > Title. In our case, the shortcode is [rev_slider alias=”my-first-slider-revolution”].

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’ve added the shortcode to a page, every change you make to your slider will be visible on that page. Just don’t forget to hit the Save button every time you make a change!

My slider is still blank, since I’ve not added any slides to it yet.

5. Adding Slides and Working with Layers

Once you’ve defined and saved all your slider settings, it’s time to start creating your individual slides. Let’s head over to the Slide Options panel.

You’ll see a lot of options here, but don’t let that scare you off! I’ll go through the most useful ones, so stick around!

If you scroll down your page a bit, you’ll see the slide frame. Your slide and all its contents will be displayed within it. Currently the frame is empty.

Adding a Background Image

If you don’t want your background to stay transparent, you can easily add a background image. In the options panel next to the frame there are many different tabs. One of them is titled Background, and it is selected by default. The Transparent option is also chosen by default.

To add a background image, all you need to do is select Image from the dropdown, and then click the Media Library 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’ve created a Fullscreen Slider, so the size of my image will be (at least) 1920×1100 pixels in order to fill the entire space of a desktop screen.

You can also add an image from an external source by choosing External Image from the dropdown. You should enter the image URL and click the Refresh Source button.

Once you choose an image, it will appear within your work frame.

Below the Source section, there are Image Settings. The first thing that should be set is Source Size. There are different sizes to choose from – our recommendation is to leave the original image size, if you want it to look good.

Next, under BG Fit, you can choose how you want the image to be displayed within your slide – we wanted it to be an actual background, so we chose Cover. You can also choose if you want it to repeat or not – this is useful if the image is smaller than the size of the slider, but is not recommended. The next option lets you choose the position of your image – it is centered by default.

You can now hit the Save button and head back to the page you added your slider to. You’ll see that the image is now displayed in the position you set for the slider.

Don’t forget to press the Save button each time you make a change to your slide! Just to be absolutely clear which button we’re talking about, take a look at the picture below.

Setting a Background Color

If your slider design requires a color for the background instead of an image, you can set that up pretty easily. Just select the Colored option from the Type dropdown in the Source panel, and then click the BG Color 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 Color Hex Value field. You can also play around with the opacity if you like. Setting Opacity to 100% will give you a fully saturated color, while lower values will result in a semi-transparent background. Once you’re done, just hit the blue check mark.

Other Useful Options

There’s 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’ll skip it for now. But I’ll be back with more on that in the near future.

Under On Scroll > Parallax & 3D Settings you can customize the parallax effect for each slide. Just make sure Parallax is enabled in your Module General Options.

If you’d like your background image to zoom in or out, the experts from Slider Revolution have made the Ken Burns effect, which you can turn on and customize in the dedicated Ken Burns panel.

Besides the Slide Options tab, you will also find a number of other settings for customizing your background. In the Module General Options tab you have a variety of options regarding your slide behavior and visibility. Just be aware that if you insert a value in the “Initialization Delay” field, there is going to be a delay before the slide’s background image appears.

You can change the way your slide enters the screen under the Slide Options > Animation > Slide Animation tab. The default animation is Fade. 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 1000ms by default.

Adding Layers to Your Slides

Now that we’ve gone through the basic slide options, we’re ready to start adding layers to our slide. Hop over to the work frame and hover the Add Layer button with your mouse cursor. You’ll see a dropdown with different layer options.

Now let’s add a new image layer. You may wonder why we’d add an image and not text, to begin with. Truth be told, it’s actually a lot easier to work with image layers than with text layers. But don’t worry, I’ll tackle text layers in a separate section below.

So, when you want to add an image layer to your slide, simply click on Image in the Add Layer dropdown. Then proceed to upload the desired image. I’ve uploaded a random free vector image of a circle as a .png file with a transparent background.

Now you can save your slider and check if the image is displayed on the page you added the slider to. I’ve just checked my page, and yes, there’s definitely a circle there now.

Layer Settings

Now, we’ll go through some of the options we have for each layer we add. Next to your frame, you’ll find a number of Layer Options (Content, Style, Size & Pos, etc.). I’ll just cover the basics of these options for now, but you can expect separate articles in the future in which I’ll go through them in detail.

Image Layer Content

Here we have some basic information about the layer. We can set lazy loading and change its source type. Here you’ll also find the HTML tag option, but this setting is not of much importance for the image layer.

The Layer Style Options

The first option allows us to add a layer background. When we click on it, we can choose a color for the background.

In our case, it would look like this.

Next, there are Spacings settings. The first ones are for moving 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 ‘M’.

The next four fields are for transforming the layer. Every layer we add has four sides, and each side can be transformed. Let’s now add a value in one of the fields and see how our circle will react.

I entered 30px in the first field – the field that transforms the top side of the layer. The upper side of my layer moved 30px downward. And now it looks like this:

You can also add a border to your layer. It is transparent by default, but if you want to add it, you need to choose its color and its style, and set its thickness in pixels.

The Layer Size & Pos Options

In this section, you can set your layer’s Alignment, and change its Size. Our layer is by default placed on the upper left side of the screen. This means that the horizontal alignment is set to left, and the vertical alignment is set to top. Layers alignment, both vertically and horizontally, can be changed easily by clicking on one of the alignment icons. I will only change my vertical alignment to the center.

Once you’ve chosen the alignment, you can set the position of your layer more precisely using the Horizontal and the Vertical Offset from Aligned Position options. With the default 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’s save this slide now and check how it looks on the page.

You can also change the layer’s original size. Just make sure the padlock icon is locked, so that your layer changes its width and height proportionally.

The Layer Advanced Options

These options allow us to Rotate a layer horizontally, vertically, and centrally.

The other useful options here let us add shadows to the layers.

The Layer Animation Options

The Animation tab is where you get to animate your layers and set up your appear and exit animations. I always use appear animations, because I think they’re a great way to make the right first impression.

In the Animations 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 Fade-In for all layers. I suggest you go and try some of the other animation effects to find one that suits you best.

The section below is used for Animation Duration, Animation Easing and for defining animation Start. Animation Duration defines how long will it take until the animation is done, while Start defines the duration of time after which the animation will start after the slide loads. The recommended start value is between 100-300ms for the layer you want to appear first. Easing defines the speed at which the animation will progress (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. Go ahead and play around with these settings to get a better feel for them!

As you can see, there are a few more settings in this tab, but we’ll skip those for now, as they require a more advanced understanding of the principles of animation.

The Layer Loop Tab

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’t use loop animations much, but you can play around with them to see if you find them useful. Just make sure to first switch the Enable Timeline Loops toggle on.

The Layer Hover Options

If you plan on having some sort of action when your layer is clicked or triggered in any other way, you probably want to define its behavior on hover. Enable the hover before you start setting it.

The first dropdown here lets you choose the Cursor look on layer hover.

Below, you can set everything related to the layer behavior on hover. This is more useful when working with layers that you created by yourself, within Slider Revolution (e.g. text layers, shapes, etc., as opposed to images you simply uploaded into your slide). We’ll skip these settings for now, as they deserve an article of their own.

On Scroll Layer Options

If you want your layer to move on mouse scroll, you can enable that here. There are three options – Parallax, Timeline Scroll Based, and Filter Effect Scroll Based.

The Layer Action Options

This section lets you make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the action icon to choose the type of action you need.

The first dropdown is where you can choose the type of action that you would like to occur. There are a lot of options here. I’m going to choose the Simple link option, which is located under Link Actions.

Now I can choose the interaction, enter the URL I would like my layer to link to, choose whether I want my link to open in the same browser tab or in a new tab, choose between a jQuery or a Tag Link, and select whether I want search engines to follow the link or not. I also have the option of setting a Delay time between the moment the user clicks on my layer and the moment the link is opened.

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.

The Layer Responsivity Options

Let’s take a look at the Responsive Behavior section now. If you leave the Intelligent Inherit option on, your layer will become proportionally smaller on all devices with screens smaller than the defined desktop screen size. According to my experience, it’s always better to turn this option off, so you can manually define the size for every single device. That way it’s easier to manipulate not just the sizes of your layers, but also their position. The same goes for the Resize Between Devices, Responsive Offsets, and Responsive Children option, which applies automatic responsiveness to any additional content in the layer (raw HTML, other shortcodes, etc.). Once you turned off these options, don’t forget to click on Reset All Values From Desktop button.

If you want your layer to be visible on all devices, then make sure the switches shown in the image below are all turned ON. 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.

The Layer Attributes Options

The Attributes tab lets you add custom IDs and classes to your layers. This then enables you to manipulate your layers via custom CSS. You can also use certain options in the Attributes tab (Rel, Title, Tabindex, and Alt) to enhance the accessibility of your slider and its layers.

Since working in the Attributes tab requires some basic HTML and CSS knowledge, we’ll skip it for now.

Working With Text Layers in Slider Revolution

Now that you know how to add image layers to your slides, let’s take a look at the available options for text layers.

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 – the font 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’re sure of what you’re doing, don’t take too many risks regarding color.

Once you’ve chosen a font and determined its basic style, you are ready to add your first text layer.

First, go to Add Layer, and click on Text. If you want to add a ‘title’ text choose Quick Style Headline, and if you want to add a paragraph choose Quick Style Content. I’ll choose a headline.

A black box will appear. This is where you should enter your text. Everything you type will also be visible in your work frame.

Before you change your text layer’s default settings, hop over to the Responsivity options tab to turn off Intelligent Inherit.

Now take a look at the Style tab. You can see that Roboto is the default font family for every text layer you add. You can choose your preferred font from the dropdown. Just a quick reminder – in order to edit the text layer, you first need to make sure it’s selected.

Besides choosing a font family, you can also determine the font-size, line-height, font weight, and letter spacing in the Style tab. Each of these options will alter the look of your text. So don’t hesitate to play around and find the combination that works best for you.

Now it’s time to change the color of your text. Click on the Color filed to open the color picker tool. It’s up to you to choose the color that fits your visual perfectly.

Once you have determined these basic values, save your slide and see how it looks on your page.

The next thing you should define is the horizontal and vertical alignment of your text layer. A page ruler extension for your browser can help with setting the offset values for your text. If you don’t already have a ruler extension, you can find a great one for Google Chrome here.

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 X and Y offsets should both be 200px.

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’s why it’s smart to measure it with a ruler extension.

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.

It’s interesting to note that 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.

6. Making Sure Your Layers Are Fully Responsive

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’t guarantee full responsiveness. For that, you also need to make sure that each layer in each of your slides seamlessly adapts to all devices and screen sizes.

So, once you add all your slides and layers to your slider and confirm they all look nice on Desktop devices, it’s time to fine-tune them for all the other available devices. Luckily, not all your layers will need editing for all devices. Some of them will look good by default. But we’ll now cover what you can do for those that need to be tweaked.

Desktop Devices

When editing slides in the work frame, you’re primarily setting them up to look good on desktop devices. When you’re certain everything looks perfect on desktop, you can start playing around with layouts for other devices.

To show you how you can make your layers adapt to various devices, I have added all my layers to my slide. Let’s say I want them to look like this on desktop:

Notebooks

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’t have access to at least one device of each type, you can also use the Device Mode option in Google Chrome DevTools.

To activate the device mode, simply press F12 while in Google Chrome and then click on the icon shown below:

Now you can choose the device you would like to emulate from the dropdown. If you can’t find a certain device, you can click the edit button and then select the check mark beside the devices you would like displayed in the dropdown.

I already have some custom devices set up, so let’s see what my slider looks like on those devices.

Here’s how my layers will be rendered on a Mac:

And here’s what they look like on a horizontal tablet:

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’s perfectly fine. But, if you want to change how they render from device to device, you can do so easily. It’s pretty much the same as changing settings for the Desktop. You can modify everything for every single device. 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.

To start editing the responsiveness settings for laptops, notebooks, and horizontal tablets, you need to select the icon shown below:

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.

To change the size of the image layer, you can simply add a different width. The height of the image will automatically be adjusted to fit the width you set.

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.

Vertical Tablets and Mobile Devices

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 make sure the appropriate icon is selected above the work frame.

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.

In my case, I just adjusted the size of the image layer until it was visible on mobile:

Once all your layers are adapted to all devices, I assume you don’t want them to just to stand there, motionless. Read on to learn about creating your first animations with Slider Revolution!

7. Animating Your Layers

We’ve finally come to the most powerful functionality of Slider Revolution – animating our layers. This is where your get to show off your creativity to the fullest.

The Animation Timeline

We can probably agree that it’s 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 Animation Timeline. It can be found right below our work frame.

You’ll see that the default frame start value for each layer is set to 0 milliseconds. This means that each layer will appear onscreen 0 milliseconds after your page loads. The default appearing duration is 300ms, which means that it will take the layer 300ms (or 3 seconds) to go from invisible to fully visible. To change these default options, choose the layer you want to edit and simply insert a different value.

Now, you want to make sure that it doesn’t take too long for your first layers to appear. My recommendation is not to go above 300ms for the frame start value. Also, if you don’t want all your layers to appear at once, make sure to set a different frame start 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’s up to you, but I usually work with values between 500 and 800 milliseconds.

Incoming Animations

Once you have set the frame start and duration values for all your layers, it’s time to choose the type of incoming animation 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 Fade-in. But for the purposes of this tutorial, let’s 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 Short-From-Left. You can also use Long-From-Left, but I’m afraid it is too long by default and doesn’t look so nice unless you edit it with custom settings. So let’s go with Short-From-Left for now.

Now that you’ve chosen your preferred animation type, you can change its easing from the Animation Easing dropdown:

Different easing presets will create different effects, so I suggest you try out a few and see what best fits your needs.

Outgoing Animations

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 make your layers completely disappear from your slide. 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.

The options available for outgoing animations are fairly similar to those for appearing animations. However, to edit the Frame Start and Duration values for each layer, you now have to click on the edit button toward the end of the animation timeline.

Right now the Frame Start is set to 9000ms. This is because the duration of your slide is 9000ms by default. With the Frame Start set to 9000ms, your layer will be visible on screen until the slide changes. To make it disappear before the end of the slide, simply enter a lower value into the Frame Start field.

Now you can choose the type of outgoing animation you would like to use, as well as its easing. This is done in the Animation panel, and all the options are pretty much the same as for incoming animations.

Advanced Options

If you want to customize the default animation presets, you can check out the Advanced section settings below. So, for example, if you think the starting point for the Short-From-Left animation is too short, you can easily change it. Let’s say we want it to start 80px further to the right: all we need to do is input 80px into the X axis field.

If you are wondering what the “Y” 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 diagonally, you just need to insert a value in the Y axis field. If you insert a positive value, your layer will move diagonally up and to the right. On the other hand, if you decide to enter a negative value, the layer will move from down and to the right of the screen.

As soon as you edit one of these fields, you can save this animation as Custom Animation.

Now take a look at the tabs below.

These are useful only for text layers. You can use the Char, Word, and Line tabs to split the animation applied to your text by letter, word, or line.

The best way to see how this option works is to try it out.

The fields that open after enabling one of these let you customize the animation. For now, I just want to change the direction of the split animation. So I’ll choose the Backward option from the Split Animation Text Direction dropdown. This will make my text appear letter by letter, and from the right side of the screen to the left (backward).

Loop animations

Slider Revolution also lets you create Loop animations. This is done in the Loop Layer tab. Here, you will see that Loop Effects are disabled by default.

You can choose from eight types of loop animations: Custom, Pendulum Loops, Effect Loops, Wave, Wiggles, Rotating, Slide and Hover, and Pulse. Besides the Loop Speed and Easing settings, each loop animation has its own set of options.

The Pendulum 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. 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%.

Effect Loops let us choose from a couple of effects for our layer – Grayscale, Blink, Flattern, and Lithing. Each reflects differently on different layers, so you should try them all and see which one fits your layer the best.

The Wave animation makes your layer rotate in a wave like motion. In other words, it doesn’t rotate around its own axis, but instead around an axis outside the actual layer. You can set a Rotation X and Y Point which determines the position of the axis around which the layer will rotate, a Start Angle which determines the starting position of the circular animation, and a Radius, which determines the orbit of the rotation.

The Wiggle loop will make your layer wiggle from side to side – from up to down, from left to right, and vice versa. You can choose the way you’d like your layer to wiggle from the dropdown.

As its name suggests, the Rotating loop makes your layer rotate around the set axis point. However, your layer will not rotate by default. It will rotate and make a full circle if you choose the first item from the Rotating dropdown – the Rotate item.

If you want your layer to move left to right, right to left, up to down, diagonally, etc. you can use the Slide and Hover animation. Here, you can determine a start and end position for the animation in the Start X Offset, Start Y Offset, End X Offset, and End Y Offset fields. If you want the animation to start from is the layer’s initial position, you should leave 0 in both the Start Offset fields. To make your layer move from its starting position, let’s say, 100px horizontally, you need to enter 100 in the End X Offset field. Its best to play around with the start and end offset settings, to get a feel for how they work.

The Pulse animation makes your layer continuously zoom in and out. You can determine 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’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. If you want your layer to zoom in above 100% of its size, just enter a value larger than 1 in the Zoom End field.

Final Thoughts

Well, that’s all for this tutorial. I hope you found it useful. There’s much more to Slider Revolution, and I’ll 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.

If you have any thoughts or suggestions about this article, feel free to let me know in the comment section.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

Intuitive and well designed navigation is the key to a good user experience. This is equally true for all the individual parts of your website as it is for the site as a whole. When it comes to your slider, navigation not only lets your users switch back and forth through your slides, but also lets them know at a glance that there are more slides to look at. So, today, we’re going to take a look at how to add navigation to Slider Revolution.

There are two basic types of navigation for a slider: arrows and bullets. We’re going to be using arrow navigation for bigger screens, like desktops and laptops. We’ll reserve bullet navigation for smaller devices like tablets and phones.

How to Add Navigation Bullets to Slider Revolution

When using a horizontally oriented slider, it makes sense to add arrows to the left and the right side of the screen. To turn on arrows in Slider Revolution, go to Navigation > Arrows and switch Arrow Type to ON.

There are several default arrow styles. To change the look of your arrows styling, check out the Arrow Style dropdown to see what options are available.

Once you decide on the style of your arrows, you can go ahead and customize each arrow separately (left and right). There are quite a few things you can play around with here.

The arrows can be aligned to your slide (Module Dimensions), or to your grids (Content).

Next, you can set the arrow alignment and add horizontal and vertical paddings.

Arrows can also be animated. The default appearing animation is a simple Fade. If you want to change the way the enters the screen, choose a different animation from the dropdown.

You can also change the speed and delay of the animation, as well as hide the arrows on smaller devices. The arrows will be always visible unless you turn ON the switch next to Hide Under. Then, all you need to do is enter the screen size below which you want the arrows to disappear. We normally use the value of 778px. By doing this, we hide the arrows on all touch devices (tablets and mobiles).

The style of the navigation can be customized with ease, and so much so that you can create an entirely original style of you own without any coding knowledge.

Adding Navigation Bullets to Slider Revolution

As we already mentioned, since bullets are smaller and don’t take up so much real estate on the screen, they are mostly used for navigation on touch devices. They serve as a nice, subtle indicator that there are more slides to view.

To turn on bullets in Slider Revolution go to Navigation > Bullets and switch Bullets Type to ON.

Just like navigation arrows, bullets also have a dropdown that lets you choose a variety of styles.

To define the spacing between bullets, simply change the Gap value.

To set the direction of your bullets, choose between horizontal or vertical for the Orientation. You should use the vertical direction when you have a vertical slider. And, in that case, we recommend using only bullets, without arrows. In every other case though, we suggest you use bullets just for smaller devices, with their direction set to horizontal.

To hide bullets on desktop and laptop screens, turn on the Hide over Width option and set the width to 1024px.

You can also play around with the navigation style of your bullets if you’d like to create an original look for them.

In Conclusion

And that’s all there is to it. Now you know how to add navigation to Slider Revolution. You should always try to do your best to customize your navigation arrows and navigation bullets to better fit the style of your website. But even by simply adding the default navigation elements to your slider, you will boost the UX of your site and make it more intuitive for your visitors. If, for some reason, Slider Revolution doesn’t work for you, there’s a perhaps even better option, and that’s Qi Addons for Elementor, our own collection of useful widgets for Elementor users. The collection contains a number of advanced slider widgets, such as the Hover-aware Slider, Animated Device Slider, Numbered Slider and many more.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

The usage of picture frames (or borders) on slides is not uncommon in the design world. They can be used to create visual balance and unity, to draw the user’s eye to key parts of an image, or even simply as a decorative element. Whether you are using frames for a practical reason or just to create a certain stylistic impression, you should know how to add them to your slides. So, today, we’re going to show you how to manually add a frame to Slider Revolution.

There are a few ways this can be done, so let’s dive right in and check them out.

Creating a Frame via Row Settings

If you plan on creating a solid, monochromatic frame, perhaps the easiest way to do so is by adding a border to your slider’s row.

When you add a slider to your page, you usually have to place it inside a row. As long as your slider is the only shortcode or piece of content in that row, you can easily create a frame for it through the row’s settings. This can look really impressive. Just check out the passepartout slider on our Yvette theme.

If you are using Yvette, or any of our premium WordPress themes, you can easily add a frame around your slider through the row settings. There, in the Design Options tab, you will see all the available border settings. The CSS box lets you set a width for each border separately, while the options to the side allow you to modify the color and style of your border.

How to Add a Frame as a .png File in Slider Revolution

If you would like to create a more elaborate frame, something that isn’t just a solid block of color, then you will have to add it as a separate layer in Slider Revolution. However, this isn’t quite as simple as it may seem. In fact, there are a few pitfalls you want to avoid.

For example, if you download a frame that’s a single transparent .png file and then just add it as a new layer into your slider, you risk two things happening. Firstly, the slider will recognize the frame layer as an entire new image that’s covering all the other layers in your slider. This means that any buttons, links, or other elements that are below the slider layer, won’t be clickable and won’t work. Secondly, since your slider will be viewed across all sorts of screen sizes, you risk your frame not being visible, or appearing skewed, due to it having different proportions from the device it’s being viewed on.

Luckily, there’s a solution for this. Instead of importing your frame as a single .png file with a transparent center, all you have to do is cut it up into 4 separate files: one for the frame’s top border, one for the bottom border, one for the left and one for the right. Just make sure that you use the proportions for your main stage (the largest dimensions your slider will be displayed at) when splitting your frame into four parts.

Then, you can import the four sides of the frame as separate layers and place them around your slide. If you have more than one slide in your slider, you can set these four layers to be static layers, so you don’t have to add them for each slide separately.

The most important thing you need to take care of is setting the correct alignment for each side of the frame. Make sure the top border of your frame has its alignment set to “top”, the right border to “right”, etc.

This way, you’ll make sure that each side of the frame is always placed correctly and stuck to the correct side of the screen.

How to Add a Frame to Your Image in Photoshop

There’s one more way you can add a frame to your slides in Slider Revolution, and that’s by making it a part of your actual image. To do this, you’ll need some basic photoshop skills, but it’s actually really simple.

First, open the image you’d like to add a frame to.

Then open the transparent .png file that contains your frame image. Go to Select > All (or press CTRL + A on your keyboard), and copy the frame.

Now go back to your original image and paste the frame inside it. It will be added as a new layer.

If you need to adjust the frame’s size to make it fit the edges of your image, just go to Edit > Transform > Scale and you’ll be able to drag and drop it to the required size. Once you’re done, just save your new image and import it into Slider Revolution.

In Conclusion

Frames can be a great visual tool, wherever they’re used. But it’s especially important to know how to add them to such a prominent part of your site as your slider. With these three separate methods of adding frames to Slider Revolution in your toolbox, you can create beautiful borders for your slides and be certain that they’ll always display perfectly across all devices and screen sizes.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

Hover effects are one of the staples of good UX. When an element changes on hover, it serves as a clear indication that an action is required, performed or completed. In sliders, we usually make layers change on hover when they come with some sort of implied or required action. A good example are buttons, where the change on hover indicates that the action (clicking on the button that activates a link) is performed. In addition to buttons, with Slider Revolution you can make other layers, like text, change on hover as well. In fact, today we’ll be showing you how to add Slider Revolution hover effects to text.

How to Add Hover Effects in Slider Revolution

The first thing to do is to turn the layer hover on. Select the layer you want to add the effect to, and, under Layer Options, click on Hover. Click on the Enabled switch to turn it on.

Underneath you’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.

Hover Settings

The first thing you can set here is the Cursor. The dropdown menu contains a couple of different options for it. Auto and Default are the same ones, and choosing them will not reflect on your cursor in any way.

The Crosshair and Pointer concern the shape of your mouse cursor on screen. These are both pretty conventional.

You can find a couple more cursor styles here, some of them a bit unusual, but each indicating the sort of action your layer has when triggered. For example, if your layer is linked to a help or support resource, you can go with the Help cursor.

Pointer Event is set to Auto by default. The option None is used when there is no linked content behind the layer.

Hover Transform

Moving on to other settings for the layer behavior on hover, we have Hover Transform, which you can set to your liking. There are some things to keep in mind here, though. For instance, when the layer changes on hover, the transition shouldn’t happen suddenly. It is always much better when the transition occurs with a bit of delay. The delay is by default set to 300ms, so you can leave it like that if it works for you, or assign it a different value.

You can also set the easing for the transition, choosing from several preset options.

If you don’t want your text layer to have the same size and style as the initial look, you can change everything, from perspective, through rotation, to size.

Hover Font, Border and Filter

Font Hover Style allows us to change the color of the text on hover or add an underline, overline or line-through.

You can also add a background color to your hover.

There is also the possibility of adding a border around the text and specifying the color, choosing the style, and entering the border thickness value expressed in pixels.

The border angles can have a radius, also specified in pixels.

One more thing that can be added to your layers hover is Filter. This basically means blurring up the layer to a certain, specified extent. This too is expressed in pixels: the higher the value, the “thicker” the blur.

In Conclusion

That’s pretty much all there is to creating Slider Revolution hover effects. Like basically anything else about this plugin, this process too is very simple and straightforward. The plugin lets you add this dynamic effect to your slides and customize the way it will play out, assuring the resulting effect clicks perfectly with the rest of your page.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

Parallax is a popular effect that adds an impression of depth and dynamicity to the visual content of your website. There are a lot of great premium WordPress themes with parallax effects integrated and you’ve probably seen the effect a thousand times across the web. But you might have wondered how it was made.Today we’re going to talk about using the parallax effect in Slider Revolution sliders.

What is Parallax?

Parallax can roughly be defined as an effect in which elements in the background and those in the foreground move at different speeds when the user scrolls, creating an illusion of depth. Specifically, elements in the background are set to move slower. Below you can see an example of parallax from our Aoki theme.

There are different ways to achieve this effect, and if you’re already working with Slider Revolution you’ll be glad to hear that this plugin packs the required functionalities for creating parallax.

How to Enable Parallax in Slider Revolution

First things first – head over to Slider Revolution and turn the parallax on. Go to Module General Options > On Scroll > Scroll Based Features > Parallax and turn the Parallax Enabled switch to On.

The plugin offers a number of different depth values so you can pick the one that works for you. If the value you’re looking for is not here, you can enter your own, as shown below.

How to Add Parallax to Background Images

To add the parallax effect to your background image, go to Slide Options > On Scroll > Parallax & 3D Settings, and choose the preferred depth from the dropdown.

When it comes to picking the depth, there’s no golden rule. We suggest you try out different values to see how they work on your page. Different depths will create different effects, so try them all out until you find the perfect effect for your page. If you don’t feel like experimenting, the ones in the middle are always a safe choice.

That’s pretty much it for the background.

How to Add Parallax to the Layers

The Slider Revolution parallax effect is not reserved just for the background images. You can also use it for the individual layers inside your slider. With this effect, you can give your users an illusion they are controlling parts of your slider by moving their mouse. This is a really neat effect, and it’s very easy to set up.

Select your layer, go to the Layer Options > On Scroll > Parallax & 3D tab, and choose the desired level of depth.

And that’s really all there is to it. The result will be the layer with parallax that activates as the mouse moves.

In Conclusion

As we saw, whether we are talking about individual layers or background images, adding the Slider Revolution parallax effect is extremely simple. Bear in mind, though, that not every slider needs parallax. Very dynamic sliders with lots of animation will probably do better without this effect, as the result may turn out to be too busy or cluttered with motion. For simple sliders, though, parallax can be just the thing you need to spice up your page.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

When it comes to sliders, appearing animations are a classic feature. In fact, these first-impression animations are among the top reasons for the popularity of the Slider Revolution plugin, since it’s very easy to create them, and they always turn out looking nice and natural.

Appearing animations are, as the name suggests, animated layers that appear or come into the slide, as in the example from the Aoki theme.

But, besides the appearing animations, there’s another important type of animation that can get you a long way – exit animations. As you can see from the example below, these animations feature layers that exit or disappear from the slide. They may not be as popular as appearing animations, but in some cases they can be extremely useful in giving your slider that perfect final touch and leaving your visitors with a strong positive impression.

However, there are a few things to keep in mind when creating a Slider Revolution exit animation, and today we’re going to go through them.

The Number of Slides

This is fairly obvious but it doesn’t hurt to reiterate it: exit animations only work for sliders that have more than one slide, especially if you plan to have them on all layers. Adding an exit animation to a single slide will leave you with a blank page once the animations are done, and nobody wants to see a blank page. So, in order to use exit animations, you need to have more than one slide.

Background Color

If your background color is white, you should be careful with the exit animations. Besides looking clean, the white background might also give the slider a somewhat empty look. If you don’t have to, avoid using exit animations on a white background.

Frame Start

The average slide duration should be somewhere between 3000 and 4000 milliseconds. Let’s say that the duration of your slide is 3500ms. If you want your exit animation to look natural, it shouldn’t start too early. To set its frame start, go to Layer Options > Animation and select Anim To under Keyframes.

The value should be somewhere near 3500ms, but you probably won’t go wrong if you set it to start from 3000ms.

Duration

The duration of your Slider Revolution exit animation depends on the effect you’re trying to achieve. Logically, if you don’t want your layer to disappear too early, you should insert a higher value. If you have a number of layers, you can experiment with different duration values. But, if you only have a few layers, it’s probably best to go with larger duration values, so the layers stay on your page for a bit before disappearing. That way you’re making sure your visitors have enough time to soak in the information presented on the layers.

Animation Type

If your appearing animation is, for example, Short-From-Bottom, it’s best to use the opposite type for your exit animation, such as Short-To-Top or Long-To-Top. You don’t want your layers exiting from the same side they came in from.

In Conclusion

Exit animations can be a valuable addition to your pages, but not always and not at all costs. Today we discussed some of the factors you might want to keep in mind when creating your exit animations. Additionally, these factors can help you decide whether to use this sort of animation at all.

Also, note that you don’t have to use exit animations on all of your layers. You can combine your animations and, for example, use appearing animations on a couple of layers, exit animations on a couple of others, and have a few static layers too.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

Slider Revolution allows for a lot of creativity and versatility in terms of style. You can create minimalistic, toned-down sliders or busy ones with a lot of layers. The second type is usually more interesting and dynamic. But if you have a slider made up of really good images but no additional layers, you can still make it pop. And that’s precisely where slide transitions come in.

About Slide Transitions

In Slider Revolution (which has some excellent options in this department) slide transitions are used to animate slides consisting of background images and a few (or no) additional layers. A slide transition is, in fact, the effect that appears when one slide moves to make room for the next one.

These transitions can help you define the rhythm and the feel of your sliders, as they can be slow and subtle or fast and bold.

Let’s take a quick look at how you can set up Slider Revolution slide transitions.

First Slide Transition

Slider Revolution gives us an option to choose a separate transition for the first slide that comes in, and different ones for the slides that follow. This helps set the first slide apart as a sort of introduction. If you choose a “right to left” slide motion for your background images, then your first slide should have a different transition direction. If you leave the same setting for the first slide, you will have a blank page before your first background image slides in from the side. So, for the first slide transition, it’s always recommended to use a simple Fade In animation. To set this option, go to Module General Options > General > First Slide and set the Diff Anim to On.

In this example, we used the Passepartout Slider home from our Yvette WordPress theme, leaving its default values for Transition Type, Transition Duration and for Transition Slot Amount. You can, of course, change these to fit your website style. Just don’t set too high values for the transition duration, to avoid long loading time for your first slide image.

Single Slide Transition

After you have taken care of your first slide, you can make Single Slide Animations for every single background image of your slider. The one that you set for the first slide is going to appear the second time the slide shows up (in case, of course, you have chosen a different type of animation for the first slide transition).

You can go with the same animation for all slides, or you can set a different kind for each. Go to Slide Options > Animation > Slide Animation and click on the big blue button to open different transition animations.

Various transition types are available, and you can select your preferred type and choose the animation from the additional dropdown.

We’ve decided to go with the same animations for all slides, and this is what we used. For the type, we opted for Slide Over, and for the way it appears we chose Slide Over To Left. Its other default options seemed like a good fit, so we left those as they were. Slide Over means that your next image will always slide over the previous one, and in our case, it will appear from right to left.

And here are the additional settings for the transition. You can change its speed and easings.

After setting everything up, his is what our transitions look like:

Wrapping It Up

Slide transitions represent an important element of every slider, so it’s highly recommended to think them through well and set them to fit your website style and atmosphere. As we saw in this article, there are certain practices that should be observed. For instance, your first slide should have a different transition effect compared to the rest, and the duration of the transition shouldn’t be too long. Slider Revolution offers tons of options for customizing this effect, and we recommend you experiment with them a bit until you get the perfect result.

If you, for whatever reason, don’t wish to use Slider Revolution, there are some excellent alternatives, such as the Qi Addons for Elementor plugin. This versatile collection of widgets includes several slider widgets that come with interesting transition effects, such as the Divided Slider Diverge, Animated Device Slider or Divided Slider Reveal.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

One of the best things about Slider Revolution is that it helps you streamline certain processes that might otherwise take up too much time. One such process is adding static layers – elements that remain the same throughout all slides.

Let’s say you want to add a button that will appear on each slide in your slider. The images change, even the text may change, but your button stays the same. That button is not added manually to each slide – instead, it is added as a static layer using Global Layers.

What Are Static Layers?

In short, Slider Revolution static layers are layers that appear on all slides in a slider.

Our Aoki theme has a great example of a static layer created using Slider Revolution. The smartphone image was added as a static layer, with no animations. While everything else on the slider changes and slides in and out, the phone stays put throughout the slides, creating an interesting effect.

About Global Layers

Global Layers is an option that allows users to add static content to each of the slides in a single action, without having to repeat it. Let’s say you have a slider with the same text appearing on each slide. Images change, but the text stays the same. Adding the text layer manually to each slide (whether you type it in each time or copy/paste it) is rather time-consuming, and there is a chance your slides won’t turn out identical, ruining your slider.

But if you use Global Layers instead, you can create a single static layer with this text. Such a layer will then appear on all slides and you won’t have to repeat the process.

Let’s see how this feature works and how you can use it on your sliders.

How to Add a Static Layer

In your Dashboard, go to Slider Revolution. The feature we’re discussing today is located under Slides > Global Layers.

This would be a good time to point out that the layer you add as a static layer will by default appear in front of other layers. But, depending on your needs, you may want it to come in behind. To change this, navigate to Z position in Slide Options > Global Layers. Here, you can send the layer in question to the back.

Note that your global layer set to “back” is not going to be visible if your other slides have any sort of background (colored, background image…). This option only works with sliders with transparent backgrounds.

Here you also have the option of choosing whether you want the Overflow of your static layer to be Visible or Hidden.

Another thing you can decide here is when you want your static layer to appear (on which slide, to be more precise). It can start from the first slide, or from the second or third, and so on. You can also make it stop (or disappear) on the second, third, fourth slide, etc. That way you can, for instance, have the same layer on two out of three slides.

Everything else is pretty much the same as for any other layer. You can (and should!) make your static global layer responsive for every single device, and you can even choose to hide it on certain devices. You can link it, animate it, and so on.

In Conclusion

You can play around with the Slider Revolution static layers to make your sliders more interesting and engaging, or you can keep them strictly functional, with social icons, text, links, etc. It’s completely up to you. What’s important is that you won’t have to waste time copying layers from slide to slide, thanks to the Global Layers feature.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

Whether they’re calls to action, parts of the user interface, or simple links, buttons are an essential element of any website. When designed with care and consideration, they can help guide users through your site and improve the overall experience of your visitors. But besides knowing how to design an effective button, you also need to consider where you position your buttons. And an above the fold slider is always a good choice for the placement of any important website elements. So, in today’s tutorial, we’ll show you how to add buttons to Slider Revolution. This can be done either by adding a button shortcode to the slider or by creating a new button layer. We’ve already covered how to add shortcodes to Slider Revolution in a dedicated article, so make sure to check that out if you’re interested in adding other shortcodes to your sliders.

You can also check out our video on how to add buttons to Slider Revolution:

Or, if you prefer a step-by-step text guide, read on.

Adding a Button Shortcode to Slider Revolution

Adding a button to your slider via shortcode is pretty simple. But before you add the actual code to your slider, I recommend you ‘build’ a button on a test page, and make sure that everything looks how you’d like it to.

For the purposes of this tutorial, we’ll be using the Evently WordPress theme. We’ll build our button with the theme’s custom button shortcode.

In the shortcode’s General settings, you can see that we have various customization options. Exactly how you set the options for your button will depend on the theme you’re using and the button style you’re going for.

This theme’s button also has Design options so you can ‘design’ the button on your own. You can pick the initial and hover colors for the button’s background, text, and border, as well as choose a font-size, font-weight, and customize the button margin and padding.

Once you have defined the look of your button, switch to Text editing mode and copy the button shortcode. In my case the code is [mkdf_button size=”small” text=”Purchase” target=”_blank” icon_pack=”” font_weight=”700″ link=”https://evently.mikado-themes.com/” color=”#ffffff” hover_color=”#ffffff” background_color=”#356bf8″ hover_background_color=”#0141f5″ border_color=”#356bf8″ hover_border_color=”#0141f5″ font_size=”13″ padding=”16px 46px”].

Now, go to your slider and add a simple text layer. Then paste the code you previously copied into that layer. It will show up in your work frame as text.

However, when you save your slider and navigate to the page it’s placed on the button should display correctly. Now you can play around with the button’s position, responsiveness and animation.

Adding a Button Layer to the Slider Revolution

Maybe you’re not a fan of the design of the buttons that came with your theme. Or maybe the theme doesn’t have a predesigned button shortcode at all. Whatever the reason for your decision to create your own button in Slider Revolution, you will now learn exactly how to do that.

First, add a button layer to the slider workframe.

When you add the button, it will appear as text in your workframe, until you customize it.

On the right side of the screen, you will find a lot of predesigned button styles, and you can simply choose the one that fits your website style.

Beside these common button styles, you can also go with something a bit different, like play buttons for example.

Furthermore, you can add a shadow effect to your button.

Once you have defined the basic button style, you can go and change its advanced settings to better fit your website’s look.

Customizing the button is the same as customizing any other layer from the Layer Options. Everything you need is over there, from changing the button’s initial look, to change how it’ll display on hover, and adding animations and easing to it.

And that’s all there is to it. Once you’re done with setting up your button layer, you can work on more advanced options like its responsiveness and incoming animation. Here’s an example of an incoming animation from the Evently theme:

Make sure you check out our whole Slider Revolution series of articles to learn more about animating your slides and making your layers responsive.

In Conclusion

Whether you create your button as a shortcode or via a Slider Revolution layer, you can easily customize its styles and try out different text to see what works best for your website visitors. But now that you’ve learned these two extremely simple ways to add buttons to Slider Revolution, you can make sure that each of your slides has a call to action or a link that will let your visitors know what you’d like them to do or which page on your site you’d like them to visit next.

This article is part of our ongoing series of Slider Revolution tutorials. You can find all the articles from this series in our Comprehensive Slider Revolution Guide.

One of the great things about WordPress is that it uses these little things called shortcodes, which help users add all the amazing elements to their website. They are handy, light, easy to use, and extremely important for any WordPress admin. So today, we’re going to talk about how to add shortcodes to Slider Revolution.

What Are Shortcodes?

In WordPress, shortcodes are little pieces of code that can be placed in your website’s backend to add a certain element, functionality or design feature. They can be used to add galleries, videos, layout elements, page sections with icons or illustrations, infographics like pie charts, counters, etc. Of course, they can be used for sliders, as well. Premium WordPress themes usually feature a great selection of custom shortcodes that users can add to their pages – or sliders – in just a few clicks.

Why Add Shortcodes to Slider Revolution

Slider Revolution has almost endless creative possibilities. Still, sometimes it’s easier to just copy a previously styled shortcode to your slider than it is to build the layers all by yourself from scratch. Just think about it: when you want to create a complex element in Slider Revolution, you can do so using multiple layers that overlap and come together to create that element. However, this also means you have to animate every single layer separately, even if you want them all to have the same animation. If, on the other hand, you use a previously stylized shortcode and add it to the slider as a layer, you won’t have to go through all that hassle. It’s clear that this method is a massive time-saver, so let’s check out how to add shortcodes to Slider Revolution.

How to Add Shortcodes to Your Slider

Before you get started, you should, obviously, choose the shortcode you want to use and test it out, just to make sure it makes a good fit for your needs. Access the shortcode in your backend and insert it in some random test page. You can then copy it using the Text editor mode and paste it in your slider – but more on that later.

Our Goodwish theme can serve as a good example of using shortcodes in sliders. Specifically, the Ecology Home, as seen below:

This sort of thing could certainly be built using shortcodes on the page, without using the plugin, but we wanted to animate it and we found Slider Revolution to be perfect for this.

We can see that the left side of the slider features some text and a CTA button (adding buttons in Slider Revolution is another straightforward process). On the other side, we have an infographic element with a animated counter. This was added using our custom Pie Chart shortcode, combined with some text above it and a rectangular shape for the background. An element like this can be created in Slider Revolution layer by layer, using one layer for the thin circle, another layer for the bold one, a layer for the percentage and one more for the title text below.

So not only would we have to add four different layers, but we would also have to animate them, one by one. The Pie Chart shortcode, however, has its own animations, so when you insert the shortcode into the slider workframe, you get all the functionality along with it. It comes with basic/general options like the Type of Central text where you can choose between a percentage and a title; below that we have a field for the value of the percentage, and the third one is for setting the title below the circle. If you don’t want to keep the predefined style, you can choose your own title tag. There’s also an option for adding text, but in our example the slider didn’t use any.

In the Pie Charts shortcode, there is a separate “Design Options” tab. This is where you can choose the preferred colors for the element. You can also change the sizes and the margin below the chart if you don’t like the default settings.

Once that you have defined all the elements of your shortcode, and also checked it on the live page, you can copy the code by switching to the text editing mode. In our case, the code is [edgtf_pie_chart type_of_central_text=”percent” percent=”90″ title=”Raised So Far” active_color=”#ffffff” inactive_color=”#f6cd7d” title_color=”#ffffff” percent_color=”#ffffff”].

Now is the time to add the shortcode to the slider. Simply paste it in a text layer in Slider Revolution and set the layer options like you would for any other layer.

And that’s pretty much all there is to it. The shortcode in the text layer transforms into the infographic element from our example in the Goodwish theme, and any other shortcode you decide to use will do the same.

In Conclusion

Adding shortcodes to Slider Revolution sliders can be immensely helpful in cases like the one we discussed today. As we saw, it saves you a lot of time you’d otherwise be wasting on creating separate layers, plus you get full control of the stylization and customization. All you need to do is find a shortcode that works for you and tweak it a bit to fit your needs.