8 Tips You Didn’t Know About the Webflow CMS

so whether you are brand new to webflow or a super experienced web flow developer there are possibly some things that you may have missed when working within webflow and more specifically the webflow CMS and the reason for that is the web flow CMS is one of the most if not the most powerful feature in weo in fact in my years as a technical consultant with web flow and specifically teaching and training webo Enterprise clients what are my favorite topics to teach about and to train mes was about the webo CMS because it is so powerful and so comprehensive that you can do so many powerful things within web flow I just realized that I've been saying power and Powerful so many times in this intro but anyway let me give you the eight tips that you probably didn't know about the webflow CMS now the first tip we're going to discuss is you can actually use the video link field to embed things such as tweets LinkedIn posts or things like that let me show you what I'm talking about so if we go to webflow we'll go over to the CMS right here and go to insights and notice I already added a link embed field right here now you can also add these uh link embeds or even a standard embed uh by putting a rich text so you can do a rich text field and put uh an embed there but check this out we can put a video link so in order to do that you just go over here um or click add field um click video link and go ahead and do that so we added a link embed field in this particular collection which is kind of like a blog post um now of course you can add video links to this so if you put like a YouTube link um or a video link that particular uh video will pop up but if we were to instead put a tweet so for example if I go to this link embed and I go ahead and go on on Twitter and say put this fire tweet just a quick plugin to follow me on Twitter um and then I'll go ahead and paste it right here notice it's go it goes ahead and generates the actual embed not just a link to that uh particular tweet so we'll go and save it and then we'll go over here and I'll go on the bottom and I'll add a video so we'll add a video not in there that looks weird so let's go ahead put it say up above it and I'll just put a quick margin under the bottom all right and then what I'm going to do here is I'm going to link it to the embed so we'll go ahead and Link this particular embed here L embed there you go and notice now we have the Tweet right there I can even modify this width if I want it to be Max 360 pixels goes right there if I want to make it um 480 pixels uh just something like that so maybe not super particularly useful but if you have a client that uh wants to be able to put YouTube videos or embeds or things like that um or or post embeds they can go ahead and do that using the video link field now another tip that you may not know about is using the web Ms to put Snippets uh Dynamic Snippets of text within custom code and that can be very useful when working with marketing teams or working with um uh crms where you have different types of forms I'll show you what I'm talking about here so there's a website that we worked on where the customer required they have these um resource downloads where uh they have different a different HubSpot form for each and every single download So as as you can tell I mean as you may think about there's a lot of resources here we don't want to have it where you have to uh embed a a new a new embed or go to Rich sex or or something like that and put a new embed every single time so what we realize is actually when you go to the embed the uh when you actually get generate a HubSpot form embed the embed code is really all the same the region the portal ID The Source everything the only thing that's different is the form ID now of course if this is all from the same HubSpot workspace or the same HubSpot account the form ID is the only thing that will change this um uh uh points or or signifies to HubSpot which exact form to pull from so what we did instead is we went ahead and put a form ID snippet inside the code so we go over here all I did was delete the old form ID whatever form it was add a field um which in this one we put form ID and now it will dynamically place that in here and all the uh Team or the the marketer or whatever it has to do is they go to the HubSpot and go to the main resources and they would go to the the actual resource and notice where it says uh form ID right here all they have to do is copy the form ID and paste it over here and it will automatically generate that exact form it's really the same concept that you can do with whenever you go to the page settings and you go to the title and let's say you want the title to say like the company the company name and then you want to put the uh title of whatever this resource is you can then put that right there this is really really powerful in fact a friend of mine and I was uh trying to look for some use cases for a pretty big company on how we can use a w CMS for their use case and we found out that they were actually using um uh a team in order to generate landing pages that have particular graphs and what they would do is they would actually create these send them the data for the graphs and then that team would then take about a couple weeks to come back and generate a new graph for them well what we did is we actually grabbed that code whatever code they use for the form we placed that in the webful CMS and we went ahead and took out Snippets like for example that tells us how many columns um how many rows how many uh what colors are we using for these graphs or or whatever data and then now we created a graph generator uh using the webflow CMS so the web CMS is super powerful once you unlock that knowledge that you can put custom code dynamic text Snippets within your custom code now the next tip is actually pretty simple and a new feature in webflow and that is making sure that you're non indexing or you're not indexing pages in webflow that shouldn't be index by and what we mean by index is being crawlable in Google being crawlable by Google's robots which is yes now in 2024 that is a statement that is for Real okay so let's go ahead and go there uh go to the page settings and go to something like an author's template now why do why do we want to make sure that this one is not indexed well a lot of times we'll work on collections in webflow where say say like a blog post similar to this where you'll put some sort of author right now we want in order to do that in order to make that simpler we want to create a um a reference collection so then therefore we create an author collection where we have our different authors and therefore whenever you want to select an author for the insights all you have to do is Select whoever the author is well the author template doesn't particularly have a page it's a blank page and we don't want this page to be found on Google now you may say well there's no content in there yeah I know but just in case now before we used to have to do it where you would put in a code here which it says like you know no index uh meta robots no index or something like that um and there's this exact code for it you can still do that or you can go to robots text and disallow it but weo now made a new feature where you can go over to the page itself and just put here that switch this off to prevent this collection item pages from being published so it could be a page that you are still working on you don't want people to find or a page just like this which is purely used for reference go ahead and turn that off that is just good general practice the next one is super simple that you may be looking at me like I'm insulting your intelligence and if I am I am sorry but here is a quick tip whenever you go to CMS it's good practice to go ahead and uh title your CMS in a way that is easier for whoever you are working the project working on the project for for so let's say it's for a client you want to go over here and go to the CMS and if it's something that's like for reference or something like that why don't you go ahead and put the title as something that a client can come in and say okay this is something that we probably shouldn't touch because it's something that's related to some sort of reference or system what I usually like to do is I'll go down to the title and I'll put a title like this system and then put a hyphen this is helpful because the title on the collection name doesn't actually matter this only seen by Whoever has access to this project the URL doesn't change nor do any of the basic information so we can go ahead and put that there what I usually like to do is I'll put that over here in the bottom so then the client will look at this and not touch it what you can also even sometimes do here is put emojis on the title this is also helpful when you have a major website such as one that we worked on where the client had blog posts and white papers and ebooks and case studies there are so many different collections that they need to work on so we put Emojis so that they can kind of quickly identify uh whatever collection they need to work on it's just helpful uh to make it make your client's life a little bit easier the next quick tip is how to stylize Rich Text when it is connected to the webflow CMS let me show you what I'm talking about when we go to a web project just such as this one sometimes usually it's a blog post uh we go over here we put a rich text now notice I'm not able to edit how it looks like if I go over here even if I edit the style we're we're not even able to uh uh specifically click like the paragraphs the headings the bullet list and all of those things so what we actually want to do is we want to go to a page and usually you would have some sort of and it's just good practice to have a style guide page or something like that now you can put that in the sty guide page that's usually the best practice for it but if not not you can create whatever page really any separate page for that and you want to what you want to do is you want to go ahead and create a rich text so go ahead and put an element of Rich text and let's say we want to put a class this is very important put a class on this Rich Text so we want to name this say uh Rich Text Okay then now you're able to style your headings your H2S your paragraphs however you want now let me show you what I'm talking about if I go to the par right here we're going to click this style selector we're going to say all paragraphs now be careful don't just stop there all paragraphs but Nest selector inside R text notice what it says all paragraphs when nested inside of of this class called Rich text so if I go over here and let's say I want to change this font to um something cool like Grand Vibes of course we love this font right it's Grand VI or great Vibes Grand vibes but we'll go over here and go to insights template and I can change this class instead of paragraph it'll be a class Rich text and notice now you you you feel those vibes generating cuz there are great Vibes in this Rich Text the next one is another recent Edition by webflow which has been a game changer especially for bigger companies who want to retain their URLs when they move over to webo uh for SEO purposes here is what I am talking about so now you can actually add categories to your CMS collections or C yeah CMS list let me show you what I'm talking about so notice here I added a collection called works now we have here a CMS uh called uh projects okay and notice here the URL is just unfinished CC project project page and even when you go to the page itself projects is simply just that well now I can actually place this particular Pro uh project list Under The Works folder and notice the folder now changes uh the URL changes work SL project slthe item slug in fact you can even keep going I can go over here and create a new folder called say fintech and we even want to categorize the different types of work so we'll go uh grab this folder place it under works so now you have a subfolder under fintech you can put static pages and CMS pages so I can go over here click projects and now we want to go ahead and place this under fintech and notice look at that URL worktech Pro SL item slug so if you like multiple URLs go ahead and eat your heart out you can now do it in webflow now the next one is when working with images or image sizes specifically in the webful CMS let's look into that go to the webful CMS and whenever when need to place images usually on like a blog post on a cover image we can actually use uh we can actually set the image sizes within webflow so if you were to go to this insights and go to these settings and go to the main image or the thumbnail image either one we'll go to the settings of this particular setting and we can set minimum image sizes or minimum image widths minimum image Heights uh maximum image size width or height for your particular images this is really useful when you're developing websites for clients and or a team usually will have different people like copywriters or even guest writers inputting the blog post but they're always putting images that are too big or too small or well usually it's too big like an an image would be you know 3 megabytes even though webo allows it we definitely should not do that so you can set a maximum image size so let's say you want to be a little more lenient and set your IM size to only 200 kilobytes um therefore that if someone uh go goes ahead tries to upload a picture that is around 300 400 even one or two megabytes webflow will not allow it so that you are able to retain good SEO with your blog post you can even do that with image wids and image sizes or image Heights if you kind of figure that out let's say a cover image is supposed to be landscape and people are trying to put you know uh vertical pictures then you can can set a particular um minimum image width and minimum image height to make sure that it becomes a landscape uh type photo uh or maximum and all that stuff so that's going to be pretty helpful when working with clients to have multiple team members now the last one is going to be super simple but yet really key and really important when delivering projects to clients and that is using the help text within the web flow CMS let me show you what I'm talking about if we were to go to webflow and go back to the settings of whatever collection you're working with and you go to that particular field and go click um click the settings let's go ahead and put some help text so that people or collaborators editors people that are working on your blog are able to uh uh you're able to give them some advice or some uh to avoid confusion so for example with the images let's say someone is keeps putting 3 megabyte 4 megabyte images within your team and you want to stop them you can go ahead and use image size Fields yes you want to restrict it you can also do help text for example only upload images under 100 kilobytes and let's say you want to call them out let's say it's Simon I don't know why the name Simon popped up in my head but Simon call out Simon Simon keeps uploading images over 100 kilobytes well Simon got you right here notice says right here Simon only upload images under 100 kilobytes don't worry no one else will see that only your particular client or your particular team that's also helpful when you're working with other things like sometimes these blog posts can get pretty complicated and you want to make sure that you tell them hey do not post here do not put this here only post here if you have multiple Rich text or whatever use the help text be a good team member be a good web flow developer and help your team out help your client out by using the help text in the CMS and that concludes the eight tips that you didn't probably didn't know about the webflow CMS or maybe you already knew them but that's okay I hope you learned something now if you made it all the way to the end of this video do me a favor if you have a tip about the we CMS that someone may not know about go ahead and drop him in the comments below go help somebody out somebody that was at your particular spot of knowledge two years ago 3 years ago go be someone really good and help them out in the comments below thank you for sticking it out up until this end part once again my name is RR abro I'm the founder at unfinished Studio a wealth expert agency that works with companies at the startup and at the Enterprise level build Innovative and creative websites we post a video about web design web for tutorials every Wednesday so wait Wednesday Wednesday so make sure you stay tuned have a great week peace

Channel: UNFINISHED

Views: 4,892

Keywords: cms, how to webflow, ran segall, responsive web design, web design, web design tutorial, web development, web flow, webflow, webflow animation, webflow cms, webflow design, webflow for beginners, webflow responsive design, webflow review, webflow tutorial, create a website, free design resources, free design resources 2020, free web design resources, thefutur, ux design resources, web design and development, web design html, website design, website ux design process

Id: jrNpNNLTrmw

Length: 18min 37sec (1117 seconds)

Published: Wed Jan 03 2024