Some nifty tricks here man, thank you! Also, I appreciate you including a quick rundown at the beginning of what you're going to cover in the video, super helpful.
I think WIZARD is the perfect tagline for you, Timothy! You really are. These are such great tips. Going to watch the hide/show section again a few times to get a better grasp but this is so cool. Thank you for sharing!
You don't know how thankful I am for the first solution in this video! Was able to use it to make a nav-menu with categories which then lead to projects listings. Webflow's multireference limitations would have never allowed me to do what I needed. Thank you so much Timothy, keep it up!
Tim, you just saved me hundreds of dollars and hours of time with the last tip. I've been wondering how to manipulate CMS collections that way. Definitely appreciate you man 🤘🤘
Love the possibility to chose layouts on the item level. Is there also a way to change how many columns an item can use to feature items that span over two columns?
Hey @Timothy, thank you for this tutorial. It is a huge help. I have the need for more than 20 collections on a page and this is the perfect solution. The problem I am having is not all of the "sub items" are going into their respective list. For example, I have 9 items I want to be in the "tr-list" but only 3 or 1 or 5 pair together. Wondering if I am just missing something?
Hi Timothy, Thanks for sharing your knowledge. This video has helped me as I'm working on something similar. Is it possible to have different layouts for different categories (so the burger is the card design but the salads are just a text list)?
This is gold! Thanks, man! I really appreciate you doing this. The 20 collection limit was killing me, this just did the trick! Quick question: In the food menu example, you have in the left side some navigation to browse through the categories, would it be possible to use them and create anchors to each of the categories?
I'm filtering the tr-list using attributes with Finsweet code. Is it possible to get the visible collection list to update after the tr-list has been filtered?
One more question about the first trick: How can I animate the menu items? So in your example, I want to add a "on click (tap)" interaction so a hidden div with the ingredients gets shown. When I tried, I could apply "Hover" or "Pressed" animations, but the interactions one can add in the interaction panel in the top right corner do not transfer into the category divs, they only work on the original tr-wrap (which is hidden) items.
Great tips. I see you using the prefix of "c-" in your class names a lot-what does that stand for? Do you use it whenever there is a "collection" involved?
Thanks! The c stands for component. Some versions of the BEM naming convention recommend adding that before any classes that could be part of a unit, but in recent projects, I’ve followed another version of BEM which is a little cleaner
Oh my fricking god - so finally i can have the customer to create their own layout using the third part of your tutorial! This just blew my mind - I would love to see a more in depth video about this - do you have something like this on your patreon account? Tim ?
So I did this video a while back going more in depth on the setup but it was using conditional visibility. ua-cam.com/video/Pxx4JqmGbV0/v-deo.html I hope to be able to create an updated version going into even more detail using this new method eventually.
Hi Timothy! Regarding the first solution, I found it helpful, but I need to limit the items of each category to 3, how could I do that? I tried limiting the source CMS collection but it limits the whole collection (like it's supposed to)
I need help. The script for splitting a collection list into multiple sections is very nice, but somehow it screws up hover trigger for those items. The items in tr-wrap that is hidden still trigger the hover animation when I unhid it, but nothing happen on the ones in tr-contain. Triggers are set to class & only children.
Great tutorial as always! I am struggling to animate cms-items with different timing on page load - can I use the jquery builder for this or is there another way? Thanks!
I love this tutorial. I was looking for a way to display the CMS template with some changes compared to other cms pages. My only question would be: I am trying to make a multi-image field type inside a CMS template page (is a gallery of images) that was displayed differently depending on the client's preference, where you could have a grid with 3, 4, or even 5 columns. But I've been testing and it seems that there's no way to make it work cause the multi-image field has to be separately connected with another cms collection and it doesn't allow you to connect other fields. Is there a way to make it work with code that I don't know of? Thanks in advance for the help.
First of all, Tim, awesome! (as always) I notice you're not using Webflow e-commerce for what's obviously an online food ordering website of some sort. Can we assume you're using another tool for the e-com functionality (Cart, Payments etc.).?
Thank you! So for that project, each location partnered with a different delivery service for online ordering. The menu items page is just for learning more about the items.
Hey Timothy, love your videos. Currently on the hunt for a new monitor for web design and development. What in your opinion are the most important specs to look for in choosing a monitor for design work? Curious to get your input. Thanks!
Josh, You would want to look for a monitor with an IPS panel around 27” - 32” at 4K Resolution if you could afford it. I would suggest the Dell S2721QS if you can afford it. If not maybe the Dell 2721D would do good for you! There is also much to consider when it comes to eye care and the color accuracy, however, this may not be too important as long as you have the other suggested features you should love it!
@@cusable awesome thanks! the ones I had been looking at were the BenQ PD2700U, LG 27ul850 and the Asus Pro Art PA278QV. I wasn't sure if 4K res was worth the extra £100 over a WQHD screen for web design work.
Hello Tim ! Thanks for the great video ! I've got a question regarding the trick n°2. It works fine when there is no item at all in the "cms-item" but doesn't when some elements inside have a conditionnal visibility. Do you know why ? Thanks a lot ! Have a nice day
Hey dude, this was epic. Subbed. Question though, I have a client who has courses within categories that currently are static links. So when they add a course to the CMS it doesn't automatically add a link to its page in the Nav. Is this possible for a dropdown within a dropdown? I.e first drop down is courses, under which are categories of courses, and each category then opens to the courses within each category.
Thanks so much, Abid! Yes, I think this should be totally possible. You could probably even make the categories dynamic if desired. It’s the same process as the first example. Just your tr-list class should be added inside each of the nested dropdowns.
Hey Timothy, as always, great content. The last section of this one got me thinking... would there be a way to allow a site visitor to adjust a collection list style with a dropdown on the end site using jquery? User could select "Text only" or "Text and Images" from a dropdown and have the items in the list style based on that selection.
Yep! That’s 100% possible with the jQuery Builder natively. Just set the dropdown option link to on click add a class of text-only to the collection item class or elements inside the collection item and remove the class of image-only. And then on click of the second link, add the class of image-only and remove the class of text-only and any other style classes
WOW! I was looking for the first trick for months now! I use it to create a list of FAQs under the title of Sub-category, inside a Category template page. I couldn't have done it without you, Thank you so much. I do have a question about the code, It says "Note: This clones the CSS animations or hover states with each item but not with Webflow interactions applied to the item". My list items are FAQs with an integration that show/hide the answer. How can I recreate this integration? Now I can only see the Questions, but when I click on the item, the integration showing the answer disappeared. It does work on the "tr-wrap" invisible list. Thanks again! You are great!
Thank you as always, Timothy! Question, though: Exactly half of my items in the bottom List are showing up in the top List. If I set the bottom List limit to 10 items, 5 will show up at the top. And if I set to 20, then 10 will show up. Ever seen that before?
Looked at this with a coder friend, and it looks like there was a bit of a logic flaw! It was skipping every other item. If anyone has that issue, this adjustment to the code seemed to do the trick! $(function() { var itemCategories = $('.tr-wrap .tr-category') var itemCount = $('.tr-wrap .tr-category').length for (var i = 0; i < itemCount; i++) { var itemCategory = itemCategories.eq( i ); for (var d = 0; d < $('.tr-title').length; d++) { var title = $('.tr-title').eq( d ); if ( title.text() == itemCategory.text() ) { var parent = itemCategory.closest('.tr-item'); var titleContain = title.closest('.tr-contain').find('.tr-list'); parent.appendTo( titleContain ); } } } });
Hi Tim! I'm trying to use the "Split CMS subnav links into multiple static dropdowns using only one collection list" strategy you're describing here. But can't get it to work. I don't get any dropdown at all when trying to click the dropdown-link in my navbar - even though I've tried to name the different parts exactly as you've specified in the video. What else could I try? PS: I'm a patron
Hi David, I’d try checking the console for any errors to see if there’s conflicting code. Also, trying putting a static link in the WebFlow dropdown and checking to make sure it appears on the published site. Finally, also try using the split method with regular divs instead of a dropdown to make sure all the classes are right there (no spaces, capital letters, or classes that start with numbers). Usually for troubleshooting like this, it’s best to break things down into their simplest form and try different options
I've tried the first trick but every time it only puts a few of the items in the correct category and others don't show up. Somebody else having this problem? Or found a solution?
Would you recommend to avoid using CMS collection page templates, since you still cannot nest them into sub folders? I recently setup an incredibly efficient collection page template to handle 60+ dynamic pages, only to later realize that I could not place any of these pages into the correct directory-whereby drastically affecting SEO. Thoughts? Thanks as always, T.RICKS!
It probably depends on the situation. I wish we had more control over slugs in WebFlow CMS, but if the pages are similar enough to share the same slug, it could work. Sometimes I’ve had to create multiple versions of the same collection to get different slugs, but I’m not sure if there’s a way to have two slugs in one url even with regular pages.
I'm so lucky I found your channel after starting Webflow. You're a natural at explaining this stuff.
Thanks so much, Cameron! Happy to be of help!
Seriously one of the best Webflow channels I've ever come across. Thanks a lot for these nifty tricks, TRICKS! :)
Some nifty tricks here man, thank you! Also, I appreciate you including a quick rundown at the beginning of what you're going to cover in the video, super helpful.
Thanks so much for the feedback, Oli!
Absolutely agree! I think all the tutorials in the world should do that.
You're such a blessing to the Webflow community. Thank you for all the great content !!
Thanks so much, Ben! Glad to be helpful!
I think WIZARD is the perfect tagline for you, Timothy! You really are. These are such great tips. Going to watch the hide/show section again a few times to get a better grasp but this is so cool. Thank you for sharing!
Haha, thanks so much! I’m glad these tips are helpful.
Great video, Timothy! You make it look so effortless! I love the CMS tricks!
Thanks so much! Glad they’re helpful
You don't know how thankful I am for the first solution in this video! Was able to use it to make a nav-menu with categories which then lead to projects listings. Webflow's multireference limitations would have never allowed me to do what I needed. Thank you so much Timothy, keep it up!
I had just the same problem, was really frustrated to find out about the annoying limit of 5 items.
Thanks a lot! I was stuck with the CMS nesting limits but the first trick is a nice workaround.
wow truly saving my life here even two years later
Great video again. Loving the flexibility of the platform, especially CMS in tandem with these small JavaScript snippets. Thank you.
Happy to help!
Tim, you just saved me hundreds of dollars and hours of time with the last tip. I've been wondering how to manipulate CMS collections that way. Definitely appreciate you man 🤘🤘
Oh wow! So glad to hear that! 😄
@@timothyricks Would love a comment on your videos if Webflow ads any native capabilities that would override your custom code tips.
I had the same idea about using nested collections to filter items. But as always nicely done.
Love the possibility to chose layouts on the item level. Is there also a way to change how many columns an item can use to feature items that span over two columns?
A little sprinkle of magic - thank you for sharing.
Thanks Tomasz!
Hey @Timothy, thank you for this tutorial. It is a huge help. I have the need for more than 20 collections on a page and this is the perfect solution. The problem I am having is not all of the "sub items" are going into their respective list. For example, I have 9 items I want to be in the "tr-list" but only 3 or 1 or 5 pair together. Wondering if I am just missing something?
Awesome video again! I can't wait to start using these on my projects.
Thanks Gary! Glad these are helpful
Hi Timothy, Thanks for sharing your knowledge. This video has helped me as I'm working on something similar. Is it possible to have different layouts for different categories (so the burger is the card design but the salads are just a text list)?
This is gold! Thanks, man! I really appreciate you doing this. The 20 collection limit was killing me, this just did the trick!
Quick question: In the food menu example, you have in the left side some navigation to browse through the categories, would it be possible to use them and create anchors to each of the categories?
Great video! I love your new website design btw 🧙🏿♂️
Thanks so much!
That's amazing. Thanks Timothy!
You're a friggin' genius!
I'm filtering the tr-list using attributes with
Finsweet code. Is it possible to get the visible collection list to update after the tr-list has been filtered?
You sir, are a lifesaver!!
One more question about the first trick: How can I animate the menu items? So in your example, I want to add a "on click (tap)" interaction so a hidden div with the ingredients gets shown. When I tried, I could apply "Hover" or "Pressed" animations, but the interactions one can add in the interaction panel in the top right corner do not transfer into the category divs, they only work on the original tr-wrap (which is hidden) items.
As usual mate, great stuff!!!
Thank you!!
I've just used the 1st tricks for nested collections, very cool!
So glad to hear that!
you explained it so well!
got my sub
Great tips. I see you using the prefix of "c-" in your class names a lot-what does that stand for? Do you use it whenever there is a "collection" involved?
Thanks! The c stands for component. Some versions of the BEM naming convention recommend adding that before any classes that could be part of a unit, but in recent projects, I’ve followed another version of BEM which is a little cleaner
Great video! Works like a charm but I have more than 100 CSM items. How do you get all of those to load?
Oh my fricking god - so finally i can have the customer to create their own layout using the third part of your tutorial! This just blew my mind - I would love to see a more in depth video about this - do you have something like this on your patreon account? Tim ?
So I did this video a while back going more in depth on the setup but it was using conditional visibility. ua-cam.com/video/Pxx4JqmGbV0/v-deo.html I hope to be able to create an updated version going into even more detail using this new method eventually.
How do we use such kind of category subject to dynamic projects like Illustration, Design, Editing and so
Hi Timothy! Regarding the first solution, I found it helpful, but I need to limit the items of each category to 3, how could I do that? I tried limiting the source CMS collection but it limits the whole collection (like it's supposed to)
I think that I missed something. How does your first tips help me reduce the amount of CMS items in my collections/categories?
I need help. The script for splitting a collection list into multiple sections is very nice, but somehow it screws up hover trigger for those items. The items in tr-wrap that is hidden still trigger the hover animation when I unhid it, but nothing happen on the ones in tr-contain. Triggers are set to class & only children.
Great tutorial as always! I am struggling to animate cms-items with different timing on page load - can I use the jquery builder for this or is there another way? Thanks!
Thanks Mads! I cover how to do that in this video. ua-cam.com/video/2wpO90XhSUA/v-deo.html
@@timothyricks Amazing, I somehow missed that one! THANKS!!!
Thanks for this Timothy! In a nested collection, is there a easy way of showing a empty state div if the count of items is 0 ?
I love this tutorial. I was looking for a way to display the CMS template with some changes compared to other cms pages.
My only question would be: I am trying to make a multi-image field type inside a CMS template page (is a gallery of images) that was displayed differently depending on the client's preference, where you could have a grid with 3, 4, or even 5 columns. But I've been testing and it seems that there's no way to make it work cause the multi-image field has to be separately connected with another cms collection and it doesn't allow you to connect other fields.
Is there a way to make it work with code that I don't know of?
Thanks in advance for the help.
Brilliant as always!!!
Thank you!
Hey! After I add the coding to split the CMS items into multiple sections, my interactions stopped working. How do I fix that?
First of all, Tim, awesome! (as always)
I notice you're not using Webflow e-commerce for what's obviously an online food ordering website of some sort. Can we assume you're using another tool for the e-com functionality (Cart, Payments etc.).?
Thank you! So for that project, each location partnered with a different delivery service for online ordering. The menu items page is just for learning more about the items.
Hey Timothy, love your videos.
Currently on the hunt for a new monitor for web design and development. What in your opinion are the most important specs to look for in choosing a monitor for design work? Curious to get your input. Thanks!
Thanks Josh! Honestly, I don’t know much about monitor specs. I purchased a Philips 27in recently but mainly for the affordable price point.
Josh,
You would want to look for a monitor with an IPS panel around 27” - 32” at 4K Resolution if you could afford it. I would suggest the Dell S2721QS if you can afford it. If not maybe the Dell 2721D would do good for you!
There is also much to consider when it comes to eye care and the color accuracy, however, this may not be too important as long as you have the other suggested features you should love it!
Josh,
Also take a look at the LG 27QN600-B 27” it may fit perfectly for your needs.
@@timothyricks okay, sure! thanks for getting back to me. looking forward to more content from you this year!
@@cusable awesome thanks! the ones I had been looking at were the BenQ PD2700U, LG 27ul850 and the Asus Pro Art PA278QV. I wasn't sure if 4K res was worth the extra £100 over a WQHD screen for web design work.
Hello Tim ! Thanks for the great video ! I've got a question regarding the trick n°2. It works fine when there is no item at all in the "cms-item" but doesn't when some elements inside have a conditionnal visibility. Do you know why ? Thanks a lot ! Have a nice day
Hey dude, this was epic. Subbed.
Question though, I have a client who has courses within categories that currently are static links. So when they add a course to the CMS it doesn't automatically add a link to its page in the Nav. Is this possible for a dropdown within a dropdown?
I.e first drop down is courses, under which are categories of courses, and each category then opens to the courses within each category.
Thanks so much, Abid! Yes, I think this should be totally possible. You could probably even make the categories dynamic if desired. It’s the same process as the first example. Just your tr-list class should be added inside each of the nested dropdowns.
@@timothyricks thanks Timothy, I'll give it a crack!
Ur vids have been a huge help.
Hey Timothy, as always, great content. The last section of this one got me thinking... would there be a way to allow a site visitor to adjust a collection list style with a dropdown on the end site using jquery? User could select "Text only" or "Text and Images" from a dropdown and have the items in the list style based on that selection.
Yep! That’s 100% possible with the jQuery Builder natively. Just set the dropdown option link to on click add a class of text-only to the collection item class or elements inside the collection item and remove the class of image-only. And then on click of the second link, add the class of image-only and remove the class of text-only and any other style classes
@@timothyricks Amazing... thanks!
WOW! I was looking for the first trick for months now! I use it to create a list of FAQs under the title of Sub-category, inside a Category template page. I couldn't have done it without you, Thank you so much. I do have a question about the code, It says "Note: This clones the CSS animations or hover states with each item but not with Webflow interactions applied to the item". My list items are FAQs with an integration that show/hide the answer. How can I recreate this integration? Now I can only see the Questions, but when I click on the item, the integration showing the answer disappeared. It does work on the "tr-wrap" invisible list. Thanks again! You are great!
Is there a read-only link to see how you did the "Split CMS subnav links into multiple static dropdowns using only one collection list"?
Nevermind. Found it.
Are the class names tied to the code you're providing us? In other words is it necessary to use the same class names on our project to do this?
thank you! such a great tuts! wow
Thank you as always, Timothy! Question, though: Exactly half of my items in the bottom List are showing up in the top List. If I set the bottom List limit to 10 items, 5 will show up at the top. And if I set to 20, then 10 will show up. Ever seen that before?
Looked at this with a coder friend, and it looks like there was a bit of a logic flaw! It was skipping every other item. If anyone has that issue, this adjustment to the code seemed to do the trick!
$(function() {
var itemCategories = $('.tr-wrap .tr-category')
var itemCount = $('.tr-wrap .tr-category').length
for (var i = 0; i < itemCount; i++) {
var itemCategory = itemCategories.eq( i );
for (var d = 0; d < $('.tr-title').length; d++) {
var title = $('.tr-title').eq( d );
if ( title.text() == itemCategory.text() ) {
var parent = itemCategory.closest('.tr-item');
var titleContain = title.closest('.tr-contain').find('.tr-list');
parent.appendTo( titleContain );
}
}
}
});
Hi Tim! I'm trying to use the "Split CMS subnav links into multiple static dropdowns using only one collection list" strategy you're describing here. But can't get it to work. I don't get any dropdown at all when trying to click the dropdown-link in my navbar - even though I've tried to name the different parts exactly as you've specified in the video. What else could I try? PS: I'm a patron
Hi David, I’d try checking the console for any errors to see if there’s conflicting code. Also, trying putting a static link in the WebFlow dropdown and checking to make sure it appears on the published site. Finally, also try using the split method with regular divs instead of a dropdown to make sure all the classes are right there (no spaces, capital letters, or classes that start with numbers). Usually for troubleshooting like this, it’s best to break things down into their simplest form and try different options
@@timothyricks Thank you!
I've tried the first trick but every time it only puts a few of the items in the correct category and others don't show up. Somebody else having this problem? Or found a solution?
Would you recommend to avoid using CMS collection page templates, since you still cannot nest them into sub folders? I recently setup an incredibly efficient collection page template to handle 60+ dynamic pages, only to later realize that I could not place any of these pages into the correct directory-whereby drastically affecting SEO. Thoughts? Thanks as always, T.RICKS!
It probably depends on the situation. I wish we had more control over slugs in WebFlow CMS, but if the pages are similar enough to share the same slug, it could work. Sometimes I’ve had to create multiple versions of the same collection to get different slugs, but I’m not sure if there’s a way to have two slugs in one url even with regular pages.
Advanced as usual. Thanks