The 4-Step Process on How to Create a Blog on Webflow

Are you a Webflow newbie interested in starting a blog? In this article, we'll teach you how to create a blog on Webflow in four simple steps. We'll also share how blogging can help you grow your website and rank on Google.

Blogging isn’t just for influencers. It’s a smart content marketing strategy to increase organic traffic to your website. Plus, it's a fun way to promote your brand identity. In this article, we’ll share why you should start blogging today. We'll also teach you how to create a blog on Webflow in four simple steps. You’ll be an expert blogger in no time!

Why are blogs useful to your website?

There are a lot of benefits to blogging. But, it's most helpful to increase your Search Engine Optimization (SEO) and drive organic traffic to your website. We all want to increase traffic so that we can "rank on Google." Adding blog posts to your website means more chances that users will find your content.

There are a lot of ways to add SEO to your blog posts, but start with the basics. Focus on writing content that's useful and relevant to your audience. Add a catchy title, target keyword, and internal and external links. Use Webflow's "SEO Settings" to add a title tag and meta description. Don't forget to include a “call to action” button on your blog posts to convert your new traffic to leads.

Remember, SEO takes time. Be patient. Play the long game if you decide to start blogging as part of your content marketing strategy. 

Of course, blogging is also fun! Use your voice to build your brand identity and connect with your users. Everyone appreciates content that's helpful and free!

Why should you blog in Webflow?

The biggest reason you should blog in Webflow is that anyone can learn to use it. Keep reading, and we’ll teach you how to set up your blog in four easy steps.

Webflow also has a smart Content Management System (CMS). A CMS helps you create, manage, and publish your content to your website with no coding required. It's a necessity for any blog.

Webflow’s CMS is ideal especially if you plan to have non-technical authors writing for your blog. It’s easy to teach non-technical authors how to add, post, and edit articles. End the back-and-forth between you and your authors when you need to post or edit an article. No complicated programming languages here.

Webflow is also designed to promote SEO. It's fast and responsive with built-in SEO features. You can even auto-generate your title tag and meta description for each blog post. With Webflow, you can spend less time worrying about SEO and more time focusing on your website.

How To Create a Blog on Webflow

We’ll show you how to create a blog on Webflow in four simple steps. If you’re new to blogging with Webflow, don’t be intimidated! We’ll walk you through every step of the way. Let’s get started.

Step 1: Create a new CMS Collection.

Open the “Designer” for your website. Click on the “CMS” icon, then “Create New Collection.”

Choosing to create a new CMS Collection

This will open your Blog Posts Collection Settings. We recommend selecting the pre-made “Blog Posts” Collection Template. This template will populate your Collection Name, Collection URL, and Collection Fields.

Note, the Collection Fields are types of content you can add to each blog post. Feel free to add/delete or edit any Custom Collection Fields to fit the needs of your blog. Or, you can skip the pre-made template and design your own Blog Posts Collection! When you’re happy with your Collection Fields, click “Create Collection.” 

Creating a new CMS Collection

Webflow will then ask if you want to add sample blog posts. For this tutorial, let’s click “add 5 items.” This will populate your CMS Collection with five sample blog posts. 

Adding sample items to your CMS Collection

If you already have your blog posts written, you can skip adding sample blog posts. Instead, click “New Blog Post,” which will add a blank blog post to your CMS Collection. You can start writing from there!

Adding a new blog post to your CMS Collection

Need to make changes to your Blog Posts Collection? Hover over the Blog Posts Collection until a cog icon appears. Click the cog icon. This will open your Blog Posts Collection Settings. Remember, you worked on these settings earlier when you created your collection.  

Making changes to your Blog Posts Collection

Step 2: Design your CMS Collection Page.

When you create a new CMS Collection, Webflow creates a CMS Collection Page. This page is the template page for your blog posts. You can design the look and feel of your blog posts, and add content by linking this page to your Blog Posts CMS Collection. Don’t worry, it’s a lot easier to link this page to your CMS Collection than it sounds!

Exit your CMS, and click on the “Pages” icon, then “Blog Posts Template” under your CMS Collection Pages. 

Opening your Blog Posts Template Page

Now, it’s time to design your Blog Post Template Page! Add pre-made layouts or click the “Add Element” icon to add your Elements.

Pro Tip: You have to add a rich text block to add the body of your blog post to your template. If you want to edit the rich text, you need to unlink your rich text block from your CMS Collection. You can then edit the rich text, and relink it to your CMS Collection.

Designing your Blog Post Template Page

For this tutorial, let’s add a header and rich text to the Blog Post Template Page.

Adding a header and rich text to your Blog Post Template Page

Now pay attention, we’re about to add some Webflow magic. Click on your “Heading” Element, then click on the cog icon. Check “get text from Blog Posts.” Then, select the field that you want to use from the drop-down menu. We’ll select “Name.” Ta-da! The title of your blog post has been added to your template! 

Repeat this process for any Element you want to link to your CMS Collection. You can also add Static Elements that are the same across all your blog posts. Think header, footer, sign-up button, about, etc.

Linking your Blog Post Template Page to your Blog Post Collection

Another trick to add content from your CMS Collection is to click the cog icon on the right-hand toolbar. This will open the “Elements Settings." From here, you can add “Dynamic Style Settings” from your CMS Collection. Think background images, colors, etc.

Adding Dynamic Style Settings to your Blog Post Template Page

Are you curious how each blog post will look with your new template? Click the “Item” drop-down menu on the top-level toolbar. Then, select the blog post you want to view.  

Viewing each blog post on your Blog Post Template Page

Step 3: Create and design your blog homepage.

Next, we need to create a blog homepage. This is a static homepage that will link "blog thumbnails" to your blog posts. You can check out our blog homepage to see how we styled and linked our blog thumbnails. We’ll add content from the Blog Posts Collection in the same way that we did in Step 2. To start, click on the “Pages” icon, and then “Create New Page.”  

Choosing to create your Blog Homepage

For now, add a “Page Name” to your “New Page Settings,” and click “Create.” (You can go back and add the other information later.)   

Creating your Blog Homepage

Feel free to style this page like any other homepage on your website! Now, we'll share a few tips on how to connect your blog homepage to your Blog Posts Collection. Click on the “Add Elements” icon, and add the “Collection List” Element. Double-click to connect a CMS Collection. Choose a “Source” from the drop-down menu. We’ll select blog posts. And like magic, you'll see your blog posts connected to this Collection List!

Adding your Collection List Element to your Blog Homepage

Next, click on the “Navigator” icon, and expand the Collection List Wrapper. You’ll see a nested Collection List and Collection Item. Add Elements to your Collection Item that you want to display on this page for each blog thumbnail. For example, author, title, and post summary. Connect these Elements to your CMS Collection in the same way that we did in Step 2. Note, any changes you make to your Collection Item will be made to each blog thumbnail.

Viewing your expanded Collection List Wrapper

Pro Tip: To link each blog thumbnail to its blog post, you need to add a Link Block or Button to your Collection Item. Once added, click the cog icon associated with your Link Block or Button to open your “Link Settings.” Select the second option, “Collection Page.” Then select “Current Blog Post” from the Page drop-down menu.

Linking your Blog Homepage to each Blog Post

Step 4: Boost your blog with Jetboost.

If you want to add additional features to your new blog, try Jetboost for free. Combine Jetboost’s boosters to give your readers an interactive, dynamic experience. Learn more about our boosters below.   

Dynamic Filtering. As your content grows, you’ll want to add Dynamic Filtering to your blog. Let your readers filter your blog posts by category, author, date, etc. Increase your readership with user-friendly filtering. Want to learn more? Read our article on the 11 unique ways to add filtering to your CMS Collections. 

Advanced Pagination. Paginate your blog with Advanced Pagination. Let users scroll through your blog posts without full-page refreshes. Jetboost is the easiest way to add pagination in Webflow. 

Real-Time, On-Page Search. Let readers search your blog with Jetboost’s Real-Time, On-Page Search. Read our article to learn how to add a search bar to your website in less than 10 minutes.

CMS Item Favoriting. Use Jetboost’s CMS Item Favoriting Booster to let readers add fun emoji reactions to your blog posts. Check out our article to learn how to do this quickly with Jetboost. Everyone loves an emoji!

Dynamic Sorting. Let users sort your blog posts by specific criteria like topic, date, etc. Dynamic Sorting will improve your reader experience and engagement.

Auto-Archive CMS Items. This is our easiest booster to use! If you write about current events or news, try our Auto-Archive CMS Items Booster to archive your outdated blog posts. It’s an easy way to save your content and keep your blog current. You can add auto-archiving to your blog in less than a minute. 

Add Value to Your Website with a Webflow Blog

Blogging is a smart value-add to your website. It doesn’t have to be a chore either! It’s easy to learn how to create a blog on Webflow. Follow our four simple steps, and then personalize your blog to fit the needs of your website. Provide helpful content to your users and increase your website traffic today. It’s a win for everyone.

Caitlin Fithian

Get Started with Jetboost Today

Premium Webflow App, no custom code required. Join thousands of other professionals who are using Jetboost for Dynamic Filtering, Real-Time Search and more.

Get Started for free
Table of Contents:

    related articles

    Thank you! Your submission has been received!
    Oops! Something went wrong while submitting the form.
    Categories:

    More from the Blog

    Get started with Jetboost

    Premium plugins for Webflow, no custom code required.
    Dynamic filtering, real-time search, and more!