Adding a slider to your WordPress website is a great way to display images, create an interactive presentation, or share a range of content in a fixed space.
Since sliders can be added to almost any area of your website, including posts, pages, sidebars, and theme areas like the header and footer, they can be used in many different ways to engage visitors.
In this guide, I’ll cover how to create a slider with a free WordPress plugin in order to display custom content to your audience in a stylish format. If that sounds appealing, let’s get started.
What is a slider?
At its most basic, a slider is a collection of photos with automatic playback, or playback that’s controlled by the user.
However, you could create something much more advanced. For example, each slide could contain text, images, and videos as well as buttons that take the user to other parts of the slider or to external websites. Items on the sliders, such as text and images, could be animated and eye-catching effects could be applied during slide transitions.
The tool used for this tutorial lets you create basic and complex sliders, giving you plenty of creative freedom along with stylish templates to help you get started.
How to Create a Slider in WordPress
- Install and enable the Depicter WordPress Plugin.
- Create your first slider.
- Choose a template.
- Design your slider.
- Re-order, duplicate, and otherwise manage multiple slides.
- Preview your slider.
- Publish your slider.
The tool I’m going to be using for this tutorial is a plugin called Depicter. I’ve chosen Depicter as it’s free, easy to use, and has a good set of features.
It’s also been created by the team behind Cute Slider and Master Slider, a very popular slider plugin for WordPress that’s been around since 2013. During the three years of development, the team has taken all they’ve learned from creating and supporting popular slider tools and condensed that into a new plugin that aims to be the next generation in sliders.
1. Install and enable the Depicter WordPress Plugin.
The Depicter plugin can be downloaded for free from the WordPress directory or its official website. Once the plugin file has been downloaded to your computer, you can upload it to your WordPress website via the dashboard.
Once you’ve logged into your WordPress dashboard, go to Plugins > Add New. From the Add Plugins screen, click on the Upload Plugin button.
On the next screen, click on the Choose File button and find the downloaded Depicter plugin file on your computer. Next, click on the Install Now button.
On the next screen, click on the Activate Plugin button.
For more detailed instructions on this step, check out the complete guide to adding plugins to WordPress.
2. Create your first slider.
After activating Depicter, you should be redirected to the plugin dashboard. If not, you can access it by clicking Depicter in the left-hand sidebar menu.
You can then click on the Create Slider button to get started.
3. Choose a template.
One of the impressive things about Depicter is that it comes with a selection of well-designed slider templates. Currently, the templates span a few different categories, including business, food, portfolio, and services. There’s also a set of slider templates for online shops.
You can preview any template in a range of viewports, including tablet and smartphone. This is an effective way to ensure any content you add to your site with Depciter is mobile-friendly.
After checking out the templates from inside your WordPress dashboard, you can import one into your slider. Starting with a blank canvas is an option, too.
4. Design your slider.
Whether you start with a blank canvas or import a template, you can begin designing your slider right away, all through the powerful Depicter interface.
The left-hand sidebar contains all the elements that you can add to your sliders, such as photos, texts, videos, shapes and vectors, and buttons.
The settings and options for each item are activated as soon as you click on an item on the main canvas area. You’re able to edit many of the properties of the item you click on, depending on what type of item it is.
For example, the text properties that can be customized include font face, letter spacing, direction, line height, and more, as shown below.
For other types of items, it might be the rotation, opacity, border, and filter overlay.
Now let’s take a closer look at the different elements you can add in your Depicter slider below.
Stock Image and Video Library
While you can easily upload items to use in your sliders, such as images and videos, Depicter also has a library of royalty-free stock images and videos for you to use
When you add a video to a slide, you can define whether or not autoplay is enabled, if the video pauses on slide changes, if playback controls are displayed, and a few more properties.
You can also embed videos from YouTube and Vimeo into your slides. To achieve this, all you have to do is add the YouTube or Vimeo option from the left-hand sidebar and then enter the URL of the video into the relevant right-hand sidebar area. You can also change the settings to control whether the video plays right away, is muted, and how related videos are shown.
Text Options
While you can easily add a text box to a slide, Depicter also gives you readymade combination styles to work with.
These styles are predefined typeface and decoration combinations, such as a text surrounded by a box or text aligned in an eye-catching way.
Shapes and Vectors
You can also choose from a wide selection of shapes and vectors to insert into your Depicter slides.
As the name suggests, Depicter’s shapes tool lets you quickly draw a range of shapes, including triangles, squares, and circles.
The stock vectors cover a few different categories and give you a quick way to add more advanced shapes to your slides, such as buttons, frames, animals, and much more.
Buttons
Your sliders can be as interactive or non-interactive as you like. If you do want to add buttons to your slides, then Depicter has a selection of premade options for you to choose from.
It’s very easy to control what the buttons do, such as redirecting the user to a specific URL or slide when clicked. You can change the appearance of the buttons through the design settings.
Playback Controls
If you do want to make your slider more interactive, you can add controls to it. The options include forward and backward navigation arrows, pause and playback arrows, and scroll-down indicators.
You can also add navigation bullets that let your audience jump to a specific slide. Displaying a line timer or progress bar is an option, too.
Animations
You can also add animation and hover effects to any element as well as turn them into interactive buttons.
The animation effects are ideal for making your sliders more dynamic. A moving item will catch the eye of your visitors more than a static one. While it can be tempting to use all of the Depicter animation effects, it’s best to use them sparingly to avoid overwhelming your audience. So save them for the items you really want to stand out on the slide.
General Options
Depicter also has general options for each slider. These options are for setting slider height and ratio, enabling swipe navigation, configuring whether playback should start automatically and be looped, or if an animation effect should be applied to the slide transitions.
You can also choose whether or not to enable lazy loading of the slides and what type of loading animation to display.
Depicter supports custom CSS so you can customize your slider even further.
You can preview all of the options from inside the Depicter interface to help you decide which ones to use.
5. Re-order, duplicate, and otherwise manage multiple slides.
Each slideshow you create can have multiple slides. Keeping track of the individual slides is easy, thanks to the slides panel that can be opened at any time.
From the slides panel, you can quickly reorder the slides as well as delete and duplicate them.
By default, Depicter will automatically play through the slides in your slideshow. However, you can set the slider to stop on a particular slide. You can then use the aforementioned playback controls to let your audience progress through the slider at their own pace.
6. Preview your slider.
You can preview your slider at any point. Depicter lets you change the viewport to get a good idea of how your slider will look on smartphones, tablets, and desktop screens.
For an even more accurate preview of your slider, you can open it up in a new tab and run through it outside of the Depicter interface.
7. Publish your slider.
When you’re happy with your slider, you can publish it on your WordPress website.
Once published, you can make additional changes at any time. Any changes you do make will be instantly applied to the published slider when saved.
There are three main options for publishing a slider and making it available to your visitors.
The most common way to add a slider to your posts or pages is by using a block.
Another option is to add it to the sidebar or other widget-friendly part of your site via the WordPress site editor interface.
The other option is to insert PHP code into your theme files. This is ideal if you want to add a slider to your header, footer, or some other part of your site that’s outside of the main content areas.
Once you’ve added a slider to your site, it will function as defined in its settings. As mentioned, any published changes you make to the slider will be instantly visible to your visitors.
Adding a Depicter Slider to Your WordPress Site
There we have it: an easy way to add a basic or advanced slider to your WordPress website with a free plugin.
Since Depicter has a wide selection of editable templates, a built-in stock image and video libraries, a user-friendly interface, and lots of customization options, it should have everything you need to create your own unique sliders.
