Introduction To Webflow CMS

The rise of the internet has given birth to a lot of new web related technologies. These technologies have simplified our web development experience. This is where Webflow CMS plays its part.

Webflow is a no-code web design tool invented for visual web design. It can be used for designing responsive websites, landing pages, eCommerce sites, blogs, and more. Beyond a web design tool, it also has a CMS (content management system) and a hosting platform. In this article, we will explore in depth the CMS part it offers.

🔹What Is CMS In Webflow?

A CMS (content management system) is where all the dynamic content is stored and maintained. For example, the website references dynamic ranges on different pages. So anytime you or your client create or change any content in the CMS, it instantly updates all the pages where it’s referenced.

🔹Content Structure In Webflow CMS

The Webflow CMS structure comprises of :

1. The Site
The site is the workspace in which we will create our CMS. You can have multiple sites, and each will have its own CMS.

2. CMS
Each CMS is unique to its site.

3. Collection
A collection is like a database. It’s where content can be stored and referenced dynamically. Different collections signify different content types.

4. Collection Items
An individual piece of content within a collection is called a collection item. So, for example, you can have a collection of “Blog posts,” and the collection item will be the individual “Blogs.”

🔹How To Create Collection In Webflow?

Creating Site

You will need to create an account in Webflow to get started; you can create an account here. 

After creating an account, you will be redirected to the dashboard from where you can make your first site.

Creating Collection

After creating a site, you will land on the site dashboard. Here you can create a new collection.

You will need to give the collection a name. Webflow offers some predefined collection templates such as Blog Posts, Events etc. you can select any predefined templates or create your custom template.

Once our collection is ready, we can create a collection item.

Creating Collection Item

To create a collection item, open the newly created collection and click on the “+New” button. Webflow also offers to generate sample dummy collection items just to get started.

You can decide what kind of structure each collection item will have. For example, if you are creating a collection item of “team members,” you might need a name, a picture, and an email for each team member.

You can create a field for each type of content. In this case, it’s a plain text field, an image field, and an email field. Webflow offers a plethora of customization options for customizing items. You can add labels, text fields, checkboxes, images, etc.

You can also edit and delete your collection and collection item details as you wish. Webflow also offers us to import/export the collection items once created. We can import multiple collection items with the help of excel.

🔹Webflow API

Webflow can “talk” to third-party applications or web apps with the help of webflow API. For example, the content within our Webflow CMS can be accessed using the webflow API. The link to API documentation is here. 

To start using this API, we will generate the token as follows.

Generating an API access token

1. Go to your site settings → Integrations → API Access

2. Generate an API token

3. Copy the generated token to your clipboard

🔹Fetching Collection

Let’s see how we can fetch a collection and its items. You can use any backend technology to achieve this. For example, node js, python etc. Here we can assume that the collection is “Blog posts” and the collection item is an individual “Blog.”

We will use the collection endpoint which is provided by webflow in the official documentation here.

Here we supply the collection ID in the params. The ID can be found in the collection tab of your Webflow site dashboard.

The response from this endpoint will list all collection items within the specified collection, as shown below. The items here are nothing but the individual “Blogs” in our “Blog posts” collection.

Here the response shows the summary of the collection item. The id linked to the collection item is “_id.” We can use this id to fetch the full collection item details.

We can use another endpoint to get the full individual collection item details.

In this endpoint, we must pass the collection Id and item Id. This will give us the individual item details.

🔹Advantages Of Webflow CMS

• Update your website content remotely as and when needed.
• Changes are always dynamically reflected.
• The user-friendliness of the webflow UI makes integration a breeze.
• Content can be curated and targeted to a specific geographical location, person or organization.
• Design once and update content as per need from the CMS. No need to alter content from the website codebase.
• We can have multiple collaborators for the content.
• Easy API integration.