Webflow CMS: What is it, why use it and how to use it like a pro

The Webflow CMS is a huge reason to use Webflow. You may have used content management systems in the past but I doubt you have used a content management system that so seamlessly links to the website designer. Manage data easy as pie and then link CMS collections to pages. Customise how your website's content looks seamlessly using one of Webflow's most powerful features.

Let's dig in.

‍

What is a CMS?

A Content Management System (CMS) is a software platform that enables users, regardless of technical expertise, to create, manage, and modify content on a website without the need for specialized technical knowledge. Essentially, a CMS provides a user-friendly interface that simplifies website content management, allowing individuals and businesses to maintain their websites with ease. This can include anything from adding or editing text and images to updating product catalogues and publishing blog posts. By abstracting the technology and coding required to build web pages, a CMS empowers more people to contribute to and control online content, democratizing the process of web publishing.

A CMS (content management system) is where you store and manage dynamic content on your site. You can reference dynamic content (i.e., content that changes) in your site design. Then, when you or a teammate creates or changes content in the CMS, it instantly updates on all the pages where it’s referenced.

‍

Webflow CMS features

Webflow CMS comes with tonnes of useful features that are well worth knowing about.

Check out this page for a full run down.

‍

CMS API

The Webflow CMS REST API is open for business! Now you can add, update, and delete Items from Collections programmatically, right from your terminal.

Create CMS items with Zapier

Now you can push content to Webflow CMS from your favorite apps via Zapier — without writing code.

Dynamic SEO and Open Graph (OG) settings

Forget writing meta titles and descriptions for every one of your blog posts. With Webflow, you just create a template for your SEO tags to follow, and we'll automatically generate search engine-friendly titles, descriptions, and Open Graph content.

Dynamic content filtering and sorting

Easily filter dynamic content to display featured content or all blog posts on a particular topic. Or use sorting to display content from a specific date range, by alpha, and more.

Dynamic content templates

When you create a Collection, Webflow automatically generates a template page so you can design how that content displays. Then that template gets applied to every item in the Collection — letting you create hundreds or even thousands of pages — at once.

Easier collaboration with clients

Add your client as a content editor so they can update text and images while you work on the design.

Export CMS content as a CSV

Now you can export your CMS Collections as CSVs to move content between sites or — if you must — between platforms.

Form submissions in the Editor

If you have Webflow CMS hosting, you, your clients, and other Collaborators can now review incoming submissions from your website's forms right inside the Editor panel—plus download the whole list in a handy CSV file.

Fully customizable content structures

Webflow CMS gives you the power to define your content and its structure however you'd like with over a dozen field types.

Intuitive website editor for clients and teams

With Webflow CMS, there's no need to learn a complex backend. Just open your website, log in to the CMS, and start updating text and images — right on the live website.

Paginate Collection Lists

Now you can paginate collection lists, control how many items display per page, and style your own “previous” and “next” buttons.

Powerful related content tools

Easily create "related posts" modules for your blog, guide users through in-depth tutorials, surface related help content and documentation, and build modular pages that highlight content from across your site.

RSS feeds for CMS Collections

Create an RSS 2.0 feed for any of your dynamic content Collections so people can subscribe to your content via reader apps like Feedly. You can also automate your email newsletter via MailChimp or set up RSS "zaps" with Zapier using your RSS feed URL.

‍

Why use a CMS?

1. Ease of Use: A CMS enables users with minimal technical expertise to build and manage a website's content. The intuitive interface makes it simple to add, modify, and delete content, thus reducing the need for specialized web development knowledge.
2. Cost Efficiency: By eliminating the need for advanced programming skills, a CMS can significantly lower the costs associated with website development and maintenance. Users can manage their sites without hiring web developers for day-to-day updates.
3. Scalability: With a CMS, expanding your website as your business or content grows becomes much easier. Adding new pages, sections, or functionalities can generally be done without restructuring the entire site.
4. Collaboration: Many CMS platforms are designed to support multiple users, making it possible for teams to collaborate on content creation, editing, and publishing. This can streamline the content management process, especially for larger sites.

‍

When to Use a CMS

1. E-commerce Websites: For businesses aiming to sell products or services online, a CMS can provide the necessary tools for inventory management, payment processing, and customer service. This can simplify the process of running an e-commerce platform, offering templates and plugins designed for commercial use.
2. Blogs and Publishing Platforms: When the primary focus is on creating and publishing content, such as articles, blogs, or news updates, a CMS is invaluable. It streamlines the workflow of publishing, editing, and managing content, making it easier for writers and editors to collaborate and keep the content fresh and engaging.
3. Educational Websites: For institutions that need to provide students with access to course materials, assignments, and other educational resources, a CMS can facilitate the organization and distribution of this content. Educational CMS platforms can also support interactive elements like forums and quizzes.
4. Portfolio Websites: Creatives looking to showcase their work, such as photographers, graphic designers, or artists, can use a CMS to easily create and maintain a portfolio website. A CMS allows for visual customization to highlight their work effectively and update their portfolio regularly without extensive technical knowledge.
5. Corporate Websites: Organizations that need to inform and engage with their audience, stakeholders, and employees can utilize a CMS for their corporate website. It enables them to manage the publication of news updates, company information, career opportunities, and industry insights in an organized and efficient manner.

Using a CMS in these scenarios allows for a blend of flexibility, ease of use, and efficiency, making it a go-to solution for managing digital content across various industries and purposes.

‍

What is the Webflow CMS?

The Webflow CMS gives you full control over your content structure and how content is designed throughout your site.

‍

How much does Webflow CMS cost?

If interested, we actually wrote an article going in depth in to all things Webflow pricing entitled, "Webflow Pricing (2024): The Ultimate Guide To Pricing, Plans & Features,"‍‍

The CMS plan is $23 if billed yearly ($29 if billed monthly).

This plan is designed to accommodate the needs of blogs, portfolios, and other content-driven websites, providing a powerful suite of features for both content creation and management. Key inclusions in the Webflow CMS plan are:

• Full access to the Webflow Designer, allowing for custom designs without the need to write code.
• Hosting for up to 100,000 monthly visits, ensuring your site can handle significant traffic without compromising on performance.
• The ability to publish 2,000 CMS items, catering to sites with extensive portfolios or regularly updated content.
• Support for up to 3 content editors, making it easier for teams to collaborate on content creation and site updates.
• Integration with Webflow’s Editor, offering a user-friendly interface for editing and updating content live on the site.
• SSL certification, providing a secure connection for your site visitors.
• 50 GB of CDN bandwidth, for fast loading times around the globe.

This plan is well-suited for content creators, bloggers, and small businesses looking for a comprehensive, easy-to-use system for managing their digital presence.

‍

Can you import content to the Webflow

Yes, importing content into the Webflow CMS is a straightforward and efficient process, designed to simplify the management of digital content. This feature is particularly useful for users looking to migrate content from another platform or to bulk upload items. Webflow supports the import of content through .csv files, allowing for the easy transfer of articles, posts, product information, and more.

The platform provides detailed guidelines on formatting the .csv file correctly to ensure a smooth import process. Additionally, Webflow's CMS import tool includes the ability to map CSV columns to specific fields within your collections, offering flexibility and control over how your content is organized and displayed on your website.

This functionality highlights Webflow's commitment to providing a user-friendly experience, making content management accessible to users regardless of their technical expertise.

‍

Which other website builders have CMS functionality? Are they better than Webflow?

Several website builders offer CMS (Content Management System) functionalities, standing as alternatives to Webflow. Prominent among these are WordPress, Squarespace, Wix, and Drupal. Each platform has its unique strengths and user base, catering to different needs and technical expertise levels.

• WordPress is widely renowned for its flexibility and vast ecosystem of themes and plugins, making it a powerful choice for users who seek a high level of customization. It is particularly favored for blogging and complex websites.
• Squarespace offers beautifully designed templates and an intuitive drag-and-drop interface, appealing to users who prioritize design aesthetics along with ease of use.
• Wix provides a user-friendly platform with a wide variety of templates, suitable for small businesses and individuals looking to create professional-looking websites without a steep learning curve.
• Drupal, on the other hand, is a robust, open-source CMS that is highly customizable, suited for more complex websites and users with technical expertise.

We choose Webflow for its CMS functionality over other options. It blends design flexibility, ease of use, and powerful customization without the need for extensive coding knowledge. This makes it ideal for clients.

‍

How to use the Webflow CMS

The different steps we will go through are:

1. Signing up to a Webflow plan
2. Create a CMS collection
3. Adding data to that collection
4. Styling a static page
5. Connecting that CMS information
6. Styling an individual CMS page
7. On page SEO and checks
8. Hitting publish

For this example, we'll be using the Macu agency website. This is what we actually do on the website so you can see a real Webflow example.

We have collections for case studies, blogs, press features, Webflow templates, service pages, tools and more. As you can see, there are tonnes of different things you can do with the CMS.

‍

1) Sign up to a Webflow CMS plan

So how the hell do you set this up? Well, first step is actually to get a Webflow CMS plan. This is $23 a month if billed yearly or $29 a month if billed monthly. If you're obviously having it for more than a year, you'll save a little bit of money if you do it yearly. So that's a basic minimum starter.

Sign up to that here

‍

2) Head to the CMS & add a collection

You won't see all the different collections that you see in the panel so you will need to create a new collection.

A collection is just a set group of fields that make up the same type of data sets eg. blogs, team members etc.

What you need to do is you click this icon here, then click this little icon up in the top right when the panel opens.

Create New Collection.

‍

3) Add a collection

You will be shown all of these different options, blog post, authors, categories. Maybe there are things that you need that aren't here, so all you need to do is you can just put in whatever collection name you want and then add your custom fields from here.

Let's say though that you actually want to add blog posts as well. What that means is that you have all these custom fields that are automatically added. So post body, post summary, main image, thumbnail image, et cetera, et cetera.

Now, let's just assume that this is gonna be done by you.

So you name it whatever you want. I'm just gonna make it very clear that this is different from the actual content that we normally have on our website. And we click Create Collection to get that collection made.

So we have collection and then we have the fields that make up whatever content is going to be put in those collection items.

So we can either input new content, if you already have a blog post with images and authors, et cetera, then you can obviously put that in by clicking this blue button here.

If you don't have any content, I'm going to just add 20 new items.

Now, these are all being added. Great. We have 20 new blog posts, 20 myths about web design, et cetera, et cetera. If we click into one of these, we'll see all of these different fields that have been automatically added.

‍

4) Create a static page

Head back to the designer and create a new static page.

Then, you can stylise a new page within Webflow to create a directory of your different team members.

You will then be able to link all the CMS collection information.

‍

5) Connecting that CMS information

Copy the basic page styling from another website page on you site. This should give you the basic to input the CMS inormaton.

Grab a CMS element by clicking the add elements button in the top left of the designer - it's a plus icon.

Drag that in to your designer and click the purple button in the top left. This means you will be able to connet it up to the authors CMS collecton.

After doing this, you will be able to see all the CMS items linked - it's magic!

Then, add an image element and connect by clicking the purple button that shows up in a modal above your CMS item.

Continue this process with all the elements you want to add. Then put a link block in the CMS item and link that to the individual CMS item page (current author)

Now, you have a static "Blog," page which shows all the different blogs on your website. If you click on one of the blog image thumbnails, it will link to the individual blog article itself on the CMS item page.

‍

6) Styling an individual CMS page

Repeat the process of copying basic styling elements and then drag a CMS collection element on the age.

Drag in a rich text element to connect to the author biography (or whatever log for content you wan to connect).

Verify that every element on the page is appropriately connected to the CMS. This includes ensuring that any dynamic content or interactive elements are fully linked to the CMS to guarantee seamless functionality. They turn purple when they are linked. Missing connections can lead to broken functionality when the live site is up and running!

‍

7) On page SEO & Checks

Don't you dare publish the site without checking off the on-page SEO elements!

These include:

• Title tags
• Metadescription
• Open graph settings

‍

8) Publish!

When completely satisfied that the page is responsive, all the CMS information is there that's meant to be there, all CMS connections are made correctly and page is ready, hit publish!

Congratulations - your CMS collection is live.

‍

‍

Important things to remember

Go and check out this incredibly useful checklist that Flowninja have made for you to be able to tick off all these CMS items. This checklist is what we use before launching websites - it's incredibly comprehensive.

Here is the CMS checklist that they go through on their incredible sheet:

CMS Slugs

Slugs for the CMS pages should be singular. e.g. /blog/ , /author/ , /service/

‍

CMS Fields

Always use description part of the CMS fields to describe what they do and what they're connected to.

‍

Dummy CMS Content

Each CMS needs to have at least 3 CMS items added with different content, ideally we should end up with 7 CMS items.

‍

CMS Connection

Double check each item on the page to make sure all images, texts and links are connected to pull info from the CMS

‍

Conditional Visibility

For any element that the client might not fill in the data for, add conditional visibility. E.G. Twitter icon should be hidden if the client doesn't add the Twitter link in the CMS.

‍

CMS Post Pages Designs

All CMS post pages need to have content inside. Even if it is for an FAQ CMS post, please add Navigation, Footer and a Question and the answer section in the hero.

‍

Empty CMS List State

All CMS Collections have the empty field designed and implemented. Guiding the client where to go to add CMS content.

‍

CMS Items connections

Check to see if all CMS items are connected to the proper links or post pages. For CMS Items that link out of the site, please link to a new tab and add rel=”noreferrer”

‍

Dynamic SEO Titles, Descriptions and OG Images

Either pull the SEO Title from the Item name + " | Business Name" or add custom fields for all 3. If we're doing a migration from an old site, migrate the same SEO Titles and Descriptions as on the old site.

‍

CMS Sorting & Filtering

Check if CMS Lists are sorted properly. Newest first or whatever the client is requesting us to use, if we have a related CMS Items, make sure don’t show the current CMS item.

‍

CMS Switches

Add featured, first or whatever the design requires fields to the CMS.

Advanced Webflow tips

RR Tarbot is the man when it comes to CMS. He used to work at Webflow teaching enterprise clients to use the the CMS so he knows his onions.

The 8 tips he includes in this video are:

1. Video link field for social embeds
2. CMS fields in custom code
3. Choosing to not index CMS pages
4. Titling CMS correctly
5. Syling your rich text in a style guide page
6. Category URLs using Webflow feature
7. Set image sizes at max and min
8. Help text for collection images

‍

Conclusion

In wrapping up, the power of a well-crafted CMS website in enhancing both user experience and search engine ranking cannot be overstated.

Through the strategic use of Webflow, users of all skill levels have the opportunity to leverage its potent CMS features to not only meet but exceed these goals.

By adhering to the outlined best practices, you are not just optimizing your website; you are setting a foundation for a compelling online narrative that resonates with your audience and stands out in the digital realm. Remember, the essence of a successful website lies not only in its aesthetic appeal but also in its functionality and ease of use. By starting on this path today, you commit to a process of continuous improvement, innovation, and growth.

Remember, if you're also considering how to make your website SEO friendly, be sure to check out our article entitled "SEO For Startups: How To Grow Traffic To Your Startup Website (Free Resources Included)."

‍

Extra Resources

• Incredibly comprehensive video from Design Base

• How to structure your Webflow CMS Collections
• How to use Webflow CMS as a content modeling tool