Finally! a Slider Revolution tutorial that won’t brake my noob brain…
So, you use WordPress for your website and you need a program that helps you make out-of-this-world slides for that site. If you’re wondering which one to choose, Slider Revolution should definitely be a consideration.
Slider Revolution is a WordPress plugin that makes sliders a piece of cake. The best part is that learning how to use it is just as simple. If you’ve already purchased the plugin and you want to start using it, below are the steps that you need to take to make sure everything is set up properly.
First Things First on the Slider Revolution Tutorial
This Slider Revolution tutorial starts with the assumption that you’ve already purchased the plugin and you’re ready to install it. There is a free version as well, but if you really want to take your graphics to the next level, it’s worth spending the $59 on the paid version.
Once it’s installed, simply go to the WordPress dashboard and click on Plugins, Add New, then click. Next, look at the top of the screen and find where it says Upload Plugin, Choose File, (insert your CodeCanyon download), and Install Now.
After it’s installed, just activate it and you’re all set to go.
Get Your Settings All Ready to Go
The next thing you’ll want to do is set everything up properly. You do this so your site works properly regardless of which device is being used by the customer. To do this, go to the dashboard and click on Slider Revolution, then Globals.
You’ll then see lots of settings, but don’t get nervous because all you need to look for is this one: Default Layout Grid Breakpoints. Under this heading, you’ll see four settings, which should be set up as follows:
- Default desktop content width: 1920px
- Default notebook content width: 1600px
- Default tablet content width: 778px (can be as high as 1025px)
- Default mobile content width: 480px (should be between 500 and 360)
Once this is all set up, make sure that you click on the Save button.
Experiment with Your First Slide
To start your first slide, first go to Slider Revolution, then New Blank Module. After making sure that you’re in the Titles tab, you can name your slide. To the right of your screen, you should see something that says Module Naming.
When you enter the name of the slide, you’ll see a Title row and an Alias row, one on top of the other. The name on the Alias row has to be in all lower-case letters with each word separated by dashes. You’ll understand why later.
Click on the Layout tab so you can choose one of three layouts:
- Slider (more than one slide)
- Scene (one slide only)
- Carousel (will display multiple slides at once)
After you choose your layout, it’s time to choose the size. Once again, you’ll have three options:
- Auto (automatically adapts to the in-page container)
- Full Width (fits the width of the page)
- Full Screen (fits the width of the screen)
Under Sizing, click on Layer Area Sizing, and you’ll see some settings. Set all of them to the default OFF except for the very first one. Then, activate all of them and click the On setting on the Module Sliders tab.
This will import the global visual render settings that were entered previously. When you’re done with this step, make sure that you click on Save.
There are other options on the Settings tab, but this is all that you need to know at this point.
Importing the Slide Into Your Website
In this part of the Slider Revolution tutorial, you’ll learn how to import the slider into your website page. To start, go to Settings, then Titles. Close to the Title and Alias rows, you’ll see a row called “shortcode.”
Copy the shortcode and plug it into the back end of the page where you want it to be. At this point, if you update the page, you can view how the slide looks live. And again, press Save every time you update the page!
Continuing the Process
After going to Settings, let’s now visit the Images tab. The default background is transparent, so you’ll have to change it if you want something else. Regarding the images, you can now upload your own or choose some from the program.
If you click on External image, you’ll be able to insert an image URL. When you do this, always click on Refresh Source to update. And when you choose the Source size, keeping it at “original” works best.
The Background tab has a drop-down menu with options such as Color, Opacity, and Tints. Choose your selections, then make sure that you press the button with the blue check on it.
You’ll have other options here, including ways to animate the slide, use the Parallex effect, add layers, and change the size and position. It may take a while to figure out what all of these options mean, but it’s only because Slider Revolution has so many ways to personalize all of your slides.
Making Sure That You Didn’t Forget Anything
This Slider Revolution tutorial is an abbreviated version because the program offers so many ways to get your slides looking fantastic. To check yourself at this point, consider the following:
- Desktop: check if all renders are according to their specifications
- Notebook: check if the appearance looks similar to the desktop version
- Tablet: check to see how it looks both vertically and horizontally
- Mobile: check your own phone and ask your friends to do the same
Keep in mind that you can find a more detailed Slider Revolution tutorial online, but this article should have you feeling more confident as you explore this amazing plugin so that it can help you grow your business. It isn’t necessarily a complicated plugin, but it does do an awful lot.
And this is good, because you need lots of options for your online slides to look fantastic. As you can see, you can do a lot with this plugin to get top-notch slides for your website, and not only is it easier than you think but the price is just right as well.
