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. I'll give you an easy-to-follow step-by-step guide to using the free Smart Slider 3 plugin.
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.
- The sliders you create will be fully responsive and optimized for SEO, and they will work with all WordPress themes.
- You can edit each slide using a user-friendly interface and see the live preview in real time.
- With a little creativity, you can create your own custom slides with unique designs. You have full control over the appearance of all the headings, text, buttons, etc. You can change everything from the typography to the border width, background color, etc.
- The sliders are mobile-friendly. They will look good on devices of all screen sizes.
- 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 over 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 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 the 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 or changing the background color, font style, size, 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 the Slider Settings
After making changes to individual slides, you might also prefer to change the settings that 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.
Let's begin by changing the appearance and position of the 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 predefined 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 dimensions, 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 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.
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.
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.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post