Best WordPress Slider Plugin: Smart Slider 2 – Tutorial

Please note Smart Slider 3 is now available.

Finding a good slider plugin for WordPress is more difficult than it should be. Here are my requirements:

My slider requirements

1. Must be responsive
2. Should be able to edit text separately from image
3. Should not use “posts”
4. Should allow HMTL
5. Should be able to link to whatever I want (no restrictions to only linking to post or image)
6. Easy to use
7. FREE (or at least have a free usable option)

Is that too much to ask? For a long time, it appeared so, but recently I discovered Smart Slider 2.

Setting it up

I simply installed the plugin and then found the new “Sliders” option in my left hand menu in the dashboard.

The plugin author makes it easy with several setup options, but I chose to simply import a basic slider that you see at the bottom left of the image above. That import sets up a very basic slider with 3 different slides and a title on each.

Once I imported that slider, then I clicked on “Edit Slider” to set up the size that I wanted to use.

Here you’ll be able to set the size, change the name of the slider, select font sizes, and choose how you want the responsive mode to work.

When I was done choosing the correct size, I clicked on “Example”(the name of the imported slider) on the left, and then on “Slide 1” under it as shown below.

From there, click on the ADD MEDIA button next to the background to change your image. Upload a new image or select one from your media library, just like you would when adding an image to any page or post.

That image will now take the place of the white sailboat on the blue background.

Since I have imported a slider, I already have a title to work with, so I can simply click on it to edit. Once I click on it, you will see the window for that item on the layer appears on the left and I can change the title there.

The imported slider comes with a heading, but you can simply drag and drop any of the options into the blue box of the layer to add them. There are options for buttons, captions, other images and even videos.

Above where you change the title, you have the option of using the dropdown to change it from an H1 tag down to an H6 tag. There are also many other options here on the left including adding a link, changing the font color, and changing the caption style.

In the top left of the blue text box, you will see an icon to drag and drop the box exactly where you want it. There is also a number with up and down arrows. If you have more than one text box and want them to overlap, use that number to choose which box has priority. The lower the number, the higher the layer of that text box.

Use the “x” in the top right to remove any item you don’t want.

Finally click on the big green SAVE button in the top right corner to save your work.

Repeat those steps for each of the three slides, or simply delete the other slides to use a single image. The slides are easy to duplicate if you want to add more slides. Just hover over the slide title and click on duplicate or delete.

Slider is easy to display as well

Click on image to see larger

There are options to insert the slider with shortcode into a post or page, by adding PHP code to a template file, and by using an icon right in the visual editor to add it to a post or page.

There is also a widget to make adding a slider to widget areas, like the sidebar, super easy. So adding a slider to anywhere on your site couldn’t be easier.

The widget even lets you choose different sliders for different devices: desktop, tablet and mobile.

There are lots more options

My purpose here was just to show you how easy it is to set up a very basic slider, but Smart Slider 2 comes with lots more options if you take the time to look into them. I didn’t even get into any of the animations that make this plugin so nice. And, with the pro version, you can create some really incredible sliders.

I hope if you look into using Smart Slider 2 that you will let me know your results.