Skip to Main Content

Slider Revolution: configuring a slider on WordPress

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]

Want to configure the WordPress Slider Revolution plugin?

Since the start of this tutorial series dedicated to the WordPress plugin  slider Revolution, we learned to download and install the plugin. We have next discovered its interface and its different functionalities. Now, let's go ahead by showing you the configurations of a "Slider".

If you are a beginner and are looking for resources to get started; you will find here everything you need to get started. And if you discover blog creation read How to Create a WordPress Blog Easily: Guide & Tuto

That said, let's find out what a slider is.

What is a slider in practice?

A slider is an HTML component. Yes I know, said thus, it does not get you much benefit. So a slider is a feature that allows you to display various information in a loop (or not). This information is grouped by " slide ", Which is an entity of a" slider "and which can consist of images, video texts, links, etc.Slider revolution - WordPress Slider Revolution plugin

The " slider "Therefore contains" slides (At least 1), and these slides contain multimedia elements (images, video, music, text) that can be animated or interactive (react to the user's actions).

Remark : You can translate " Sliders " in " interactive and dynamic slides ».

Slider Revolution allows us to do that, and we will start without further delay.

If you have not yet created a website and are looking for a WordPress theme that natively integrates this powerful WordPress plugin, this list of premium WordPress themes will be perfect.

Creation of a slider: First configurations

To begin, you must click on the menu " slider Revolution On your WordPress dashboard.

Revolution slider wordpress

Now click on the item new Slider And you will come to the slider's configuration interface.

new-slider-slider-revolution-tutorial

The slider configuration interface can be intimidating, but if you step back you will better understand its functionality. You may notice that this interface consists of two sections. The first on the left consists of 5 different areas, and the second on the right consists of 6 small areas. Right above you have the toolbar, which allows you to:

  • Return to the list of sliders « All Sliders »
  • Access slider settings (this is the window on which you are)
  • The editing interface of slides
  • A backup button
  • A slide editing button
  • A slider preview button
  • A slider removal button
  • A button to return (yet) To the list of sliders

bar of tools-revolution-slider

I will now explain each section in the left column.

This WordPress plugin manipulates a lot of images, which could slow down your website loading. Discover Why you need to start optimizing your WordPress blog by images

the "Content Source" Section

content-source revolution-slider

This section allows you to configure the source of the slider. Indeed, here you can decide to create:

  • A classic slider, in which you will have to configure all the animations yourself
  • A slider of articles, in which your room for maneuver is quite limited
  • A slider of specific articles that you can choose
  • A slider of the Flickr news feed
  • A slider of the Instagram feed
  • A slider on WooCommerce products
  • A slider on the Twitter feed
  • A slider on Facebook posts
  • A slider on YouTube Publications
  • And a slider on Vimeo publications

It should be noted in passing that: Slider Revolution is a powerful plugin that allows to highlight products in an online store. Discover the 10 WordPress themes to create an online store and showcase your clothes

That said, we will be content to present how to create a classic slider, because it is the most used, the most difficult to master and the most extraordinary in its effects. With practice, you will manage to make your own configurations on other sliders. In case of problems, do not hesitate to come back and leave a comment here. So leave the option " Default slider »Active.

The Slider Title & Shortcode section

You probably guessed it. This section allows you to define the title of the slider and the shortcode that will accompany it (nothing too rocket science).

title and shortcode-du slider

The "Select a type of the slider" section

select-a-kind-of-slider-slider-revolution

This section allows you to define the basic structure of the slider. Indeed, you have at your disposal 3 options to choose from which allow you:

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]

  • For the first option define a default slider with widths adapted to the available space and having basic elements like navigation buttons.
  • For the second option, you can decide to apply a dynamic and interactive style, without a navigation button and much more imposing than the previous option. This option is called "hero scene" because here you will put more emphasis on animations and interaction.
  • The last option offers a much more classic style with a simplified scrolling of the images from left to right in quite varied animations.

Remark : Whenever you choose an option, you have a section "Load a preset from this Slider TypeWhich offers you advanced variations of the type of slider you have chosen.

change-of-kind-of-slider

I will not be able to explain all the variations, but you will be able to draw conclusions from the available images. For example, for the slider type " Standard You have as fourth variation " Thumbs Bottom self ", Which allows you to create a slider with thumbnails at the bottom and has an auto-scrolling animation.

thumbs-bottom self-slider-revolution-tutorial

The "Slide Layout" section

slider-layout-revolution-slider

This section allows you to set a layout for your slider. So you can leave ' Revolution Slider »Automatically choose the widths it will apply to the slider, choose to apply the full width to the slider or use the slider in full screen mode.

Depending on which option you choose, your Slider will be different on some devices. You have below a section of configuration of the grid according to the devices (mobile, desktop, etc..). Keep in mind that configuring the grid allows you to change the internal margins of each slider.

Read also 6 tips for optimizing the mobile design of your blog

At the very bottom of this section, you can choose to enable overflow visibility, enable radio appearance retention, and set a minimum height.

The "Customize, Build & Implement" section

This section does not actually have an option for the plugin. It offers you some quick links to important sections.

customize-build-Implement

We will now continue with the second column on the right.

The General Settings section

This section offers you some settings that will apply to the slider. This is how you can:

In the "Slideshow" tab

  • Disable slider on flyover
  • Stop the slider after a set number of scrolls
  • Show slides randomly
  • Loop the slide
  • Disable or stop the slider on certain device size
  • The last option "Wait for revapi.revstart ()", will not be useful to you.

In the "Faults" tab

You can define:

  • The selectable character of the layers
  • Define the identifier of the slider (it's done automatically)
  • The minimum duration between slides
  • The timeout before initialization
  • The transition between the slides
  • The duration of the transition expressed in microseconds
  • The image size
  • The CSS position of the background image
  • Repeating the background image, if this image is not big enough
  • Activation of the option " video Muette Which allows you to define the type of animation, the positions in an XY (yes, what you learn when you have to draw math functions), and other elements.

The progress bar tab

All the options in this section are for the progress bar, which you can enable and customize.

The 1 taber slide

This section allows you to activate a first alternative slide. This will allow the " slider To load a " slide Of your choice first. Remember that " slides Are elements that can be identified.

The "Layout & Visual" section

layout-and-visual

The "Appearance" tab

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]

This section allows you to configure the appearance of the slider. In particular, you can define to display a shadow under the slider (very handy if you choose the default slider, with a significant low margin).

You can also choose to display an overlayer covered with transparent dots (this will make your slider very original, but if you want to display information that will need to be thoroughly read, you will have to go without).

Then you have the background of the slider, the internal margin and the image in the background (what you need to know here is that a background image at this level will be displayed on all your slides).

the "Spinner" tab

This tab allows you to define an animation while loading the slider, nothing more.

the "Mobile" tab

This tab allows you to manage the display of the slider on mobile. You must know that mobile traffic is important and therefore you should not neglect it. You will have the possibility to hide the slider if the dimensions of the mobile (width) is less than a figure that you have determined (in pixels).

the "Position" tab

This allows you to determine the position of the slider relative to the page. I will tend to say, in relation to the location where it is located. This option does not need to be modified, because I suppose we all want the slider to be centered.

"Navigation" section

This section allows you to activate the navigation buttons between the slides on your "slider". You have 6 navigation options:

  • The arrows
  • Tabs
  • Thumbnails
  • The effect of touchdown on mobile devices
  • And navigating with the arrow keys

Each option, when enabled, will allow you to configure the position of the navigation elements or their operating principle (default settings are usually sufficient).

configuration-navigation-revolution-slider

"Carousel Settings" section

section parameter-du carousel-revolution-slider

This section appears only when you choose the type " Carousel Slider », And allows you to configure its options. You will be able to:

  • Enable infinite scrolling
  • Define a space between the slides, if you do not want the slides to touch
  • Set a rounded border in pixel
  • Set a high top margin (padding-top)
  • Set a low top margin (padding-bottom)
  • The number of elements visible by "slide"
  • « strech element", Allows you to stretch the element so that it occupies the entire width of the" slider »

Security is an important element in the uptime of your website and one of the techniques that will protect you against any serious attacks or bugs is to regularly back up your blog. Discover our 5 WordPress Blog Backup Plugins

"Parallax & 3D" section

Here you can activate the option " 3D On your slider.

"Problem & Handling" section

This section allows you to manage compatibility with old devices. You can simplify the slider on " IOS4 and Internet Explorer 8 ».

Otherwise, you can choose to display an alternative image, when the browser does not support the slider.

"Google Fonts" section

This function allows you to manage the Google Fonts fonts that you will have downloaded and to apply it to the slider.

Once you have defined the parameters of your slider. All you have to do is click on the record button.

save-a-slider-slider-revolution

If the WordPress Slider Revolution plugin is not your favorite when it comes to creating sliders on WordPress websites, here we offer two alternatives that can offer similar functionality.

1. LayerSlider

LayerSlider is a premium WordPress multipurpose animation plugin. It gives you the option to create slideshows and image galleries with stunning effects, beautifully animated landing pages and page blocks, or even a full website.Layerslider wordpress plugin create slider 1

It is one of the alternatives capable of closely competing Slider Revolution. Its visual drag and drop editor makes it very intuitive for anyone to start using it. No technical or coding skills are required. Its ever-growing selection of importable models is an ideal starting point for new projects and covers all common use cases. They are made with care, and can be easily customized to meet all needs.

Excellent support and frequent updates ensure you get the most out of your purchase.

Go further with this powerful WordPress plugin by reading this article Layer Slider: A WordPress plugin to create a slider

Easily create your Online Store

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

Download | Demo | Web hosting

2. WP1 Slider

WP1 Slider is a versatile WordPress plugin. It is easy to use and has all the useful features you will need to create beautiful slideshows. Most slider plugins are too technical and need a lot of time to configure them, but WP1 Slider is designed for non-programmers and offers incredible options.Wp1 slide pro wordpress plugins create slide shows website slides

Among these you will find: theupport of Kenburn effects, 6 different models of slider transitions, theupport of shortcodes, a conception of slides by drag and drop, the cfast harassment and excellent SEO, thesupport for sharing on several social networks, the iintegration of YouTube and Vimeo videos, an e layoutfully responsive, the support of WooCommerce and others.

Download | Demo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

Here is ! That's all for this presentation about the configuration of the WordPress plugin slider Revolution. We will continue in a future tutorial, where we will discuss the design of slides.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But, if you have any remarks or suggestions on the matter, they will be welcome in the comments section. Especially share this article on your different Social networks.

This article features 29 comments

  1. Hello, I have created 2 different models. I now want to switch from my current online cursor. I can't really do this. Can anyone give the magic advice? Thank you in advance!

  2. I created a slider4 and placed 3 diaspositive in this slider. But on my homepage, slider revolution shows only one slide and doesn't show the rest. It only displays the first slide. When I bring for example the last slide to the first place, slider revolution displays this last and leaves the others

    1. Hi,

      Can you share a screenshot of your settings? Or, export your slide then restore the revolution slider settings.

  3. Hello,

    I would like to make a dynamic slider, do you have any files concerning the realization of a slider with the effects on the mouse over.

    Thank you

  4. Hello, I downloaded the template of a slider, I was able to modify the texts and images, I am on slider revolution premium, however: we can see the text "a Slider Revolution…" + the links to their social networks on the slide pff. And I can not find or remove this text. thank you in advance

  5. hello I have a little problem when I make a slider and I want to modify it on mobile the texts that I have already added to the slider do not appear in the mobile slider why (when modifying) ???

  6. Hello,
    I am having a problem with Revolution Slider. I can't seem to find a solution so that my photos are not cropped vertically.
    Must he have a checkbox?
    Thank you for your return
    Norbert

    1. Hello,

      Try to disable all plugins, and if the problem persists because of the theme, change it or contact the seller.

  7. Hello,
    on slider revolution I would like my slide to start only when the mouse or scroll triggers it. Is it possible ?
    Which parameter in the slider activate?
    Thank you very much.

    can we do both, i.e. start a slider with mouse / scroll and also put an initialization delay that I saw in general parameters in order to deal with all possible cases simultaneously and be sure the site visitor sees this slider

    merci beaucoup

  8. Hello,

    on slider revolution I would like my slide to start only when the mouse or scroll triggers it. Is it possible ?
    Which parameter in the slider activate?
    Thank you very much.

    Can we do both, i.e. start a slider with mouse / scroll and also put an initialization delay that I saw in general parameters in order to deal with all possible cases simultaneously and be sure that the site visitor sees this slider

  9. Hello, good evening, I have a doubt.
    I have several images in the Slider revolution and I want to hide them in the mobile version minus the first one. I saw that the same plugin has the ability to hide the images you want in different devices, but the problem is that it only hides the image because it keeps detecting that there are multiple elements because the bar time continues to load and leaves the screen blank when the first one jumps. How can I really hide the images?

    Thank you very much

    1. Hello,

      Have you tried to contact support for the Revolution slider plugin? You will quickly find a solution.

  10. Hi, I wanted to ask you how to place the cursor under the horizontal navigation bar menu bar as it happens on the Apple.com site where the menu above and just below the cursor is located (the menu seems to be transparent
    Thank you
    Andrea

  11. Hello,

    I want to make a slider that contains 2 or 3 images on which quotes are written. My problem is that when I write, the quote is too long and protrudes from the photo, so it doesn't appear in full. Yet there is room throughout the image. How to do?

    A title for each slide is required. By default, I put "quote 1" and so on. But the titles are displayed on the slides… For example, “Quote 1” is displayed in the small right on my first slide. How can I prevent the titles from appearing?

    Thank you in advance for your answers, you would help students for a tutored project!

  12. Hello,

    I encounter a small problem with this slider and despite a lot of research I have not found the solution. Maybe you could save me? 😉
    I configured the slider on my home page, it is impeccable it is very good EXCEPT that when the mouse is positioned on it, it is impossible to scroll. I have to put the mouse out of the slide to be able to scroll down (upwards it apparently works). This bothers me a bit because I'm afraid some people don't understand that you have to remove the mouse from the slide to do it .. (www.sarah-scaniglia.com). I searched through all the settings but I couldn't find it… and I'm not a web expert.

    If you find the solution you are great

    1. Hello,

      have you tried this?

      1. Disable other plugins except Revolution Slider and test again.

      2. Activate the default WordPress theme then test

      This will let you know if the issue is with the theme or a conflict with another plugin.

      Also check that you have the latest version of the plugin.

  13. Hello,

    Can you explain to me how to make a "Slider" with only one slide inside because when I try everything disappears at the end of the animation. I put "no transmission" in "slide animation" but nothing helps ...
    Thank you in advance for your help.

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
10 shares
Share2
tweet1
Save7