How to Create a Homepage Slider in WordPress [2024]

In today’s post, we’ll cover everything you need to know about how to create a slider in WordPress.

As always, here’s the video guide:

A slider is a super common website design element that showcases text, images, and videos by “sliding” from one slide to the next. 

They’re commonly used on business and portfolio websites. 

There are a ton of great free sliders to choose from, but you can also find some really nice paid sliders, too. 

Sliders can be programmed to run slideshows automatically, the moment someone hits your website – switching to the next slide every couple of seconds. 

Or, sliders can be static and let readers click a small arrow, for example, to swipe to the next slide. 

Some websites use sliders to display their most recent posts. They’ll usually add a link to the slides so that if someone wants to read the article, they can simply click the link and go to the content. 

One thing to keep in mind with sliders is that they may slow down your website a bit when it's trying to load a bunch of images or other content. But this can be mitigated by speeding up image loading speeds.

Another potential issue is mobile readiness.

Google now prioritizes websites that are mobile-responsive, so you should make sure your website is made for mobile regardless of whether you use a slider or not. 

But if you do use a slider, you have to make sure it’s responsive as well so it doesn’t look weird on mobile devices, ruining the customer experience, and doesn’t match Google guidelines, reducing your SEO impact. 

But with all that said, sliders offer many benefits.

Homepage sliders can help you do a number of things you wouldn’t be able to do without them. 

Sliders can showcase your products for you on your homepage, naturally leading visitors to click on them and see more, which is pretty common if you run an ecommerce website.

Sliders are visually appealing. They capture attention by displaying interesting content and can help ensure your visitors stick around on your website. 

Homepage sliders can be used to display important information. For example, sliders can be used to show all the services a business offers. Or it can be used to show the top projects in a freelancer’s portfolio. 

Sliders can show key text content, such as testimonials, one after another. This can be very powerful in proving to your website visitors they’re in the right place and you offer the right products and services for them. 

Now that you know what homepage sliders are and why you should have one, read on to see exactly how to put one on your website. 

Step #1 – Install the WordPress Homepage Slider Plugin

We're gonna be using a free plugin called smart slider 3 that’s super easy to use.

First, go into your WordPress dashboard and find the “Plugins” tab on the left-hand side menu and click on “Add New.”

Then type into the search bar the name of the slider, Slider 3. 

Once you see it, click on “Install Now” and then click “Activate.”

Step #2 – Create a New Slider

Now that you’ve installed Smart Slider 3, you’ll see it on the left-hand side menu in the dashboard. 

Scroll down and click on it. 

You’ll be presented with 2 options:

1. Create a new slider from scratch
2. Use a template

We’re all for creating your own template. If you feel comfortable with that, more power to you. 

But to be completely honest, we LOVE templates. It provides a solid foundation for creating something amazing that incorporates your unique flair within a proven framework. 

Plus, if you’re in a hurry or just plain lazy, templates are your best friend for getting things done with plenty of time to spare. 

So for this tutorial, we’re gonna click on “Template Library.”

You’ll be presented with tons of templates to choose from. Over 180 to be more exact. 

Some of them will cost you a pretty penny. 

But many of them are free. And if you only want to see the free templates, just click on the green “Free” button.

If you want to preview any of the sliders, simply click on them and you’ll be given a live preview of what one of these homepage sliders will look like and how it may function on your website.

Once you choose the slider you want to use, hover your mouse over the template and click on the “Import” button that appears. 

After it’s imported, you’ll see you now have 3 slides in your dashboard: slide 1, 2, and 3 that all add up to create a single slider.

You can now edit any of them to add text, images, and video. 

To edit them, hover over any of the slides and click on the “Edit” button. 

You’ll notice you’re now in the visual editor. 

If you want to change the text, simply click on the text and a small box will appear editor box will appear.

Inside this editor box, you can change the look and feel of the text by click on the paint can icon. That allows you to:

• Add a link to the text.
• Edit the color of the text.
• Change the font.
• Choose the size and weight of the font.
• Etc. 

You can do the same with the button below the text by clicking on it. 

Another feature to change for the button is what it will look like if someone hovers their mouse cursor over it.

If you click on the pencil button you can change the button text and also provide a link that the button will take the reader to.

You can even edit the entire slider box, not just the elements in the box, by clicking on it (I just clicked the white background of the box itself to select it).

Here you can change things like the background color or opacity. If you bring the opacity down, you can make the box a bit more transparent, allowing visitors to see the ship behind the image. 

You have many options for customization. 

Next, we’re going to change the background image for this slide. 

So scroll up and click on “Background.”

You'll see that the image button is already selected so all you have to do is scroll down and find the row titled “Background.” Next to it, you’ll see “Image” and it should already contain an image that you can swap out for the one you want.

Get rid of this image by hovering over it and clicking on the tiny X that appears. 

Then just add a new one by clicking on the green button. After that, go over to “Upload Files” and click on “Select Files.”

Now, simply select the image you’re looking for and click on “Open” and then click “Select.”

Your new image is now in there!

Then go up and click on the Save button in the upper right-hand corner and then click on “Slider” in the upper left-hand corner to go back to the main dashboard. 

Before moving on, I do have one other helpful tip for you. 

Scroll down just slightly and you’ll see a menu bar with tabs that say “Publish,” “General,” “Size,” and so on. 

Click on “General.”

In here you’ll find a few more customization options for how your slider looks. 

For example, you could change how the animation of the slider works. The default setting is horizontal. If you wanted, you could change it to fade from one image to another when you click on the arrows. 

But we’re gonna leave it be for this guide. 

Step #3 – Display Your Slider on Your Website

I'm going to show you how to do this with the basic WordPress editor as well as the element or page builder.

First, let's do the basic WordPress editor. 

How to Create a Homepage Slider Using WordPress Editor

All you have to do is simply go to the page that you want to put it on and edit that.

So we went to the dashboard on the left-hand side menu, clicked on “Pages” and added a new one. But you may want a homepage slider, so in that case, just go to your homepage in the WordPress dashboard. 

To add this slider at the top of this page, click on the little plus button in the upper left-hand corner and search for Smart Slider 3.

After you click on Smart Slider 3, it will appear on your page’s editor with a big blue button that says “Select Slider.” Go ahead and click it. 

Then select the slider you want to use.

Now all you have to do is click on “Publish” and then click “Publish” again. From there, you click on “View Page” to see what it looks like. 

Now you should see your homepage slider and it should work perfectly. 

Next, we’ll tell you how to display your slider using the element or page builder.

How to Create a Homepage Slider Using Element or Page Builder

So go back to your WordPress dashboard and navigate to whatever page you want to put the slider on, like your homepage. 

The easiest way to do this is to hover over your name in the upper left-hand corner of the WordPress dashboard and click on “Visit Site.”

You should be looking at your homepage. 

From here, click “Edit with Elementor” on that little menu bar on the page. 

So if you want to add the slider right at the top of the homepage, simply click on the little blue plus button at the center top of the page. 

Then search for Smart Slider 3 in the box that appears on the left. 

You’ll see options to choose from, one with a WordPress icon and one with the slider icon. Choose the option with the slider icon and drag it into the space where you want your slider and then select the slider you want to use. 

You’ll see your slider and be able to test it out right in the editor itself. 

Now, if you're like me, you might have these little white bars up at the top and the bottom of this slider. If you'd like to get rid of those, click on the “Advanced” tab in the editor menu on the left-hand side. 

Then underneath “Margin” change the value to negative 10. Those white bars should be completely gone at this point. 

Click “Update.”

OK, so that’s how to make a slider in WordPress!