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

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

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

Source: unbounce.com

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

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.

Source: booking.com

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.  

Source: alibaba.com

• Similar products recommendations

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.

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.

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.

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

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

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!

[sibwp_form id=1]

The post WordPress Sliders: a Zoom In. How to Build Them, Tips, Tricks and Tools appeared first on ColibriWP Blog.

A site icon is attached to a site (or it should be) and it adds to the website personality. Given its generic use in all the site pages, it can be viewed as the symbol of that website in its entirety.

However, people often neglect and overlook them in the process of website design. Well, they shouldn’t…because favicons are a piece of a bigger puzzle called site identity.

Where does the favicon appear on a website?

The favorite icon is displayed in the browser tab where you open a page, next to that page title.

It’s also visible in the bookmarks bar, where the site link has been saved.

It might pass as unimportant, and not so visible, but the difference strikes when there’s no favicon in place. As web surfers usually find the favicon in place, they’ll slightly register its absence as a lack of care for the detail, in fact as something that’s missing.

Why is it so important to add a favicon to a website?

First, people are used to seeing favicons in place. No favicon results in confusion and doubt as to the website/company.

Second, a site icon that replicates onto each and every page serves much to memorizing the brand. It’s a helpful technique to get users remember the website when they come back to it, or when they check their bookmarks where they’ve saved the website. It’s an iconic extra that completes the website identity.

Third, a favicon adds to a website’s personality and strengthens the brand identity. It provides additional space where the brand can express its characteristics. When it comes to brand identity, you need to seize every opportunity to let it speak its force, and express its power of persuasion.

What happens if I have no favicon for my website?

We’ve already suggested, no favicon means the website looks incomplete. You’ve skipped some part of the brand identity; hence it’ll partially lose its expressiveness.

In a multitude of pages open in browser, yours will be a no-name. Actually, a no icon. This results in a lack of identity. You’ll list the consequences that derive from a favicon absence.

No favicon also equals no attention to important details, that can make a difference.

How to add a WordPress favicon?

To add a favicon to your WordPress website, you need to enter the Customizer of your theme. In the left-hand menu, choose General Settings -> Site Identity.

Besides settings for the logo, you should also have an option to insert a site icon (aka favicon).

You’ll get a preview of the site icon as it looks like in the browser tab and in the bookmarks bar.

Click Save and all is set up.

Site icon added

Site icon displayed in the browser tab

What’s the necessary dimension of a favicon?

There’s no general rule related to a favicon dimension. It depends on the theme you use, and its requirements for optimal display. Consider choosing an image of the dimensions indicated for that theme, and use it appropriately. It ensures the image is clear enough and effective in its role as a favorite icon.

How do I find a suitable favicon for my website?

For the favicon, you can use any image you find adequate for your website and brand identity. There are even some tools, known as favicon generators, that’ll help you in the process of selecting the best site icon.

So don’t postpone it, favicon insertion into your website will be ready in less than 5 minutes from reading this post.

The post Why and How to a WordPress Favicon to Your Website appeared first on ColibriWP Blog.