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.
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.
Now click on the item new Slider And you will come to the slider's configuration interface.
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
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
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).
The "Select a type of the slider" section
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.
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.
The "Slide Layout" section
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.
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
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).
"Carousel Settings" section
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.
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.
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.
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.
- 8 WordPress plugins to create diagrams on a blog
- 5 WordPress plugins to share your articles
- 6 WordPress plugins to ensure RGPD compliance of a blog
- 8 WordPress plugins to add a translation system on a 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.
Bonjour,
I would like to know why the font I put on my slider is displayed well when viewing it, when I include it on my site it is no longer the same?
Hello Steffy,
Clear your browser cache or browse your website in private mode. This should solve your problem
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!
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
Hi,
Can you share a screenshot of your settings? Or, export your slide then restore the revolution slider settings.
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
Hello,
No Unfortunately.
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
Good evening Alicia,
Have you tried creating a new slider instead of using a template?
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) ???
Hello,
Can you rephrase your application?
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
Good evening,
It is necessary to optimize the dimensions of the images.
Hello, My slider revolution is cut around the edges because of my WordPress theme.
What to do?
Thank you
Hello,
Try to disable all plugins, and if the problem persists because of the theme, change it or contact the seller.
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
Hello It is possible but we do not currently have tutorials to show you.
Thank you.
And in a few words because I am now familiar with sliderrevolution.
That would help me
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
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
Hello,
Have you tried to contact support for the Revolution slider plugin? You will quickly find a solution.
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
Hello, Can you share a screenshot as an example? I don't quite understand your problem.
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!
Hello,
Try to reduce the font size. Also make sure you have enabled the mobile option for each text.
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
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.
Thank you, I'll try this next week and tell you if it worked.
OK perfect
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.
Hi,
It's hard to explain in the comment section. Please view videos on Youtube.