WordPress Sliders: a Zoom In. How to Build Them, Tips, Tricks and Tools

WordPress sliders

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:

  1. Website sliders: why the love, why the hate?
  2. What can you include in your WordPress slider?
  3. Common sliders for B2B websites
  4. Common sliders for B2C websites
  5. How to build WordPress Sliders
  6. 2 WordPress Slider plugin recommendations
  7. Best case practices for sliders’ use
  8. Conclusion

 

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?

  • Sliders can affect website loading speed, meaning that you can hurt your conversion rates and affect your organic rankings.
  • Not all sliders are mobile responsive.
  • People react to sliders as they react to ads: with banner blindness.
  • Some websites just clutter the info that they don’t know where to put, in a slider. This creates a bad user experience.
Why do some designers love sliders?

  • Slides can improve websites navigations, it can help users find more easily what they need
  • Sliders create a better visual experience and can lead to user engagement
  • Sliders give the visitors the power to control what they see (they can skip the content easily, instead of simply scrolling to the content they need)
  • Sliders can better compress information and shorten web pages

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

Hbo slider example

Source: HBO

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.

Source: Netguru

Screen Recording 2020-09-17 at 04.55.44.37 PM.gif

Source: unbounce.com

 

  • Product features can be included in sliders as well. When you combine them with beautiful visuals, you can wow your visitors.Semrush slider

Source: semrush.com

  • 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.

 

Source: https://kpis.studio/

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.

Slider on Booking.com

Source: booking.com

Ikea carousel example

Source: Ikea.com

 

  • 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.  

Alibaba slider example

Source: alibaba.com

 

  • Similar products recommendationsAmazon carousel example

Source: Amazon

 

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.add the WordPress slider component

Step 3: Drag the carousel and drop it where you want on your web page.

Screen Recording 2020-09-18 at 08.46.26.05 AM.gif

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. 

Screen Recording 2020-09-18 at 09.51.21.83 AM.gif

More details, in this previous article of ours on how to use the ColibriWP slider feature.

Happy customizing!

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.

wordpress slider plugins

Source: WordPress.org

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.

 

1. MetaSlider

MetaSlider WordPress slider plugin

Source: https://wordpress.org/plugins/ml-slider/

 

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.

 

2. Smart Slider 3

Smart Slider 3 WordPress slider plugin

Source: https://wordpress.org/plugins/smart-slider-3/

 

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.

 

 

 

Conclusion

 

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.

 

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

Wanna jumpstart your business?

Get bi-monthly updates on:

  • designing stunning WordPress websites
  • building an online presence
  • promoting your website

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE