It’s impossible to overstate the importance of images in creating a great user experience for a website. However, if you’ve done your best with the images on your website and you’re feeling a lack of movement to give your website some life, don’t worry – you won’t have to choose challenging images like videos. You can always rely on functional animation features like 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 don’t have to 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 part of the Qi Addons for Elementor plugin, a collection of over one hundred fully customizable widgets for the Elementor site builder. The collection is designed to provide WordPress and Elementor enthusiasts with a shortcut to create awesome website elements that are easy to install but malleable enough to fit into any design.
The Preview Slider is one of a handful of sliders in the Qi Plugins collection. In this article, we’ll show you how you can use it to create the amount of two sliders that move simultaneously. If you’d rather watch a video than read an article, we’ve created a video with detailed explanations of the widget.
If you’ve decided to stick with the article, get ready to learn all about creating an awesome preview slider with the Qi Addons for Elementor plugin. Topics we will cover are:
Before we begin our journey of creating a preview slider in WordPress, let’s check if we have everything we need. Qi Plugins for Elementor is a suite of widgets for Elementor so it only makes sense to have it. Workman It is installed if you want to use the plugins. You can have a free or paid version of Elementor, it doesn’t matter.
Once Elementor is installed and activated, you can go ahead and install and activate the following. Qi Plugins for Elementor plugin. Once you’ve done that, feel free to open a new page or post, edit it with Elementor, search for “preview slider” in the widget list and drag the widget to the workspace.
If this doesn’t look anything like the examples on our widget page or the type of slider you want to see on your website, don’t worry. We will start modifying it right away and you are always free to navigate the widget, explore and create your own designs.
General Section
The General section of the content options has two options: Images and Device Frame options. Images are grouped into Items, with each Item a pair of images, the main image acting as a background, and the device image entering the device frame.
The Device Frame option is where you can select the type of device frame you want in your preview slider. We chose the mobile device framework.
As for the images, we decided to create three items and choose three pairs of master and device images.. Note that portrait images may work best for one type of mobile device frame.
Once we’re done with that, we’ve added all the content we’ll need for the slider and we can move on to the Slides Settings section.
Slider Settings
The Slider Settings section covers the various options you can use to further customize the behavior and, to some extent, the appearance of the Preview Slider widget. Options you’ll find here include options for slide times, slide animation times, aspect ratios, number of columns, and spacing between elements. However, we won’t need all of these options when making our slider, so here’s what we use.
We set Enable Centered Slides to Yes. This option doesn’t matter much when you have three elements and three images yet always have one in the middle as it centers the main layer image.
Next, we turned off the slider navigation. We’ll rely on pagination for navigation – it’s enabled by default and is there even if you can’t see it right now.
The option we will change following the slider navigation is the Partial Column Value, which is the option that determines how much of the column appears at the edges of the slider. We will enable partial columns and set their value to 0.07. We will also change the number of columns to two under Number of Columns.
Responsive Columns is the option we’ll use to determine how many of the columns appear at different screen widths. Setting the option to “custom” will allow you to choose the number of columns. We specified two for all but the last two widths – 0 – 480 pixels and 481 – 680 pixels. We set it to one for these two.
The last option we changed was the Space Between Elements option. We set it to 115 pixels.
The next thing we need to do is address the elephant in the room – that your preview slider doesn’t have to look the same as ours. Different themes and different page layouts may yield different results. To approximate the slider we used as the model for this exercise, you can do the following: to go Edit Section > Edit and change Content Width to Full Width and Column Spacing to No Spacing. Next, choose a full-width page layout under Page Settings. The results should get you closer to the model.
With this we can switch to the Style options.
The first set of Style options is in the Slider Navigation Style section. You need to enable slider navigation to access it. We have ours disabled, but you should be free to go back to the Content options, enable navigation and check all the options available there. To stick with the tutorial, We’ll skip to the Slider Pagination Style section.
Slider Pagination Style
The options you’ll find under Slider Pagination Style are all you need to fine-tune how your slider’s pagination looks and moves. You will be able to adjust its position, alignment, color, size, spacing, and whether it is numbered or not.
The first option we chose to change was the Pagination Position. We changed it to “Out”. this makes the pagination bullets more visible. We also set the paging offset to 88.
We set the normal pagination color to #1e1e1e – black – but we haven’t changed the active pagination color. Of course, you can if you want. We also changed the pagination size to 9px and the space between bullets to 8px.
Since our pagination bullets are nice and distinct, now is a good time to move on to the Device Slider Style section.
Device Slider Style
The Device Slider Style options allow us to deal with the device frame and the image it contains. If you’re wondering if you can move the device frame around, resize it, or watch out for the jagged corners of the image sticking out of the frame – you can, and here’s where you will do it.
Here’s how we did it. We chose a value of -60 pixels for Device Bottom Offset. If you want to make the image smaller, you can use negative values. For Device Right Offset, we switched to percentages and selected 6.
The Device Width option is used to place the device. We converted ours to percentages and gave it a value of 25%. Image Boundary Radius takes care of these corners – we found that ours looked good 15%. Finally, we changed the Image Offsets to 1 pixel everywhere.
With that, we’re done styling our preview slider. The results looked pretty close to the examples we used as inspiration for this tutorial.
Don’t worry if yours doesn’t look exactly like this – it could be because of your theme or some of the Elementor settings you may have set differently. That’s okay though, because you don’t have to get the same results – you can style your preview slider and make it even prettier than the example we used.
Let’s wrap it up!
Adding an image slider to your website is a great way to create some movement and break the staleness of a web page. But with our Preview Slider widget, you can go a step further and create two sliders that work together and simulate viewing images on various devices. As we show you, the widget is easy to configure so you can get great results in no time!
Support our work ❤️
If you enjoyed this article, consider leaving a tip to help us keep publishing great content.
