How to create an image slider for your WordPress site

February 23, 2017 - Categories: WordPress tutorials

Written by: MagicPress

Smart Slider 3 is one of the most popular WordPress slider plugins. It is powerful, feature-rich and very easy to use. The plugin allows you to create a slider for your posts and pages only with a few clicks, while providing the capability to fully customize every element in a slide.

1. Install and activate Smart Slider 3

The plugin is free and can be downloaded at the WordPress plugin repository. Upload it to your server or add it directly through the Dashboard at Plugins > Add New, then activate it to get started. Smart Slider will appear in the Dashboard menu on the left.

2. Create a slider

Upon clicking Smart Slider in the menu, the plugin Dashboard appears. You may notice a sample slider already exists, but let’s click New Slider to create our own!

A popup window with a few options appears. We can give a name to our new slider, select its appearance (in this case, default) and click Create

The new slider is ready! It is empty now, but we can add content to it.

3. Create the first slide

A slide can be added to the current slider by clicking New Slide. The process of creating a slide begins by selecting its background image. Pick one from the Media Library or upload a new one, and you are good to go.

a. Add content to the slide

Click the slide to edit its content and the slide editing area appears. Notice the toolbar on the left. This allows you to add elements to the slide, such as headings, text blocks, images or buttons. Think of each slide as stack of layers. Each element is added as a new layer and can be edited further.

Add a heading to the slide by clicking the respective button in the toolbar. Edit the text accordingly and add a link to it, if you like.

Feel free to style the heading in the next tab. You can select font, color, font size and weight, text alignment and decoration etc.

You may add more elements to the slide in the same manner, such as text blocks:

buttons:

even images:

An element layer can be copied, duplicated or deleted if it is no longer wanted. Simply right click the element and select the respective action.

b. Further editing of added elements

Each layer can be moved around simply by dragging and dropping it within the slide.

Lines appearing while you move the elements will help you align them properly.

Each element has advanced settings for more extensive control. For example, you may select which viewports an element appears in, by clicking the respective button. You can even apply a CSS class to an element, so it is styled according to the rules of the theme stylesheet.

c. Slide settings

Notice the buttons at the top of the slide editing area. These enable more advanced slide settings. For example, in the Background tab you can change the background image or switch to a background color, choose how the background image fits within the slider etc.

The Animation tab allows you to change the background animation style and speed, while the Settings tab helps you configure further slide options, such as name, duration etc.

Don’t forget to check out how your slide looks in every viewport (mobile, tablet, desktop), by clicking the buttons at the top.

Click Save at the top right corner when you are happy with your slide. Here, you can configure the settings of the slider.

4. Complete your slider

Now that you know how to add a slide to the slider and edit its content, add as many as you wish following the same process. All slides will appear in the Slides tab of the Smart Slider dashboard.

Click Save when you are happy with the slides and then Slider to return to the slider dashboard.

Scroll down, where more slider settings are available. Here, you can edit the slider name, controls, size, animation and playback settings and more. Make sure you go through the settings carefully.

Also, don’t forget to configure the navigation settings below. You may choose between arrows and bullets for navigation between slides, if the slider will autoplay or not, if the slide titles or thumbnails appear at the bottom of the slider etc. In this case, we want to navigate through slides using bullets, which we can style further by clicking the respective options.

Don’t forget to click the Save button at the top right corner of the dashboard. The slider is now ready to use.

5. Add your slider to a post or page

You can easily add the slider you just created to a post or page of your WordPress site. Let’s create a new post and complete its title and content. In order to add the slider to the post, click the Smart Slider 3 button as shown below:

A popup will appear for you to select which slider you would like to add to the post.

Notice how the shortcode of the slider has appeared in the post content. Click Publish to publish the post.

The slider should be visible in the post now. 🙂

More Features

As mentioned in the beginning of this post, Smart Slider 3 is a plugin packed with lots of features. For instance, you are not limited to using text and images. Slides can also be created by embedding YouTube or Vimeo content. They may even be dynamic and generated from your posts.

As you may have noticed above, sliders are embedded in posts or pages by using shortcodes:

[smartslider3 slider=3]

These can be used in theme template files by echoing a do_shortcode function like this:

<?php echo do_shortcode('[smartslider3 slider=3]'); ?>

So, for instance, if you want to use a slider in the front page of your site, create a section in the template file which displays the front page (usually front-page.php) and echo the respective shortcode in that section.

Feel free to explore all the capabilities of the plugin. For further information of how to use all features of Smart Slider 3, you can consult the official documentation.

Managed WordPress Hosting

Never depend on a single server again. Trust a cloud of servers specifically configured to serve WordPress. Minimum response time, top level security and 100% uptime for your website guaranteed.

LEARN MORE

Build your WordPress site in no time

You do not need any coding skills. In 3 easy steps your website is up and running. All that's missing is your content.

LEARN MORE