How to Create a Slider on Your WordPress Website

The more elegant a website looks, the better the audience’s interaction with the content will be, right? On average, we have just 3 seconds to capture visitors’ attention in today’s instant-gratification world.

When a person lands on your website, it’s vital to divert their attention to something engaging, so they explore it further. One way of doing this is to add a slider on your homepage containing the list of services you provide or products you offer.

We’ll go through a step-by-step process to add a slider to your WordPress website.

How to Create a Slider on WordPress

There are different ways to make a slider, including using custom code, a plugin, or theme builders like Elementor. In this article, we’ll take the help of Smart Slider 3 and Elementor to design a slider for a WordPress website.

Smart Slider 3 incorporates all the fancy effects you can think of to amaze visitors. It supports the addition of text, headings, call-to-action buttons, and videos. You can choose from available designs and customize them to match your site’s style and branding.

You can add bullets, arrows, or thumbnails to make it more intuitive for visitors so they can effortlessly navigate through the information. However, it should reasonably match the website’s color scheme.

Download: Smart Slider 3

Let’s explore how you can use Smart Slider 3 to design a slider seamlessly for your website.

First, install the plugin from the WordPress plugins directory.

1. Go to Dashboard > Plugins > Add New.

Adding A New Plugin In WordPress Dashboard

2. Search for Smart Slider 3.

Searching For A Plugin In WordPress Plugins Directory

3. Install and activate the plugin.

Plugin Installed And Activated On The Website

Related: How to Create a Quiz or Survey Form in WordPress

How to Create a Slider With Smart Slider 3

Here’s how you can create the slider.

1. Click on the Smart Slider option in the dashboard menu.

Smart Slider Settings Option On WordPress Dashboard Menu

2. Click on Go to Dashboard.

Smart Slider Welcome Page

3. Click on New Project.

Smart Slider Dashboard Options In WordPress Dashboard

4. Either choose a template or create a new project. (Choosing a template will make it easier to design the slider).

Options To Create A New Slider In WordPress Dashboard

5. Among the free templates available, choose one that fits your needs.

6. Pick a template and click Import.

Importing Template To The Website From Smart Slider Plugin

Once the template has been imported, it’s time to customize it.

How to Edit and Customize the Slider

Here’s how you can customize the slider.

1. Go to Dashboard > Smart Slider.

Dashboard Menu To Edit The Slider

2. Click on the Edit Slider from the drop-down menu as shown above. Choose the desired template and click Edit.

Choosing A Template For Slider In WordPress Dashboard

3. In the edit section, a pop-up window will appear where you can edit and customize the image, background, and text according to your choice.

Pop Up Window For Editing The Template

4. After making the changes, click Save and preview the slider once.

Previewing The Edited Template

The slider is ready to go.

Related: How to Add Social Login to WordPress With Super Socializer

How to Add the Slider to Your Website

To add the slider to your website,

1. Go to Main Menu > Visit Site.

Visit Site Option In The Left Corner Of The WordPress Dashboard

2. Go to the page where you want to display the slider.

Choose A Page On The Website From The Menu

3. Click Edit with Elementor.

Editing Page To Add A Slider With Elementor

Let’s add the slider to the website using the Elementor page builder.

Add or Edit the Slider With Elementor

To add and edit the slider,

1. Go to the Elementor dashboard and search for “Smart slider”.

Search Smart Slider Widget

2. Drag and drop the widget to the place where you want to display the slider.

Adding The Smart Slider Widget To The Page

3. Once you drop the widget to the new section, a pop-up window will appear. Insert the template you imported previously.

Uploading The Template To The Smart Slider Page

The slider you created has been added to the home page.

Add a Slider to Increase Engagement Rate on Your Website

The first few milliseconds are crucial to create an excellent first impression. This is where the slider comes in. By enhancing the beauty of your website, sliders engage the users and divert the user’s attention to important information. Creating sliders might be a little time-consuming, but the results are worth the effort.

Adding sliders may help increase the engagement rate at your website, however, it may also slow it down. Regularly test your website with speed test tools like Google PageSpeed Insights, GTmetrix speed test, Pingdom speed test, and a few others. If you find your website lagging while loading resources for the slider, remove it from your website.


WordPress Speed Test Tools
The 7 Best WordPress Speed Test Tools

Test your site’s might and gather useful analytics with these WordPress speed test tools.

Read Next


About The Author

Next Post

Why Don’t Tech Companies Pay Their Engineers to Stay? | by Matthew Dean | Jul, 2021

Staying in a role builds valuable, company-specific domain knowledge. Leaving often results in a pay day. When news broke that breakout star Regé-Jean Page was leaving Bridgerton after only one season, my initial reaction was that of shock and heartbreak. I couldn’t fathom why Netflix and The Duke of Hastings […]