Though hotly contested by many web designers in the past, many websites feature carousels or sliders in their design. A carousel (or slider) is essentially a filmstrip of several images you can rotate through. Websites make use of this element because it allows multiple pieces of content to occupy a single space, which is useful especially when competing for priority or focus on the homepage.
Description: Lay out your products like cards!
Many people confuse the words “carousel” and “slider” because they both display images in a slideshow format, while offering some form of control: be it through arrows, thumbnail navigation, or transition effects between slides. However, they differ due to a small technicality: sliders slide the image vertically and horizontally while carousels rotate the image on an axis, facing the viewer. For the purpose of this article, they will both be considered as the same thing.
WordPress is one of the most popular content management systems (CMS) from which to build a website (Squarespace, Joomla, and Drupal all representing other popular CMS options). Because of its popularity, WordPress carousel plugins make it easy to configure this functionality on a WordPress website.
Similar Sliders - Carousel
The Controversy Around WordPress Carousels
Many web designers have been outspoken about the use of WordPress carousels (and sliders in general), calling out specific elements that they think cause problems: whether technical or relating to usability.
Some issues web designers have brought up against WordPress carousels include:
- The human eye reacts to movement. With carousels, people get distracted and their attention is taken away from the important stuff that matters.
- Many users mistake them for an ad (a negative association), because of their design and frequent movement and switching of slides.
- Users have a hard time reading the text before the carousel moves. The slide’s content is visible for a short time, so they may miss it.
- Carousels often have large, overpowering images which could have an opposite effect than intended, and according to Neil Patel, could even negatively affect SEO and web conversions.
- The typical WordPress carousel increases the page’s load time due to the heavy coding and memory that it requires. A longer load time also increases the bounce rate (which refers to people exiting a website without viewing more than one page), as many users expect pages to load within 3 seconds.
While these things could certain cause issues when it comes to SEO and conversions, they’re starting to become dated thanks to customization options, mobile responsiveness, and yes, even image optimization elements present in today’s WordPress carousel plugins.
And since there’s nothing more enjoyable than playing devil’s advocate, we’ve already debunked a lot of the “research” behind why many web designers hate WordPress carousels.
Now that we’ve gotten that out of our system, let’s move forward with the notion that WordPress carousels can actually help increase conversions on your website—so long as you implement them strategically.
The Best Uses for WordPress Carousels
Carousels find their greatest use in websites that rely heavily on visuals, such as ecommerce and photography sites.
WordPress carousels are useful when there is a need to compare things, such as products or offers. For example, ecommerce sites incorporate carousels in the recommendation section of a product page, so that users are shown a selection of related products without having to leave the page. Carousels can also be incorporated in showing off detailed product shots. Doing so improves usability by providing shoppers with access to additional perspective shots to help make a purchasing decision.
Carousels can also be used to show off galleries, timelines, and presentations, which is why they fare especially well on photography blogs. Blogs with several visual content assets, such as fashion blogs, also use sliders to show off featured/new posts.
Some websites (specifically ecommerce sites or the websites of service businesses) even have testimonial carousels that act as social proof.
In general, use WordPress carousels to:
- Save time and clicks
- Make messaging clear
- Organize a bulk of related content on a website
Many WordPress carousels offer a number of bells and whistles to customize according to your preferences. Make sure to follow these best practices so that you’re not tempted to let shiny objects get in the way of usability:
Best Practices for WordPress Carousels
Whether or not you agree with using carousels for a WordPress site, clients have the final word in their website’s design. Here are some tips to ensure that the WordPress carousels you install—on your website or theirs—work to serve conversion goals instead of acting against them.
First thing’s first, ask yourself if a WordPress carousel is truly necessary for the front and center of a homepage. The top of a website’s homepage is prime real estate space. While many designers advocate not putting a slider on the top of this page, it’s a hot web design trend that many swear by. Try to ignore the hype and make your own decision as to whether this important space is well-served with a WordPress carousel.
Many designers opt to use a carousel instead of a single hero image as it gives them the opportunity to draw attention to many different pieces of content (and resulting goals of this content). Choosing a single image to speak for this space can be difficult and it narrows the breadth of what you can talk about in that space.
Since the top of your webpage (above the fold) is the first thing that site visitors will see, it provides an opportunity to focus attention specifically on one message, instead of dividing attention among several images, text, and call to action buttons. A static hero image may be less likely to distract users than a rotating element, and thus may increase the chances of users navigating to explore the other areas of your website.
Here’s how it all comes together:
The Sephora website provides the perfect example of a hero image and slider working together symbiotically. This website displays a single static image with an offer at the top of the page and incorporates sliders immediately below to showcase newly arrived products, recommendations, and editor’s picks.
A general principle of good design is to let the users be in control. Because of this, another best practice when it comes to WordPress carousels is to not put slides on autoplay.
There are two ways to control sliders:
- Arrows that advance to the next slide: Can be placed on the slide, either above or below them.
- Buttons or dot navigation: Hollow circles that appear filled in reference to the current slide. This design schematic indicates how many slides there are and allows people to move to the slide they want, when they want. Make sure to use only if you have more than two slides in your slider.
As a matter of good user experience design, make sure that your WordPress carousel is setup to let the user know or get an idea of how many slides are on display, and keep the number of slides to a minimum.
Some recommend keeping it at a maximum of 5, while others say it’s best to keep it at 2, so as not to confuse users. On a final related note, ensure that the controls are located within the carousel and not outside it.
Within the carousel, keep images crisp and text short and simple. The clearer the text and images, the more likely users are to engage and understand the intended points. When designing slide content, make make links and buttons large enough to easily click (even on mobile). Speaking of mobile, 56% of website traffic comes from mobile, so your website, including your WordPress carousel, must incorporate responsive design.
How to Setup an Image Carousel for WordPress in Under 2 Minutes
There are several plugins you can use to set up an image carousel for WordPress, but one of the best plugins to use is the Smart Slider 3 plugin (ok, we may be a little biased…).
The Smart Slider 3 plugin comes in both paid and free options. Aside from allowing you to create sliders, it also has tools that allow you to create slides for Vimeo and YouTube. As an added bonus, you can use it to create slides from WordPress posts. In general, it provides a number of customization options to achieve your desired look and feel without sacrificing the user experience or technical necessities for SEO.
Installation and basic configuration of the Smart Slider 3 plugin onto your WordPress website after purchase or download takes less than 2 minutes. There are three ways to setup the plugin.
WordPress carousel example
After you installed Smart Slider 3, you can quickly create amazing WordPress carousels, such as this one.
How (and Why) to Setup a WordPress Carousel
Though not without their critics, the benefits of using a WordPress carousel far outweigh any potential issues they may cause. Furthermore, most web designers criticize negative aspects of sliders that are no longer relevant, thanks to a multitude of customization options and technical optimizations available with today’s best WordPress carousel plugins.