Patrick HuijsApr 8, 2026
Managing Content in Webflow CMS 🌐
Managing Content in Webflow CMS 🌐
Patrick Huijs·Apr 8, 2026
Learn how to manage and publish content using the Webflow CMS. This guide covers the difference between static and dynamic content, how to edit elements on the page, and how to configure buttons for video integration.
Chapters
00:00
Introduction to Webflow CMS
Overview of managing and publishing website content using the Webflow CMS.
00:14
Using the Marketer Role
00:34
Static vs. Dynamic Content
01:16
Editing Static Content
04:31
Adjusting Section Visibility
05:00
Managing Button Variants
05:53
Adding Video Links
Transcript
00:03
In this video I will explain how to manage and add new content, how to publish this using the webflow cms.
00:14
So first thing, when you log in you go to the left top corner and at preview role you switch to marketer.
00:23
This is a safeguarded environment that this way you can still manage all the content, without breaking the underlying structure.
00:34
So the first thing that is important to explain is that there are two types of content.
00:41
Static content, which is the content you see here on the page, that is content if you change it on this location, it only will be changed here.
00:52
And there is a second one is dynamic content.
00:56
It has typically a purple outline and that is content that is linked to the CMS database.
01:02
If you change it on one spot, it changes everywhere throughout the website.
01:08
For example, these are case studies, blogs, white papers, etc.
01:16
So first let's see how we can edit content here, here on the page.
01:22
So let's start here at the top.
01:24
If you hover over it with your mouse, you can see that things selected that you can edit.
01:31
And first let's edit here the headline.
01:34
Let's say we want to get rid of this here.
01:36
You just double click select and click backspace.
01:42
Click outside the box and it's automatically saved.
01:48
Same goes for the text here you can add and edit text.
01:55
This case I'll add it back like this and that is how you edit regular text copy.
02:06
Then here on the right side you see the image.
02:08
I click on it once.
02:09
See like an image pops up here, I click on it.
02:13
The asset panel opens here on the left side.
02:17
This is here you can collect all your different images and icons, so you can easily use it throughout the project.
02:27
Let's say I want to change this to a different asset.
02:31
You see here it gets automatically cropped into the dimensions of the previous image.
02:37
So that's important to know.
02:41
let's search for the one that we had here.
02:47
Then when we scroll down you can see here a different kind of content and that is components.
02:56
These are reusable blocks and typically they have more options than the regular static content in here on the top.
03:07
If you click on it once you can see on the right side a lot of information pops up.
03:13
I like to close these tabs so I have a little bit of a better overview here you can see at the top I can switch from light to dark mode.
03:24
I have here options for the section header.
03:28
I can change the text route, it updates automatically.
03:35
Fee card 1, 2, 3.
03:37
The title and a text title And a text in here as well.
03:43
And then here you can see that there are buttons here.
03:46
They are not visible in the component itself.
03:50
That's why when editing a component I, advise always first go to visibility and see if you might want to hide any content of need extra content.
04:03
This case you can click an extra paragraph buttons.
04:09
You can also remove some of those.
04:13
That's how you edit content.
04:15
Typically you don't have to do anything with the settings here.
04:18
It's more of a development thing.
04:21
Now let's command Z this so it's back in its original place.
04:31
Let's take another example here we see here the tag text that's part of the section header because it's always the header of the section.
04:45
And we want to turn this one off here.
04:49
Maybe we also want only like 3 items here.
04:52
Then we can turn it off and the spacing adjusts accordingly.
05:00
Let's dive a little bit deeper into changing buttons because they have a little bit more options.
05:08
So two type of buttons like a primary and a secondary one, you can recognize them on the different colors within the secondary one you have also different variants.
05:23
You have the regular one and the video one.
05:26
See when I switch here that the play icon for the video pops up.
05:36
When I want to add a video to a button, first I go to variant video, change the text.
05:44
I don't have to do anything with the link.
05:46
So I leave this open.
05:48
This way the icon is already there, so don't need that one.
05:53
And then I have here the tab video.
05:57
Here you can see Paste the video URL from bunny.net I will explain that in a different tutorial video on how to use bunny.net but when you have the URL you can just paste it here.
06:14
you can add a placeholder image.
06:16
That is the image that is shown before the video loads.
06:20
If you fill this out and someone clicks on this button, a video pops up.
06:27
in this case we want to keep it this way.
06:31
Now let's switch to another page.
06:38
For example the FAQs.
06:40
Because there we have some cms, content.
06:49
So in the FAQs you can see these you can best edit by going to the cms.
06:58
You can click here on the top.
07:00
Then you search for FAQs and then you have here your database with different questions.
07:09
Let's open one up.
07:10
You can see you have the name and the answer here and you can categorize them in general product or support.
07:23
Whenever you are done editing, you can publish it.
07:26
Now new FAQs click can be created here at the top.
07:32
Fill this out, pick a category, create draft or publish immediately.
07:38
Can also schedule later.
07:44
So let's go to build where all the pages are.
07:48
Now let's see this in an example of a case study.
07:55
Case studies are used throughout the website.
07:59
You can see whenever I hover over it if the purple outline I mentioned, that's like the signal that this is dynamic content.
08:09
If I change anything here then it will change somewhere else where this is available as well.
08:16
So the best to have the best overview of what specific thing you are editing.
08:22
I always advise to not edit here directly on the canvas but just go to cms, look for case studies and then do the case studies here you can see you can fill out thumbnails, logos and all other additional information.
08:44
Let's dive a little bit deeper in this and pull up a case study detail page.
09:00
Here you can see a preview of the website, of the live website and let's see how we can edit this in the cms.
09:13
So you go here to case studies.
09:16
We have this one.
09:17
Nevermind.
09:18
You see the title is of course at the top of the page and used in the thumbnails.
09:25
Then you can see you can add a logo here.
09:28
But in case if you can't show a logo you can still add a substitute here.
09:35
For example global healthcare brand.
09:38
And this will be displayed instead of the company logo.
09:44
Sometimes you want to if you can add the company name.
09:49
This is for example if you want to only show a shorter version of a title like in the footer that we only display the company name.
09:58
So if you can please add that here.
10:02
Otherwise might be good to add this one here as well.
10:08
Short company bill.
10:10
That's the thing here on the left side.
10:19
The pain points.
10:19
They were struggling with the industry they are in.
10:25
And then you can see we have the quote text, quote author and the role of the authority.
10:34
this will be used on the page, on the detail page but also on other instances of the website.
10:41
For example on the homepage you see featured case study where the quote is visible.
10:52
And add a profile picture here if you have one.
10:56
There's always exa signal for trust.
11:02
Issue a description and here the main content.
11:06
So the main content works a bit like other editors.
11:10
For example like notion.
11:13
If I click somewhere here you see a plus and I can see that there are different kinds of elements I can add here.
11:22
Let's say I want the bullet list.
11:26
I can click on it and start typing.
11:30
I can add more different things here I can add images, videos, but also whole code blocks and here all the headings.
11:44
Don't worry on how to how this looks here in this screen.
11:49
Because this is just a basic editor.
11:52
All the styling of these elements will be done with code.
11:58
So if you want to know how it looks, either check here or check it on the live website.
12:07
So you don't have to add extra enters and things here to make it look better.
12:12
This is really only for data entry.
12:19
you can add the other results.
12:21
If you don't want to show that block on the page, you can show it off here, on and off.
12:30
make sure to read the extra copy here as well because in this case it's the other way around.
12:37
Then intuitively works.
12:40
And then here you have the downloadable PDF.
12:43
You can easily click here and replace it.
12:46
That will automatically be hidden behind the form.
12:54
And that's how you edit the case studies.
12:57
Same goes for the blogs and for the downloads.
13:04
Same kind of things.
13:06
you can add categories, findings and a downloadable PDF if needed.
13:14
If you don't add a PDF there will also be no form for people to fill out.
13:18
So that works automatically.
13:25
In terms of navigation throughout the ui.
13:29
Here you have all the assets.
13:32
Here you have all the components which I dive in in a different video in detail.
13:40
Here everything that is on the page.
13:43
And here you can see a list with pages.
13:47
If you want to navigate through the different dynamic pages.
13:54
For example like the case studies, you click on the case study template and then here a few pages in this collection.
14:03
From there you can see multiple.
14:06
You can also do it here at the top is both the same.
14:12
Whenever you're already filling out the content, you can publish it here on the staging domain it's best to do this first before immediately pushing it live you can test if everything works well.
14:26
When you're happy, add it to the production domain.
14:31
This is currently not connected, but here you will see smartdeva.com and you can publish it.
14:37
And it will take 10 to 20 seconds before the website is live.
14:45
This is a high level overview.
14:47
I'll also share some extra documentation that's going deeper.
14:51
And then there are other tutorials as well for specific use cases.
Comments
Comments
No comments yet