Website Owner's Manual

General Webflow Training

‍

Webflow has an extremely robust training system built into their platform called Webflow University. We encourage you to explore any videos and documentation here that may be useful to you as you continue to manage your site. We'll include any relevant videos and links on this page to help guide you as well.

Managing Site Access

In Webflow, there is Workspace level access and site specific content editor access. If someone is added as a member of your workspace they will be able to design, edit, and publish any website in your workspace. If someone is added to a specific site as a Content Editor, they will only be able to manage content on the site through the Editor and publish those changes (if they have been given permission). Watch the video below to understand workspaces, roles, and permissions in Webflow.

For further written documentation on workspaces:

Design Mode vs Build Mode

The Webflow Designer is a powerful tool for developing websites, whereas the Build mode is relatively the same interface but more focused on editing website content and component properties.

The Designer is generally only used by site owners/admins and any developers building the site. Once the site is built, any content editors will just use Build Mode to make updates.

Introduction to the Designer

Although use of the Designer should be fairly restricted once your site is launched, as a site owner it may still be useful to have a working knowledge of the interface and where everything lives. Below is a video that should help you get the basics down in the case that you need to use it for anything.

For further written documentation on the Designer:

To learn more about Build Mode, please refer to the link to the CMS training here:

‍https://drive.google.com/file/d/1Hb0CoBOa7rYXi9AMU8diSiN8mTdRhfsF/view?usp=sharing

‍

Additional Information

Publishing

By default, your website will have a staging domain (yourwebsite.webflow.io) and a production domain (yourwebsite.com). Generally, all changes made to the site should be published to staging first so that content/design can be reviewed prior to publishing to the production (live) domain. When publishing, some caution must be taken as all changes in the editor and designer will be pushed to the selected domains. For example, if someone in the editor makes a content change and hits publish, any potentially unfinished/untested changes made in the designer would be published as well. This is especially important in larger teams who may have multiple people editing the site at a time. Be sure that you are communicating when changes are being published to the live/production domain in order to avoid accidentally publishing unfinished/untested changes.

Compressing Images and Files

While image uploads have a max file size of 4MB and documents (PDF, etc) have a max file size of 10MB, these are very high limits and all files/images should be reduced when possible before being uploaded to your site. This will help your site load faster, especially on poor internet connections and mobile devices. Webflow does compress images you add to the site, but adding already compressed images helps achieve even smaller file sizes to be served up to your viewers. There are a variety of different web-based image and file compression applications available such as Optimizilla and TinyPNG for images or PDF Compressor for PDFs.

‍

Editing Rich Text Fields

If you are using a rich text field to add content to your site, it is important to know how Webflow's rich text editor functions. This is most commonly used for long form content like blog posts or case studies, but can sporadically be used outside of that use case as well. Learn more about how to use the editor at Webflow University:

‍

SEO

Image alt tags

Alt text for images is a crucial step in the design and development process of a website. Not only can you ensure your website is made more accessible to people who are blind or have a visual impairment, good alt text also helps improve your site’s search optimization.

Meta titles and descriptions

Meta titles and descriptions are HTML elements that provide information about a webpage to search engines and users. The meta title is a concise and accurate description of the webpage's content and appears at the top of the browser's window or in search engine results as the clickable headline. The meta description, on the other hand, is a brief summary of the webpage's content and appears below the meta title in search engine results. Meta titles and descriptions are important for SEO because they help search engines understand the page's content and context, and they influence user behavior by providing a preview of what the page offers. Writing compelling and relevant meta titles and descriptions can improve click-through rates and drive more organic traffic to a website.

The best way to change a page's meta data is through the Editor. You can refer to the Intro to the Editor video towards the beginning of this manual for visual instructions. Or, you can follow these steps:

1. Select the page you want to edit from the Pages panel on the left side of the Editor.
2. Click on the Page Settings icon (gear icon) in the top bar.
3. In the Page Settings panel that appears, scroll down to the SEO settings section.
4. Here, you can edit the meta title and description by typing in the text fields provided.
5. To ensure your meta title and description are optimized, make sure they are concise, accurate, and contain relevant keywords that accurately reflect the content of your page.
6. Once you've made your changes, click the "Save" button to apply the changes to your page.
7. Don't forget to republish your site to ensure the changes are live and visible to search engines and users.

‍

301 Redirects

301 redirects are useful if you need to permanently route traffic from an old path to a new URL.

‍

Project Specific Information

‍

CMS & Collections

Collections power all of the dynamic content on your site. We've built out a custom Content Management System (CMS) for you to easily manage and update all of the content on your site.

For project specific information on how your CMS is set up, please refer to the initial CMS training here:

‍https://drive.google.com/file/d/1Hb0CoBOa7rYXi9AMU8diSiN8mTdRhfsF/view?usp=sharing‍

‍

Editing Components

Nav Bar / Footer

We have made a screen recording of how to edit your nav and footer elements here:

HEAL Nav/Footer Editing Instructions

‍