Skip to Main Content

How to configure the WordPress Slider Revolution plugin

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

You probably know slider Revolution, it is one of the most downloaded premium WordPress plugins on CodeCanyon. It is also the most recommended for people who want to add a slider (slideshow) on their website or WordPress blog.

It is a plugin available on CodeCanyon.com. Remember, we introduced you rather how download a plugin on this platform.

So the first thing is download, install and activate it.

If you have never installed the latter, find out How to Install Revolution Slider on WordPress.You can also discover this other detailed and quite complete tutorial.

Recommended.

How to configure slider Revolution

Slider Revolution offers basic settings. You must first access the home page of the plugin, through the menu " slider Revolution »Available on the left side menu of your dashboard, after installing and activating the plugin.

access revolution slider.jpg

This will redirect you to the Slider Revolution plugin dashboard. Then we will configure the plugin. You must then click on the link " General settings Located in the Slider Revolution submenu.

general parameters resolution slider.jpg

Clicking on it will bring you to a new page. This page contains a few options, including:

  • The roles that have access view plugin permission »
  • Loading plugin resources everywhere " on Or only on the pages that use it. Loading resources on all your pages can slow down your website.
  • You can also integrate the plugin's resources on certain pages by adding the identifier of each page in the " Pages to RevSlider includes libraries ».
  • For a better rendering, you can choose to load the plugin resources after the page is displayed with the option " Inset JavaScript into footer ».
  • You can activate the options for exporting the slider data to be used on several other websites.
  • The last option concerns the slider activity reports.

setting revolution slider general parameters.jpg

Default settings are acceptable. But you can customize these as you want. Don't forget to click on " Save settings »To save your settings.

Return to « slider Revolution Because now we are going to create a new slider.

access revolution slider configuration slider.jpg

How to create a slider with the Revolution Slider plugin

Revolution Slider is very flexible and adapts to just about any type of slider, from the simplest to the most complex with layers (this is a very interesting feature).

On the new page, you can notice that there are two main columns. This page must be considered as the settings page for the new slider. It is not possible from this location to add images and texts. However, we are going to modify some settings of the slider.

Discover our 10 best premium WordPress plugins to create sliders on your blog

On the "Param Slider" section

We have several required fields that must be completed, including:

  • Title
  • The alias that will be used on the shortcode. You must necessarily provide an alias.

title shortcode revolution slider.jpg

There are several types of slider achievable with slider Revolution:

  • You can choose to display the articles as a slide, in particular by defining a limit of the results, by modifying the display order, by choosing a template, etc ...
  • Choose particular articles, specifying their identifiers
  • Choose the gallery mode for the slider, which will allow us to create more complex and beautiful slides.

slider revolution type selection slider.jpg

The following option allows you to modify the layout of the slider: fixed, personalized, auto responsive, full screen. In addition to these options, there are those for grid sizes and layout dimensions.

size configuration revolution slider.jpg

These are the options in the first column. The second column offers several other options. Among others we have: The duration of each slide, which by default is 9 seconds.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Random display (shuffle Mode)

general parameters slider revolution slider.jpg

The Layout & Visual section

This section groups the options on the configuration of the shadow, of the background in the “Appearance” sub-tab. You will also find a "Spinner" tab, which allows you to modify the animation during the loading of the slider, the "Mobile" tab which allows you to determine how the slider is displayed on mobile and the "Position" tab which allows you to configure the location of the slider in relation to the content.

layout & visual revolution slider.jpg

The Navigation section

The navigation tab is subdivided into several sub tabs which allow you to configure various aspects of the navigation of the slider. For example, you will have the “arrows” tab which allows you to choose the type of navigation button between the sliders (you can activate or not the arrows). With the "Chip" tab, you also have the possibility of configuring the navigation chips, with the "Tabs" tab which will add a tab slider effect and so on.

navigation tab revolution slider.jpg

Configure the "General Parameters" animation conditions

Offers options on slides, for example, you can define that the slider will stop automatically after a particular slide " Stop After Loops »Or choose the position of the slide bar (the progress bar allows you to see how long a slide takes before another is displayed).

configuration animation slider revolution slider.jpg

These are the first sections of the plugin and the ones you'll use the most. You can use more options to add more functionality to the slider.

Discover How to Create a Pro Web Page with WPBakery and add to it a beautiful Slider.

Once it's done, save the slider below using the " Save settings ».

register slider revolution sliders.jpg

After clicking on " Save settings », You will be redirected to the slider creation interface. Which will create an empty default slider.

slider creation interface.jpg

How to add a new slide to a slider

If you don't remember what this is, in a previous post I defined a set of WordPress technical terms, including « Slider "and" Slides ».

Before the interface for modifying the slider options, you will see a section with 3 zones by default where you will find the last one with the label " Add Slide". By placing the mouse over it, it will display additional options. Choose Add Empty Slide.

add a slider to a slider.jpg

Remark : Any new slides you create will be added to this bar. Each Slide created will offer you additional management options: Delete, Duplicate, Add to template.

The interface of a slider consists of:

  • Advanced slide options
  • From the slider design interface (creation interface)

Advanced options interface

These options are organized into several various tabs. The main background section allows you to configure different aspects that affect the slide background. For example, you can choose to use a YouTube video as the background.

background video revolution slider.jpg

The General Parameters tab allows you to configure elements such as the duration of the slide, various events that will cause the slide to pause (stop the animation).

general parameters revolution slider.jpg

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

The thumbnail tab allows you to choose a preview for the created slide. This will be used if your slider offers slide previews. 

creation vignette revolution slider.jpg

The slide animation tab allows you to define which is the entry and exit animation of the slide. You have a wide choice among the options available.

choose animation slide revolution slider.jpg

The link & seo tab allows you to modify some HTML attributes of the slide. In principle, you will not need to use this tab often.

Revolution Slider design interface

The design interface is that staging location where you will do your composition. It consists of a surface composed of white and gray squares, which constitute the working super (where the different elements will be placed).

interface design revolution slider.jpg

What you need to know about layers

Each object placed on the composition interface constitutes a layer. These layers can be overlaid on top of each other, just like you can with sketches. The layer can therefore consist of an image, an html code, a video, a shape, an object and much more. You can add a layer hovering over the "Add Layer" button which gives you more options.

browse a layer revolution slider.jpg

If you click on "Text / html", this will add a text zone on the design interface that you can customize (add text, change the font or move).

add text revolution slider.gif

Each added layer can offer different options. Usually to access the options of a layer, just double-click on it. We will now add an image.

add image revolution slider.gif

Each layer has its own options. These options are the bar located just above the design interface.

option for layer revolution slider.jpg

These are tabs that offer advanced options. For example, if we want to change the animation of the layer, we have to go to the animation tab and choose an input and output animation as follows.

choose an animation for a layer.gif

Each tab has its own options. By taking a few minutes, you will be able to understand how most tabs work.

That's pretty much all you need to know about setting up the WordPress Slider Revolution plugin to get started. We will come back later to show you more advanced techniques.

But before we leave you, we would like to offer you 3 other premium alternatives designed to help you create sliders on your website.

1. RoyalSlider

The most downloaded slider on CodeCanyon, Royal Slider comes loaded with irresistible features. Used by companies as diverse as Coca-Cola, Ralph Lauren, and Land Rover, this plugin does just about everything you might expect from a slider. The most attractive feature is native full screen support.

Royalslider touch content slider for wordpress

Perfect for displaying high resolution photography. This plugin will certainly impress your visitors with its professional features. Features include: the ability to create multiple sliders with different styles per page, support for touch navigation, responsive design, vertical or horizontalAminiature, chips or tabs for navigation, and more.

Download | Demo | Web hosting

2. Slider Pro

The Slider Pro solution offers you an all-in-one platform to help you create and edit slides or sliders that will appeal not only to bloggers, but to those who do not just publish articles.

Slider pro responsive wordpress slider plugin

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

The features we found most interesting are among others smooth animations built using CSS3, a set of animated layers for overlaying your images, a collection of stylish effects that make the slide stand out from the rest of the world. page, the ability to scroll through all slides with infinite scrolling (so you can add as much content as you want), great SEO and others.

Download | Demo | Web hosting

3. WP Slick Slider Image Carousel Pro

If you're an avid follower of the Visual Composer suite, using the WP Slick Slider plugin is an option you'll need to consider. With almost 100 predefined templates, you will definitely find what you are looking for without coding anything.Wp slick slider and image carousel pro

This is an option to take really seriously, especially for users of Visual Composer - WPBakery -.

Its features are among others: a mise fully responsive page with drag-and-drop support, a cshortcodes builder, theupport of the RTL and the multilingual, ofagnificent design, and Much more.

Download | Demo | Web hosting

Other recommended resources

Here are some resources we recommend:

Conclusion

We hope this article has helped you set up the premium WordPress Slider Revolution plugin. If you have any questions, do not hesitate to leave them in the section Comments. And if you liked this article, share it on your different Social networks

This article features 74 comments

  1. Hello,
    On a slider, I would like to remove the small logo that encourages scrolling (white oval with 3 pts inside) it ends up on a thumbnail to click, suddenly, it is not very clear for the browser!

    Thank you

    Walter

  2. Hello,
    I'm having trouble making my slideshow on the site homepage visible in other languages. I know how to translate in the plugin etc. but i am wondering why the slideshow does not become visible in this language on the front of the site itself.

    Thank you in advance!

  3. Hello,
    I updated WP to 5.1.1. and i just wanted to add a new slide and unfortunately it is not showing correctly. Instead of a chart, I have dimensions, filename, and other settings, which redirects empty slide jobs, but there is no chart. And the name of the file itself precedes the text "data-lazyload", what went wrong? How can I fix it?

  4. Hello. Thank you for this article. But I am looking for something that I am not sure I saw in the article, namely, how to create an article slider Thanks in advance.

  5. Hello,

    On the site I manage, the pluggin is already well installed. The problem I encounter is in the order of my slides… It is a priori possible to drag them relative to each other to change the order. I thus manage to drag them but once "put", the # slide number remains the same and on recording they go back to the initial order. Do you have a tip to prevent me from having to delete all my slides every time I want to put one between two others. Currently I use the “duplicate” button and I recreate my slide almost entirely but it is not really practical… Thanks in advance!

  6. Hello

    I created a wordpress carousel for each category of images but how do I get out of the carousel? Do you want an x ​​to close the site home?

    thank you in advance

  7. Hello,
    I want to put the slider in the header, but I can not insert it on the homepage, because I myself created my homepage, so it does not appear if I put it in the index, (but if I put it in the content page, it appears, but not in the header).
    I'm in local
    The code used:: home1 for the slider, home, the name of my homepage
    And the theme used: nature-bliss
    Thanking you

    1. Hello,

      I do not quite understand what you did before. is this the blog page that host? Did you add the slider's shortcode? IF you use visual composer, then you can simply add its widget.

      1. Hi,
        Thank you for your reply.
        If I put my code in the index.php of a revolution-slider slider, it doesn't work. If I put it in the header, it is displayed on all the pages, while I ask it to be displayed in my home page (this page, I created it like all the other pages)
        Here is my code if it shows up:

  8. Hello

    Is it possible to put vertical and horizontal images by just mixing resizing of vertical ones so that they are not cut off? For example, if I have horizontal images of 1200 × 800px, the vertical measures the same, but otherwise 800x1200px is cut off.

    Grazie anticipatamente

  9. Hello,

    I have set up the Revolution Slider on the home page of my site however the bullet points are not visible. I have however activated them in the parameters, they appear in the preview but not on my site. Do you have a solution ?
    Thank you in advance,

    Lucia

          1. As I told you, if everything has been configured correctly, it is likely that a CSS style (either from your theme or from another plugin) conflicts with Revolution Slider, and hides the buttons you want to see. appear. Solving the issue is a bit technical, as you actually need to know which CSS style applies to slider. From there, you'll know what's preventing the button from showing. You will also know whether Revolution Slider displays these buttons or not.

  10. Hello everybody

    I am using revolution slider to display articles. Beyond the button to access the article I would like to be able to click on the image to access it. Do you know how to do it ?

    thank you in advance

  11. Hello everyone,
    I use revolution slider with a youtube video in backgroung, the video puts approx. 8 seconds before launching, do you know if there is a way to speed up the launch of this video?
    Thank you for the tutorials, see you soon on your site.
    See you soon

  12. Bonjour,
    Thank you for all this useful information.
    However, we would like to know how to make two video slides follow in the same slider, when one of the videos is hosted on an external player (youtube, vimeo) and the other is hosted on the same site.
    We have put the video hosted on you tube in slide 1 and the next one in slide 2 but when the first ends the second does not start. The first video hosted on you tube ends with a you tube video gallery.

    Thank you for your help

  13. hi first of all thank you for this wonderful plugin
    my problem is that I open my site in a tablet or smart phone the slides display too slow .. really it's a big problem for me
    merci

    1. Happy New Year to you,
      it's probably a performance issue. Maybe your site uses more files than it needs. Try to use your slide on a default theme. If it's still slow then the slide is the cause, you will have to review your files.

  14. Hello,

    Wrong button, I accidentally deleted a slider from the slider revolution.
    Is it possible to undo this action and get it back?

    Thank you so much!

  15. Hello,

    I have a small problem on my side on this plugging.
    With each slidder revolution I have a dark halo which alters the overall quality of each photo.

    How can I remove this dark halo.

    Thank you very much and top this article.

    Margaux

  16. Hello,
    I'm trying to do something that seems simple to me: my slider is in the middle of the page and I would like it to launch only when it appears on the screen (so you have to scroll to it). But I can not.
    Each time it starts loading the page, so when I arrive on the area in question, all the animations have already passed, it's sad ...
    Anyone have a solution?

    And Happy Holidays by the way!

    Frederic

    1. Hello Frederick,

      If the slider is created with Revolution, I think it's a bit complicated to do what you want to do. You could for example:

      1. Let everything be done in a loop. Suddenly, everything will resume once we are in the area in question.

      2. Delay the display of important images.

      Tell me if you found a solution ...

  17. Hello,
    how to make so that my images in different format can appear correctly, and not have either the top of my photo, or only part of it. I can't modify (center my photo!)
    Thank you

    1. Thank you Bruno for translation, hope the dozens of daily readers of this article will find a solution.

      Sincerely,
      Thierry

  18. Hello,

    I am looking for a trick to display a slider randomly on my homepage.
    In fact I have 6 different sliders each made up of 3 slides. I wish that during the connection or the refresh, the person sees only one slider. is it possible ?
    Thank you for your advice.
    VS

  19. Hello and thank you for this tutorial! For my part, I have a problem with Responsive mode. I integrated layers in my slides but in Small Screen mode, the slides are way too small: http://greggtest.phpnet.org/temp/Capture.jpg

    Do you have an idea of ​​the parameters to integrate? I have really tried all the possible configurations and I am really struggling to get through.
    Thanks in advance for your help and your time.

    Gregg

    1. Hello Gregg,

      First of all, I want to let you know that we are currently working on an update for revolution Slider.

      What version of RS do you use?

  20. Hello, I am looking to mix vertical and horizontal photos with revolution slider 800 × 800 pix. I'm lost in the grid settings, ...
    I thank you in advance. Chris

    1. Good evening Mathieu,

      Sorry for the late reply, we are very busy these days creating a mega-platform that will do good for internet users.

      For this type of configuration, I invite you to contact our pro service on the home page.

      cordialement,
      Thierry

  21. Hi
    Since the day before yesterday I am on this Revoltion slider plugin, but I have a problem. I have wordpress (go to my site), and I would like to put the slider on the home page.
    I read right to left that the shortcode had to be put at the beginning of the page, but suddenly it is on the page and not outside the page ...
    Go see my site… There are the recipes and just above it's all black, this is where it should have the slider !!!
    Can you help me ?
    Thank you

    1. Hello,

      It all depends on the theme you are using. And if the latter has provided a section for the slider, then this is where the slider must be added. Are you using visual composer?

        1. Hello Thigat,

          Unfortunately this week was very busy for us so sorry for the delay. OK. if the theme RS take care of, then there should not be any worries.

          Have you tried contacting the author to submit your issue?

          cordialement,
          Thierry

          1. Hello,

            No problem. Yes absolutely, in parallel I contacted the author of the theme who just sent me a message.
            I will let you know !
            Thank you
            cordialement,
            Jean Michel

          2. Hello,

            Anyway thank you for your help.
            For information: you must put the "header_slider" in the "option page" part of the "Home" page.

            See you soon
            Jean Mi

  22. Hi
    I have a slider revolution on the home page with buttons (PUB BANNERS, WEBDESIGN, VIDEO ANIMATIONS, PRINT) which must be linked with the click of different slides of another slider revolution. I put anchors on each slide of the second slider and each button has a link to the anchor. Unfortunately all the links go to the 1st slide of the slider (here PUB BANNERS).
    Can you help me ? 🙁
    Avada Theme for wp

    1. Hello Coco,

      Sorry we don't work weekends. Regarding Avada, I do not like this theme which is outdated. I can recommend another one for you if you wish.

      For the slider, what are the main settings applied?

    2. Hello,
      When you say to another revolution slider, are you saying that you have two sliders on one page?
      A priori, the navigation buttons of the sliders only work for the slider on which they are attached and in principle (without advanced modification) have no link with other sliders.
      I ask you at the same time to be clearer, because I do not quite understand the expression "to link to the click".

      1. Hello,
        I also have a problem with links within my slider placed at the top of my OnePage site.
        When you click on one of these links, I would like to be redirected directly to the "anchored" part located below.
        In the link I clearly specify the "#name of anchor" but no effect despite the change of URL in the browser.
        On the other hand, if I choose to open in a new window, it works perfectly with scrolling to the part of my targeted site.

        Can you help me ?
        I use the latest version of the plugin, WordPress and my SUPREMA theme.

        1. Hello,

          Unfortunately, this is not a part that we can handle in the free section of this tutorial.

          Sorry

  23. Hi Thierry,

    I hear a lot about this plugin which seems to be used by a lot of people, so I'm surprised to find that we can't even find its French translation.
    Suddenly, I tell myself that there must be people interested, right?
    If so, let them send me the .po or .pot file so that I can add this translation to my catalog.

    Sincerely,

    Bruno

    1. Hi Bruno,

      I'm still waiting for the presentation of your services;). So we can give them more details about your translation offers.

      Sincerely,
      Thierry

    2. Hello everybody

      If you are interested, I just found a translation here: http://leswebmastersdumidi.fr/2016/01/17/revolution-slider-traduction-francaise/, for version 5.1 (I don't know if it works for 5.2 ..). All the plug-in is translated correctly. It must be recognized that, taking into account the number of functions of this extension, the translation. French is not too much. This is the only flaw in this plug-in in my opinion, because otherwise it is complete.

  24. Hi
    Is it possible on a "layer image" to include a function allowing the change of this one with the hover of the mouse?
    Basically I want to make a slide with different areas of low opacity but which on hover changes to 100% opacity
    thank you in advance

    1. Hello Phil,

      I'm not a big Revolution Slider expert, maybe Hervé can answer you. But in my opinion, I don't think that's possible.

      cordialement,
      Thierry

    2. Hello,
      I come to confirm Thierry's words. By default Revolution Slider doesn't allow this, I searched for an extension of the latter that could do the job, but didn't come across a good result.
      But that does not mean that it is impossible to achieve.
      What item do you want to change on mouseover? an image? a text ?

      1. Thank you for your answers and research.
        Indeed it is about an image (a CTA) coming to be put forward during the flyover ...
        It's a shame that the CSS / JavaScript function concerns the entire Slider and not slide by slide… Basically I managed to change this image when hovering over the slider but not only on the part concerned…
        I do not know if I'm clear
        Cdt

  25. Hello and thank you for your tutorial!
    I have a problem that is not explained anywhere ...
    I need to put buttons under the "INFO" slider which respectively point to slides.
    of the “button1” type acts on the “INFO” slider and asks to go to slide # 1
    the "button2 acts on the slider" INFO "and asks to go to slide # 2
    That is to say, with the same behavior as if we had "thumbnails" below, which calls the correct slide with for example a "slide to the right or the left.
    I tried for example by putting an url on the button with # 2 as for an anchor, but it does not work ...
    or with the concept of API, but I can not find an example and do not understand the story ...

    I know it is possible to do this with the advanced options, but I can't seem to put them into practice !!!! I've been on it for two days ...

    In fact, if you had an explanation or example of code to put, I am greatly taker!
    Yours.

    1. Hello,
      If I understand your concern, you want to add navigation buttons between the slides under the slider?

      If this is the case, then when you are in edit mode of a slider, go to the "Navigation" section, the "navigation style" option, choose "navbar" and the "always show navigation" option choose "yes ".
      So navigation buttons will be added to your slider.
      If the problem persists, please kindly let me see the slider in question on your blog.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
20 shares
Share16
tweet1
Save3