Sliders became a familiar and universal part of the user experience on every business website. A slider right at the top of the home page was a decade-long trend for all businesses. It seems to be the perfect solution when your business provides more than one service, or you want to feature more than one sales pitch right where the most attention goes. But are sliders a must-have for business websites in 2021?

From my experience as a web designer in 2021, you need to be smart using sliders. If we consider the top of the home page block, the slider, in most cases, is not the best fit. Your website users’ attention span is getting shorter while your competition grows strong. You need to make the first visit to your website count! Use one specific and polished message on top of your page. Give your website visitors the essence of the value your product or service brings.

But sliders are intuitive for excellent user experience and look great. What is the best way to use a slider for my clients? 

The trick to consider when choosing a slider is to pick the right moment in the user journey. We need to capture user attention when your website user actively researches the details about the highlighted products.

You already picked user interest with your main message. When the user wants to know more, a slider with your clients’ business best value points will be the most engaging. Your visitors will take action - scroll the slider to get more details. This way, the website will satisfy users’ need for information, and the business will get all that exposure for best-selling points.

Why was the standard Webflow slider not enough?

Now a good client of mine, RK, is a real estate broker from Toronto. He approached me for a website to showcase his brand, extensive sales portfolio, and available properties for sale.

RK has the sales he’s proud of, and he wants his website visitors to see those on the landing page. It was a perfect match for this case - real estate clients want to evaluate the agents based on their experience.

So I offered to showcase those top sales in a slider format on the home page. That looked perfect in the design, and we signed it off. However, my client wanted to be able to update his website himself afterward. And here is the point where we could have a problem.

RK is an entrepreneur, and real estate is his wheelhouse. But he is not a Webflow expert by any means - he’s got some basic knowledge of the platform. And it would be both tedious and time-consuming for him to update the slider manually. 

So I wanted to build the solution for this slider that would allow RK to manage himself:

1. Add/remove slider elements (property listings in this case);
2. Edit listings information: address, status, price, and link to the listing page;
3. Set the order of the listings appearing in the slider.

That’s how I came up with the idea of building a CMS-powered slider. It would solve my client’s problem by taking all the data from the CMS and making the updates possible in just a few clicks.

A CMS-powered slider is not a native Webflow element  - it’s a custom thing. But good news - you don’t need to code to get it done. I’ll show you how I built it fast and easy, just in 4 steps.

Step 1: Create a new Webflow CMS collection

For RK, I created a collection of properties and called it ‘Collections”, and he filled it in with live property listings and information about them.

Inside this collection list, I added a switch and called it ‘Featured’. I also added a number element to the collection and called it ‘Featured order’ so that RK could set the order of the listings appearing in the slider. I’ll use both parameters later to filter listings inside the featured slider on the homepage.

Step 2. Building the slider

I put a slider element from the native Webflow Add Panel (A) and styled it the way I needed it. I just set the height and width to it and deleted the second slide because I will build a CMS into the 1st slide and reuse it (copy-and-paste).

Step 3. Inserting a Collection list element into the 1st slide.

I selected the 1st slide and put a Collection list element from the Add Panel into it. I also set the source of the collection to ‘Collections’ to link this element to the properties list I built-in CMS.

Step 4. Styling the collection list and set filter and sort order

I styled the Collection List Item for the 1st slide. Then I put the filter for the collection list item to ‘Featured is on’ and sort order to ‘Featured order, Smallest to largest’. I also checked ‘Limit items’ and set ‘Start at 1’ in the list settings.

Then I copied Slide 1 and pasted it. In the 2nd slide, I only adjusted the settings of the Collection List element to start at 2. I repeated this process to create three more slides (there are 5 in total now) and adjusted the limit settings to start at 3, 4, and 5 correspondingly.

The CMS-powered slider is ready! You can check out the result on RK’s website: https://www.raminkhaze.com/ 

As a bonus, I’ve built a similar CMS slider which you can use for your projects! So feel free to clone this project and adjust it to your needs. https://no-code-cms-powered-slider.webflow.io/

You can make custom pixel-perfect solutions for your own websites in Webflow.

No matter if you develop websites for clients or your own business. Webflow is designed to help you build and manage stunning websites that become your primary tool for business growth. Our experience shows that in 2023 an entrepreneur has to be agile and adopt the best digital practices to win over the competition.

Also, we’ve got our own Webflow templates to let you build your website FAST. Check them out. 😉