Skip to Main Content

Smart Slider 3: a WordPress plugin to create sliders

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

The Sliders are elements that can be found on almost all the home pages of websites. Slider Smart 3 is a powerful plugin available in free and premium version.

The main features of this plugin

As a feature, it offers among others:

  • An intuitive user interface
  • A Drag-and-Drop Video Page Builder with Live Preview / 8
  • Dynamic slides that can be created using articles and filtered by ID, or custom pages
  • Slide generation (Dynamically) from a variety of social networks (Facebook, Dribbble, Flickr, Instagram, Twitter, YouTube and more).
  • Customizable control sliders 
  • Sliding animations in the background (Ken Burns)

Free vs Premium

If all you are looking for is a basic slider, Smart Slider 3 is available on WordPress.org in the plugins directory. Even the free version is impressive and special compared to some of the other sliders.

A personal single-site license costs only $ 25 (the renewal is at 15 $).

Smart-Slider-Templates

There are some key differences between the free and premium version in terms of content and features. Here's what you'll get with the premium version:

  • An unlimited generator of dynamic slides
  • Advanced commands
  • Expert mode
  • Animations in the background
  • An image viewer and editor
  • 43 slider demos

Tutorial: Creating a basic slider

If you have never installed WordPress, discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.

Once activated, the WordPress Slider Smart plugin puts its own menu at the bottom of the WordPress admin panel.

If you have never installed a WordPress plugin, find out How to install a plugin in WordPress

Click on the menu Smart Slider, the main interface opens where the first option you will see is a big green button: " Create Slider » which opens an initial configuration window as you see below.

Smart-Slider-Create-Slider

From there you can name your slider and choose a general style. There are a lot of styles to choose from (like full width, full page, carousel, thumbnail and more), but we're going to go with a block slider based on the layout of our existing website.

Click on "Create" and Slider Smart will begin designing your basic slider model. After a few seconds you will find yourself on a page that provides all the basic details about the plugin.

Discover How to create a privacy policy on WordPress

The first thing to note here is the section " Publish Slider". You will need to use one of these three methods (Shortcode, Page or Post editor, or PHP code) when it comes time to publish your slide (n ° 1 below). Before we can do that, we need to create slides.

This is where the plugin really demonstrates its ease of use.

All you need to do is click on the green button " Add Image slide "(n ° 2 below) and your media library will open. From there you can select as many images as you want, or start with just one, then click " Select In the media library window.

Smart-Slider-New Slides

Note: You are not limited to images when selecting your slide. You can also use video or articles as well as create empty, static, or even dynamic slides.

Consult How to duplicate (copy) your pages on WordPress: The tutorial

Smart Slider loads your slide into the interface and you're ready to save and publish or start customizing. However if I publish my slideshow it will work fine but it is not quite what I was looking for as you can see in the image below.

Smart Slider Off Center 1

To correct this I went to the menu "Size" and I scrolled down to the section responsive mode. The selection was "Fullwidth", so i chose "Auto" and saved my progress. From there, I returned to the " General "and a selected center alignment.

Smart-Slider-Size-Change

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

When I talk about ease of use here, keep in mind that this whole process took less than 5 minutes for my first attempt.

Now it's time to work on the slide itself. When you hover over your slides in the viewport, you will notice that a green box appears on the upper left corner. As you might have guessed, clicking will mark this slide as the first in the sequence.

See also 5 excellent premium WordPress plugins to add a slider

With my slider created and the background in place, it was time to add some content and transitions. To perform this step, I simply clicked on the slide I wanted to edit which leads me to the layers section.

There are a lot of individual settings in the right panel, but if you scroll down you'll find an image of your slide. You can then click on one of the items in the left panel to place them on your slide.

Smart-Slider-Elements

Creating these slides is another school. There are so many options available. To give you an idea of ​​the flexibility of this plugin, take a look at what each element can do for your slider via:

  • An item menu
  • Entertainment
  • Layer settings

In each of these menus, there are multiple sub-menus. For example, when you create a text element, you can adjust font settings such as: 

  • Police families
  • The text color
  • The font size
  • The height of the line
  • The decoration of the text
  • Alignment
  • Letter and word spacing
  • Text edit settings
  • Text shadow

Each text element on your slider can have unique settings, unique animations, and its own sync settings. There is even a section for the Custom CSS.

As you add elements and animations to your slide, on the pro version you will also notice a calendar function, which allows you to control the display time of individual elements and the duration of their animations using simple slide-bars.

I was relying on this feature when adding different layers for this slide a bit later.

Smart-Slider-Timeline

Adding layers & animations

With our slider in place and the background installed, it's time to introduce some different elements and layers. We'll start by adding an image of a snowman to the slide. To do this, I go to the menu "Layers" And click " Picture ". This will place a fictional image on the slide.

See also How to configure the WordPress Slider Revolution plugin

From there, you can click on the dummy image at the bottom left, then select and resize the image in the media library.

Smart-Slider-Image-Element-Resize

Once I've chosen, inserted, and resized my image, it's time to add some basic animation that can be accomplished in just a few steps.

The first is to select the tab "Animations" as seen below. Once done, we will click on the green animation button "In".

Smart-Slider-Animations

The next screen is where I can choose my animation as well as adjust the schedule. For this particular slide, I introduce a "RIGHT" animation and increase the duration to 2200ms.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Are you looking for an ftp to manage your WordPress files and folders, discover How to use FTP on Windows 10

I will also add a delay of 300ms. At the bottom of this screen there is an option to have a specific event and a trigger for that animation, such as a mouse hover or a click in the slide. I'm not going to complicate things with these settings for this example.

Smart-Slider-In-Animation-Settings

Then I will add some text. Following the same process as above, click on the item " add text And make your necessary adjustments. I entered the text and then went to the font settings where I changed the size and color.

I add an animation " Fade In And adjusted the calendar so that it starts right after the snowman animation.

You will also notice in this menu that there is a possibility to have specific text for tablets and devices mobile. This is a great example of the kinds of features that make this plugin so flexible and user-friendly.

In some "other" sliders, I would have been forced to use a media query and custom CSS.

Smart-Slider-Text-Layer-Options

Finally, I add two more layers. The first is a text layer and the second is an image layer. Again, I'm going through the exact same process as above, but I have taken a little extra into the timing of the animation. You can see the final results below.

All in all, creating this slide was a process of 20 minutes.

Note: Convert this slide to GIF will modify certain deadlines of the beautiful selected animations that I have carefully assembled.

Here is ! After trying a lot of plugins WordPress of slider, both free and premium, I can honestly say this is one of the best I have ever tested. It's not just one specific characteristic that makes it unique. It's a combination of things that show how just a great plugin it is.

It's important to note that I haven't covered every individual feature.

See also How to know which theme is used on a WordPress blog

I'm sure if I spent a little more time working with this plugin, I would find a few things that I would like to change, and maybe even a few bugs. I think the ease of use keeps people there long enough that they can eventually take full advantage of the multitude of features offered. And believe me, there are many.

Download Smart Slider 3

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer here some premium WordPress plugins that will help you do that.

1. WooCommerce Page Builder

WooCommerce Page Builder is a very popular WordPress plugin which offers a fairly consistent number of shortcodes and which allows you to create several types of personalized pages (product, cart, checkout, "my Account") on your website WooCommerce. It is an extension of Visual Composer plugin that you must install beforehand.WooCommerce-page-builder

Thanks to this plugin, you will have the possibility of create e-Commerce websites unique using any WordPress theme, and make you big bucks.

Download | Demo | Web hosting

2. Elementor

Originally launched in 2016, the Elementor WordPress plugin is one of the youngest page builders on this list. Despite its late start, Elementor quickly racked up over 1 active installs on WordPress.org, making it one of the Visual builders of the most popular WordPress pages.

elementor pro e1544277036401
What makes its reputation is its fluid visual interface, its different style options and other powerful features such as the complete creation of WordPress themes.

Its interface is divided into two main parts, with a third zone for certain parameters. The free version of Elementor offers 28 free widgets. The Pro version brings about 30 other widgets, a total of 58 widgets in the Pro version. The free version includes about 40 free templates, while the Pro version brings hundreds of additional templates.

 Download | Demo | Web hosting

3. Ninja Popups

With over 30 sales and a 000 star rating, Ninja Popups is one of the most popular WordPress plugins available on Code Canyon.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Ninja Popups wordpress plugins create popup pop up opt in

Besides a huge range of models for a variety of use, it also comes with several features such as: a visual builder of Popup, 10 different display positions for popups, 74 different animation effects, anti-blocking technology support to bypass ad blockers, a variety of targeting options, statistics in the dashboard, content blocking for opt-in email or sharing on social media, tons of integrations with email marketing services and more.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here is ! That's it for this tutorial and I hope it will help you easily create sliders or slides with the help of the WordPress Smart-Slider pluginIf you liked it, don't hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...  

This article features 2 comments

  1. Hello,
    Thank you for your detailed explanations on the smart slider 3.
    After creating my slider, I insert it in an article. The size of the slider does not conform to what I set with the tool. It occupies the entire width of the container. How can we adapt it to the predefined format in a page or an article?
    cordially

    1. Hello,

      I never tested on your theme, sorry. I invite you to read the plugin documentation or contact the developer.

Leave a comment

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

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
1 shares
Share
tweet
Save1