How to Add a Beautiful Animated Slider with Smart Slider 3

Sliders are a great way to present various types of content to your website's visitors while also ensuring that your site is aesthetically pleasing and attractive to the visitors' eye. Many WordPress themes come bundled with sliders, however it's a good idea to look at and work with a slider plugin that you choose. Here we take a look at one of the best plugins currently on the market - Smart Slider 3.
Share on facebook
Share on twitter
Share on email
Share on facebook
Share on twitter
Share on email

Sliders are a great way to present various types of content to your website’s visitors while also ensuring that your site is aesthetically pleasing and attractive to the visitors’ eye. Many WordPress themes come bundled with sliders in order to facilitate this idea, however it’s a good idea to look at and work with a slider plugin that you choose.

There are a couple of reasons to do this. Firstly, should you decide to change your theme at any time, your sliders will still work and you’ll be able to easily adapt them to the new design. Secondly, a separate plugin could offer more features that meet your particular needs. Below we’ll take a look at one of the top slider plugins of the moment; Smart Slider 3.

Smart Slider 3: Create Beautiful Sliders Within Minutes

promo1

Smart Slider 3 is a feature-rich and straightforward plugin that does what it is supposed to do: it helps you to create and manage sliders on WordPress websites with absolute ease. The plugin comes in both a free and Pro version, and for a detailed list of its technical details you can visit the Smart Slider website.

The free version is available in the WordPress plugin repository and allows you to create multiple sliders based on layers and various animations. You can control typography settings and implement your sliders by means of shortcodes, widgets, etc. The sliders are fully responsive and touch friendly, as well as being optimised for search engines.

The Pro version, among other things, offers additional layers and animations as well as priority support, but most importantly it comes with its own built-in lightbox and image editor together with over 100 pre-made sliders. Below we’ll take a look at what it’s like to work with this plugin.

Taking a Look at the Free Version

Installing and activating Smart Slider 3 works much like any other WordPress plugin. All you have to do is either install it directly from your WordPress site’s Plugins section, or upload the plugin’s zip file from the same section after downloading it.

The plugin adds a new section to the WordPress admin panel by the name of Smart Slider, and this is where all the action happens. While other plugins might insist on adding a custom post type for sliders, you do not have to deal with that here.

Your Smart Slider Dashboard

Taking a look at the Smart Slider Dashboard you’ll see that you’re provided with everything you need on one single page. At the top you can see a small menu that starts off on Sliders. Here you have the options of creating a new slider from scratch, using a sample slider, importing a slider, visiting all the external documentation, tutorials, etc, and more.

smart-slider-free-general-settings
Smart Slider’s General Settings Section (Free)

The Settings section will be where you start to select the general settings and item defaults for the slider plugin. These include everything from showing the help beacon at the bottom of your dashboard to setting the fonts and styles for the various items in your sliders.

Moving on to the remaining two menu options, the last one is a Go Pro option that will simply link you to the Smart Slider 3 website, but the Nextend option links you directly to the Nextend dashboard in your website’s Settings section. From this dashboard you’re able to set a few general and font settings for the entire plugin.

smart-slider-nextend-dashboard
The Nextend dashboard in your WordPress site’s Settings

These settings include using a protocol-relative URL and a number of JavaScript options such as choosing whether to load jQuery on the front-end of your site. There are also a number of font configuration options where you can choose the default font family and enable a number of font styles and character sets for that family.

Creating Your First Slider

smart-slider-free-create-slider
The popup to create a new slider

Creating your first slider couldn’t be easier. All you have to do is click on the Create Slider option, name and set the basic options for your new slider, then get to work putting together the slides you want.

Choosing the General Slider Settings

Starting with the slider’s general settings, here you’re able to select a number of important options that will determine what your slider looks like and how it works. You can choose what controls can be used on the slider (mouse scroll, mouse drag, touch, keyboard), its alignment, any animation settings you’d like, and more.

There are two further tabs for Size and Autoplay. These are pretty self-explanatory, however it’s good to point out that the Size tab also includes responsiveness options. These allow you to make the slider as responsive as you’d like by determining its behaviour depending on the screen sizes.

smart-slider-free-slider-general-settings
The general size and responsiveness options for your sliders

Moving further down the screen you’ll see another section dedicated to various other settings. This is where you can choose whether to display arrows, bullets, thumbnails or other methods of scrolling through your slides. This all depends on personal preference and the design of your site, and there are plenty of cool options to choose from.

smart-slider-free-slider-other-settings
The general thumbnail options for your slider

Setting the Individual Slide Options

When adding a new slide you can choose whether to make it an image, a video, a post, or some other custom slide. There are also options of adding a static or a dynamic slide.

The slide settings allow you to set a thumbnail image, a background colour or image, a link, as well as the slide duration, and further down the page the animation settings for the free version of the plugin allow you to set some basic animation options such as “Scale to fit”, “Zoom”, and a few others.

smart-slider-free-slider-slide-settings
Some of the layer settings for your individual slides

On the left hand side of the above screenshot you can see Layers selected, and all those options provided are the various layers that you can add to your slides. Each one is editable and has its own unique settings depending on what can be modified.

Previewing the Changes Live

Smart Slider 3 also offers a Preview from where you can view the slider as your work progresses. The live preview will include all the options and layers you would have saved, and it also provides three screen options; desktop, tablet and mobile. The slider responds to each screen size depending on the option you select.

smart-slider-free-slider-preview
Smart Slider 3’s Preview

Moving on to the Pro version

Even though you can already do quite a bit with the free version of Smart Slider 3, the Pro version takes things to a whole new level. There are new features that are only available in this version, together with extra layer types, all the available sample sliders and much more. If you’re not sure if it’s worth upgrading you can just take a look at the reasons listed here and keep following below.

Pre-made Sliders

Upon installation of the Pro version of Smart Slider you’re automatically presented with over 100 pre-made sliders that you can use as is or as a guide. There’s a very large variety of sliders for all possibilities, so finding one that fits your needs shouldn’t be too hard.

smart-slider-start

Once you’ve found one you can easily select it and modify its settings and content depending on what you’d like to create. This can save you a lot of time rather than setting up the nitty gritty options from scratch. Of course, if you have the time and resources available, it’s always good to create your own custom work.

Layer Animation Builder

The animation settings receive a big improvement in the Pro version. When editing a particular slide you can select the Animations setting which in turn provides you with four animation options. These are In, Loop, Out and Events.

smart-slider-dashboard-animation-settings
Setting a Loop animation for your slider.

Events allows you to add animations based on particular events such as clicks and the mouse entering or leaving the slider. In, Loop and Out on the other hand provide you with a large variety of animations and respective settings, as you can see above. Smart Slider 3 even includes a live preview of the animation that changes according to the settings you opt for.

Advanced Controls & Expert Settings

Upon activating the Pro version you’ll also notice a number of Advanced controls that weren’t there before. These allow for more control over your slider, such as the use of lazy loading, Fadein options, changing the loading animation and more.

smart-slider-advanced-settings
View more advanced options with Smart Slider Pro

It also offers an Expert mode that adds more settings to those already available. I suggest you only use these settings if you know what you’re doing, especially since the Simple mode already offers the majority of the settings you’d need.

smart-slider-expert-mode
Toggl between Simple and Expert depending on your abilities

Other Premium Options

Some of the other noteable additions when using the Pro version of Smart Slider 3 include the live timeline, additional layer & slider types to the ones mentioned in the Free version, a built-in lightbox, as well as a built-in image editor for added convenience.

Publishing the Slider

smart-slider-publish
The three ways of displaying a slider

There are three different ways of implementing your new slider onto the front-end of your WordPress site, and each one will work just as well as the other. You can either add a shortcode to the post or page of your liking, or you can use the Smart Slider icon in the Page or Post Editor, or you can even paste the provided PHP code directly into your theme’s template file.

smart-slider-frontend-1
An example of a sample slider displayed on a page using the shortcode.

Documentation, Support & Tutorials

Smart Slider 3 offers a separate documentation that is powered by HelpScout, offering various sections focusing on different aspects of the plugin and its troubleshooting and setup. It also includes a section dedicated to developers with details such as how to incorporate Smart Slider 3 within your WordPress theme, and last but not least you’ll find a number of FAQs to look through before or after purchasing.

smart-slider-3-documentation

Support is offered to users with a valid license through a very intuitive support system, and the plugin is also backed by a number of video tutorials that not only introduce you to Smart Slider 3, but also teach you how to get the most out of the plugin.

Pricing

As already mentioned, Smart Slider 3 comes in both a free and Pro version. The free version of the plugin is free for life and you can use it to add basic sliders to your WordPress site with ease. It can be downloaded from the WordPress plugin repository or installed directly from the Plugins section of your website. Do note that the free version only includes one slider type, six layer types and two dynamic slide generators.

smart-slider-3-pricing

The Pro version on the other hand offers all features and has two pricing plans. The first is the Personal pricing plan that costs $25 and renews at $15 per annum. This includes a single-site license for use on one platform for an unlimited time period, together with one year of support and updates.

The Lifetime license on the other hand costs $100 and can be used on up to 50 domains. This is also a one-time fee and the plugin can again be used for as long as is needed, however it includes lifetime support and updates while also working on all four available platforms (though we know you’ll choose WordPress anyway).

Conclusions & Recommendations

When determining whether a slider plugin is worthy of your WordPress site you should always take two things into considering:

  1. How easy and intuitive it is to use the plugin.
  2. How well does the plugin play with a variety of WordPress themes and configurations.

Smart Slider 3 is both a user-friendly and feature-filled plugin that doesn’t have a steep learning curve. The interface is slick and easy to use, and there isn’t much to complain about. The only possible downfall that was brought to my attention is that the interface for adding and managing sliders divides the WordPress admin area into vertical columns, and while this is ideal for managing your sliders efficiently, it can be tricky for those who work via smaller screens, such as netbook users.

The plugin is fully independent of the WordPress theme or site structure that you are using, hence making it an ideal choice if you plan on changing theme in the future. It also works right out of the box, allowing you to instantly implement a slider onto your website using the various methods mentioned above.

The price of the plugin is beyond reasonable when you consider the features it offers and how easy it is to use. The developer license (Lifetime) is also ideal for those who plan to use the plugin on multiple sites at once, plus it’s also a one time payment so you get to use the plugin for as long as you want without worrying about renewing for updates or support.

Taking all this into consideration we can safely say that Smart Slider 3 is one of the top WordPress slider plugins around and should definitely be taken into consideration when choosing the next slider plugin to implement on your WordPress site.

Table of Contents
Our Sponsors
Our sponsors

7 Responses

  1. Hey, Mark Zahra, I want to give you a big thanks for this great explanation. You write every detail about Slider and you have enough resources which will help reader like us. Keep it up dear.

  2. This was good write up. You went over some of the features better than Smart Slider does on their own site. For example, I was a little confused as to what animation effects the pro version would open up, but you cleared it up nicely.

    I have to say I have yet to find a better slider for creating customized animated slideshows (and I’ve tried a lot) so thanks for the review!

  3. I am wondering if you know how I can install the php into my theme? Like, where in my theme should I install it to have the slider appear at the top of my homepage under my header. I am having trouble finding this! Thank you so much for your help xx

  4. My wp site has Smart-Slider-3 Free version.
    the problem is that when I run my website on local host (WAMP Server) on windows8 machine my whole wp site runs perfectly except the home page slider.
    Please help me out what shoud i do ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Stay up-to-date with the Mayor
Sign up to receive one weekly email about our latest reviews, tutorials, giveaways and more.