We continue today our guide on Revolution Slider, but this time we will talk about the slideshow display in a WordPress page / article, but also we will perform some advanced configurations on your slider. I hope that since the beginning of these guides you practice at home (it is a considerable advantage to always practice). If you encounter a problem, I remind you that you can ask me questions, I will be happy to answer them.
For those who are starting by reading this tutorial, I invite you not to miss the beginning of these tutorials on Revolution Slider:
- How to install Revolution Slider
- How to understand the interface Slider Revolution
- How to configure a slider
- How to create a slide show on Revolution Slider
If you went through these steps, then you can continue, otherwise you will have a hard time following me.
What you need to know about Slideshow
Revolution Slider is a plugin that does not depend on any theme. In principle, slideshows of the latter can be displayed on any type of theme, but this is not always true. Indeed, any theme has CSS style rules that can be an obstacle to the correct display of sliders. Sometimes when you choose a slider a layout " full width It will overflow and will not display as it should.
Instead of looking for a free theme that will eventually be compatible with Revolution Slider, I recommend choosing a premium theme that is already compatible with Revolutio Slider, and one of the themes I see first is " Total From WPExplorer.
One of the examples that justifies the fact that you must take a premium theme is the display of a Twenty Fourteen themed slider for example.
You can notice that on this image, the area in red represents all the current space of the theme. The blue area represents the overflow of the slider on the theme. You may find that the display is not optimal. You will find several WordPress themes compatible with Revolution Slider on ThemeForest
That being said let's find out how to display a slider on an article / page
How to display a slider on an article
Revolution Slider offers you to add sliders to your pages / articles in two ways.
Using the shortcode
You access the configuration page and retrieve the shortcode. In the section " Slider Title & Shortcode You will notice 3 fields. The 3e field which contains a shortcode which begins like this “[rev_slider…” is the one from which you must copy contents.
All you have to do now is add the shortcode in an article or page of your choice.
Using the add slider button on the visual editor
If you do not want to go back to the slider configuration page every time, you can use the button added by revolution slider in the visual editor.
Clicking on it will open a new window where you can choose the slider you want to add to your page.
By selecting a slider, you can specially change the order of slides. This change will only be effective with the custom shortcode that will be generated. To change the order of slides, click on " Quick Modify Slider ". You will access the list of slides, which you can reorganize by " Drag and Drop ».
Once done, you will notice a shortcode added to the visual editor.
All you have to do now is preview your article. That's all, now you have the basics to create a slider on WordPress.
Some tips on advanced use of Revolution Slider
Now that you know how to use Revolution Slider, I'll give you some Tricks which will help you to be more productive in using this plugin.
Use keyboard shortcuts
Revolution Slider wants to be a complete slideshow editor. As a result, it allows you to use some keyboard shortcuts that will allow you to work faster.
- CTRL + S : to save your work
- Directional arrows : to move an item on your stage
- Shift + Directional Arrows : lets you move items faster
- Shift + Resize : perform proportional scaling
- Double click : open the modification of an element
Master the tools of the slide editor
The slide offers tools that will allow you to easily move your elements. We've already talked about a grid, but also you can use the alignment button proposed by Revolution Slider.
These alignment buttons let you place the item, for the first line from left to right, at the left end of the Stage, in the middle of the Stage and at the far right of the Stage. For the second line, at the high end of the stage, in the middle of the stage and at the base end of the stage. By using these buttons properly, you can center elements easily in two clicks.
Use the navigation tool between elements of a scene
To easily find items available in a scene, you can use the " timeline Or the elemental explorer of a scene. The latter is at the very top of the stage editor.
By clicking on the explorer list, you will be able to perform various operations on the items, including:
- Edit an element: pencil icon
- Resize the element's proportions: icon with directional arrows
- Delete item: trash can icon
- Duplicate element: double page icon
- Hide an item: eye icon
- Lock an item: padlock icon
If you pay a bit of attention to this same area, you will notice slider extensibility test buttons, this will allow you to preview the display of your slider on mobile devices.
That's it for this tutorial. You are now armed to create an awesome slider. If you have any questions, do not hesitate to ask them.
Does the cursor need admin permission?