For your website to stand out from the rest, good design goes a long way. It takes as little as 50 milliseconds for website visitors to form their opinion, and 94% of these first impressions are related to web design.
So, what features comprise ‘good web design’?
Large, impressive images that catch your visitor’s attention are always a good call.
Luckily, WordPress.com is one of the most flexible platforms on the web where design is concerned. With loads of website templates and plugins available, it’s easy to extend the design and functionality of your site to reflect your brand.
Many premium templates enable you to feature images in extraordinary ways, including featured images, slideshows, and more. But, if you fancy taking this a step further, you can achieve even more impressive results with WordPress image carousels.
In light of this, we’re providing a comprehensive guide on image carousels: What they are, when to use them, and best practices.
Let’s get this tutorial started.
What’s an Image Carousel?
If you’ve not heard of the term before, you might find the search results a little confusing. Opinions on how to precisely define ‘image carousels’ are divided, as some use the phrase to simply refer to a gallery, slideshow, or image slider plugin. In contrast, others add that there are differences between a gallery and an image carousel.
For instance, a carousel may automatically move images to ‘rotate’ what visitors see with transition effects, whereas a gallery might have an overlay more akin to a media library that allows users to click between different images in succession, opening images in a lightbox when users click on them.
Some get even more granular and say that image carousels should move in a “3D” space, giving the impression the pictures are moving forwards and backward.
A slideshow, in comparison, might only move the photos horizontally.
Each image could click through to a specific product or page in any slideshow, driving traffic to promotions and content.
For this article, we’ll assume the term can be used interchangeably. That way, we can present various choices to help you decide on the best image gallery or slideshow for your needs.
When to Use WordPress Image Carousels
Image carousels are potent tools. They’re great for grabbing attention and holding it. As there’s movement involved, it’s much harder to scroll past them indifferently.
That said, here are a few scenarios where it makes sense to use a WordPress image carousel:
- Sharing a set of photos that form a blog post, such as a restaurant review, travel blog, etc.
- Providing detailed product images on a product or sales page so that visitors can see products from different angles, in use, or scale comparisons.
- Making comparisons – here, visitors can quickly and easily flick between them—for example, product variations or different deals.
When NOT to Use WordPress Image Carousels
Often, people introduce image carousels to their web design because they think it automatically makes their site more dynamic. However, they aren’t a one-size-fits-all solution to be used whenever you feel like it.
What makes image carousels useful in some situations simultaneously makes them unhelpful in others. More specifically, we’re talking about the fact they grab attention. Consequently, image carousels aren’t always appropriate for…
- The top of your homepage: Your header should showcase a single clear, coherent message about your site’s purpose. It’s the first thing visitors see, so it can be a turn-off if the message is confusing and split into several different images.
- The top of articles: You’ve probably clicked on a few bait-worthy articles in the past that led to image galleries cycling through listicle-style content across dozens of pages. People rightfully associate these kinds of image galleries with clickbait that generates ad revenue. I.e., not credible articles. As such, keep carousels away from the top of your written content. At least wait until you’ve won readers over before inserting a gallery.
- General media “storage”: Don’t create a WordPress image carousel just because you have images ‘left over’ and don’t know where to put them. Your website should be carefully curated only to include relevant information. If you’re putting images in a gallery just for the sake of it, you’re not using it right.
Adding WordPress Image Carousels to Your Site
If you’re using the WordPress.com block editor, it’s easy and intuitive to add image carousels to your WordPress site. Plenty of free and premium WordPress themes come with a drag-and-drop block page builder included, making the process a breeze. As you may have already guessed, this enables you to build your entire site by dragging and dropping blocks and arranging them however you like – including image carousels!
That said, there are several ways to create an image carousel for your WordPress.com site:
Slideshow Blocks
The slideshow block is the easiest and fastest way to display images in a carousel. You can use these on your WordPress posts and pages to create attention-grabbing visual content. These are best used where images themselves are the essential information on the page.
Slideshows enable the autoplay feature so that images automatically cycle after several seconds. You can specify the delay and re-order your pictures so they appear in the order you desire. As dynamic motion is involved, slideshows are great for drawing the eye to promote sales, new WooCommerce products, featured posts and custom post types, logo carousels demonstrating social proof, and more.
Thank you to Frankie for modeling the Slideshow Block for us.
Gallery Widget
The gallery widget (not to be confused with the gallery block, as explained below) is a simple way of displaying image galleries in your blog’s sidebar. Or, for that matter, anywhere else on the page that supports custom widgets – for example, the header or footer (remember that displaying sliders on your homepage header isn’t a great idea!).
It’s great for showcasing visual content where the pictures aren’t the main focus. The gallery widget doesn’t attract as much attention in the sidebar. However, you still enable viewers to explore supplemental image content – win-win. The same goes for placing image galleries in the footer, which is especially handy if you want readers to view images at the end of a blog post.
Pro Tip: With this widget, setting the gallery style to ‘a slideshow’ achieves similar effects as the slideshow block.
Gallery Block
The gallery block, by default, doesn’t display images as a carousel. Instead, it shows uploaded images in a grid format. In terms of customization, you can modify the layout and order of the snaps, making galleries fantastic for sites relying on visual content, like portfolios or WooCommerce stores with lots of product images to display.
Remember, if you stick pictures in an image slider and the shopper scrolls past, they might not see all the snaps. So, if you have several pictures, all of equal importance, a traditional slideshow probably won’t serve your needs. In contrast, the gallery block may suit you better.
However, the gallery block does function as a carousel when you click on an image. This launches a full-sized image spotlight where the viewer can navigate left or right to browse the previous or next photo.
To activate the carousel setting for your gallery block, set the “link to” option inside the block settings menu to “media file.” This enables visitors to view images as a full-screen WordPress image carousel, as described above. If you’re using WordPress.com’s text editor rather than its visual editor, you can insert the gallery shortcode in its simplest form like this:
Find out more about how to use the gallery block here.
Post Carousel Block
The post carousel block allows you to create a carousel with links to a set of posts based on category, tag, or author. The block comes with a large feature image to draw attention, and you can easily display existing content by adjusting the post carousel settings.
This block is ideally situated further down your homepage, where you might want to draw attention to featured content.
Alternatively, a post carousel block also works well at the bottom of blog posts, where you might want to entice readers to click through to other related posts. By providing website visitors helpful recommendations for further reading, you’ll improve viewer engagement.
WordPress Image Carousel Best Practices
By now, you’re likely in a much better position to decide which type of image carousel will work best on your WordPress site. In that case, it’s time to curate your images and/or posts and strategically place your carousel slider where it will likely fulfill its intended purpose.
That said, here are a few best practices and tips to help you use this powerful tool as effectively as possible:
Autoplay or No Autoplay?
It’s common for image carousels to automatically flip through content, with new images popping up to renew the reader’s interest. Needless to say, this works wonders for drawing the eye.
However, if your image slider’s purpose is to inform, autoplay might not provide enough time for the viewer to read the info before moving on. This can confuse, distract, or even outright annoy website visitors.
The moral of the story: If you’re presenting important info in your slideshow, ditch the autoplay and give full readers control over when they flick over to the next image.
Provide Advanced Navigation
Building on what we’ve just said, ensure viewers can control the slideshow and that it’s plainly obvious how to do so. For instance, you could indicate additional images with several faint dots or pagination under the feature image or small thumbnails. Similarly, arrows to the left and right communicate that they can navigate to the next slide when they’re ready. Be sure that touch-swipe is available for visitors using mobile devices to ensure a fully responsive image slider for a decent user experience.
Without autoplay, these indicators are vital for ensuring viewers don’t end up staring at a static image and miss out on the rest.
Keep Things SEO-Friendly
Always include image alt-texts in case the images fail to load inside your gallery or slideshow. Not only is this great for your WordPress website’s SEO, but it’s also essential for ensuring content is accessible to visitors using screen readers.
Also, from an SEO perspective, steer clear of associating sliding posts with H1 tags. These indicate a new page for every entry in your carousel slider and may confuse search engine crawlers.
Purposefully Order Your Images
Yes, responsive carousels capture attention. But they only successfully do so when the series kicks off with a strong image. According to Notre Dame University, 84% of people that click on carousels only interact with the first slide. As such, there’s a very high chance that viewers will tune out before reaching the end of the slideshow. With that in mind, always place the most important content early on in the slideshow.
Format Images
For slideshows to become a statement web design element – you need to format images correctly to display your content in its best possible light.
Put simply, this just means styling your image sizes so that they’re the optimum dimensions for your chosen type of image carousel.
Pro Tip: Whatever you do, don’t use differing image sizes in a slideshow. This creates a jarring visual user experience for the user and can consequently impact engagement.
Keep it Short and Sweet
As we’ve already said, don’t fill a WordPress gallery just because you can. Short carousels with only a few images are often the most effective and allow viewers to navigate your products and offers quickly. Less is more – so cut the excess and stick to quality over quantity.
WordPress Image Carousels – Are They Suitable for Your Site?
Image carousels, when used to the fullest, can add a dynamic edge to your website. But you mustn’t use them as a simple gimmick. What might appear to be a user-friendly feature to you could make it much harder to sell to your website visitors.
Just remember: Only purposeful and attention-grabbing content will successfully get readers and shoppers clicking through your slideshow.
When used right, they’re great for displaying premium content, featuring images, educating people about your products and promotions, and leading readers to other relevant content.
WordPress.com provides numerous ways to display images in a carousel. So go ahead and experiment with what WordPress.com can do for you; you can set up a site in minutes and get going for free!
ABOUT THE AUTHOR
Go WordPress 