You can call them WordPress sliders, carousels, slideshows. In the end, they have the same scope: presenting information in a visual, engaging, more appealing way. They can help users better navigate your website…but
(there’s always a but, isn’t it?)
they can have some downsides.
I’m trying to be objective here, so I’m going to present the good, the bad, and the ugly of WordPress sliders. In the end, you decide whether you’re a match or not.
In this article I’m going to talk about:
- Website sliders: why the love, why the hate?
- What can you include in your WordPress slider?
- Common sliders for B2B websites
- Common sliders for B2C websites
- How to build WordPress Sliders
- 2 WordPress Slider plugin recommendations
- Best case practices for sliders’ use
Let’s get going!
Website sliders: why the love, why the hate?
This debate hasn’t been settled yet. Somehow I understand the arguments from both sides.
|Why do some designers hate sliders?
||Why do some designers love sliders?
Interestingly, some tests have been made to prove the usefulness of sliders. The guys at ConversionXL are totally against them, saying that they are hurting conversion rates. As much as I would love the guys, I would have to disagree. There are more nuances to the topic. In e-commerce, they’re all over the place (imagine not having sliders in online stores, it could be a total mess).
There’s this thing that we love patterns, and that we should use sliders where people would expect one. Now, here’s the catch. This expectation is trained. Like we were trained to recognize and use the hamburger menu. Patterns are given birth to. Right now, whenever we see these signs
we know there’s a slider and we might end up engaging with them (but there are many factors involved here: copy, imagery, positioning…).
At the end of the day, you shouldn’t pick a side. Just do an A/B test and decide whether a slider works in a specific place. If it doesn’t, it shouldn’t mean that there’s something wrong with the slider, but maybe there’s something wrong with the copy, the position, the offering…
What can you include in your WordPress slider?
This can be a long list. I’m going to approach it from the B2B and B2C perspectives. Let’s see.
Common sliders for B2B websites
- Social proof
B2B businesses need a lot of social proof. Why so? Oftentimes the sales cycle can be as long as a year. B2B companies need to prove that they are trustworthy, that they have proper knowledge, that they can solve the pain points of their persona. They need to prove that their solutions helped others and so on.
From testimonials, product reviews, case studies, logos of companies they’ve worked with, all of these can be included in sliders.
- Product features can be included in sliders as well. When you combine them with beautiful visuals, you can wow your visitors.
- Onboarding steps or timelines. These are a match for SaaS products or apps. You can use a slider to help explain, simplify or organize some processes.
Common sliders for B2C websites
- Product/services images. When a product can be represented visually through photos and videos, then you can show it off via sliders. These sliders are usually encountered in the fashion, travel, or food industries.
- Main offers/season’s specials. Huge online retailers use such sliders on their homepage to show off some latest trends, special promotions, product categories, and so on.
- Similar products recommendations
Now, the moment you figure out what kind of website slider to use, what you want to include in your slider, and where to insert it, we can go to the next step: building the slider.
How to build WordPress Sliders
WordPress doesn’t offer by default a built-in option for sliders. This is a feature that can be found in many of the WordPress themes out there (oftentimes it is a paid feature). If your theme has such a feature, you will be able to customize the slider under Appearance -> Customizer.
Now, I’m going to show you how to create a WordPress slider using the Colibri Pro theme and the Colibri WordPress builder.
Step 1: From your WordPress Dashboard, go to Appearance -> Customizer.
Step 2: Click on the “+” and choose from the new window that pops up “Components”. Select a slider or a carousel. In my example, I will go with the carousel.
Step 3: Drag the carousel and drop it where you want on your web page.
Step 4: On the left-hand side you will find a menu that will allow you to customize the carousel. When you select the whole component, from the “Content” menu you can:
- Add new carousel items
- Change the alignment of your carousel items, switch on or off the autoplay, under the “Carousel options”
- Set up navigation: arrow-shaped or dot-shaped, under “Navigation options”
- Customize transition
- Adjust the spacing between carousel items, or the inner padding
From the Advanced menu, you can:
- Ensure that the carousel is responsive
- Add effects
- Change background, typography, borders, and more
both in normal and hover state.
When you select an element of the carousel: image, title, icon, you will be able to customize all of them.
More details, in this previous article of ours on how to use the ColibriWP slider feature.
Now, the second method for building a WordPress slider is through plugins.
2 WordPress Slider plugin recommendations
If you don’t already know how to install and activate a plugin, this tutorial will show you how to do it.
Now, if you go to wordpress.org, you can search for slider plugins easily. You just have to go to the “Plugins” menu item, and type “slider” in the search bar.
Tens of plugins will show up. To make up your mind, always look at the reviews, at their popularity, and also if they are compatible with the latest WordPress version.
Now, let’s get going with the recommendations.
As seen in the screenshot above, Smart Slider 3 and MetaSlider are the most popular WordPress slider plugins out there.
MetaSlider has over 800k+ active installs. We love it because:
- It integrates with Unsplash, our favorite free images database
- It’s Gutenberg-ready, meaning that it can work in the Gutenberg editor as well
- It works by drag and drop
- It offers SEO optimization options through SEO fields.
Smart Slider 3 has more than 600k+ active installs. We like it because:
- It’s jam-packed with pre-made slides, saving you the trouble of reinventing the wheel
- It’s fully mobile responsive
- Has SEO options
Best case practices for sliders’ use
Going back to the beginning of our topic, don’t forget to:
- Use carousels where people would expect one, else you will create a bad user experience.
- Keep in mind that sliders are not about showing off someone’s design skills, but they will need to bring value for the website visitor
- Don’t make your slider look like ads, because we got used to skipping ads
- DON’T USE AUTOPLAY because it annoys the users. Your website visitors should be in control, give them the option to navigate freely through your carousel or slider.
- Make sure your arrow or dot-navigation has proper contrast so that it is obvious for the user that that’s a slider he’s seeing.
- Don’t use sliders that might distract visitors from the page’s purpose, you don’t want the slider to create confusion.
- Check if your slider is slowing down your website
- Make sure that the slider looks good on the most popular devices out there.
Now that you know the pros and cons of WordPress sliders, you can make a wise choice for your own website.
The building part is the easiest one. The proper theme or plugin can do the trick, you won’t be needing any coding skills.
If you wanna get fancier, there’s always the option for custom CSS styling.