This guide will teach you how to use Webflow's Editor tool to manage the site we created for you. It should answer most questions relating to the editor, but if you have more please feel free to reach out any time!
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:
https://www.carsny.org
IMPORTANT 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.
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!
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. )
NOTE: You can only have ONE TAB open with your website while you are using The Editor. Having multiple tabs open can cause you to lose any changes you've made to the site.
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.
Collections are powerful ways of grouping and managing information on your site! Each Collection in your site is custom made just for you!
Below are videos to help you understand how to use and manage the collections on your site to maximize efficiency and get the most of your website!
This is for managing the staff members who appear on the Who We Are page and their contact information.
This collection makes it easy to update files that are linked throughout your site quickly and easily.
This is your blog! Below is a video on how to edit existing posts on the News and Updates page and create a new post.
The blog posts a Rich Text Field, which is a powerful tool for adding content to your site.
Click here for more information on Rich Text Fields
The testimonial collection makes it easy to edit and add testimonials to your website.
The blog posts a Rich Text Field, which is a powerful tool for adding content to your site.
Click here for more information on Rich Text Fields
Once you add text to a Rich Text Field, you can highlight the typed text to see formatting options. This includes:
Once you make a section of text a hyperlink, you have options for formatting that link by type and if it opens in a new tab.
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
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!
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, such as the example below.