How to Use the Smart Slider Plugin for WordPress

Sliders always enhance the look of your site. Moreover, sliders are a practical way to present content on a reduced spot. The Smart Slider 3 Plugin for WordPress has a lot of features out of the box to configure and present beautiful sliders to your users. 

We also recommend the Metaslider Plugin which is another stylish way to build slideshow in WordPress. Click here for our MetaSlider review.

Step #1.- Install the Plugin

  • Click Plugins.
  • Type Smart slider into the search box.
  • Use your favorite method to install the plugin (I am working locally, so I’ll download and uncompress)
  • Activate the plugin on the Plugins page.

You will have a new menu item on your main navigation on the left. 

Step #2.- Create a Slider

  • Click Smart slider.
  • Click Go to Dashboard.
  • Click New Project.
  • Change the name of the project.
  • Click Create.

The plugin provides a drag and drop interface to upload multiple images at once.

  • Click Add slide.
  • Click Image (we’ll cover the other options in a future tutorial).
  • Select multiple images and upload them.
  • Add an alt text description for each image.
  • Click Select.

Each image is presented as a thumbnail and has a checkbox (for bulk operations), an edit button, and a contextual menu.

  • Click the Edit button on one of the images.
  • Add a Heading element.
  • Change color, font-family, and font-weight.
  • Add a column container.
  • Add a text element on the left and a button on the right.
  • Customize the text and styles according to your preferences.

Take a look at all the features and options available to you. The plugin is very complete and will spare you some CSS developing time. 

Notice also the navigation bar on top. You can change between slides and work with them independently. 

  • Click Save on the top right to save the slide. 
  • Click Back to return to the slider.

Let’s take a look at the other configuration options.

Step #3.- Other Configurations

  • The General menu tab provides general configurations about the slider, its shortcode, the PHP code to insert it into a template, as well as its basic information and design. 
  • The Size menu tab deals with the size of the slider, its layout, and the breakpoints for devices of different sizes. 
  • The Controls menu tab presents many configurable options to control the transition between slides. Here you are presented with options like bullets, thumbnails, and some other features like adding a shadow to the slider.
    • Turn on the Bullet slider widget
  • The Animations menu tab lets you select between different animation types.
    • Select the animation type of your preference.
  • The Autoplay option lets the slider run without user interaction. 
  • The Optimize option is there to “lazy-load” the sliders if they are not above the fold on your site. That means, it will load after the whole page has loaded.
  • The Slides and Developer options are more advanced and do not belong to the scope of this tutorial (they will be explained in a future article). 
  • Click Save.

Step #4.- Insert the Slider

  • Click Posts > Add New.
  • Type /slider and press Enter.
  • Click Select slider.
  • Select your slider.
  • Click Insert.
  • Add two more paragraphs.
  • Click Publish twice.
  • Click View Post.
  • Test arrows, bullets, and transition effect.

Summary

This tutorial has demonstrated the basic usage of the Smart Slider 3 Plugin for WordPress. More advanced options like layers, aligning, and background images will be covered in a future tutorial.

I hope you liked this tutorial. Thanks for reading! 

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x