Articles on: WordPress

Using Revolution SIider

From your website dashboard, please go to Revolution Slider







If you’re making a slider from scratch, click on the New Slider option. Now start from the top





This screen appears. You can see a lot of options and functionality but don't get confused as we will not be changing too much from here.



Select a content source: choose how you would like to add content to your slider. There are 11 content sources to choose from but for the most part, you’ll want to select the **default** option.







Select a name for your slider that will help you remember what it contains or what page you’re using it on. This is also where you’ll find the easy shortcode (automatically created for us once you enter your slider name and slider alias) for your slider to insert it into posts and pages.







Choose a slider type, and select a preset to load presets. This will show how your revolution slider will look like when added to your website. Play around with other options yourself.







Select your slider layout and grid (in pixels). You can set custom grid sizes based on the size of the screen, though full-screen will fill your entire browser screen. No matter which option you choose, you’ll need to add a Grid width & height which will determine the size of your layer container.







TAKE NOTE: Turn on Custom Grid Sizes so it'd be easier to adjust or change the settings in mobile responsiveness









Next scroll back up to the top of your screen to begin editing the General settings for your slider. To the right, you’ll see a bunch of slider options.







There's nothing much to do from here. You may change the default slide duration to 6000ms or 2000ms to make the slider a bit faster. 







Navigation. Where you can change the style of the arrows or disable them.  





Once you’ve finished making your selections click the green file at the top of the screen to save your changes. After that click on the blue pencil to begin editing slides!







Use the Main Background options to select your slide background: image, external URL, transparent (note – if you set the main slider background in the general slider settings it will be visible), solid color or video. The image size should be the same among all of the images that you want to add in the Revolution Slider.







Choose your background image from the media library



















Choose the background image from your media library

When adding or editing slides, Slider Revolution is packed with options, and they just keep coming. You can choose from 8 different Add Layer options:









Text/HTML layers are perfect to add headings, descriptions or even links. Add whatever it is you want to say on your slide 



Button layer options include 21 size and border radius combos for which you can edit the color, background, border color, icon, font, hover state and text. In

addition there are a number of helpful pre-sets for social links animated mouse scroll icons, hamburger menu or even play/pause.



Images are great for inserting your logo, adding depth on parallax slides, inserting before/after sets, and more.



Audio & Video layers are fairly straightforward. Choose the media you’d like to insert and select a file from your media library or insert a link (YouTube, SoundCloud, etc.). Then add settings to enable looping, autoplay, next slide on end, base volume, segment start/end, and preloading. This is an easy way to add real testimonials to your slider, an intro video or a tutorial.



Shapes can be used to add effects (like pulsing or radiating a color behind a button), to define a part of a text layer (use a shape to highlight just one word or phrase) or to add visual interest. Select your background, border color/size, shape border-radius (0 for a square, 100 for a circle), shape size in pixels and padding.



Use the Style options to edit your fonts, colors and layer location. This includes everything from a custom Google font, font size, line height, text color, layer background, padding/margin, perspective, hover, toggle and more.







The Animation tab is just as you would expect – it holds option for adding and customizing the entry and exit animations for your layer. Select a preset animation template, add an easing and edit the animation duration time.



Loop settings are simple: either leave disabled so your layer simply loads with the animate you already selected, or enable looping by selecting type. Choose from pendulum, rotate, sideloop, pulse and wave to give your layer a constant, looping animation.



Mobile settings are found under Visibility. From here you can specify if a layer should be visible on specific devices, hidden under a set width or only appear on hover.



SAVE YOUR SLIDE - The most important step is to save your slide! Make sure you Save or Update your slide after making any changes. If you navigate away from your slide (even if it’s to another slide) you may lose all of your hard work. So be sure to save, save, save!



To add your fabulous slider to any post or page use the Slider Revolution 5 element on the website. Don't forget to add Row then choose the revolution slider you've just created.













You can also use the text block element. Use the Slider Revolution shortcode that you created earlier. The shortcode should look like [rev_slider alias] based on the alias you gave the slider when you first created it. 







Preview the changes then click SAVE once done.



Is this tutorial unclear? If you do not find the training you are looking for, please send us a detailed email to hello@lightningsites.com.

Updated on: 31/01/2022

Was this article helpful?

Share your feedback

Cancel

Thank you!