How to Edit

Managing your website

This guide explains how you can manage your website using its built-in content management system (CMS).

The guide features 3 sections:

Getting started
Logging in to your CMS—and getting back to it.
Knowing your CMS
An overview of your CMS's features and sections.
Creating and managing your content
How to create and edit your site's content.

Site Editing Resources

This guide will provide you an overview of the Editor. If you need additional support, look here first.

Webflow has a video series called Client’s Guide to the Editor which is available on YouTube and on their website.

Webflow University is another great resource if you have questions that are not answered in this document. It allows you to search or browse by topic.

_{*Note that you will need to set your browser to accept cookies from all third parties in order to use the Editor — otherwise, you may see an error message when trying to log in.}

Understanding the Editor Toolbar

When you access the Editor, you’ll see your live website with the Editor toolbar at the bottom of your screen. This toolbar will allow you to manage page settings, dynamic content, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

Menu

Takes you to the Dashboard, your Project Settings, or the Designer.

Pages

Opens the Pages Panel, which lists your site’s static pages and dynamic collection pages. From here, you can browse for a page, click to view the live page, and manage the settings of any page.

Collections

Opens the Collections Panel, which lists all of your Collections. Clicking on a Collection opens a new tab that lists out all the items in that Collection. Here, you can edit any item or create new ones.

Forms

Opens the Forms Panel where you can see and download email form submissions made on the site.

Account Settings (gear icon)

Opens the Account Settings Panel where you can edit your Collaborator account info and upload a profile image.

Help & Support (lifesaver icon)

Opens the Help and Support Panel where you can find answers to a few common questions about using the Editor

Log Out (arrow icon)

Logs you out of the Editor after confirmation.

Back to live site (button)

Switches from Editor mode to Live-site mode. This allows you to view your site as your site visitors will see it (only published changes will appear in this view).

Saving/saved (status)

All changes are saved automatically in the Editor.

Changelog

This shows the number of unpublished changes next to the publish button at the bottom. Clicking the changelog reveals a list of items and pages that have unpublished changes, along with which Collaborator made them. It is helpful to take a look at these before publishing the site, to make sure all updates are intentional and correct.

Publish (button)

Allows you to publish all the changes you make when in the Editor.

Viewing and Publishing Changes

After making all these changes, you will want to view them, make sure they're saved and ready to be published before clicking Publish.

Live site mode

When you open the Editor, you’ll be able to explore the site in preview mode or “live site” mode. To switch to Edit mode, click the “Edit site” button at the lower right of the page. Hit “Back to live site” to see the site in preview mode.

View Site

While working in the Editor, the Editor panel covers most of your website. To collapse the Editor panel and view your website, click the View Site button at the top. In this view, you can browse your website just like you usually would, and make or view changes to any page.

Publishing

The changes made in the Editor won’t be made on the live site until you either publish the edited item(s) individually or press the Publish button to publish all staged changes. Any time you make changes, you will want to view them to make sure they’re saved and ready to be published before pressing the Publish button.

Publish (button)

Allows you to publish all the changes you make when in the Editor.

On-Page Editing

Editing right on the page is pretty intuitive with the Editor. As you hover over various elements, an edit icon will appear to the upper right of editable elements. To edit any of these elements, simply click the icon.

Editing and Formatting Text

When hovering over editable text elements, you’ll see a light gray outline around the text element and a pencil icon in the upper right. You can edit the text by clicking into the box. You can also format words or phrases by selecting them and choosing the formatting from the floating toolbar that appears. This will allow you to change color, make a font bold or italic, and create text links.

Replacing Images

You can also replace images right on the site. Just hover your cursor over the image you want to replace and click the picture icon. This will allow you to select and upload a new image from your computer. Keep in mind, these images should be no larger than 1MB. 1500px wide for full width images, and less for any other images. Image file sizes impact how quickly your site loads and how well Google ranks your site when people are searching. It’s important to make sure you take the time to size images correctly.

Naming Images for SEO

You want Google and those who using a screen reader to know what your image is. When naming images, simply match the image name to what the image is. Be sure to use a SEO-friendly naming convention. To do so, file names should be lower case and words should be separated with hyphens. Include your business name in the beginning of the file name to help with people searching specifically for your business. Example below.

Alt Text for SEO

Optimizing your ALT tags will ensure search engines are able to read and understand the contents of the visual content on your website more easily. Example below.

Image name: hungry-moose-customers-enjoying-coffee-in-town-center.jpeg
Alt text: Hungry Moose customers enjoying coffee in Big Sky Town Center

Editing Page Settings

From within the Pages Panel in the Editor, you can manage page settings like SEO meta title and description, Open Graph title and description, and Open Graph image. You can also manage page password protection settings for static pages and RSS feed settings for Collection pages.

To Access the Settings of a Page

1. Open the Pages tab in the Editor panel
‍2. Hover your cursor over a page in the list
‍3. Click on the Settings button that appears*

_{*Clicking on the page, instead of the Settings button, will close the Pages panel and open the corresponding page.}

You can also search for pages by name using the search bar.

Editing Collections

You can access collections in the Editor through the Collections tab. The Collections Panel is where you will edit key collections including job listings, team members, deli menus, FAQs and locations.

You can access Collections in the Editor through the Collections tab. The Collections Panel lists all your collections. Clicking on a collection opens a new tab titled the name of the collection. In this tab, you can see all your collection items and their statuses. Here, you can add, delete, archive, or change the status of items.

‍

Creating and managing content

Your CMS gives you two ways to edit content that’s already on your site:

1. Right on your live web page
‍2. Within the Collection items tab

We will walk you through both ways to edit, starting with on-page editing.

‍

On-page Editing

Editing right on the page is pretty intuitive with your CMS, but there are a few things to know.

Editing text

Editable areas display a pencil icon in the upper right — If you see the pencil icon in the upper right, that element is editable.

When you first log in to your CMS, you’ll see your live website with the CMS panel (the grey bar) collapsed at the bottom of your screen.

If you see some text you want to edit, just hover your cursor over it. If a light grey outline with a pencil icon in the upper right appears, you can edit that content. Just click into the box and start typing!

Editing text works just like it does in Microsoft Word or Google Docs, but styling your text — bolding, italicizing, etc. — works just a little differently.

Select text to show a toolbar with formatting options — Just select some text to reveal all your formatting options.

To style text, first select it. A grey toolbar will then pop up, giving you the following options:

B to bold
I to italicize
Chain link icon to insert a link
H1–H6 to create the various levels of headings. The number indicates the level of importance of each heading, with H1 being most important, and H6 the least important. In the images in this section, the phrase “Content patterns” is an H2. Note that most pages only have one H1, so you probably won’t use that often.
“ to create a block quote. This is best used for lengthy quotations.

You can also style text with the following key combinations:

Command/Control + B to bold
Command/Control + I to italicize
Command/Control + K to insert a link

To use a key combination, just press and hold Command (on Mac) / Control (on Windows), then press the letter key (B, I, or K), then release.

Note: Sometimes, a text field will give you fewer options than those listed above.

‍

Inserting links

Your CMS allows you to add a variety of link types to achieve various different functionalities.

The toolbar for adding and managing links — Adding links takes a couple of clicks, but gives you a host of options.

When you go to insert a link, the toolbar defaults to entering a URL to link to, but if you click the link icon on the left, you can select from several other options:

External: links a visitor to another page on the web, often on another website, but you can also use this to link to another page of your own site.
Page: links a visitor to another page of your site. You’ll see a dropdown list of your site’s pages listed here.
Section: links a visitor to another section of the same page they’re currently viewing. You’ll see a dropdown list of your page’s sections listed here.
Email: links a visitor to their default email app so they can write an email to the address you specify.
Tel: allows a visitor to place a call to the phone number you specify. This is especially useful for people visiting your site from a mobile device.

Each link type offers its own customization options. Click the gear icon to see what’s available for your current link type.

‍

More text editing options

Some areas of text on your website (typically longer passages) will allow for additional options.

Create a new line to show options for inserting images, video, rich media, and lists — Hit return (or enter) and click the + icon to add images, video, rich media, or a simple list.

When you press enter/return to start a new paragraph, you may see a small + icon. Click it to open the toolbar and see the following options.

Image

Allows you to upload an image.

Video

Allows you to insert a video. This must be a video hosted on a platform like YouTube or Vimeo — you can’t upload a video file from your computer.

Allows you to embed “rich media,” via a link. There are all sorts of objects you can embed using this feature, but here a few of the most popular:

Imgur albums
Google maps
Scribd books
SlideShare presentations
Giphy GIFs
SoundCloud audio

Allows you to add a bulleted list.

Allows you to add a numbered list.

Everything you’ve just read about editing text on the page also applies when you’re in the Items tab of the CMS.

‍

Editing buttons

You can also edit buttons in the CMS. Just hover your cursor over the button and look for a gear icon in the upper right. Click the gear icon and you’ll see two options:

Edit link settings lets you update the page the button takes viewers to.
Edit text lets you change the text within the button.

Button with options for editing links and text

Editing images

Editable images show the image icon in the upper right — Replacing images works just like buttons — just hover and look for an icon in the upper right!

You can also replace images on your site with the CMS. Just hover your cursor over the image you want to update, then click the picture icon.

This will open your computer’s file finder, where you can select any image you’d like.

Note: Sometimes, certain visual styles will automatically apply to the image you upload, so don’t be surprised if your image changes size or color.

Managing Collection items in bulk

Click the "Select" button to bulk manage Collection items — Click the Select... button to manage Collection items in bulk.

Sometimes you'll want to delete, archive, or publish several items all at the same time. In those moments, you can click the Select... button to change the status of multiple items, just like in Gmail. This can be especially handy if you want to publish multiple connected connected pieces (such as a series of articles) all at once.

Creating new content

You can use your CMS to produce new content through any of your Collections, so it’s super easy to create a new blog post, menu item, product or service page — whatever your Collections enable!

This should all be fairly intuitive, and the labels and descriptive text for each field should also help you out immensely. But there are a few things worth calling out:

‍

The Name field

The Name field is a default for all Collections, and it typically does triple-duty as:

The item’s title on your website
The source of the item’s URL on the web
The item’s title within the CMS

‍

Image fields

Anywhere you see “Drag & Drop Image Here,” you’re looking at an image field. You can either drag an image from another app on your computer into the CMS, or click the “Upload an Image” link to upload it through your computer’s file management system.

Note that your CMS can’t handle image files over 4MB. If your file is bigger than that, you can use Photoshop or an online tool like TinyPNG or Compressor to get your files under that threshold. Just keep in mind that the larger the image, the longer it takes to load, so try to get your images as small as possible without losing quality.

It’s also up to you to ensure that you have the right to use any images on your website.

‍

Reference fields

If you see any fields with a magnifying glass icon on the right, your Collection has a Reference or Multi-Reference field. This allows you to import content from one Collection into another, which can be used to power things like categories and tags (common blog features).

To use a Reference field, just click into the field and selected the right reference for your new item. If you don’t see the right reference for your new page, you may need to create a new item in the Collection this field references.

This should be explained in the help text for your Collection item.

‍

Option field

The Option field works similarly to References, but isn’t connected to another Collection item. So you can just click into the field and pick the right option for the new content. If you need a new Option to fit your content, contact me. fda

‍

Video field

The video field lets you add a video to your new content. It works by pulling your content from a public video host like YouTube or Vimeo, so you can’t just upload a video file. If you have a video file you want on your site, upload it to YouTube or another service, then just copy and paste the URL into the Video field.

Note: you don’t need the embed code generated by services like YouTube, just the URL.

Switch field

The Switch field is a simple on/off, yes/no toggle that enables or disables functionality on your website. If you’re not sure how this works on your site, ask me.

Color field

The Color field allows you to add color to your content. The field itself allows you to choose a color visually, from the picker, or to enter what’s called a “hex code” — a numeric representation of the color.

Using the color picker can take a little getting used to at first, but you’ll get the hang of it quickly. The bar on the left represents the whole spectrum of available colors — clicking here will update the color swatch in the middle to a range of tones in the area you clicked. The middle area is where you’ll choose the exact color you want. The bar on the right represents the color’s opacity, which controls how transparent the color is.

‍

Managing your editorial workflow

If you’re the only person working with the CMS on your website, you’ll get along just fine writing, editing, and publishing, all within the CMS.

But if your writing and editing team is larger than one, you’ll probably want to use a different tool for writing, sharing, editing, and collaborating on content.

Why? Well, there are two big reasons:

Most writing tools offer more detailed collaboration and editing options, like track changes and commenting
It's always good to have backup copies of anything you publish on your website (just in case someone accidentally deletes something)

‍

Recommended writing and editing tools

Here are a few writing tools that offer a great writing experience, easy collaboration with others, and work well with your CMS, in that you won’t lose formatting when you copy and paste content from them into the CMS.

Microsoft Word is not recommended; it does not cleanly copy/paste into the CMS.

‍

Handy key shortcuts

Writing gets a lot faster when you can keep your fingers on the keys. These key combinations help you do that:

Command/Control + B to bold
Command/Control + I to italicize
Command/Control + K to insert a link
Command/Control + Z to undo what you just did

Use Command on Macs, and Control on Windows.

The Hungry Moose

Editing Guide for

navigate