• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • Rocket.net
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
Best WordPress Plugins

How to Create Beautiful Slides for Your WordPress Website With Smart Slider 3

Last Updated on: January 20, 2020 Daryn Collier 3 Comments

How to Create Beautiful Slides for Your WordPress Website With Smart Slider 3

There is a lot of back and forth debate about sliders and it’s been going on for years. Some people steadfastly believing that sliders are bad for conversions, and according to the data, they’re right.

At the same time, though, there seems to be no decrease in the use of sliders overall – they’re still a popular option for many websites. While I’ll be the first to admit that I rarely stick around to view anything beyond 1-2 slides, I think it’s fair to say that if they are designed properly, you can minimize the negative impacts.

Smart-Slider-3

Consider not using multiple sliders – or possibly a single call to action could be displayed using slightly different slide backgrounds. It’s easy to do and a plugin like Smart Slider 3 will allow you to use a single slide with all kinds of animations – there is no disputing the fact that done right, slides are capable of improving the visual appearance of your website.

Smart Slider 3 a great plugin that is available in both free and premium versions. This post is going to be a bit of a combination – Covering an overview of the plugins features, and also a basic tutorial that demonstrates how easy it is to set up a slider and have it published to your website in a very short period of time.

Key Plugin Features

  • Intuitive user interface – every plugin says this, but in this case, it’s true
  • Drag-and-drop builder with live preview
  • Dynamic slides can be created using posts and filtered by ID, filter or custom pages
  • Generate slides (dynamically) from a variety of social channels (Facebook, 500px, Dribbble, Flickr, Instagram, Twitter, YouTube and More).
  • Customizable slider controls and loading animations
  • Slider background animations (Ken Burns)
  • Multiple transition animations including slide, puzzle, fade, curtain, zoom, and more
  • Highly customizable autoplay configurations
  • Ability to hide specific layers on tablets or mobile devices
  • Define and adjust slide size for mobile devices
  • SEO Optimized and customizable settings
  • Easy to create great looking sliders
  • Site Origin Page Builder compatible and Adobe Creative Aviary image editing
  • And dozens more!

Free versus Paid

If all you’re looking for is a basic slider, Smart Slider 3 is available from WordPress.org in the plugin repository. Even the free version is impressive and a definite step up when compared to some of the other free sliders out there.

A personal single-site license is only $25 (renewal $15), so it’s not like you’re going to break the bank on this plugin. Even a lifetime 50 site license is only $100, which makes that option a killer deal.

Smart-Slider-Templates

The pro version comes with 100+ templates

There are some key differences between the free and paid versions in terms of what’s included and functionality. Here what you get with the paid version:

  • Unlimited dynamic slide generators
  • Advanced controls
  • Expert mode
  • Layer animations with live timeline
  • Ken Burns and background animations
  • A lightbox and image editor
  • 43 pre-built slider demos

When we run through a bit of tutorial later in the post you’ll see some of these features come into play. If you see them as being a requirement instead of a luxury, you’ll need to look at the paid version.

Installation & Setup

Installing Smart Slider is a snap. Simply upload the zip file from your desktop via the WordPress plugin installer, click activate and you’re ready to roll.

Here’s the thing: I wish I could give you a little more to work with here. Some kind of hiccup or a bug in the installation process, but no. Not a single problem, and it gets even better.

I’ve worked with quite a few well-known slider plugins and some of them, while loaded with features, were downright difficult to set-up. Smart Slider 3 was by far the easiest slider set-up I’ve ever experienced. How easy? I’m glad you asked.

Tutorial: Creating a Basic Slider

Once activated, Smart Slider places its own menu at the bottom of the WordPress Admin Panel. Clicking on the Smart Slider menu opens up the main interface where the first option you’ll see is a big green button that says “Create Slider” which opens up an initial setup window like you see below.

Smart-Slider-Create-Slider

From here you can name your slider and pick a general style. There are plenty of styles to pick from (including full-width, full-page, carousel, thumbnail and more), but we’re going to go with a block slider based upon the layout of our existing site. Click “CREATE” and Smart Slider will get to work building your base model slider. After a few seconds, you’ll end up on a screen that provides all the basic details about the plugin.

The first thing to note here is the publish slider section. You’ll need to use one of these three methods (short code, post editor, or PHP) when it comes time to publish your slide (#1 below). Before we can do that, we need to create some slides. This is where this plugin really demonstrates its ease of use.

All you need to do is click the green “ADD IMAGE SLIDE” button (#2 below) and your media library will open. From here you can select as many images as you want, or start with just one, and then click select in the media library window.

Smart-Slider-New-Slides

Note: You’re not limited to images when selecting your slide. You can also use video or posts as well as create an empty, static, or even dynamically created slides.

Smart Slider loads your slide(s) into the interface and you’re ready to either save and publish or start customizing. If I just go ahead and publish my slide, it’ll work fine but it’s not quite what I was looking for as you can see in the image below.

Smart-Slider-Off-Center

To fix this, I went into the “SIZE” menu and scrolled down to the responsive mode section. The current selection was “Fullwidth”, so I selected “Auto” and saved my progress. From there, I went back to the “GENERAL” tab and selected a center alignment.

 

Smart-Slider-Size-Change

When I talk about ease of use here, keep in mind this whole process took under 5 minutes on my first attempt.

Now it’s time to work on the side itself. When hovering over your slides in the display window, you’ll notice that a green first box appears in the top left corner. As you probably guessed, clicking it will tag that particular slide as the first in the sequence.

With my slider created and the background in place, it was time to add some content and transitions. To get this stage started, I simply clicked on the slide that I wanted to edit which takes me into the layers section. There are lots of individual settings in the right-hand panel but if you scroll to the bottom you’ll find an image your slide. You can then click on any of the elements from the left-hand panel in order to place them on your slide.

Smart Slider Elements

Creating these slides is really a post in itself. There are so many options available, it would be easy to go on forever. To give you an idea of the flexibility that this plugin provides, consider that each element you bring into your slider can be customized via:

  • An item menu
  • Animations
  • Layer settings

Within each of those menus are multiple sub-menus. For example, when you create a text element, as part of the item menu, you can adjust the font settings. Included in the font setting for that single element are:

  • Font family
  • Text color
  • Font size
  • Line height
  • Text decoration
  • Alignment
  • Letter & word spacing
  • Text transform settings
  • Text shadow

Every single text element on your slider can have unique settings, unique animations and it’s own timing settings. There is even a section for custom CSS.

As you’re adding elements and animations to your slide, on the pro version you’ll also notice a timeline feature. This allows you to control the display timing of individual elements and the duration of their animations using simple slide-bars. I relied on this feature when adding different layers to this slide a little later.

Smart-Slider-Timeline

Control timing, duration, and animations with the timeline editor (pro version)

Adding Layers & Animations

With our slider in place and the background all set up, it’s time to introduce some different elements and layers. We’re going to start with adding an image of a snowman to the slide. To do this, I start in the “LAYERS” menu and click “IMAGE”. Doing this will place a dummy image into the slide. From there you can click the dummy image in the bottom left and then select and resize the image from the media library.

Smart Slider Image Element Resize

Once I’ve selected, inserted, and resized my image, it’s time to add a basic animation which can be accomplished in a few steps. First is selecting the “ANIMATIONS” tab as seen below. Once that’s done, we’re going to click the green “IN” animation button.

 

Smart Slider Animations

The next screen is where I can select my desired animation as well as adjust the timing. For this particular slide, I’m introducing a “RIGHT” animation and increasing the duration to 2200ms. I’ll also add a delay of 300ms. At the bottom of this screen is an option to have a specific event trigger this animation, such as a mouse entering the slide or a click within the slide. I’m not bothering with those settings for this example.

Smart Slider In Animation Settings

Next, I’m going to add some text. Following the same process as above, Click on the add “TEXT” element and make your adjustments as required. I entered the text and then went into the font settings where I changed the size and color. I then added a “Fade In” animation and adjusted the timing so that it starts just after the snowman animation.

You’ll also notice in this menu that there is an option to have specific text for tablets and mobile devices. This is a great example of the kinds of features that make this plugin so user-friendly and flexible. In some “other” sliders, I’d be forced to use a media query and custom CSS.

Easily change your text layer depending on the device type

Easily change your text layer depending on the device type

To finish things off, I’m adding two more layers. The first is a text layer and the second is an image layer. Again, I followed the exact same process as above, but I delayed the animation timing just a little bit extra. You can see the final results below. All told, creating this slide was about a 20-minute process if you’re not typing instructions as you go.

Note: Converting this slide to a GIF altered some of the beautiful animation delays that I painstakingly assembled, but you get a general idea.

Smart-Slider-Example

Documentation & Support

The documentation for Smart Slider 3 is impressive. It’s a searchable knowledge base that is broken down into 8 categories and about 40 sub-categories. It covers almost any question you might possible have about how this plugin or a specific feature works.

If for some reason you can’t find the answer to your question, there is contact form located on the website and they also offer email support.

Conclusion

Having tried more than a few WordPress slider plugins, both free and paid, I can honestly say that this is one of the best that I’ve ever tested. It’s not just one specific feature that sets it apart either. It’s a combination of things that add up to what is simply an awesome plugin. It’s important to note that I haven’t covered every single feature. There are just too many list within the confines of this post.

I’m sure that if I spend a little more time working with the plugin, I’d find a few things I’d like to change, and maybe even a few bugs. However, considering the importance of first impressions, Smart Slider 3 manages to nail it right out of the gate. I think the ease of use will keep people around long enough that they can eventually take full advantage of the multitude of features offered. And trust me, there are many.

Download the Smart Slider 3

If you’re looking for a slider plugin for your WordPress website that will get you up and running quickly, but also has features that you can grow into, look no further. If I were plunking down my money for a slider, this is where it would go.

But hey, don’t take my word for it. Download the free version and try it for yourself.

+ Share
Disclosure

Daryn Collier

Daryn Collier is a digital marketer and writer for hire. He is passionate about working with other entrepreneurs who are committed to growing their businesses through inbound marketing. A husband, father and avid CrossFitter, when he’s not working or spending time with his family, he has a love for the barbell and lifting things that are heavy.

Related Posts

Back to all articles
  • 5 World-Class WordPress Comments Plugins to Help Your Site's Engagement

    5 World-Class WordPress Comments Plugins to Help Your Site’s Engagement

  • 6 Best WordPress Schema Markup Plugins for Rich Snippets and Structured Data

    6 Best WordPress Schema Markup Plugins for Rich Snippets and Structured Data

  • Thrive Architect Review (2023) – Best Landing Page Plugin for WordPress!

Coupons

View more deals
  • Recipe Card Blocks Coupon
    15% OFF

    Recipe Card Blocks Coupon

    Running a cooking or food website can be fun (and tasty) – but
    Get This Deal
  • WP 2FA Coupon
    20% OFF

    WP 2FA Coupon

    Security should be at the forefront of all site owner’s min
    Get This Deal
  • Themskingdom Coupon
    20% OFF

    ThemesKingdom Coupon

    First impressions count. As such, you’ll want a WordPress t
    Get This Deal
3 Comments Leave a Reply
  1. Allan says

    December 10, 2015 at 1:53 pm

    No doubt this is the best slider plugin for WordPress now. While it’s super simple to use, there are plenty of features to customize the slide content as you like. I especially like the feature for creating dynamic slides or video slides.

    I highly recommend Smart Slider 3.

    Reply
  2. Kobit says

    December 11, 2015 at 3:18 pm

    all those buttons, sections, options (x, y, x, y, offset…) bring confusion to me. it does not look simple while wordpress users need simplicity.
    screenshots leave much to be desired.

    Reply
  3. Akshay says

    December 11, 2015 at 7:05 pm

    Helpful Post, Thanks for sharing 🙂

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

18 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)
210 Best WordPress Hosting Options for 2023 (Pros & Cons)
38 Best Managed WordPress Hosting Providers for 2023 Compared
45 Best WooCommerce Hosting Providers Compared in 2023 (All Budgets)
5Top 9 Landing Page Plugins for WordPress (2023)
69 Best List Building Plugins for WordPress In 2023
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Thrive Themes Review: A Look At The Full Membership
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2023)?
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
1317 of the Best Google Fonts for 2023 (And How to Use Them in WordPress)
14How to Start a Blog in 2022 (Step by Step Guide)
15How To Fix ‘503 Service Unavailable’ WordPress Error
1611 Best Contact Form Plugins for WordPress in 2023
17How to Add a Custom Logo to Your WordPress Site
18How to Fix Error Establishing a Database Connection in WordPress

WPX Hosting: 50% OFF

Save 50% on WPX Hosting using our exclusive coupon code.

Get this Deal

Flywheel(our review)

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.
Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy