How to use the Editor to manage your website

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):

  1. Getting Started with the Editor
  2. Using the Editor
  3. Collections in the Editor
  4. Rich Text Elements
  5. Videos for ChatterBoss

Getting Started

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:

Webflow Invite Image
If you did not receive this email invite, contact us at contact@100c.io

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:

Editor Account Creation
To login to the Editor going forward you will use the email address and password created here. You can reach out to 100C at any time to reset your password or regain access to the Editor.

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.

NOTE: Webflow uses cookies to recognize your ability to access the Editor, if you're having trouble accessing the tool check your browser to make sure it is set to allow cookies from this site.

Editor Toolbar

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! 

Editor Prompt

Using The Editor

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.

Hover to Edit

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).

Unpublished Changes

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."

Great Success

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

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.

Pages Menu

What you can do on the Pages tab

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.

Page Settings

Manage Page Settings

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 Settings

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.

SEO Preview

Open Graph (OG) Settings

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.

Managing Collections

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).

Blog Posts

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).

Selected Posts

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.

New Blog Post

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.

Rich Text Fields

Body Example

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: 

  • Headings
  • Links
  • Bold
  • Italics
  • Quote
Text Formatting

In addition to text, you can add other types of content to a Rich Text field.

  1. Images
  2. Videos
  3. HTML Embed Widgets
  4. Audio Media
  5. Bulleted & Numbered Lists
Media Options

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.

Position Image

Advanced options give you the ability to enter an alt text, set custom sizing, and add a link to the image.

Image Alt Text
Image Link

After you enter a link to embed a video in your Rich Text field, you have additional advanced display options as well.

Video Settings

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! 

 Publish

Videos For ChatterBoss

Adding a Blog Post

Every Blog is unique, so here is a video adding a post to your new blog! 

Creating New Partner Pricing Page

Using the Partner collection you can create new partner pricing pages with custom information.
You can the following for each partner: 

  • Partner Name
  • URL 
  • Custom Pricing information
  • Unique Booking Link

Adding a New Podcast Episode

Using the CMS "Entrepreneurial Minds" you can add a new Podcast episode by entering the following: 

  • Name
  • Date
  • Season and Episode Numbers
  • Show Notes
  • Embed Episode Player
  • Links to the Episode on Apple, Google, and Spotify
Still have questions?
hit us up!
Give us a call:
Steph: 541-231-3497
Cy: 541-740-1483
OR click here to email us:
Contact Steph & Cy