How to edit and update your Webflow site
Congrats on being the owner of a Webflow site 🙂
If it’s your first time behind the wheel, we’ve got some tips on how you can use the (super simple!) Webflow Editor to manage your site and make updates to it.
Let’s jump into the Editor and get started.
Getting access to the editor
First things first, what is the Webflow Editor and how do you get access to it?
The Webflow Editor is the easy-to-use dashboard that allows you to make changes to your site. It is distinct from the Webflow Designer, which is the more complex backend of the website that your Webflow developer uses to build your site.
If you’re a beginner, you’ll be sticking to the Webflow Editor to make most updates to your site.
To get access to your site, you need to either be a site collaborator or be the admin of the account that the project is stored in. Your Webflow developer should have set this up for you when handing over your website to you.
(a) Logging in to the editor as account admin
If you're the account admin, simply login to the account, click the 3 dots next to the project and then click 'Editor'.
(b) Logging in to the editor as a collaborator
Once you’re setup as a collaborator, you can visit your site’s login page, which is your website URL with /?edit added to the end - eg. www.mywebsite.com/?edit
On that page, you’ll see the login popup at the bottom.
Navigating the Editor
After you’re logged in, you’ll be greeted with a view of the Editor tabs. Let’s go through them.
- Pages tab, where you can view all of your static pages. These are the main pages of your website, like the Home page, Contact, About etc.
- Collections tab, where you can view the CMS collections (if any) that your site has. These are templated content collections like Blog Posts, Projects etc.
- Forms tab, where you can view a history of all user submissions to forms on your site.
- Settings tab, which you can ignore.
- Help & Support tab, where you can find answers to any questions you have about the Editor.
- Log out button
Updating Static Pages
Updating text and images on a static page is simple.
First, go to the Pages tab and find the page you want to edit.
Then it is as simple as hovering your mouse over the element you want to change and clicking the small icon that pops up over the element.
Add your new text or image and then click the Publish button on the bottom right when you are ready to publish the content live.
Piece of cake!
Updating CMS Items
Most websites have CMS collections, which are templated repeatable content like Blog Posts, Case Studies, Projects and more.
If your website has CMS collections, you can very easily update and add to the collections.
To update an existing CMS item, go into the Collections tab in the Editor and click the collection you want to edit. Next, click the specific collection item that you want to edit.
Once you’re in the item, you’ll see a list of editable fields that belong to the collection item. These will be things like Item Name, Description, Image and more. Each of these can be edited by you. In general, it is a good idea not to alter the ‘Slug’ field, though.
For example, to change a blog post title, just enter new text in title field, then click the green save button. When you’re ready to publish your changes to the live site, don’t forget to click the publish button.
Adding CMS Items
If instead of editing existing items you want to add a new item to a collection, you can do this by clicking into the relevant collection and then clicking the green ‘New [item]’ button on the top right.
As always, don’t forget to click publish after you have added your new item, to publish the new item on the live site.
Duplicating, Deleting and Archiving CMS Items
You can duplicate, delete or archive a CMS item by going into the item and scrolling to the bottom of the form. There you’ll see the duplicate, delete and archive buttons.
Special CMS Fields
Sometimes we will create special fields in your CMS collections that perform specific functions across your website.
For example, we might include a ‘Feature on Homepage’ switch in your Blog Posts collection, which, if switched on by you on a specific item, would display that blog post on the homepage.
These special CMS fields differ from site to site depending on your specific needs. Whenever you are editing or adding a CMS item, you’ll be able to spot these special fields by the small written instructions we include with them, to explain how you can use them.
There are a number of considerations when adding images to your site.
Firstly, you will want to make sure that any images you add are not overly large as this will slow down your page load speed.
In general, aim to upload images that are a maximum of 250-300kb. We recommend you resize your images in your computer’s image editing software (like Preview on Mac) and then compress the images using a free tool like TinyPNG or compressor.io. Doing this will ensure your images are smaller in file size.
One of the great advantages of using Webflow is the ability to directly edit the SEO content of each page without the need for a 3rd party plugin.
To edit the SEO content for a page, go into the Pages tab and hover over the page you want to edit. Click the Settings button that appears on the right.
From here you can update the Title Tag, Meta Description and Open Graph settings for the page.
Here are some basic guidelines for what to enter in these fields:
- Title Tag - keep it short (around 50-60 characters) like ‘[Page name] - [Company name]’. Learn more here.
- Meta Description - a brief description of the page content, at a max of around 160 characters. Learn more here.
Adding new content via the Designer
In some cases, you might want to add new content that can’t be added via the Webflow Editor.
New static pages, for example, cannot be added through the Editor.
In these cases, you will need to contact us to add the new content via the Designer.
If you are competent at using the Designer, you can access it via your Webflow account. However, we recommend not touching the Designer unless you know what you are doing, because minor changes can have huge ramifications.
Viewing Form submissions
If you have any forms across your website, you can view a history of all user submissions to those forms at any time via the Form Submission Data tab.
If you come across an issue or you’re unsure of how to use the editor, there’s a good chance your question can be answered via the inbuilt Help & Support panel in the editor (see below). If you can’t find an answer to your question, feel free to reach out to us!