How to Create a Preview Slider in WordPress
There’s no overstating the importance of visuals in creating a great user experience for a website. But if you’ve done what you could with the images on your website and it still feels like it lacks some movement to bring some life to it, don’t worry – you won’t have to opt for demanding visuals such as videos. You can always rely on functional animation features such as sliders to bring some dynamics to your web page. To take it up a notch, you can layer two sliders to get some really interesting effects, and you needn’t write a single line of code to do it. All you need is to get our Preview Slider widget for Elementor.
The Preview Slider widget is a part of the Qi Addons for Elementor plugin, a collection of over one hundred fully customizable widgets for the Elementor site builder. The collection was designed to give WordPress and Elementor enthusiasts a shortcut for creating great website elements that are easy to set up yet malleable enough to fit into any type of design.
The Preview Slider is one of a handful of sliders we have in the Qi Addons collection. In this article, we’ll show you how you can use it to create what amounts to two sliders that move synchronously. If you prefer watching videos over reading articles, we’ve created a video containing detailed explanations of the widget.
If you’ve decided to stick with the article, get ready to learn everything there is about creating an awesome preview slider with the Qi Addons for Elementor plugin. The topics we’ll cover include:
Before we set on our journey to creating a preview slider in WordPress, let’s first check if we have everything we need. Qi Addons for Elementor is a widget package for Elementor, so it only makes sense you’ll need to have Elementor installed if you want to use the addons. You can have either the free or the paid version of Elementor, it doesn’t make a difference.
With Elementor installed and activated, you can go ahead and install and activate the Qi Addons for Elementor plugin. With that done, feel free to open a new page or post, edit with Elementor, search for “preview slider” in the list of widgets, and drag the widget to the working area.
Don’t worry if this looks nothing like the examples on our widget page or the type of slider you’d want to see on your website. We’ll start modifying it in no time, and you’re always free to wander around the widget, explore, and create designs of your own.
The General Section
There are two options in the General section of the Content options: Images and Device Frame options. Images are grouped into Items, with each Item presenting a pair of images, the main image that serves as the background, and the device image that goes into the device frame.
The Device Frame option is where you can choose the type of device frame you want to have in your preview slider. We’ve opted for the Mobile device frame.
As for the images, we’ve decided to create three items, and choose the three pairs of main and device images. Keep in mind that, for a mobile type of device frame, portrait images might work best.
With that finished, we’ve added all the content we’ll need for the slider, and we can move on to the Slide Settings section.
Slider Settings
The Slider Settings section covers a variety of options you can use to further customize the behavior and, to some extent, the appearance of the Preview Slider widget. The options you’ll find here include the options for slide durations, the slide animation durations, image proportions, number of columns, and space between items. We won’t need all of those options while making our slider, however, so here are the ones we used.
We’ve set the Enable Centered Slides to Yes. This option is of little consequence when you have three items as it centers the main layer image, and there’s always one in the center anyway when you have three images.
Next, we’ve turned off the slider navigation. We’ll be relying on pagination for navigation – it’s enabled by default, and it’s there even though you can’t see it at the moment.
The option we’ll change following the slider navigation is the Partial Columns Value, the option that sets how much of the column is visible on the edges of the slider. We’ll enable partial columns and set their value to 0.07. We’ll also switch the number of columns to two under Number of Columns.
Columns Responsive is the option we’ll use to determine how many of the columns will appear on different screen widths. Setting the option to “custom” lets you choose the number of columns. We’ve set two for all but the final two widths – the 0 – 480px and 481 – 680px. For those two, we’ve set it to one.
The last option we’ve changed was the Space Between Items option. We’ve set it to 115px.
The next thing we need to do is address the elephant in the room – that your preview slider and ours don’t necessarily look the same. Different themes and different page layouts might give different results. To get closer to the slider we’ve used as the model for this exercise, you can do the following: go to Edit Section > Layout and change the Content Width to Full Width and Column Gap to No Gap. Next, under Page Settings, choose a full-width page layout. The results should get you closer to the model.
With that, we can move on to Style options.
The first set of Style options is in the Slider Navigation Style section. To access it, you need to have slider navigation enabled. We’ve disabled ours, but you should be free to go back to the Content options, enable navigation, and check out all of the options that are there. To stick with the tutorial, we’ll skip to the Slider Pagination Style section.
Slider Pagination Style
The options you’ll find under the Slider Pagination Style are everything you’ll need to fine-tune how the pagination of your slider looks and acts. You’ll be able to set its position, alignment, color, size, spacing, and whether it’s numbered pagination or not.
The first option we chose to change was the Pagination Position. We switched it to “outside” as that makes the pagination bullets more visible. We’ve also set the pagination offset to 88.
We’ve set the normal pagination color to #1e1e1e – a black – but we didn’t change the active pagination color. You can, of course, if you want to. We’ve also changed the pagination size to 9px, and the space between bullets to 8px.
With our pagination bullets nice and prominent, it’s a good time as any to move on to the Device Slider Style section.
Device Slider Style
The Device Slider Style options let us take care of the device frame and the image it contains. If you were wondering whether you can move the device frame around, resize it, or take care of those pointy corners of the image that were sticking out from the frame – you can, and this is where you’ll do it.
So here’s how we did it. For the Device Bottom Offset, we chose a value of -60 pixels. You can use negative values if you want to lower the image. For the Device Right Offset, we switched to percentages and chose the value of 6.
The Device Width option is used to reside the device. We’ve switched ours over to percentages and gave it a value of 25%. The Image Border Radius takes care of those corners – we’ve found that ours look nice at 15%. Finally, we’ve changed Image Offsets to 1 pixel all around.
With that, we’ve finished styling our preview slider. The results looked pretty close to the examples we’ve used as inspiration for this tutorial.
If yours didn’t look exactly like this, don’t worry – it might be due to your theme or some of the Elementor settings you might have set differently. That’s okay, though, as you don’t have to get the same results – you can style your preview slider and make it even more beautiful than the example we’ve used.
Let’s Wrap It Up!
Adding an image slider to your website is a great method for creating some movement and breaking the staleness of a web page. With our Preview Slider widget, however, you can go a step further and create two sliders that work together and simulate the display of images on various devices. As we’ve shown you, the widget is easy to configure, so you can get some great results in no time!
