Webflow is a relatively simple yet powerful web content manager, and the developers made it as easy as possible to edit any website content of your choice. But with so many different types of content, it can sometimes get confusing. So, how can you edit content in Webflow?
Webflow includes two basic editing methods: the Webflow Designer and Webflow Editor. The Designer is the most powerful way to edit content since it’s also how you build the website and add new content, and the Editor is the safer option since it only edits content without changing the layout.
There are quite a few differences between the Webflow Designer and Webflow Editor. They differ in capabilities, how they work, and who can access them. Let’s look at both to see how best to edit your content in Webflow.
Editing Content In The Webflow Designer
The Webflow Designer is the most potent component in the Webflow web developer platform. It is the core of everything you do to design and build your website on Webflow. You can use it to do various things, including:
Building the structure of your website
Designing the layout, look, and feel
Insert animations
Add custom code (CSS, HTML, or JavaScript)
Create landing pages
Add (and edit) content
You could say the Designer is the component that the web development team will use to build every aspect of the website, including adding the initial content.
To edit existing content using the Webflow Designer, follow these steps:
Login to Webflow using your credentials.
Select the project that you want to work on.
Now select the page that you would like to edit.
Click on the element containing the content you want to edit, like the container, header, or paragraph.
The element’s properties will open in a window on the right of the screen. It contains a section with the text content you currently see within the container, among other things.
Click on the aspect that you would like to change. If you want to edit the text, click inside the text box in the properties window.
You can type new text in this field and change various text options, such as font styles and colors.
You can also double-click the text within the container and change it there.
If you want to add another block of text to the page, select the element you would like to add from the pane on the left and drag it to the position where you would like to add it on the page.
To change properties and text for your new container (element), click on it and make the changes in the properties pane on the right.
If you add any image or video containers, you can add media by clicking on the container or element and selecting the “Assets” box on the left, then browsing to the image or video you would like to insert into the container.
When you are done editing the content, click on the “Publish” button in the top right-hand corner of the Wefblow Designer. This will make the changes live on your website.
Editing Content In The Webflow Editor
The Webflow Editor is a system with more limited capabilities than the Designer. It won’t let you change design elements like layouts; you can only work with and edit what the Designer has already created.
The Editor is helpful in scenarios where a team is responsible for working on the website, where people only need access to certain aspects of the site, or where you want to give a user access to edit their content without editing the site layout and design.
If you want to edit content but you don’t have access to the Designer, you can still edit your content with the Webflow Editor.
How To Access The Webflow Editor
If you don’t have access to the Designer, you can access the Webflow Editor by going to your website’s URL and adding “?edit” to the end of it, like “example.com?edit.” This will open a screen where you can enter your login credentials, after which you will see your website but with a few slight changes.
How To Edit Content In The Webflow Editor
The default way the Webflow Editor works is an on-page system. You will see your website as you usually would, with all the text and media in the same positions. However, when you hover over a specific line of text, a frame with a few icons will appear around it. When you click on the pencil icon, you can change the text.
There will be different icons to edit various things. You will see an icon that allows you to change text, but if you hover over a button, you will also see another icon that lets you change the hyperlink. The icon set will depend on the type of content you’re editing, and sometimes it will only show a gear icon (“Settings”) that will pop up a list of options you can edit.
Editing a media item, like a picture, works the same way. Simply hover over the block or image you want to edit until the icon appears, click the icon, select the media you want to put into that container, and save.
Also, note that you will only be able to edit the content you have access to. When you get access, the developer who grants that access will assign specific rights and permissions, and you can only edit the content elements they set for you.
You can move to other pages by clicking on the links to those pages or by clicking on the “Pages” button. A list of pages will open up. Select the one you want to edit, and that page will open, after which you can edit it the same way.
When you are done editing, click on the “Publish” button in the bottom right-hand corner (or sometimes the top right-hand corner) to publish your changes to the live website.
Access Additional Editing Tools In Webflow Editor
The tools available to you will be limited by what permissions the site owner grants you, but you can access all the options and additional content by going to webflow.com and logging in. Once you are logged in, follow these steps:
Select the Webflow project that you want to work on.
Navigate to the particular page that you want to edit.
Click on the “Edit” button at the top of the page.
The panel on the left will show a list of all the blocks and content elements on the page that you have permission to edit. Select the block with the content that you want to change.
The Properties pane will open on the right-hand side of the screen.
Make the changes to the text, content, or properties in the Properties pane.
When you are done, click “Publish” to save your changes and take them live.
Other Functionality Of The Webflow Editor
When you have the Webflow Editor open on a page, you may notice a few buttons at the bottom of the screen. These allow you access to different pieces of content that you can edit.
The Editor Button
The Editor button allows you to switch between the Editor and Designer views in Webflow. Note that it will only allow you to switch if you have permission to access the Webflow Designer.
The Pages Button
The Pages button provides a simple way to navigate between sections of the website (pages) that you have permission to edit.
When you click the button, a list of pages will pop up that you can navigate through. The pages will be sorted according to Static Pages and Blog Category Pages.
Static pages are what you could call standard website pages, and they are there to share information about the company or whoever the website is about. Blog Category pages contain content specifically about the different blog content categories.
When you have chosen the page you would like to edit, simply click on it, and it will open in the editor. You can then edit the content, as we’ve already mentioned.
But as you scroll through the pages, you should also see a Settings button on the right for each page. If you click on that button, it will take you to the settings for each page, where you can edit various other pieces of content like the SEO snippet and further details.
The Collections Button
Collections in Webflow are groups of similar content items that you can use or link to from anywhere on the website. Some examples of collections include:
Blog posts
Authors
Clients
Projects
Products (if you have an eCommerce site)
Product categories (if you have an eCommerce site)
The Collections button in the Webflow Editor will open a list similar to that of the Pages button. You will see various pieces of content (called Collection Items) sorted into different types of collections.
Select the Blog Posts collection if you want to edit a blog post. It will display a list of all the blog posts on the site, both published and still in draft. Now select the blog post you want to edit from the list, and it will open in the familiar Editor window, where you can edit the content sections as you wish. As with all other pages, when you click Publish, it will upload your changes to the live website.
The Forms Button
The forms button isn’t helpful if you want to edit content in Webflow, and its only purpose is to show you the results of any forms that users completed on your website. So, if someone fills out the “Contact Us” form, you will see their responses in this section.
Editing eCommerce Content In The Webflow Editor
As we’ve already seen, if you have eCommerce enabled on your Webflow website, you might see products and product categories in the Collections section. Depending on your permissions, you might even have a separate eCommerce button next to the Pages and Collections buttons. Regardless, the basics of editing eCommerce content remain the same.
There are two sections of eCommerce content that you can edit in the standard Webflow Editor: Products and Product Categories.
Product Categories pages list products within that particular category, and the Products pages provide details on a specific product. So, for example, a user browsing your website would land on a product category page where they can see all the products in that category, then click on a product of their choice to be taken to that product page.
Webflow automatically creates a template for each product and category, which you can edit through the Designer. Still, if you only want to edit the content inside a product or category page, the Webflow Editor will be perfect.
To edit Categories, follow these steps:
In the Webflow Editor, click the Collections button.
From the list of CMS Collections, choose the Categories (or Product Categories) option.
Select the category that you would like to edit from the list.
You will see the content presented on the page, with the Properties pane on the right for any of the content you select.
Edit the content or settings as you see fit.
When you are done, click on Publish to make the changes live.
To edit any particular product, follow these steps:
In the Webflow Editor, click on the Collections button.
From the list of CMS Collections, choose the Products option.
Select the product that you would like to edit from the list.
You will see the product’s content presented on the page, with the Properties pane on the right for any of the content you select.
Edit the content or settings as you see fit. You can change product names, descriptions, and prices, add or remove photos or other media, etc. Simply select anything related to the product on this page and make the required changes as you would for any other page or content object on the website.
When you are done, click on Publish to make the changes live.
Conclusion
Webflow is a straightforward platform to work with, especially for editing content. If you know the type of content you want to edit and how to get to it, you will find it easy to make the changes you need. The basics apply to every page or piece of content on the website, so when you understand the Webflow Designer and Editor, you can use them anywhere on the website.
.webp%3Ftable%3Dblock%26id%3D4faaeaef-ac24-4b2f-a0cb-489e3b413c5c%26cache%3Dv2?width=1500&optimizer=image)
.webp%3Ftable%3Dblock%26id%3D9b1f83e9-4cc1-4607-afa8-20059cf6d2ab%26cache%3Dv2?width=1500&optimizer=image)
.webp%3Ftable%3Dblock%26id%3D82d2ec4e-53e4-4e2f-966f-c423dac427ef%26cache%3Dv2?width=1500&optimizer=image)
