Support Article

How do I connect components to the CMS?

Not sure how you can connect your CMS to components? Check out this article

Back to Support Centre
View Support Center
View articles to common problems to solve issues.
Support Center ->
Chat with us
Still need help? Please get in touch with our team!
Get in Touch ->

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


Asked Questions

Everything you need to know about the product and billing.

What is Flowbase
What products do you offer?
How does it work?
What are components?
What happens to my site after I cancel?
Are templates included in the premium membership?
Can I use Flowbase components to create websites for my clients?
How often are new components added?
Does copying components work with Safari?
Can we copy unlimited components?
What is the difference between a premium subscription vs free?
What payment methods do you accept?
Do you offer a free trial?
Do you offer refunds?