When used properly, sliders can help make a website appear more dynamic and lively while at the same time providing more information in a limited space.

If you are looking to add a feature-packed yet free slider plugin to your WordPress website, this tutorial will show you how.Ii'll give you an easy to follow step-by-step guide on using the free Smart Slider 3 plugin.

• 

  What Makes Slider Revolution the Best WordPress Slider Plugin?

  In a crowded online space, just placing images, text, and videos on your website is not enough to build a web presence. How you tell your story matters....
  
  


• 

  10 Best WordPress Slider & Carousel Plugins of 2019

  Whether you want to show off customer testimonials, your latest blog posts, your best images, or just celebrate the members of your team, there is a...
  
  


• 

  Best Ways to Create an Image Slider for WordPress

  Looking to add an image slider to your WordPress site? Check out some of the best free, paid, and custom solutions for your project here.
  
  


• 

  Why You Should Use Slider Revolution for Your WordPress Site

  If you’re looking for the best WordPress sliders on the market, look no further than the amazing Slider Revolution plugin for WordPress.
  
  

Smart Slider 3 Overview

Before we dive deep into this tutorial, let me provide a brief overview of the plugin and its features so that you can decide if it has everything that you want in such a plugin.

1. The sliders you create will be fully responsive, optimized for SEO and work with all WordPress themes.


2. You can edit each slide using a user friendly interface and see the live preview in real-time.
   
   


3. With a little creativity, you can create your own custom slides with unique design. You have full control over the appearance of all the headings, text, buttons etc. You can change everything from the typography to border-width and background color etc.


4. The sliders are mobile-friendly. They will look good on devices of all screen sizes.


5. People who don't want to start from scratch can simply use the provided templates and quickly set up their own slider by only changing the images.

It offers many more features which can be found on the plugin page. Smart Slider is not limited to just images and videos. You can use it to create sliders for posts among other things.

Editing Individual Slides

After you have installed and activated the plugin, the dashboard should look like the image below.

We will create our first slider using pre-built templates. To do that, click on Template Library and then choose Free on the next page. Now, go to the third template called Image Slider and click on Import. This will add the slider to your dashboard.

On the dashboard page, you can now hover over the imported template and click on the edit button to start editing the slider.

First we will edit the slides and change the images and captions. For this, hover on each slide and then click on the edit button that appears. You can also duplicate, delete or set a particular image as the first slide.

You should now see something similar to to the image below.

The background image can be changed by clicking on the Background button. This will show you a number of options. You can either make the background another image or set it to be a solid color or gradient.

Turning the overlay switch on in above image will overlay the image background with a semi-transparent color or gradient. If you only want to show a solid color or gradient on a specific slide without any images, simply click on the Color button and select the colors you want to use for the gradient.

Once you have changed the image, you can easily change the text White Brown Cow by clicking on it. This will give you a couple of options like adding a link, changing the background color or the font style, size and color etc.

Try playing around with different values and options to see how unique and different your results can be based on different settings.

As you can see in the above image, you get full control over the appearance of the caption. You can even click on the More button to add custom CSS to further customize the look.

What if you want to add more elements on your slide?

For instance, let's say that we wanted to tell readers a little bit more about tigers. In this case, you could click on the green plus button in the top left corner to add more elements like headings, text and images over the slide.

After making all the changes, you can instantly preview what the slide would look like on different devices by using the button available at the top. There are also undo and redo buttons in the top bar so that you can undo any changes you don't like.

Once you are satisfied with the results, simply click on the Save button to save them permanently. You can change the content and appearance of all other slides in a similar manner.

Changing Slider Settings

After making changes to individual slides, you might also prefer to change the settings which affect the slider as a whole. To do so, simply click on the slider you want to edit on the dashboard page and scroll down to the edit section. Here is a screenshot of the page where you can edit all the slider options.

Lets begin by changing the appearance and position of arrows. You can choose to either show no arrows at all or show them with a background or without any background. The first option will add a dark overlay under the arrows to make them stand out from the image background. You can choose from different icon shapes and only show them when users hover over the slide by turning on the Shows on hover option. You can also choose from 13 different pre-defined positions for the arrows.

You can also show bullets with each slider so that users can jump directly to an image at a particular position. There are a couple of options that you can turn on like only showing the bullets on hover or showing the slide thumbnail with each bullet. In this case, I have turned them off because our slider will have thumbnails below each slide making bullets redundant.

You can show thumbnails permanently by turning off the Shows on hover option. The width and height of the thumbnails are set to 100 px by 60 px by default. This will generally look good—the thumbnails are not big enough to be distracting but are big enough to show a quick preview. You can also align the thumbnails to left, center or right.

More Slider Settings

There are some other general settings that you can change like the name of the slider, its dimension and whether users can navigate through the slides using a keyboard. You can also set an animation for the transition between different slides and specify an animation duration.

There are a few other settings that you can change like setting the slider size and limiting its width on desktops, tablets, or mobile devices.

Finally, you can publish the slider using one of three different methods. 

The first is to directly add the shortcode to the in your posts and pages. The shortcode provided by the plugin already contains that right slider ID embedded into it. All you have to do is copy and paste it to the desired location. 

The plugin also adds an icon to the built-in WordPress editor that lets you easily add a slider to any page or post. 

Finally, you can integrate the slider in your theme using a PHP snippet to emit the slider shortcode.

Final Thoughts

In this tutorial, we used the free Smart Slider 3 plugin to create an image slider. However, you can also use it to create sliders for WordPress posts based on a category or tag. Try playing around with all the features of this plugin to see if it fits your needs.

People who are looking for more features should consider taking a look at some of the popular WordPress Slider plugins available on CodeCanyon. 

• 

  What Makes Slider Revolution the Best WordPress Slider Plugin?

  In a crowded online space, just placing images, text, and videos on your website is not enough to build a web presence. How you tell your story matters....
  
  


• 

  10 Best WordPress Slider & Carousel Plugins of 2019

  Whether you want to show off customer testimonials, your latest blog posts, your best images, or just celebrate the members of your team, there is a...
  
  


• 

  Best Ways to Create an Image Slider for WordPress

  Looking to add an image slider to your WordPress site? Check out some of the best free, paid, and custom solutions for your project here.
  
  


• 

  Why You Should Use Slider Revolution for Your WordPress Site

  If you’re looking for the best WordPress sliders on the market, look no further than the amazing Slider Revolution plugin for WordPress.
  
  

Also, if you want to use custom plugins but you're not comfortable tinkering with code and prefer to have someone do it all for you, consider managed WordPress hosting. Thanks to Envato's partnership with SiteGround, you can get up to 60% off managed WordPress hosting.