CMS filtering on a collection list in Webflow with an 'All' button
HTML-код
- Опубликовано: 3 июл 2024
- Get the cloneable: webflow.partnerlinks.io/thela...
CMS Filter by @Finsweet finsweet.com/attributes/cms-f...
Twitter: / justriziki
---------------------------
Learn how to filter a collection list in Webflow with dynamic filter categories from a reference field and a pre-selected 'All' radio button to reset the filter using Finsweet CMS Filter.
---------------------------
Time stamps
0:00 Intro
0:42 Webflow setup
1:10 Adding Finsweet CMS Filter
1:55 Adding filter radio buttons
3:58 Adding the 'All' button
5:15 Fixing the 'All' button
6:05 Pre-selecting the 'All' button on page load
6:40 Styling the filter radio buttons
7:32 Final result
---------------------------
Affiliate links
Want to record videos like this? I’m using Screen Studio to record and edit professional looking videos in no time. Get the Mac app:
thelazygod.com/screenstudio
This is an affiliate link. It won’t cost more for you, but using the link will support the channel.
---------------------------
Thanks for watching!
Subscribe to stay in the loop.
Part 2 video, styling the radio button, is live now! ruclips.net/video/mzHG5JwqB2M/видео.html
Exactly what I was looking for, thank you
Glad you found it helpful!
keep up the good work just found you and subscribed
You are a magician sir.
🧙♂️🪄
Best overview of this!!! Finsweet need to hire you to do their overview videos 🤩
Thank you! Maybe I should make some more guides on how I use the Finsweet Attributes 🤔
@@thelazygod Just implemented CMS filters thanks to your video, thank you! My only question is how you format it for mobile stacking? I was hoping to make my buttons a little smaller on mobile and wrap them so that I end up with maybe the all button and two options on first line and then 2 or 3 on second line. However the all button seems to always sit on it's own line as it's not part of the collection list group. Any ideas on how you'd solve it? Cheers PAT
Yeah, with this method the all button is not part of the same flexbox as the other buttons, which makes it a bit harder to get them in the same layout like that. That's why I went for a horizontal scroll on mobile in this video, but it could probably be done.
I've always struggled setting this up properly. Thanks for the tutorial!
I feel you! I often forget one of the steps to get everything perfect. That's also why I left the wrong radio group in the video, since that's what I've messed up the most.
Thank you! I had a problem whith this All button every my project
Amazing tutorial bro! I learnt a lot and you are so calmly explaining us, I love it!
Thank you for this tutorial. I was giving up on the start checked (all button) functionality because the grouping is poorly explained on the Finsweet website. Thanks to you, I got it working. Great content. Keep it up 🤙 🔥
Great work, man!
I hope to see more of these videos, great job 🤜
Thanks! There will be a lot more coming! 🔥
Thank you.
Great video. It really helped me with my project, can you make the video for the styling, that would also go a long way
Glad it helped! Will try to record that one today, so it should be live next week.
@@thelazygod Thanks TLG, I look forward to it
The new video is live now! ruclips.net/video/mzHG5JwqB2M/видео.html
Thanks for this. When you add additional posts, I guess you mark them with the "All" field. Correct? If so, you could have added an "All" category. But this was helpful!
With the method I’ve shown here all existing and new posts will automatically appear in the “all” category in addition to their chosen category
I've watched a few CMS filter videos and this one was really good. Shows all the steps without wasting time. Only thing is your voice is a little difficult to hear clearly.
Thanks! I'll see what I can do to improve the audio on my next videos!
My theme is a multi reference field so I created a nested collection list. However, after I set the text attribute to the text, it does not work. What should I do? Thank you!
It should definitely also work for nested collection lists. I've added an example that also uses multi-reference to the cloneable. Check it out here: cms-filter-all-styling.webflow.io/multi-reference
Please ! That will be very helpful to understant how you make this CSS styling please ! Even if we can use clonable , its more satisfy to build himsel. If you can explain please
Great point! I’ll definitely look into making a video about the styling that went into these components
love the great content, can i ask what software u are using to record that tutorial? love the smooth zooms and mouse highlightning
Thank you! I’m using an app called Screen Studio, it’s really great for this type of content and makes editing a breeze. I have an affiliate link for it here screenstudio.lemonsqueezy.com?aff=wwRey