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:

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.

the-total-theme-wordpress-framework

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.

Revolution-slider-tutorial-wordpress-slider-display-revolution

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.

Revolution-slider-recovery-of-shortcode

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.

add-a-slider-wordpress-tutorial

Clicking on it will open a new window where you can choose the slider you want to add to your page.

add-a-slider-has-a-page-wordpress

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

drag-and-drop-revolution-slider

Once done, you will notice a shortcode added to the visual editor.

shortcode-revolution-slider

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.

alignment-of-elements-revolutions-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.

element center-revolution-slider

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.

explorer-in-slide-revolution-slider

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.

fashion-revolution-responsive-slider

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.