(2020) Nest | BeginneRR Series for Finsweet CMS Library

[Music] what's up everyone this is r from fence suite and in this video we are going over the fn suite cms library for webflow this video specifically is a step-by-step tutorial on how you can add the nest tool into your cms this enables you to have cms within cms's and it's like a whole cms inception [Music] so we're in our designer and we'll go ahead and start putting in the nest uh tool we have here from fen suite now why do we need this tool you see like we mentioned a while ago webflow only allows one nested collection per page i will say webflows nesting in their collection is already good as it is but it only allows one per page with this tool we're allowed to put more than one it allows it to have more than one nested collection so this is the um thing that we've been working on there's the cms that we've created we have this pretty much for all of our other tutorials if you want to learn how to make this go ahead and go back to how to create a cms where we show you step by step how we created this exact cms right here and this is pretty much the cms that we've been using for all the tutorials that we've created here as far as this one so far and what we did i actually did some work beforehand that i want to show you because it's just if we show it in the screen it's going to take up too much time and what we did is we actually created a new collection so let me show you that right now and the new collection that we made is called multi-reference categories now these are the categories that we're gonna nest inside both of these collections you see we have two separate collections we have this one which is what we call the fin speed product for buffalo and then we have this one which is called we called fen sweet pictures and i created a multi-reference category cms collection and this one i just put three simple things i put android microsoft and apple i guess i'm you know just pretending that uh what we're gonna do is we're gonna have like um put there like what what uh as a software compatible with like you ever see those things are compatible with apple and microsoft um i just think and thought of three things and i'm not saying that these uh items can only work with these certain softwares but are certain programs but you get what i mean this is just all made up okay so we went ahead and created this multi-reference categories is really simple as you click it it's just the name that's it that's all it is now you can add more things as well you can add color and all that stuff but we're just making it simple it's just the name and then i actually added these multi-reference categories to the other items that we have which is the fin speed pictures and the fence feed products for webflow so if you look over here um on different speed pictures we have we put two things we put the multi-reference and notice here i put all three things so it shows as if it's compatible with these three things um i put these three items the apple microsoft android and then you actually this is very important make sure you put it as a text as well so we added two items in this fin suite pictures which is a multi-reference and a multi-ref text and then once you get to the item well then it's just pretty much the reference and then put it in text and you separate it by commas the reason why we need this is this is where we're going to pull the text from in order to put it on the collection and or it signifies what goes into what collection so we have right here it's just the same as the top but separated by commas okay and we have the same way here in facebook products as well where we have compatible with and then the text with separated by commas and we have it in these other ones as well and we have a very a variation of it so what we're going to do now is we're going to go ahead and put in the um the nested collection inside this so the first thing we're going to do is we're going to go ahead and add the items into the collection itself so we're going to start with this collection and we are going to add a container inside i'm going to add a div block right at the very bottom of this product right here and then i'm going to go ahead and call this multi-ref container and this is a very important name to remember it is a very important class to remember because we're going to put this on the other one as well and we're going to put this on visual script writer and we don't have to do anything with this one we can just leave it blank as it is and we're actually not going to connect it to anything as well all we have to do what i want to do is i'm going to make it a flex container and i'm going to make it a line center and that's all i'm going to do i would like it to flatten up a bit so what i'm gonna do is actually just put this zero and it kind of flattens it there wait if i just put this at zero make it zero it should flatten up i guess it's not that's fine we're just really gonna leave this as is we don't need to do anything there and then the next thing we're doing to add some text underneath this so let's add a text block underneath this multi-ref container and we're going to grab this text from the multi-ref text that we created so we'll go ahead and put that there multi-ref text now we also need to name this as well so we're going to name this multi ref text multi hyphen ref hyphen text and make sure that uh you remember this name because we're gonna put this in the visual script writer as well and right now it's gonna be shown uh this is really just for reference but later on we're going to hide this okay and i'm trying to figure out what this one's so far will not uh flatten i'm going to make the height there we go that's what i'm talking about auto so we'll just uh so really it's there if you see it it's there but it doesn't have anything in there so what's gonna happen is uh this indicates that the um that the multi reference categories are gonna go to this particular item and then this is where it's going to um input so this is going to be substituted with those multi-reference categories that we're about we're going to make so we're going to do we're going to actually we're going to put this on this one as well so let's go ahead and copy this and we're going to put it here and then we'll pretty much do the same thing on the other collection because remember we're doing two collections you see if it was only if it were only one collection we wouldn't need to do this we wouldn't really need this tool but because we're doing two collections that have this we're gonna need to do this and so we're gonna add another text here okay and then this text well also once again we're going to name the style multi ref text and we're going to get the text from the multi-ref text that we created and there you go we have all these items so far we're pretty much done with working with this collection now what we're going to do is we're going to add another container underneath and this is we're going to we're going to put the multi reference categories collection and we're just going to style it and then we're going to hide it later so we'll let me minimize this so we have some space to work with here so we don't get confused and then we're going to go ahead and add a new container now i'm going to go ahead and put a div block here let me see we're gonna put a div block there actually we don't need to put a div block we can just put the collection in this wrapper already so we're gonna go ahead and um add a collection list so let's do this right and then we're gonna name it i'm gonna name this one multi collection now they're supported we're going to name this because we're actually going to hide this later so let's go ahead and get the source for this one get to source and it will be the new cms collection that we created beforehand which is the multi-reference categories so we'll go ahead and click this right here and we'll just leave it at that now what we're going to do is we'll go ahead and add something in here we'll add some text in a bit but we're going to name these styles first now the mo the collection list wrapper we named it multi-collection the collection list we're actually going to name it multi reference now this is an important one to remember as well especially when we get to visual script writer and then we're going to name this one multi ref item multi-ref item okay now we're gonna go and add something in here we're gonna add a text block just a simple text block and this is actually going to be the items that we're gonna put inside the collection the multi-reference items so we'll put that there oh we add to each collection item oh okay never mind we'll have to put it here there you go put it there love those being uh picky with me today we're gonna grab this text we're gonna get the text from the name simple as that just the name and there we have our three names android microsoft and apple we are gonna style it because this is what we're going to show once it gets over here so i'm going to do some styling here a little bit and we'll go ahead and make it the font that we've been having which is monster it wants to rot we're going to make it semi bold i'm going to add a background which is more like a light gray just like that then we're going to add some padding so why don't we add five pixels on top five pixels on the bottom and maybe around 15 pixels on each side that looks pretty good and then we're gonna go ahead and make the radius rounded there okay now this is a way too long so what we're actually gonna do we're gonna put it to this okay and this um is uh inline block so that it's more you know condensed and that doesn't take up the whole container but really just this and now that we have this we're actually going to go ahead and add some margin on the right because the reason why i remember the container that we created here let me show you that potato created here where is that right here we made it a flex box remember that so we want they're going to be in line so that i'm going to add some margin on the right side of each multi-ref item and maybe just add around 10 pixels on the right that's it and then we'll just leave it at that now i'm gonna go ahead and click publish so far so it's kind of you know save what we created so far and then we're gonna go to the visual script writer now we have our elements all built out and we're really just gonna start connecting them go to visual script writer which is your best friend and then we're gonna put the cms list class and this is the main collection list the one that we're actually gonna be showing and if you've seen the past videos the past tutorials we've always named it collection hyphen list and then we're going to go ahead click the nest tool and then the first of all the text list now the text list would be this one right here where we're grabbing the text we're work where it's indicating that this is where this text is going to be placed so the name of this style was the class name was multi-ref text so we're going to put right here multi ref text and make sure you get everything correct every hyphen every letter has to be correct or it's not going to work now we'll go to the nest source the nest source is this part right here the multi reference which is where it's going to be grabbing these um text blocks that we created so we're going to go ahead and name put multi reference here so this is the the indicator of what text will go inside the collection the physical collection the visible collection and then the next source is where we're going to be grabbing the styles the words that we created and then the next target notice is called target it's really the that that little container that we built that's where we're gonna put it okay and this was called multi-ref container so we're going to go ahead and put that there i love that fence we created this visual script writer it makes this so much easier and so we'll copy this code copy the code and then go to the page which is nest that we have it right here we're going to go ahead and paste the code on the before body tag and then we'll click save and then we'll go ahead and publish it and then hopefully it works these things always make me nervous for some reason we'll go ahead and click this icon right here and notice we already have our um uh the multi-reference categories right here now let's do some fixes okay as you notice it's showing the indicators it doesn't have the 20 pixels the 10 pixels that we wanted to put a while ago it's also showing this so it's not clean well simple fix what we're going to do is multi-ref text we're going to hide it and then this one so instead of the multi-ref item that will have margins we're gonna just put it on the text block itself we're gonna put a 10 pixel text block on the right side and then we're also going to hide this whole collection i'm just going to hide this whole collection and publish it and once we click it and there we go notice we have this all cms once you have this set you can go ahead and make your modifications make your changes add some more and it will automatically show up and we have it multiple times we have it on this collection and we have it on this collection as well now there are other uh things that you can do with this you can search through both of them filter to both of them combine them i encourage you to check out the how to cloneable um that what the fitscreen has created so that you can learn some more on how to implement these i hope that you learned easily how to use the nest tool if you have any questions or any problems setting up this tool make sure you check out suitejs.com and i encourage you to join the slack channel that we have for customer service pretty much you can contact defensive team for any questions that you may have for any of the tools that finn suite has to offer and make sure you stick around for more content more videos more tutorials that we have coming up for all of the tools that finn suite has to offer for the webflow community that's effing suite

Channel: Finsweet

Views: 2,266

Keywords:

Id: -7O0vkQ-jBc

Length: 16min 35sec (995 seconds)

Published: Thu Feb 04 2021