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.
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
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
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.
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 :)
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)
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.
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
