Connecting your Components to CMS

Not sure how you can connect your CMS to components? Check out this article
Couldn't find what you need?
Reach out to our friendly team and we'll get back to you as fast as we can!

Monday - Friday AEST

Quick start guide on adding CMS to your new components.

Some of the components you copy from Flowbase will work great for your own Webflow Collections (CMS). This article gives you a quick intro into connecting components to your CMS, aswell as providing some of the most common links to help you get started.

The most common components that you might want to connect with your CMS include:

- Blogs
- Team Sections
- FAQs
- Videos
- Case Studies
- Projects

In this article we will look at connecting a blog component to the CMS to help you get an understanding of how this might work for you. If this is your first time using the CMS, we recommend you review the Webflow University resources to get the best understanding possible.

1. Copying the Blog Component

Once you have decided on a component you can simply paste it into your webflow designer as a new section. This gives us the base structure on page and is ready to be added into your collection list element (we will get to that)
For this demo we're going to copy across Blog Component 07, which includes a standard blog grid section, aswell as a featured post section at the top.

Paste the Component into your project

2. Review Component Structure

Once we have decided on a component, lets look at its structure and use that to plan the fields we require in our collection. Of course, you can customise these and add/remove fields as you need, but for this example we're going to assume we need all the fields by default.
Upon reviewing the component we can see it has the following field requirements which will need to be connected.

- Thumbnail
- Heading
- Short Description
- Estimate Time
- Category/Tag

Review Structure & Required Fields

3. Create the Collection

At this stage we have identified the fields we need in our collection, so we can get started creating it. Simply go to your collections tab and create a new collection, lets call it... Blogs

Create CMS Collection

4. Add Collection Fields

Since we know the fields that have to be connected to our structure, we can simply start adding these through the settings panel in the top right.

Add Collection Fields

5. Add Collection Item(s)

Okay, we have our component, we have our collection and we have the fields added to our collection. Now let's add our first blog item. Simply click the + New Blog in the top right and add your content, as seen below. Add your content into the fields we created :)

Add your first collection item (blog)

6. Add the Collection element to your page

Okay, we have our component on the page, we have our collection made, and we have the fields & data added to our collection.

Start by adding the Collection List element to your page. Since we need a grid, set the Collection List display to grid (as seen below)

Target the collection list, and change the display to grid

7. Add component structure & connect to CMS items

Now simply copy paste the structure from a blog item in the component, into the collection field that we just added. This wil allow our component to be connected to the CMS fields we just created.

Add the component into your newly created collection list
Connect the fields to your CMS fields. Eg Image > Thumbnail

7. Start publishing blogs to the grid

That's it, you can now start creating new blog items in your CMS, and they will be added into your collection list

8. Featured Section (Optional)