Want to configure the WordPress Plugin Slider Revolution?

Since the beginning of this series of tutorials dedicated to 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).

Please note: : 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 haven't created a website yet and are looking for a WordPress theme which 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.

wordpress slider revolution

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 product slider WooCommerce
  • 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:

  • 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.

Please note: : 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

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

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 Media.