Content is what keeps your visitors coming to your website, but first impressions are also important: that’s how you catch them in the first place. Good content deserves a good presentation – even requires it. If your website looks primitive, it may look unprofessional regardless of the quality of your content.
This is where sliders come into play. This tutorial specifically comes into play with 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 a time and changes after a while or with user action. A card slider, inside images are displayed and animated to resemble a deck of cardssimilar to a card gallery.
In this tutorial, we will show you how to add a card slider to your WordPress website. But before we do, we’d like to take some time to discuss the situations in which a card slider could improve your website and when it should be best avoided. Here is what we will discuss:
A card slider is flashy, so you can use it as a card gallery, similar to a card gallery. showcase feature for photos and images
As with any gallery, cards can have an additional function: you can add a link to them and use them as a navigation feature. As part of the portfolio website, each page can be linked to the previous project. For example, on a movie project website, the images in the slider might be portraits of characters that link to the profile pages of the cast or the like. If such a bold design choice could work for your website, even a card slider could be used instead of a menu.
The card slider has another advantage: it’s movable and clickable, inviting user interaction, make your website more interesting: gives your visitors something to do.
Sliders are those great visual features, why not add them? WordPress has all these great looking plugins and features, and it’s understandable for a novice designer to dump everything and kitchen sink on their website.
This design approach is generally a bad idea, but when it comes to the card slider, there is something important to consider: Image size. A showcase feature will most likely use high-quality, high-resolution images and these slow loading.
Web site loading speed can affect your bounce rate (due to people giving up waiting for a page to load completely) and this A negative impact on your SERP positions. So use big features wisely and optimize your images to reduce their negative impact.
And now, if you’re sure that a card slider can improve your website, let’s get right to the heart of it.
With our own Qi Plugins for Elementor, you get 60 brand new professionally designed widgets that greatly expand Elementor’s already impressive capabilities. To use them, you must have Elementor installed, WordPress’ leading image editor – the free version of Elementor will do. Next, install the Qi Addons for Elementor and you’ll have access to all these new design elements, the card slider in between.
And you can install them all in minutes, as in the video below.
However, you may prefer your tutorials in text format. If that’s the case, keep reading. To start using the card slider, find the widget in the left-hand 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 inside general section of the content tab.
first option up Image Blending Style you can use it to change the direction of your “deck”. there is a choice between Shuffle Right and Shuffle Left. we will leave it Shuffle Rightdefault value.
Next Picture Elements. This is where you can add the images you want to your card slider. The default version of the slider contains three images, but you can add more by clicking the icon. + Add Item button. We will use three images, so we will not add more. You can also delete any item by clicking on it. x button or copy by clicking on it. copy button.
To add an image to an item, click the item. You can add a link by going inside the picture. Connection domain. The visitor who clicks on an image will be redirected to the linked page. We will not add the links now, but we will add the # sign to link to the top of the page where the image is located.
this Product image box is where you actually add your image. Click Select Image while hovering over the button Product image Box.
You can upload a new image or select an image already in the media library. After making your selection, Add Media button.
We did the same for the rest of our items, replacing the placeholder images. Final check on the system general episode Aspect Ratios Menu. This is where you choose the size and proportions of your images. You can choose from a variety of options here, including Clip Art, Square, Landscapeand document. we went with originalkeeping the size of our images.
To continue style tab and its style section, we see that there is only one control: Offset Step slider. You can use this control to show more or less of the images that are not on the top of your deck of cards by swiping or entering the number of pixels. we went with 50 pixel.
If the last part Slider Navigation Style, it’s all about how your navigation arrows look and behave. Here you can set different arrow icons. Navigation Arrows Previous and Navigation Arrows Next by choosing an arrow Icon Library or you can upload your own by clicking on it. Upload SVG button that appears on hover. This works pretty much the same as adding images to the gallery, and that’s what we’re going to do.
The next part of this tab, Normal and hover over the states of your navigation arrows.
Inside Normal In the section, the first visible color controls are: Navigation Arrow Color and Navigation Arrow Background Color. You can enter a color for both or choose one from the selector. We’re going to go for a very light gray. Navigation Arrow Color (#1e1e1e), but we won’t touch Navigation Arrow Background Color.
Next down, we have Navigation Arrow Size slider. You can enter a value or scroll wherever you want. we will arrange 22 pixel.
this Navigation Arrow Holder Height and Navigation Arrow Holder Weight There are sliders in case you want to change the size of the navigation arrow background. We will not use them in this tutorial.
Finally, Navigation Margin Top, Navigation Left Offset, and Space Between Arrows Sliders are used to change the position of the arrows relative to the images on or within the slider itself. we will arrange Navigation Margin Top with 6 pixels, Navigation Left Offset with 2.7% and Space Between Arrows with 28 pixels.
Inside hover over You can see that in the section of the tab that manages the hover behavior of your navigation arrows, it has all the same options as the arrow style. Normalwith an important addition: Enable Hover Arrow Gesture Menu. We will leave it at its default value Yupmeans the arrow moves on hover. We will leave all other controls as they are.
And here it is: your slider is finished.
It’s an elegant showcase and just one of the nearly endless number of ways you can set it up.
As a result
With Qi Plugins for Elementor, it only takes a few minutes to add an eye-catching and engaging widget like a card slider to your WordPress website. If you’ve ever been designing a website that could use this kind of flashy feature, you now know that Qi Plugins for Elementor help you. And if you use it with the free version of Elementor, all the amazing features of Addons will be at your fingertips absolutely free.
