What is a Cards Slider and How to Add It in WordPress
Content is what keeps your visitors coming to your website, but first impressions are also important: that’s how you hook them in the first place. Good content deserves a beautiful presentation – requires it, even. If your website looks rudimentary, it may appear unprofessional, regardless of the quality of your content.
This is where sliders come in. In the case of this tutorial specifically, the WordPress cards slider. Generally speaking, a slider is a dynamic design element used to display images and videos. Typically, it shows one image or video at one time, and changes after a while or through user action. A cards slider is a slider in which images are displayed and animated to resemble a deck of cards, similar to a cards gallery.
In this tutorial, we will be showing you how to add a cards slider to your WordPress website. But before we do that, we’d like to take some time to discuss the situations in which a cards slider can improve your website, and when it’s best avoided. Here’s what we’ll be discussing:
A cards slider is showy, so, similar to a cards gallery, you can use it as a showcase feature for photos and images.
As with any gallery, the cards can also have an added functionality: you can attach a link to them, and use them as a navigation feature. As part of a portfolio website, each page could link to a previous project. For example, on a film project website, images in the slider could be portraits of characters which link to profile pages of cast members or similar. A cards slider can even be used instead of a menu, if that sort of a bold design choice can work for your website.
There is another added benefit to a cards slider: being animated and clickable, it invites user interaction, making your website more engaging: it gives your visitors something to do.
Sliders are these fantastic visual features, so why not add them? WordPress has all these great looking addons and features, and it’d be understandable for a novice designer to just dump everything and the kitchen sink into the website.
This approach to design is generally a bad idea, but in the case of the cards slider, there is one major thing you need to consider: image size. A showcase feature is likely going to use high-quality, high resolution images, and they can be slow to load.
Website loading speed can affect your bounce rate (due to people simply giving up on waiting for a page to fully load), and that can have a negative effect on your SERP positions. So use large features judiciously, and optimize your images to mitigate their adverse effects.
And now, if you’re confident that a cards slider can improve your website, let’s get right down to the nitty-gritty.
With our very own Qi Addons for Elementor, you get 60 brand new professionally designed widgets which greatly expand Elementor’s already impressive capabilities. In order to use them, you need to have installed Elementor, the premier visual editor for WordPress – the free version of Elementor will do. Then, install the Qi Addons for Elementor plugin, and you will have gained access to all these new design elements, the cards slider among them.
And you can have it all set up within minutes, as in the video below.
You may, however, prefer your tutorials in text form. If that is the case, read on. To get started with the cards slider, find the widget in the left hand-side menu, and drag it to where you want it on the page.
You will see that the default version of the widget has three images. These are listed as items in the General section of the content tab.
The first option up is the Image Shuffle Style which you can use to change the direction of your “deck” of images. You have the choice between Shuffle Right and Shuffle Left. We will leave it at Shuffle Right, the default value.
Next down are the Image Items. This is where you can add the images you want in your cards slider. The default version of the slider contains three images, but you can add more by clicking the + Add Item button. We will be using three images, so we won’t be adding any more. You can also delete any item by clicking on the X button, or copy it by clicking on the Copy button.
To add an image to an item, click the item. You can add a link to the image by entering it into the Link field. A visitor clicking on an image will be taken to the linked page. We will not be adding the links now, but we will be adding the # mark to link to the top of the page the image is on.
The Item Image box is where you actually add your image. Click the Choose Image button while hovering over the Item Image box.
You can upload a new image or select an image already in the media library. Once you make your selection, click the Insert Media button.
We have done the same for the remainder of our items, replacing the placeholder images. The final control in the General section is the Image Proportions menu. This is where you choose the size and proportions of your images. You can choose between several options here, including Thumbnail, Square, Landscape, and Portrait. We have gone with Original, preserving the size of our images.
Moving on to the Style tab and its Style section, we find that there is only one control: the Offset Step slider. You can use it to show more or less of the images which are not on top of your deck of cards by sliding this control, or entering the number of pixels. We have gone with 50 pixels.
The final section is the Slider Navigation Style, which is all about how your navigation arrows look like and behave. Here is where you can set different arrow icons to Navigation Arrows Previous and Navigation Arrows Next by selecting an arrow from the Icon Library or you can upload your own by clicking on the Upload SVG button which appears on mouse hover. This works much the same as adding images to the gallery, and that is what we will do.
The next section of this tab governs the Normal and the Hover states of your navigation arrows.
In the Normal section, what first appears is the colour controls: the Navigation Arrow Color and the Navigation Arrow Background Color. You can enter a colour for either or choose one from the picker. We will go for a very light gray for the Navigation Arrow Color (#1e1e1e), but we will not touch the Navigation Arrow Background Color.
Next down, we have the Navigation Arrow Size slider. You can enter a value, or slide it to where you like it. We will set it to 22 pixels.
The Navigation Arrow Holder Height and Navigation Arrow Holder Weight sliders are there in case you wish to change the size of the background of the navigation arrow. We will not be using them in this tutorial.
Finally, the Navigation Margin Top, Navigation Left Offset, and the Space Between Arrows sliders are used to change the position of the arrows in relation to the images in the slider itself or each other. We will set Navigation Margin Top to 6 pixels, the Navigation Left Offset to 2.7% and the Space Between Arrows to 28 pixels.
In the Hover section of the tab, which governs the on-hover behaviour of your navigation arrows, you can see that it has all the same arrow styling options as the Normal, with one important addition: the Enable Hover Arrow Move menu. We will leave it on its default value of Yes, meaning that the arrow moves on mouse hover. We will leave all the other controls as they are.
And there you have it: your slider is finished.
An elegant showcase, and only one of a virtually unlimited number of ways you can set it up.
In Conclusion
With Qi Addons for Elementor, it only takes a few minutes to add an arresting and engaging widget like a cards slider to your WordPress website. If you are designing a website which could use this kind of a flashy, stand-out feature, now you know that Qi Addons for Elementor has you covered. And if you are using it with the free version of Elementor, all of Addons’ amazing features will be at your fingertips completely free.
