(2020) Load More | BeginneRR Series for Finsweet CMS Library

[Music] hey this is rr from finn suite and in this video we're going over the fn suite cms library for webflow and in particular we're going over one of my favorite tools which is the load more tool we're in our webflow designer tool and we're going to go ahead and input the load more tool from the fn suite cms library for webflow now what is this load more well we talked a little bit about page and nation on video number three which was an overview of all the tools that you have in your arsenal with the fn suite cms library for webflow well the load more lets you load items from the cms into the same page instead of clicking next where you go to a different page it lets you lets you load it onto that same page so this is kind of a different way of pagination instead of it going to the different screen it gets loaded on the same screen now in order for us to do that let's first of all teach you how we can do pagination how you can paginate your cms so we'll start with that we'll show you what pagination looks like and then we're gonna see why load more uh is different okay so we're gonna go ahead and go to our webflow designer we'll click the collection list wrapper and we'll click the gear button what's cool about webflow is if you click it here or here it applies to everything there okay so click that one and we're gonna click paginate items as you click that you can limit as you see two items got deleted already what we're gonna do is we're gonna just have three items at a time so we're gonna do item slash page we're gonna do three and then now it takes out the other items and just has three items we're gonna see what this looks like so what we're gonna do right now we're gonna go look at the preview mode and if you see once you click next it shows the next items and notice the previous button shows up and then if you click next you go to the last item so it's just really a list that you're able to instead of have everything shown at once you're able to go to the next item that's what we call pagination what we're gonna do right now is we're gonna input the load more tool so that instead of going to the next item where the previous three items gets replaced and then they're gonna get replaced with the a new three items the the the second three items but we're going to go ahead and do load more where the previous three item stays and then the next three items just kind of load underneath it so your page actually gets longer from it now before we do that we're going to go ahead and style our load more button we want it to look nice right well we do want to eliminate the icon right here because we're not going to have that we'll go ahead and change this to say load more and let's add some style into this so we're going to go ahead and take out the line let's add a radius let's make it a nice color maybe like a a salmon looking color something like that i think that looks good we'll go ahead and make the words white and let's make a little let's change the font to something we like and we'll go ahead and make it a little bigger and then we'll add some padding on the button as well [Music] what do you say let's add some shadows that might be nice let's add some shadows just a little slight shadow you don't want to put too much shadows where it's overpowering just maybe we'll do it twenty percent let's get the blur a bit more distance a little too far there you go okay so now we have our load more button so that's what it looks like but there's still a problem if we click this notice the other one shows up okay we'll work on that later let's first of all make sure that the load more button works so now in order for us to do that we're going to go ahead and go to our cms docs.webflow.io and then go ahead and go to the menu and go to visual script writer and then remember we're going to put the class name here dot collection list remember that was the name of our collection and then we're going to click the collode more button right here now before we do that the page relation next button class what we're going to do right now we're going to go back to webflow and then you see this right here this is the pagination next button what we're going to do we're going to go ahead and give that a name okay we're going to do it load hyphen more if you notice why i put hyphens on my class names you don't necessarily have to do that i come from a coding background so people like to put you know high fans or underscores because words have to be connected and all that so we'll do load underscore or load hyphen more let's go back to the visual scriptwriter period meaning it's a class load more and then you have some choices here load all animation all that stuff let's try some animation on it maybe we'll go ahead and do some easing ease in and out that might work um let's maybe have it fade in that could work as well let's go ahead and copy the code go back to the web for designer and then go to the page click the gear button right next to the page name all the way down paste it on the before body tag not the inside head before body tag and then we'll go ahead and save now remember if you click preview mode it's not going to work because this is code you have to publish the website in order for it to work so we'll go ahead and publish this website and then let's see what we have so here's our website we'll click the load more button if you notice it went ahead and loaded the next items and automatically removed the previous button so it doesn't show up anymore let's refresh this website and there it is if you click it you're able to have the things load down instead of paginating to the next now if you notice it was kind of weird that the button doesn't have a um the the press button icon well that's a simple fix you could actually just go to load more right here and then go down and go to cursor instead of auto you can make it a pointer so that now we'll go ahead and publish it and then we'll go to our website now when you hover over it it's a button clicker thing so we'll click that notice everything loads again and there you go that is the load more tool and that is how you implement and use the load more tool for your cms on the next video we're gonna start teaching how to install the next tool which is filter that's effing sweet

Channel: Finsweet

Views: 2,837

Keywords:

Id: OThnAmDc-Eo

Length: 8min 22sec (502 seconds)

Published: Thu Feb 04 2021