Building a Webflow CMS Blog | Step-By-Step

I had to create a CMS blog setup for my client so I'm walking you through my whole process!
Webflow CMS is one of the most powerful tools on the web to build dynamic content that looks beautiful and is a dream come true for your clients.
In this video, we are going to be using the blog layout at frame.io/ for inspiration.
Also, don't forget to join our Facebook Group, "SEO and Webflow":
/ 283825533054890

[@amitnaamani5702]

Brilliant, keep them coming. As soon as I start working with real clients I will def go back to this video. I like it that you show the technical side but still, there is some of your design into it. Like with the block quotes.

[@PaytonClarkSmith]

Amit Naamani glad you found it helpful! Thanks for watching!

[@judsonishaan5212]

i dont mean to be so offtopic but does any of you know of a tool to log back into an Instagram account..? I was dumb lost my login password. I would appreciate any tips you can give me.

[@WebsiteChemist]

Great tutorial. Would love to see timestamps in the description, especially when videos are 30+ minutes. Appreciate your tutorials.

[@mrdjchasm]

I love binging on this stuff. Just straight value to the brain.

[@mihdigitalmarketing4813]

You, my friend, are a LEGEND! Thank you very much for this video!

[@intribeco]

This is the best Webflow CMS tutorial I've seen so far. Nice work!

[@melaniejumaga]

So thankful you doing this!!

[@sherzodgafar5741]

This is sooo helpful! Thanks a lot, I just started using WebFlow and was struggling a bit. Your tutorial is exactly what I needed!

[@smarthustlersclub6375]

This was so straight forward, even i have not used webflow for real project, but am even loving it more right now

[@emrhae]

Amazing tutorial!! Thank you, can’t wait to watch more!

[@ChrisHallBoxCreative]

This is a fire video! Really helped me understand the ins and outs of making a blog with web flow

[@3PMedia]

I love webflow. I would appreciate more content about webflow and blogs

[@DailyDoseOfHam]

Thank you for this! You’re amazing!!

[@ThomasAgain]

Hey Payton, just found your channel and subbed. Just started on KZbin myself covering similar stuff.. always good to run across full designers/devs on YT. Keep it coming!

[@keithharrington9853]

Really good tutorial Payton, thank you.

[@simonsureshwarayoga6564]

Thank you. Great tutorial!

[@patrikvalentik8237]

Super nice ! Slow and steady to understand all the steps!

[@patriciah.8616]

Awesome, thank you so much!

[@dylandavino]

CMS can be one of the trickiest parts when it comes to learning Webflow. Thanks for sharing!

[@DoctorDiz]

What's the least tricky part?

[@BigMeeech876ja]

@@DoctorDiz the fact that nobody is showing how the cms page itself is publish ... i dnt get why tho..

[@atechyverse]

Learning a lot. Thanks.

[@JackedAmbition]

Pleaseeeee make more vids! I love this content

[@brunovalery8756]

Great, thank you !

[@vivekbhatt3932]

Very useful video....thanks a lot !!!

[@kungarinchen3401]

thank you very much really helpful

[@newhottrend4059]

love u man keep going

[@numanakhtersiddiqui6573]

Great tutorial, keep it up:)

[@AyushKumar-yn5co]

Looking awesome

[@PaytonClarkSmith]

Thank you!

[@prazonparajuli7346]

Thank you so very much :)

[@twbashar]

wow, Very nice Payton. Keep making this type of full website making tutorial. Also, I have a request for you, Could you please make some tutorials about Webflow Form? Like how to customized and design checkboxes, select boxes, radio buttons, multistep form, etc complex things. Thanks.

[@PaytonClarkSmith]

K.M. BASHAR love this idea! I actually just did one for a client! I’ll make it happen!

[@twbashar]

@@PaytonClarkSmith I love you Payton.

[@lanic3869]

Please make another one for 2023.

[@thejohnzapido]

While background image is good for decorative uses, for instances such as the video above, I think it would be nice if you use image elements instead of background ones, useful for accessibility issues. What I do is to have an image within a div (image-wrapper). The div is my wrapper which can be resized accdg to my will, and the image inside it is set to 100% for both w and h, and set to absolute permanently and set to cover. Hierarchy goes something like this: name-of-image-wrapper -- img-100 Just my two cents, but I know you are way better than me at Webflow. Hehe. Thanks for the vid Payton!

[@PaytonClarkSmith]

John Philippe Zapido that’s a great way to do it! Honestly, probably better than how I do it. I will work this in on my next build and see how it goes. Thanks for the insight though! I am FAR from being a master Webflower! Always learning.

[@thedukedubstep]

I set mine up exactly the same way John. I thought I was just being weird, glad I'm not the only one that sets it up this way.

[@fancy3958]

Thx for this awesome tutorial. The question I have is that 3 columns on the tablet display is too small,I want to ask how can I make it into 2 columns?

[@chadtarheel]

great stuff! thanks for sharing this! Questions: Do you use any layout tools with clients early on? Will frame-io work for this? do you use Xd, Figma, other? Or, is there a design layout/wireframe tool in Webflow, too? Or, what are your tips for this process without a specific design tool?

[@jamespilz1529]

Awesome video Payton! Thanks for sharing your in-depth process. I'm building a blog as well - and I was wondering what you did when it comes to creating navigation. (bread crumbs?) Since I'm wanting to share individual posts through social media, my concern is that my viewers will land on a post, but not be able to easily navigate to other posts. Do you have any recommendations? (I've been able to create a NEXT and PREVIOUS button, but since I want to utilize the ability for tags and categories, I'm not sure how to implement it. (maybe using the categories reference or the bread crumb method?) Any suggestions would be awesome. Thanks Payton!

[@carlosdanielferry7322]

Great job! I have a quietion. Is a problem with the individual pages for each articule. The information is not visible for the prevew. 🙁

[@MrVisuallearning]

Hi Payton - thank you very much for this video. Question: How can we add more images inside each blog? In the video you show how to add the header images. A blogging best practice recommends inserting one image for every 180 words. How to do this using the CMS? Appreciate your advice.

[@bigbadbear770]

What about adding next/ previous buttons at the bottom of each post?

[@PaytonClarkSmith]

I’ll have to work that into another video! Thanks for the suggestion!

[@michelabdelnour6655]

Hey Payton, thanks for the awesome tutorial Was wondering if you knew how to change the color border based on the category - I have a color field inside each category I would like to apply to the border and set its color automatically.

[@francescaromanacentini2070]

Yeah I was wondering too...

[@ahangkhaneh]

How make dynamic those some minutes read plain texts?

[@neoniquestudio]

Hey Payton! Thanks for sharing your knowledge! Helps so much! One question: do you know how one can create tag-/keyword-functionality to a webflow blog? Since this feature is quite common at Wordpress and many people use it, I feel it should be somehow basic - but I cannot figure it out. The crucial part is obviously that the author of a post should be able to add keywords 'on the fly' while writing the post (so basically what it needs: the possibility to add new entries to a nested/referenced collection while working in the parent collection). Thanks & Cheers! Manuel

[@manuelmatti6742]

thanks for the video. when you changed the thumbnail to a link, it changed the size of the thumbnail picture. how can i change that back to the original size? At 18:20

[@stanislavosipov2838]

Please tell me how to connect cms elements now after the update in webflow. Previously, they were connected by clicking on the gear of an element (for example, text or a picture), but now they are not there 🙏

[@noah568ify]

This was so helpful thank you! How does the auto populating pages for each blog post work?

[@JJAttwood]

It does!

[@salazaritzel]

Hi! great video, so one issue im having. when i change one blog post the rest automatically change too so it's all the same content. How do I prevent that from happening?

[@bgutierritos]

Hi payton! Great video , just a quick question, the website where you are taking the inspo from has a different color for each category.. how can i implement this on mine? I believe its with cms category but just dont know how to implement it

[@PaytonClarkSmith]

bernardo gutierrez great question! You can actually add a field in your CMS settings called color and then for each CMS item you can select the color. Then you go onto your website and wherever you want that color to appear you will just tell webflow to “get background color from “ just like any other CMS field. Hope this helps!

[@shreychouhan7039]

nice

[@linaaguirre3195]

Hi Payton, How can I to change language of the dates for the articles?

[@jenniferward6821]

Please advise me with this - I would want to drag a marker to where I live(instead of completing an exact address) as in, - I am local HERE - and drop that draggable marker image onto a map - and then my database has stored has the geolocation of where I am local?? This is part of my onboarding process

[@jakubhladik5898]

Not working for me. I added a header and there’s no option to bind to the collection. What am I missing?

[@aerodylluk2543]

This was good. it would be awesome if they would increase the multi reference limit of 5 items too as this is the most limiting thing I have found so far with Webflow.

[@PaytonClarkSmith]

Ben Watson very good point! I haven’t run into this yet but I could see how that would be an issue!

[@aerodylluk2543]

@@PaytonClarkSmith Try making the categories system you did in the video but where you could assign more than 5 categories to the same post.

[@JohnDrach]

So I'm trying to pipe unique CMS content into my CMS collection template by pulling content in from a CMS collection. The problem is then every page gets that same content. I can't seem to tell each page to leverage something unique on each page. Is this a bug? I tried reaching out to Webflow but their support is abysmal.

[@chevonnel2856]

Hi Payton. Thank you for your tutorial. I am having one issue when creating my CMS blog pages. All of my blogs are in a section with the same class I created for each blog page, but because the blogs vary in length, they would either overflow onto the footer or are too short, leaving a huge white space in the blog section. For some reasons I'm unable to create modular sections that can accommodate for the varying lengths (e.g. when I extend the section for longer blogs so they don't overlap with footer content, the sections for shorter blogs on another page will also get extended, hence leaving a white space on that shorter blog page). How can I fix this problem?

[@PaytonClarkSmith]

If I understand you correctly, it all comes down to your section that your content is inside. Just set the height to auto and put some padding on the top and bottom. Then that section will automatically change size according to the size of the article and will always have the same padding on top and bottom. Hopefully this answers your question

[@skinnyvila]

I really need a step by step on how to add filtering and sorting with cms

[@bhargavdevanga9541]

⚡

[@mainakghosh38]

Anyhow can we get those design readymade, copy & paste?

[@jamess5542]

are there free cms templates that I can clone? I’m looking to create a simple but elegant website with a landing page, about, blog, services, and contact pages.

[@kevynlevine]

Great video! Question... How come in your blog post CMS you don’t add a category and author field rather than making new collections?

[@christophercant]

When you make a new collection, webflow will create a template page for items in that collection too. He can make dynamic pages for each author and category this way

[@codysalazar3939]

How do you embed html in these CMS components?

[@inharmonyfarmstn]

Is there anyway you can do a video on the exact steps you take from the moment you obtain a client? I’d like to know where you start their site in webflow, how you get their site from your webflow dashboard to their hosting site. All the nitty gritty.

[@annacostiuc2222]

Hello! I really want to start my website design agency and I am really struggling with one question- how do you support your client after website delivery? If they need to change something for example add the product on an e-commerce website. How do you do it? How do you charge them? If you can please answer or make a video on it.

[@starogre]

Kinda confused how you use the final setup you did for case studies - if each case study has a different format, how do you do it without creating a new page for each one?

[@PaytonClarkSmith]

When using CMS you have to utilize a very similar format for each one unless you want to get into conditional stuff where you do some thing like “only show this section when this specific field is filled out within the CMS). That gets into more complex stuff

[@eugenesamilyk6131]

Hello can anybody help me plz? How to add simple likes and views for Webflow blog post??

[@antisugarcoating]

Hi Payton, everything was great until we click the link to the blog post and make the individual page because I don't have any symbols saved and don't have the features you had originally made like the navigation bar etc. So everything came to a stop and I realized I have to start all over following a different tutorial : (

[@liam2246]

Do a video on Editor X!!

[@farhanbukhari5519]

I am totalli unknown about this field can you give me some answers of my question ?

[@bhargavdevanga9541]

20:58

[@yetdontknow6783]

I would like to leave a like, but the fact that you didnt show us how to make it responsive, that's not very cool, but still thanks.