%20(1).png)
You have that Webflow site! You’re ready to go and have a list full of post ideas or, if you’re an especially organized person, a list of fully written blog posts, just waiting to be published. But, you may be wondering - …how do you actually set up a blog on your website? Well, here’s the tutorial for that!
Before you get started with anything, make sure your website is on Webflow’s CMS plan, or on any other plan above that. If you are on the Basic plan, you won’t be able to create a blog in this way and will have to manually create a page for every single blog post, format it, and manually add it to the main blog collection page.
This is a tutorial on how to set up a blog post, so you can throw your writing, title, and cover image at it, and it will automatically spit it out on your website fully formatted.
Here it goes!
First of all, we are going to be creating our space where our blog posts are all going to be sitting in one collection afterwards. Webflow’s CMS (Content Management System) is very useful for affecting many different things at once. We’re going to be putting our blog posts into one collection in Webflow’s CMS, so it’s easy for us to make all the blog posts look the same without having to manually format every single one (that would get boring fast).
To go to your collections, you need to access your CMS by clicking the stack icon on the top left of your website editor. When you click on it, look to your top left again where it says Collections and click on the little plus icon. This is to start a new collection.
You should arrive at a page that looks like this:
We are going to name our collection first. We’ll call it Blog, so no one ends up wondering what on Earth Asdfghduck means later on.
Afterwards, we are going to start adding new fields to separate our post into, so it will be easy to organize later on. Here’s what fields we’ll be splitting it into:
First, we’ll be clicking the add field button.
Then, this will come up with options for what type of field we are adding:
In this case, we’re choosing the plain text option because we don’t need anything more for our post title.
Now, we need to write a label for this field—I’m just going with Post Title—and we have to save the field. You can also write out a help text, to remind you what needs to go in this field later on or to explain things better to a guest writer who might be filling this in. You can also choose whether this field will only have a single line of text, or let you write multiple lines. Since this is for the post heading, we only need a single line.
You also have the option to set a minimum and maximum character limit for this field. This could be helpful to you if you plan on having many guest writers on and want to prevent waking up one morning and seeing a full paragraph behemoth of a post title on your blog.
This time, we’ll be choosing the image option because we want to add our thumbnail, which will be an image. Let’s name our field Thumnail and this time, I want to set a maximum image size as well, so our thumbnail won’t end up with a big file that’s slow to load. If you don’t think you need this for your blog, it’s not necessary to add it.
When we do that, we’ll save the field for our thumbnail as well.
This time, we’ll be selecting the rich text. This is different from just a plain text field. If we choose rich text, we’ll be able to format our text with headings, subheadings, bullet points, bold words, italics, underlines, images, etc. (all things you will probably want to use in your blog post). Plain text is just, well, plain text.
We’ll be choosing plain text once again like we did for the post title but this time, we’ll change the settings to allow us to write multiple lines.
This is because for our author sign-off, we might want to include:
Their Name
And Profession
Plus, a short bio of who they are, what experience they have that’s relevant, and what things they like to do. I always like seeing small bios like this.
All on different lines. Hence the multiple line setting.
Now, don’t forget to save your field before… finally clicking Create Collection!
It’s time to start building our template page for the blog posts now.
Go back to the usual builder / designer and have a look under your pages. You should now have a CMS Collection Page created for your new collection.
Click on it and get building!
Of course, it takes us to a blank page because we haven’t actually made anything yet.
This is the template for the individual blog posts. We’ll want to structure it this way:
- Container (to hold our blog post together, set the margins & padding to keep it from getting too wide, and to easily make changes on the whole post at once)
→ H1 Heading (for the post title)
→ Rich text (for our main content)
→ Paragraph (for the author sign-off)
- Footer (just your usual website footer)
And that is it!
I could show you how it all looks but at this point it is still largely just an empty page - just an empty page with good structure. Well, why don’t we have a look at some empty nothingness after all?
Look at this incredible blog post:
You can also have a look at what the navigation looks like to get some more perspective on how this is structured:
It’s a very simple structure. We aren’t doing anything fancy at all here.
Now, let’s actually connect the collection we made earlier to our template page!
NOTE: This is a great time to actually go and add your first blog post to your collection, or just put a placeholder there. It will be much easier for you if you actually have some text there, so you can see what the finished version will look like.
Let’s connect our post title to the template. To do that, we click on the heading section on our template page, and we’ll click on the small cog to show the settings. There, we should be able to see a small, purple dot:
Click on it, and you’ll see all the different fields from your collection that could be linked here. We want to link our post title field.
And the post title from one of the posts we added to the collection will show.
Now that we have it here, we should center the text, set the margins, and set up whatever other styles you like. The neat thing is that the formatting you do here, will apply to all the other post titles on your blog posts.
Next, we want to link the main content. We just need to follow the exact same steps, just on the rich text section.
After that, we’ll link the sign-off:
And now that everything is linked to the template, we just need to set the styles and make it all look a bit neater!
You have your page template set up (the template that dictates how your individual posts will look), but you need to create your actual blog as well (where you’ll see a nice list of all your posts).
You want to open up your website pages and create a new page. Let’s title it Blog.
Add your header, footer, page title, and anything else that you might want on there.
Then, we’ll add a collection list and link it to our blog posts collection.
TIP: To quickly search for new elements, use Ctrl+K
Next, we’ll want to add a link block element to our collection item. We also want to click on the settings of the link block, and set it to link to the current post, so when we click on this later, it will actually take us to the right blog post.
Now, we’ll add an image and a header element into the collection item, and we’ll link them to the thumbnail and post title the same way we linked all the earlier elements to the post template page.
And this is it! Once you have everything linked, set your styles so everything looks neat, and you can hit publish on your website.
Congrats! You’ve officially succeeded in setting up a blog on your Webflow site. Whenever you write a new post, just fill out the form you made earlier on your CMS collection page.
Then, you have the option to either publish it immediately, save it as a draft, or schedule it to publish later!
I ran across this problem fairly often when I was starting out; I’d want to connect a section on my page to a field in my CMS only to not find anything even remotely similar to all the guides. There just wasn’t an option to connect it to the CMS.
First, double-check everything before you start despairing. Go back to the guide and read it through again. Did you actually add the field to your collection or did you just think about it? (Yes, I have actually done this before.)
Did you set it to the correct type of field? You’re going to run into trouble if the field in your CMS is set to be a rich text field, and you’re trying to connect it to a simple paragraph. You need to bring out a rich text field onto your page as well and connect it there.
Are you looking at the right place at all? Are you actually looking at the correct place where the CMS connections are, or did you get your wires crossed and are looking in a different area entirely? (Yes, I’ve done this as well.) Try looking through the guide again or pull out some video tutorials on YouTube.
If you’ve double-checked all of these but still can’t find a way to connect a field to your CMS, then your problem is a little more unusual and esoteric (congrats, you little overachiever), and it might be worth asking the community at the Webflow Forums to help you out, or you could always give me a shout, and I’ll do my best to help!
To do this, you’ll have to change how your rich text looks before you link it to your collection. Get rid of the connection to your posts on your rich text field and add it again. It will look like this:
This is your chance to set the styles for everything you want. If you want your first three headings to be green, make them green now. If you want your bold text to be 2px larger than your usual text, this is your moment!
When you’re done changing all the styles, link it to your collection again, and everything should use the styles you set earlier.
This it. Now, just start writing!
%20(1).png&description=Setting Up a Blog on Webflow 101: Complete Guide - A complete guide to creating and setting up a log on Webflow for beginners.){kind=link}