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.
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.
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.
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.
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.
So much to see... 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.
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.
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.
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.
Random display (shuffle Mode)
The Layout & Visual section
This section groups the options on the configuration of the shadow, the background in the "Appearance" sub-tab. You will also find a "Spinner" tab, which allows you to modify the animation while the slider is loading, 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.
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 "Bullet" tab, you also have the possibility to configure navigation bullets, with the "Tabs" tab which will add a tab slider effect and so on.
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).
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 ».
After clicking on " Save settings », You will be redirected to the slider creation interface. Which will create an empty default slider.
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.
Please note: : 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 in several different 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.
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).
The thumbnail tab allows you to choose a preview for the created slide. This will be used if your slider offers slide previews.
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.
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).
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.
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).
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.
Each layer has its own options. These options are the bar located just above the design interface.
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.
Each tab has its own options. By taking a few minutes, you will be able to understand how most tabs work.
That's about all there is to know about configuring the WordPress Plugin Slider Revolution to start. We will come back later to show you more advanced techniques.
But before we leave you, we would like to offer you 2 more 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.
Perfect for displaying high resolution photography. This plugin will definitely impress your visitors with its professional features. As functionalities we will have among others: the possibility of creating several sliders with different styles per page, support for tactile navigation, a responsive design, the vertical or horizontal miniature A, bullets or tabs for navigation, and more.
Download | Demo | Web hosting
2. . WP Slick Slider and Image Carousel Pro
If you are an unconditional follower of the sequel Visual Composer, using the WP Slick Slider plugin is an option that you will need to consider. With almost 100 predefined templates, you will definitely find what you are looking for without coding anything.
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
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- How to edit the profile picture (avatar) on WordPress
- Are GIFs, Emojis or Memes a good idea for WordPress sites?
- 23 essential tools for success in blogging
- 10 WordPress plugins to protect your blog
Conclusion
We hope this article helped you set up the WordPress Plugin Premium Slider Revolution. 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 Media.
Bjr, I am using the Lifetime theme. But I don't know how and what alias to put for my solid to show up on my home page. In addition, I do not have access to the part where I can save my changes to my slide and their publication.
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
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!
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?
Hello,
Do you have a screenshot?
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.
Hello,
We haven't tested yet.
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!
Hello,
can you rephrase your request? Because I have a little trouble following you.
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
buona will,
Puoi condividere uno screenshot?
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
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.
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:
Re Goodnight,
Problem solved, thanks for reading me
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
Hello,
Do you have a sample image to show me?
(Translation: Buongiorno, Hai un esempio di un'immagine da mostrarmi?)
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
Hello maybe you have a CSS style that masks this
A case style? what is it exactly ?
I'm sorry, it was my phone keypad that corrected the term "CSS" I meant.
Ok and how to fix this?
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.
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
Good evening Julia,
Can you specify your need? I have difficulties to understand.
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
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
Good evening, I think you have to set a lifetime for the slide that matches your video.
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
please
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.
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!
Hello,
Unless I am wrong, but I do not think that is possible.
Thank you very much for this help!
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
Hello,
Can you share a screenshot please?
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
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 ...
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
Hello,
We need to increase the dimensions. The especially high.
Hello Thierry & Hervé,
I just wanted to announce that I had finally managed to recover the original language file of Revolution Slider for translation into French.
You will therefore find the French translation of RevSlider on WP Traduction, at the following address: http://wp-traduction.com/downloads/traduction-francaise-de-lextension-revolution-slider/.
Sincerely,
Bruno
Thank you Bruno for translation, hope the dozens of daily readers of this article will find a solution.
Sincerely,
Thierry
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
Good evening Seban,
Have you looked at the cache side of the site?
Hello how to make Rev slider retrieve the meta data of WooCommerce product?
Hello Ben,
Sorry but we don't have any special tips, please ask Revolotion Slider support.
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
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?
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
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.
Sincerely,
Thierry
Hello
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
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?
Hello,
So, the theme I bought was sold with Revolution Slider! Theme name is TeslaThemes Cook!
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?
Sincerely,
Thierry
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
Sincerely,
Jean Michel
OK. No problem. Thank you for this return
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
OK. Thanks Jean Mi
Hello
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
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?
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".
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.
Hello,
Unfortunately, this is not a part that we can handle in the free section of this tutorial.
Sorry
I understand,
But do you know if this is possible?
Never tested yet. Sorry
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
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
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.
Hello Gardphil,
Thanks for the contribution
Hello
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
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.
Sincerely,
Thierry
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 ?
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
Sorry, I do not think it's possible with Revolution Slider.
But you can go to the page ask the question:http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380/comments
PS: Sorry for the late reply
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.
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.