Create Stunning Thumbnail Sliders For your WordPress Landing Pages

Creating an engaging image slider can significantly boost your website’s visual appeal and user engagement. With the Thumbnail Slider widget from Elementor Addon Elements, you can easily display interactive sliders with custom thumbnails.

Whether you’re highlighting product features, testimonials, or a portfolio gallery, a thumbnail slider can instantly grab attention and increase the time users spend on your site.

In this tutorial, we will go through the step-by-step process of adding a image slider to a WordPress website without writing a single line of code.

Key Takeaways

• What is a Thumbnail Slider and why use it in Elementor
• How to create a Thumbnail Slider using the EAE plugin
• Customize thumbnails, slider layout, and content
• Style the slider to match your brand design
• FAQs about using the Thumbnail Slider widget in Elementor

Want to go beyond basic image sliders? You can also create a Testimonial Thumbnail Slider to showcase client feedback in an eye-catching way.

What is Thumbnail Slider in Elementor

The Thumbnail Slider widget allows you to create an image slider with thumbnails. You can add slider images along with the content and custom thumbnails.

The Thumbnail Slider widget from Elementor Addon Elements allows you to:

• Add images, headings, text, and buttons to each slide
• Display custom thumbnails instead of default image previews
• Use carousel functionality for both slides and thumbnails

Bonus: You can choose the position of the thumbnails, top, bottom, or even inside the slider (Pro only).

Before going further, here is the demo setup of what we are going to achieve this:

Looking for more slider styles? Check out the Background Image Slider widget to create fullscreen background slideshows for landing pages or hero sections.

How to Create Thumbnail Slider in Elementor

Follow these simple steps to build your image slider with custom thumbnails:

Step 1: Install and Activate Elementor Addon Elements Plugin

First, install and activate the Elementor Addon Elements plugin. This plugin extends the free Elementor builder with extra widgets, including the Thumbnail Slider.

Step 2: Add Thumbnail Slider Widget

• Edit the page using the Elementor Page Builder plugin.
• Then, in the widget panel, look for the Thumbnail Slider option under the Elementor Addon Elements section.
• Drag and Drop the Thumbnail Slider widget into the container.

Step 3: Configure the Slider

Under the Thumbnail Slider widget, you will get three settings tabs: Slides, Thumbnails, and Slider Options.

General

In the General settings, choose where you want the thumbnail to appear. You can pick whether it should be at the top, bottom, or inside(only for pro), a slider.

After that, decide how wide you want the slider to be. Then, figure out where you want the thumbnail to be placed horizontally and vertically and how far away from its original position it should be.

Slides

Under the slides option, you will first see a sack of item boxes. By clicking on each box, you can add slides to your slider. By default, three slides are created; you can add more slides by clicking on the Add Item button.

Click on the slide tab to add images to the sliders. Next, under the Slide section, you will get three setting options to add Image, Content, and Style to the slides. You can also add a different thumbnail image by enabling the Custom Thumbnail Image option. Next, there are options to adjust the slider’s height, image position, and image size and apply overlay on images.

Thumbnails

The thumbnail option gives you the feature to configure the Thumbnails section of the slider. Set the settings related to the thumbnail, like  Space Between Thumbnails and Thumbs per view.

Enable the Arrow option to add navigational arrows to the Thumbnail Slider. Next, set the thumbnails’ position to display it on the top or bottom of the slider. Adjust the thumbnail’s height, thumbnail position, and thumbnail size and ratio.

Step 4: Styling the Thumbnail Slider

Once you have added images to the slider and configured it, you can style it under the style tab.

Here, under the Style option, you can apply styling to each element of the slider. Apply styling to the Slides, Heading, Description, Button, Slider Navigation, and Thumbnails. You can also set the border radius around the Thumbnails.

To enhance the typography, you can even use custom fonts in Elementor to make your slider text for better branding.

Also, check out the Demo of the Thumbnail Slider.

Start Creating a Thumbnail Slider in Elementor

Using a Thumbnail Slider is a simple but powerful way to increase engagement and visual appeal on your Elementor website. With the Elementor Addon Elements plugin, you can set up and style stunning image sliders with ease.

Ready to boost your homepage with an interactive slider? Check out the Thumbnail Slider Demo and also explore the Full Documentation of Thumbnail Slider.

FAQs on Creating a Thumbnail Slider in Elementor