Salon includes the popular Revolution Slider Created By ThemePunch. This slider is a beautifully animated slider that is 100% responsive and has some amazing options. We cannot cover everything here but we outline how to setup a slider and how to add slides to it.
* Your purchase of Salon includes a copy of the Revolution Slider. If you wish to receive auto updates and plugin support from ThemePunch, it requires a separate purchase of the plugin.
How To Create A New Revolution Slider
Step 1 – Click on the Revolution Slider sidebar item in your admin section, then click the New Slider button.
Step 2 – Select the Content Source type. If you choose Post-Based Slider or Specific Posts, please refer to the Revolution Slider Docs for information on how to set those Content Source types up.
Step 3 – Insert a slider name and alias. The alias text will generate a shortcode that can be used in the editing field of pages or posts.
Step 4 – Then select a layout in the Select a Slider Type box, each type will have its own settings. Once you’ve selected a Slider Type, you can also choose to load a preset from that Slider Type.
Step 5 – Set the layout and resolution settings under the Slide Layout box. Here, you can set different heights and widths for your slider when viewed on different mobile screens or viewports.
Step 6 – On the right hand side, you’ll find many more options you can set for you slider, such as Layout & Visual settings, Navigation, etc. Each option will have a self-explanatory description, so feel free to explore each tab and test the options out.
Step 7 – Once you are done, click the Save Settings button at the very bottom of the page, or the green save icon on the righthand side of the screen.
How To Add Slides To Your Slider
Step 1 – Select the Slider you’d like to add slides to from the Revolution Slider list.
Step 2 – Hover over the Add Slide button and select the type of slide you’d like to add. Once selected, it will create a new blank slide.
Step 3 – You can change the title of your new slide by hovering on it, and clicking the name field. Enter your new name, then click the pencil icon right beside it to save your new slider name.
Step 4 – Before you reach the Slide Editor, you’ll find additional tabs that allows you to set the slide’s Main Background, General Settings, Slide Animation, Link & SEO, etc. We won’t go into detail on what each option in these tabs do, but please feel free to check out each option.
Step 5 – Below the page is the Slide Editor. To add a new layer, hover over the blue Layer icon on the top left corner of the canvas and select which type of layer you’d like to add. You can add a Text/HTML layer, an Image layer, a Video layer, a Button layer, or a Shape layer.
Step 6 – Once you add a layer, You can customize it further by using the tabs on top of the canvas. These tabs are the Style tab, Animation tab, Loop Animation tab, Visibility tab, Behaviour tab, etc. We won’t go into detail on what each option in these tabs do, but feel free to check out each option.
Step 7 – You can manipulate each layer on the canvas using the transformation points and the various icons above it, such as the text icon, resize icon, delete icon and duplicate icon.
Step 8 – To view your slider in different viewports, hover over the blue desktop icon on the top right corner of the canvas. Select which viewport you’d like to view, and the canvas will adjust the resolution accordingly. You can then adjust your slider to fit the current viewport.
Step 9 – Below the canvas is the Animation Timeline. Here, you can see all the layers you currently have. You can rearrange layers here, and you can also click the Play button to Preview the slide’s animations.
Step 10 – Once finished, click the green save icon on the right hand side of the screen. Keep repeating this process for any new slides you’d like to create.
Revolution Slider Mobile Padding Class
When using a 100% width slider, content may need to sit directly on the edge of the site width so it aligns with the logo and other page content. However on mobile devices, the logo and other page content has padding applied so it is not right on the screen edge. If you want your slider content to also have the same padding on mobile so it aligns with other content, you can use a custom class on each layer in your slider. Insert fusion-revslider-mobile-padding in the “classes” field located in the “Layer Links & Advanced Params” section of the slider creation page.
Here Is A Screenshot That Shows You The Various Areas Of The Slider Creation Page Described Above.
