This guide will teach you how to use Webflow's Editor tool to manage the site we created for you! There is the general guide we've created for all our clients along with a section of training videos specific to your Website. If you have any questions, reach out and let us know!
Below is a outline of the sections (click to jump to that section):
Taking control of your beautiful new website starts with accessing its built-in content management system (CMS for short), which Webflow has dubbed The Editor.
This process starts with an email from Webflow that looks something like this:
When you click that button, you’ll be taken to your website’s Editor — which, at first, will look just like your new website. Except now, you should see a box across the bottom, with a simple form prompting you to create an account:
After you fill in the required fields and create an account, take a moment to bookmark this page for easy return.
You can also access the editor at any time by adding "/?edit" to the end of your URL.
So if your website’s URL is yourwebsite.com, just go to yourwebsite.com/?edit to log in and start editing.
Now the Editor will look just like your website with a toolbar across the bottom.
Going forward, when you return to your website, you may see an icon on the bottom right of the screen prompting you to login to the Editor. Don't worry, only people we've granted access to the Editor will see this!
Now is a great time to watch a video on how to use the Editor to easily make changes on your website! If anything about getting started with the editor was confusing, this video will cover that too!
Making changes to text or images anywhere on your website is quick and easy! Just hover over what you would like to change until you see an edit icon appear.
Then click the icon to make the text editable or receive a prompt to upload a new image.
Click here to read more about text editing options.
After you make changes on your site, you will see the "X Unpublished Changes" in the top right-hand corner and the "Publish" button will turn blue (with X being the number of changes not published).
You can continue to edit and make changes in the Editor and they will not be visible on your live site until you press "Publish."
There are also a few utility icons on Editor Toolbar to know about:
1. Account: This is where you can edit your Webflow account email and password.
2. Help: Help center with guides and use tips.
3. Log Out: To get out of the Editor.
The Pages tab, you guessed it, contains a list of your site's pages!
You may see the pages broken down into groups, depending on the structure of your site.
First, there is a list of the site's static pages, such as your Home Page or Contact Page.
Next, you will see pages broken down by Collection, such as Blog Posts, Team Members, etc.
The Pages tab allows you to do several things:
1. Search for a page by name: Type a page’s name into the search bar to find it. Note that this is exact-match search, and it only searches the page’s name, so you’ll need to enter the word or words of the page’s name exactly.
2. Go to a page: Just click the page name in the list to collapse the Pages tab and view the page. Once you’re there, you can add and edit content to your website just like writing in a text editor.
3. Manage page settings: When you hover your cursor over a page in the list, you’ll see a button labeled “Settings” appear. There, you can manage important page settings such as meta title and description, Open Graph title and description, and Open Graph image.
The page settings are easy to overlook, but they are very important when it comes to search and social sharing! Let's take a look at what each of these settings mean and how you can make the most of them.
SEO stands for “search engine optimization.” It’s the practice of building and modifying websites in order to improve their chances of being found through search engines like Google, Bing, etc. In each page’s settings, you can create and edit the following page-specific SEO settings:
1. Meta title: A page’s title plays a very important role in its visibility and performance in search engines because it tells search engines what the page is about and what to display for search engine users to click on.
2. Meta description: The description allows you to add more information about your page (limited to about 150 characters) users will see under the page title in search results. This will also support which searches your site is displayed on and how highly they rank.
The Search Result Preview sections shows you what the content you’ve entered will look like on a Google search results page.
Open Graph settings are very similar to SEO settings, except that they’re used to determine how your site is displayed by social networks like Facebook, Twitter, and LinkedIn.
In most cases, you can tick the checkbox to use the same title and description as your SEO settings, but feel free to customize it, if you’d like.
Open Graph also allows you to specify an image to be displayed along with your title and description.
Don't be afraid of Collections! We did the heavy lifting.
This just means we grouped your special information in a way that makes sense and told the Internet robots how to react when presented with it.
The Collections tab will look different for everyone because it's where you manage the custom Collection content 100C developed for your site.
A common example of a Collection in action is a blog. For example, you might have a Collection titled "Blog Posts".
When you click "Blog Posts" in the Collection tab, it will open a new tab in the Editor.
On this screen you can see the existing items in the Collection and create new items (in this case, a new blog post).
If you click the "Section" option at the top of the page, you can select existing posts to edit their status on the site. You can choose to move a published post to "draft" for editing, you can delete posts, and you can archive posts. (Archived posts will no longer display on the live website).
If you click to create a new item--in this example a blog post--it will open a page with a series of options for inputing data for that item, which will display on the live website.
If a box has a red star next to it, that means the field is required before you can publish the item to your site.
The green "Create" button allows you to save the item as a draft or tell the Editor it's ready to publish to the website.
Most fields should clearly identify what information is needed, such as a title, a date, upload an image, etc.
However, if one of the fields is a "Rich Text Field" it gives you the ability to input long-form content and indicate display options. A common example of this is the body of a blog post.
See Below for more details on Rich Text Field capabilities.
Once you move your cursor to a blank line, a + icon will appear to the left of the cursor. Clicking on this gives you the options for what type of content you would like to add (photos, video, bulleted lists, etc), or you can just start typing to add text.
Once you add text, you can highlight the typed text to see formatting options. This includes:
In addition to text, you can add other types of content to a Rich Text field.
If you are adding images to the Rich Text Field, you have positioning options that will appear once the image is uploaded.
The there is also a gear icon on this menu that opens advanced options.
Advanced options give you the ability to enter an alt text, set custom sizing, and add a link to the image.
After you enter a link to embed a video in your Rich Text field, you have additional advanced display options as well.
Below is a video for more information on Rich Text Fields.
And don't forget, if you make any changes you have to press Publish before they will be live on your website for the world to see!