{"id":5704,"date":"2020-10-12T11:09:25","date_gmt":"2020-10-12T11:09:25","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5704"},"modified":"2021-04-13T11:39:11","modified_gmt":"2021-04-13T11:39:11","slug":"wordpress-sliders","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/","title":{"rendered":"WordPress Sliders: a Zoom In. How to Build Them, Tips, Tricks and Tools"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">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&#8230;but<\/span><\/p>\n<p><span style=\"font-weight: 400;\">(there\u2019s always a but, isn\u2019t it?)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">they can have some downsides.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I\u2019m trying to be objective here, so I\u2019m going to present the good, the bad, and the ugly of WordPress sliders. In the end, you decide whether you\u2019re a match or not.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this article I\u2019m going to talk about:<\/span><\/p>\n<ol>\n<li><a href=\"#section1\"><span style=\"font-weight: 400;\">Website sliders: why the love, why the hate?<\/span><\/a><\/li>\n<li><a href=\"#section2\"><span style=\"font-weight: 400;\">What can you include in your WordPress slider?<\/span><\/a><\/li>\n<li><a href=\"#section3\"><span style=\"font-weight: 400;\">Common sliders for B2B websites<\/span><\/a><\/li>\n<li><a href=\"#section4\"><span style=\"font-weight: 400;\">Common sliders for B2C websites<\/span><\/a><\/li>\n<li><a href=\"#section5\"><span style=\"font-weight: 400;\">How to build WordPress Sliders<\/span><\/a><\/li>\n<li><a href=\"#section6\"><span style=\"font-weight: 400;\">2 WordPress Slider plugin recommendations<\/span><\/a><\/li>\n<li><a href=\"#section7\"><span style=\"font-weight: 400;\">Best case practices for sliders\u2019 use<\/span><\/a><\/li>\n<li><a href=\"#section8\"><span style=\"font-weight: 400;\">Conclusion<\/span><\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s get going!<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Website sliders: why the love, why the hate?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">This debate hasn\u2019t been settled yet. Somehow I understand the arguments from both sides.<\/span><\/p>\n<p>&nbsp;<\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>Why do some designers hate sliders?<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sliders can affect website loading speed, meaning that you can hurt your conversion rates and affect your organic rankings.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Not all sliders are mobile responsive.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">People react to sliders as they react to ads: with banner blindness.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Some websites just clutter the info that they don\u2019t know where to put, in a slider. This creates a bad user experience.<\/span><\/li>\n<\/ul>\n<\/td>\n<td><strong>Why do some designers love sliders?<\/strong><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Slides can improve websites navigations, it can help users find more easily what they need<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sliders create a better visual experience and can lead to user engagement<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Sliders can better compress information and shorten web pages<\/span><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">Interestingly, some<\/span><a href=\"https:\/\/www.nngroup.com\/articles\/auto-forwarding\/\"><span style=\"font-weight: 400;\"> tests<\/span><\/a><span style=\"font-weight: 400;\"> have been made to prove the usefulness of sliders. The guys at <\/span><a href=\"https:\/\/cxl.com\/blog\/dont-use-automatic-image-sliders-or-carousels\/\"><span style=\"font-weight: 400;\">ConversionXL <\/span><\/a><span style=\"font-weight: 400;\">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\u2019re all over the place (imagine not having sliders in online stores, it could be a total mess).\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">There\u2019s this thing that we love patterns, and that we should use sliders where people would expect one. Now, here\u2019s 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<\/span><\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5711 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Hbo.jpg\" alt=\"Hbo slider example\" width=\"671\" height=\"270\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.hbo.com\/\"><span style=\"font-weight: 400;\">HBO<\/span><\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">we know there\u2019s a slider and we might end up engaging with them (but there are many factors involved here: copy, imagery, positioning\u2026).\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">At the end of the day, you shouldn\u2019t pick a side. Just do an A\/B test and decide whether a slider works in a specific place. If it doesn\u2019t, it shouldn\u2019t mean that there\u2019s something wrong with the slider, but maybe there\u2019s something wrong with the copy, the position, the offering&#8230;<\/span><br \/>\n<a id=\"section3\"><\/a><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">What can you include in your WordPress slider?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">This can be a long list. I\u2019m going to approach it from the B2B and B2C perspectives.\u00a0<\/span><span style=\"font-weight: 400;\">Let\u2019s see.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Common sliders for B2B websites<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Social proof<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">B2B businesses need a lot of social proof. Why so? Oftentimes the sales cycle can be as long as a year.\u00a0 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.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">From<a href=\"https:\/\/colibriwp.com\/blog\/wordpress-testimonials\/\"> testimonials<\/a>, product reviews, case studies, logos of companies they\u2019ve worked with, all of these can be included in sliders.<\/span><\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" class=\"aligncenter wp-image-5714\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Netguru.jpg\" alt=\"\" width=\"700\" height=\"270\" \/><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.netguru.com\/\"><span style=\"font-weight: 400;\">Netguru<\/span><\/a><\/em><\/p>\n<div class='embed-container'><a href=\"https:\/\/share.getcloudapp.com\/v1u2wkYb\"><img loading=\"lazy\" src=\"https:\/\/p221.p4.n0.cdn.getcloudapp.com\/items\/v1u2wkYb\/Screen%20Recording%202020-09-17%20at%2004.55.44.37%20PM.gif\" alt=\"Screen Recording 2020-09-17 at 04.55.44.37 PM\" width=\"1186\" height=\"620\" \/><\/a><\/div>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/unbounce.com\/\"><span style=\"font-weight: 400;\">unbounce.com<\/span><\/a><\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Product features can be included in sliders as well. When you combine them with beautiful visuals, you can wow your visitors.<img loading=\"lazy\" class=\"aligncenter wp-image-5715\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Semrush.jpg\" alt=\"Semrush slider\" width=\"700\" height=\"358\" \/><\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.semrush.com\/\"><span style=\"font-weight: 400;\">semrush.com<\/span><\/a><\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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. <img loading=\"lazy\" class=\"aligncenter wp-image-5713\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Kpis-studio.jpg\" alt=\"\" width=\"700\" height=\"267\" \/><\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/kpis.studio\/\"><span style=\"font-weight: 400;\">https:\/\/kpis.studio\/<\/span><\/a><\/em><\/p>\n<h3><span style=\"font-weight: 400;\">Common sliders for B2C websites<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">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.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5717\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Slider-on-Booking.com_.jpg\" alt=\"Slider on Booking.com\" width=\"700\" height=\"261\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.booking.com\/\"><span style=\"font-weight: 400;\">booking.com<\/span><\/a><\/em><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5712\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Ikea.jpg\" alt=\"Ikea carousel example\" width=\"650\" height=\"316\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.ikea.com\/us\/en\/\"><span style=\"font-weight: 400;\">Ikea.com<\/span><\/a><\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Main offers\/season\u2019s specials. Huge online retailers use such sliders on their homepage to show off some latest trends, special promotions, product categories, and so on.\u00a0\u00a0<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-5719\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Alibaba-slider-example.jpg\" alt=\"Alibaba slider example\" width=\"650\" height=\"212\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.alibaba.com\/\"><span style=\"font-weight: 400;\">alibaba.com<\/span><\/a><\/em><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Similar products recommendations<img loading=\"lazy\" class=\"aligncenter wp-image-5710\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Amazon.jpg\" alt=\"Amazon carousel example\" width=\"700\" height=\"170\" \/><\/span><\/li>\n<\/ul>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.amazon.co.uk\/\"><span style=\"font-weight: 400;\">Amazon<\/span><\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">Now, the moment you figure out what kind of <\/span><a href=\"https:\/\/colibriwp.com\/blog\/website-slider\/\"><span style=\"font-weight: 400;\">website slider<\/span><\/a><span style=\"font-weight: 400;\"> 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.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">How to build WordPress Sliders\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">WordPress doesn\u2019t 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 -&gt; Customizer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, I\u2019m going to show you how to create a WordPress slider using the Colibri Pro theme and the <a href=\"https:\/\/colibriwp.com\">Colibri WordPress builder<\/a>.<\/span><\/p>\n<p><b>Step 1:<\/b><span style=\"font-weight: 400;\"> From your WordPress Dashboard, go to Appearance -&gt; Customizer.<\/span><\/p>\n<p><b>Step 2:<\/b><span style=\"font-weight: 400;\"> Click on the \u201c<\/span><b>+<\/b><span style=\"font-weight: 400;\">\u201d and choose from the new window that pops up \u201cComponents\u201d. Select a slider or a carousel. In my example, I will go with the carousel.<img loading=\"lazy\" class=\"aligncenter wp-image-5705\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/add-slider-component.jpg\" alt=\"add the WordPress slider component\" width=\"500\" height=\"396\" \/><\/span><\/p>\n<p><b>Step 3: <\/b><span style=\"font-weight: 400;\">Drag the carousel and drop it where you want on your web page.<\/span><\/p>\n<div class='embed-container'><a href=\"https:\/\/share.getcloudapp.com\/yAubOQ0O\"><img loading=\"lazy\" src=\"https:\/\/p221.p4.n0.cdn.getcloudapp.com\/items\/yAubOQ0O\/Screen%20Recording%202020-09-18%20at%2008.46.26.05%20AM.gif\" alt=\"Screen Recording 2020-09-18 at 08.46.26.05 AM\" width=\"1306\" height=\"586\" \/><\/a><\/div>\n<p><b>Step 4: <\/b><span style=\"font-weight: 400;\">On the<\/span> <span style=\"font-weight: 400;\">left-hand side you will find a menu that will allow you to customize the carousel. When you select the whole component, from the \u201cContent\u201d menu you can:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add new carousel items<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Change the alignment of your carousel items, switch on or off the autoplay, under the \u201cCarousel options\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Set up navigation: arrow-shaped or dot-shaped, under \u201cNavigation options\u201d<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Customize transition<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Adjust the spacing between carousel items, or the inner padding<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">From the Advanced menu, you can:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Ensure that the carousel is responsive<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Add effects<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Change background, typography, borders, and more<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">both in normal and hover state.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you select an element of the carousel: image, title, icon, you will be able to customize all of them.\u00a0<\/span><\/p>\n<div class='embed-container'><a href=\"https:\/\/share.getcloudapp.com\/L1uJm6Qm\"><img loading=\"lazy\" src=\"https:\/\/p221.p4.n0.cdn.getcloudapp.com\/items\/L1uJm6Qm\/Screen%20Recording%202020-09-18%20at%2009.51.21.83%20AM.gif\" alt=\"Screen Recording 2020-09-18 at 09.51.21.83 AM\" width=\"1490\" height=\"600\" \/><\/a><\/div>\n<p><span style=\"font-weight: 400;\">More details, in this previous article of ours on how to use the ColibriWP <\/span><a href=\"https:\/\/colibriwp.com\/blog\/colibriwp-features-slider-carousel\/\"><span style=\"font-weight: 400;\">slider feature<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><br \/>\n<a id=\"section6\"><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Happy customizing!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, the second method for building a WordPress slider is through plugins.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">2 WordPress Slider plugin recommendations<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you don\u2019t already know how to install and activate a plugin, this tutorial will show you how to do it.<\/span><\/p>\n<div class='embed-container'><iframe loading=\"lazy\" title=\"How to Install, Deactivate and Work with WordPress Plugins\" width=\"1920\" height=\"1080\" src=\"https:\/\/www.youtube.com\/embed\/tRmW1Texk3k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p><span style=\"font-weight: 400;\">Now, if you go to wordpress.org, you can search for slider plugins easily. You just have to go to the \u201cPlugins\u201d menu item, and type \u201cslider\u201d in the search bar.<\/span><\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-5709\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/wordpress-slider-plugins.jpg\" alt=\"wordpress slider plugins\" width=\"1582\" height=\"751\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: <a href=\"http:\/\/Wordpress.org\">WordPress.org<\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, let\u2019s get going with the recommendations.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As seen in the screenshot above, Smart Slider 3 and MetaSlider are the most popular WordPress slider plugins out there.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3>1. <a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\"><span style=\"font-weight: 400;\">MetaSlider<\/span><\/a><\/h3>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5722 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/MetaSlider.jpg\" alt=\"MetaSlider WordPress slider plugin\" width=\"771\" height=\"246\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/wordpress.org\/plugins\/ml-slider\/\"><span style=\"font-weight: 400;\">https:\/\/wordpress.org\/plugins\/ml-slider\/<\/span><\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">MetaSlider has over 800k+ active installs. We love it because:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It integrates with Unsplash, our favorite free images database<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It\u2019s Gutenberg-ready, meaning that it can work in the Gutenberg editor as well<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It works by drag and drop<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It offers SEO optimization options through SEO fields.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>2. <a href=\"https:\/\/wordpress.org\/plugins\/smart-slider-3\/\"><span style=\"font-weight: 400;\">Smart Slider 3<\/span><\/a><\/h3>\n<p><img loading=\"lazy\" class=\"size-full wp-image-5723 aligncenter\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/Smart-Slider-3.jpg\" alt=\"Smart Slider 3 WordPress slider plugin\" width=\"778\" height=\"248\" \/><\/p>\n<p style=\"text-align: center;\"><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/wordpress.org\/plugins\/smart-slider-3\/\"><span style=\"font-weight: 400;\">https:\/\/wordpress.org\/plugins\/smart-slider-3\/<\/span><\/a><\/em><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Smart Slider 3 has more than 600k+ active installs. We like it because:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It\u2019s jam-packed with pre-made slides, saving you the trouble of reinventing the wheel<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">It\u2019s fully mobile responsive<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Has SEO options<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Best case practices for sliders\u2019 use<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Going back to the beginning of our topic, don\u2019t forget to:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Use carousels where people would expect one, else you will create a bad user experience.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Keep in mind that sliders are not about showing off someone\u2019s design skills, but they will need to bring value for the website visitor<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t make your slider look like ads, because we got used to skipping ads<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">DON\u2019T 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.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Make sure your arrow or dot-navigation has proper contrast so that it is obvious for the user that that\u2019s a slider he\u2019s seeing.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Don\u2019t use sliders that might distract visitors from the page\u2019s purpose, you don\u2019t want the slider to create confusion.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Check if your slider is slowing down your website<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Make sure that the slider looks good on the most popular devices out there.<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-weight: 400;\">Conclusion<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that you know the pros and cons of WordPress sliders, you can make a wise choice for your own website.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The building part is the easiest one. The proper theme or plugin can do the trick, you won\u2019t be needing any coding skills.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you wanna get fancier, there\u2019s always the option for <\/span><a href=\"https:\/\/colibriwp.com\/blog\/wordpress-custom-css\/\"><span style=\"font-weight: 400;\">custom CSS styling.<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Now, if you liked this article, and you want to learn more about how to <\/span><a href=\"https:\/\/colibriwp.com\/blog\/web-design-trends\/\"><span style=\"font-weight: 400;\">design a WordPress website<\/span><\/a><span style=\"font-weight: 400;\">, make sure to subscribe to our <\/span><a href=\"https:\/\/www.youtube.com\/channel\/UCN3ZM-C7TJgklVfseVHamHQ\"><span style=\"font-weight: 400;\">Youtube channel<\/span><\/a><span style=\"font-weight: 400;\"> and follow us on<\/span><a href=\"https:\/\/twitter.com\/WpColibri\"><span style=\"font-weight: 400;\"> Twitter<\/span><\/a><span style=\"font-weight: 400;\"> and <\/span><a href=\"https:\/\/www.facebook.com\/ColibriWP\"><span style=\"font-weight: 400;\">Facebook!<\/span><\/a><\/p>\n<p>[sibwp_form id=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;but (there\u2019s always a but, isn\u2019t it?) they can have some downsides. I\u2019m trying to be objective here, so I\u2019m going to present&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/\">Read more<\/a><\/p>\n","protected":false},"author":6,"featured_media":5708,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[159],"tags":[13,52,183,22],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WordPress Sliders: how to build them, tips and tools<\/title>\n<meta name=\"description\" content=\"WordPress sliders: some designers love them, some hate them. It&#039;s time to understand why, and which are the best practices out there. Get our tips &amp; tricks!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Sliders: how to build them, tips and tools\" \/>\n<meta property=\"og:description\" content=\"WordPress sliders: some designers love them, some hate them. It&#039;s time to understand why, and which are the best practices out there. Get our tips &amp; tricks!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-12T11:09:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-13T11:39:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/sliders.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alina Belascu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/sliders.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/sliders.jpg\",\"width\":1200,\"height\":628,\"caption\":\"WordPress sliders\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/\",\"name\":\"WordPress Sliders: how to build them, tips and tools\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#primaryimage\"},\"datePublished\":\"2020-10-12T11:09:25+00:00\",\"dateModified\":\"2021-04-13T11:39:11+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\"},\"description\":\"WordPress sliders: some designers love them, some hate them. It's time to understand why, and which are the best practices out there. Get our tips & tricks!\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Sliders: a Zoom In. How to Build Them, Tips, Tricks and Tools\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311\",\"name\":\"Alina Belascu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg\",\"caption\":\"Alina Belascu\"},\"description\":\"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.\",\"url\":\"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WordPress Sliders: how to build them, tips and tools","description":"WordPress sliders: some designers love them, some hate them. It's time to understand why, and which are the best practices out there. Get our tips & tricks!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Sliders: how to build them, tips and tools","og_description":"WordPress sliders: some designers love them, some hate them. It's time to understand why, and which are the best practices out there. Get our tips & tricks!","og_url":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/","og_site_name":"ColibriWP Blog","article_published_time":"2020-10-12T11:09:25+00:00","article_modified_time":"2021-04-13T11:39:11+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/sliders.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alina Belascu","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/sliders.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/sliders.jpg","width":1200,"height":628,"caption":"WordPress sliders"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#webpage","url":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/","name":"WordPress Sliders: how to build them, tips and tools","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#primaryimage"},"datePublished":"2020-10-12T11:09:25+00:00","dateModified":"2021-04-13T11:39:11+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311"},"description":"WordPress sliders: some designers love them, some hate them. It's time to understand why, and which are the best practices out there. Get our tips & tricks!","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/wordpress-sliders\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/wordpress-sliders\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WordPress Sliders: a Zoom In. How to Build Them, Tips, Tricks and Tools"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/87f760a68fccd9a3b83d34521adae311","name":"Alina Belascu","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2020\/09\/119058219_10158647533825351_1768509508910138441_o.jpg","caption":"Alina Belascu"},"description":"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.","url":"https:\/\/colibriwp.com\/blog\/author\/alina-belascu\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5704"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=5704"}],"version-history":[{"count":2,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5704\/revisions"}],"predecessor-version":[{"id":7525,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/5704\/revisions\/7525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/5708"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=5704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=5704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=5704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}