Website Owner's Manual
Welcome to our Website Owner's Manual! We created this in 2021 to be accessible, available, and helpful to every client, 24/7, with the same personalized, quality service we always strive to provide.
The Website Owner's Manual allows clients to access everything they need to update, modify, and maintain their website's content — from logging in to publishing.
There are three separate sections:
- Getting Started — Creating an account & logging into your CMS.
- Learning your CMS — An overview of your CMS's features and settings.
- Creating & Managing Content — How to create, edit, and maintain your site's content.
You can click on any of the three links above to jump to that particular section.
As always, if you run into something that needs our help (detailed more later), feel free to shoot us a text at +1 (405) 509-5494, or email email@example.com for the quickest response time.
Without further ado, let's jump right into your website!
What is a CMS? In the world of web design, CMS stands for content management system, and as the name suggests, it's a system for managing the content of your website. CMSs were invented for two primary reasons:
- To help "non-technical" people maintain their websites.
- To help everyone publish new content within a consistent design, anytime.
What can your CMS do? Content Management Systems are incredibly powerful tools, including the Webflow CMS your website was built with. Your CMS allows you to edit most any existing content on your website, including text (or "copy"), images, buttons, links, etc.
It also allows you to create some new pages and blog posts through Collections. Examples of collections are "Blog Posts," or "Portfolio Projects." Creating a blog post in your CMS automatically generates a new blog page (and links, where applicable) with a consistent style and design. We'll touch on this more later.
What can't your CMS do? While a CMS is an incredibly versatile and useful tool, there are still some things that you won't be able to do all by yourself. Certain things, like changing colors, spacing, layout, formatting, or creating and deleting pages require help from Carbon Creative. If you need something changed that can't be done in your CMS, contact us!
Setting up your account
First thing's first, let's get you an account.
Taking control of your beautiful new website starts with accessing its built-in content management system (CMS for short). And that process usually starts with an email from your website’s designer.
It probably looks a bit like this:
If needed, you can search "Jake Steelman wants you to help manage " in your inbox, and it should pull up the email. If it doesn't, please send an email to firstname.lastname@example.org and request another invitation.
When you click that button, you’ll be taken to your website’s CMS — which, at first, will look just like your new website. After a couple of seconds, you should see a grey bar across the bottom, with a simple login form.
Next, you'll fill out the information in the form with your first and last name (your email is pre-filled) and choose a password you can remember. Write it down someplace safe. If you forget it, send us an email and we can reset your password.
Now, your content management system should look just like your website — except there’s a toolbar with two browser-like tabs labeled Pages, Collections and/or Forms, plus a series of icons. All of that will be explained below.
For now, take a moment to bookmark this page so you can easily return to it later. In most browsers, you can bookmark a page by holding Command + D on a Mac or Control + D on a Windows computer.
Otherwise, you can always return to your site’s content management system by simply typing the URL, then adding /?edit to the end.
So if your website’s URL is yourwebsite.com, just go to yourwebsite.com/?edit to log in and start editing.
When you return to your site later, you may see a little pencil icon in the lower right, which you can click to hop into your CMS. Rest assured that only those with access to the CMS will see this icon!
With the basics out of the way, let's dig into the CMS itself.
Getting to Know Your CMS
Now that you’ve created an account for your site’s CMS and know how to get back in to it anytime, let’s get to know the interface itself.
Let’s start with the two tabs on the left, Pages and Collections. These are your CMS’s two default tabs. You’ll be able to open more tabs, as you’ll see later, but these two will always be there for you.
The Pages Tab
The Pages tab, as you might imagine, contains a list of your site’s pages. It’ll be divided into at least two sections, but probably more:
Static pages are essentially "regular" pages. Content on these pages is static, in other words, it doesn't change. Examples of static pages on your site may include Home, About , Services, Products, Contact, etc.
Also referred to as Collection pages, these are pages automatically generated from your Collections, and can include things like a blog, portfolio, reviews, and more. These are listed with their Collection name.
Dynamic pages are like skeletons. Every human has the same skeleton, but we all have different skin, hair, and eye colors, as well as personalities. Dynamic pages provide a structure for your content. For example, each blog post page on your site will have different content, but the same overall structure. This content is easily managed through the CMS, which we'll get to soon.
What you can do in the Pages tab
The Pages tab allows you to do several things:
- 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 a word or words that appear in the page’s name exactly.
- 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.
- 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 vital page settings like SEO title and description, Open Graph title and description, and Open Graph image, as well as sections for custom code if you need to add that to your site.
Managing page settings
Because these page settings are so important for search and social, let’s dig a little deeper into what each of these settings actually means, and how you can make the most of them.
SEO stands for “search engine optimization.” It’s the practice of building and improving websites in order to improve their chances of being found through search engines like Google, Bing, etc.
While most of what SEO covers requires a dedicated search engine optimization agency (like Carbon Creative!) there are certain elements that you are able to edit.
In each page’s settings, you can create and edit the following page-specific SEO settings:
- Meta title: A page’s title plays a very important role in its visibility and performance in search engines, both because it a) tells search engines what the page is about and b) is what search engine users will click on to reach your site. Be sure to include the types of words people use to describe your business in the title. Ideally, a page’s title should be about 55 to 60 characters long.
Example If I were building a website for a Oklahoma City area lawn care company, I’d probably title my homepage “Oklahoma City Lawn Care.” Then I might have other pages like “Edmond Lawn Care” and “Norman Lawn Care.”
- Meta description: The description allows you to add a little more detail about your page (about 150 characters of it). It’s important for search, but not nearly as important as the title.
The Search Result Preview section shows you what the content you’ve entered will look like on a Google search results page. If any of your text gets cut off in the preview, you’ll want to trim your text to fit.
Open Graph (OG) Settings
Open Graph settings are very similar to SEO settings, except that they’re used by social networks like Facebook, Twitter, and LinkedIn. If you use any of these social networks, you’ve seen Open Graph at work many times.
In most cases, you can just tick the checkbox to use the same content as your SEO title and description. 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.
The Collections Tab
The Collections tab is very similar to the Pages tab, but it only lists your Collection content — the stuff we created with the CMS.
Here, inside the collections tab, you'll see a list of all your collections on the website. For example, on the Carbon Creative website, we have 5 collections: Projects, Blog Posts, Employees, Reviews, and Services. When you click on a Collection, such as Projects, you’ll be taken to a new tab with a list of all the items in the Collection.
To start creating a new item within this Collection, click the green + New Project button in the top right hand corner of the window, and fill out the item’s various fields, paying close attention to the help text and other requirements for each.
You can also click on any of the items in the collection and edit the fields of existing items.
What you see within an individual Collection item will change based on the structure of the Collection it belongs to, but you’ll see several elements over and over again:
- Back Button: Click this to go back to the list of items in this Collection.
- View on Site: This light grey button collapses the CMS to show you the item you’re currently viewing right on your live website. If you’d like, you can edit its contents there instead of in this panel.
- Status: Shows the current status of the item you’re viewing. Statuses include Published, Staged Changes, and Draft.
- Draft checkbox: Tick this checkbox if you aren’t finished creating or editing the current item. Anything that isn’t marked as a draft will be published when someone clicks the Publish button!
- Changelog: As you make changes within your CMS, it will record the number of items and pages you’ve changed until you click Publish. You can click on the changelog to see a list of items and pages that have unpublished changes, along with who made them, if you have fellow CMS users.
- View Site: Click this to view your website. You can use any links on your website to move between pages in this view.
What do each of the statuses mean?
Every item in your CMS will have one of these statuses.
- Published: the item in question is currently live on the site and viewable by visitors
- Staged for Publish: you created the item and all of the fields, but haven't published it to your site yet, so it's not visible to new site visitors. Everything you create will start out as "Staged for Publish," until you publish them, at which point they become published and visitors can see them.
- Staged Changes: you made changes to a published item, but the changes haven't been published, so visitors cannot see the changes (they can only see the last published version).
- Draft: the item is only viewable by you. It won't publish unless you manually stage changes to it.
The Save button will save your changes and return you to the collection list view. When you click the save button, one of the four above statuses will be assigned to the item:
- If the item's required fields (marked with a red asterisk) are incomplete, the item will automatically be saved as a draft. You won't be able to change the status until all of the required fields are filled out.
- If the item's required fields are filled out, and the item is a new item, i.e. you just created it, it will be assigned the status of "Staged for Publish."
- If the item's required fields are filled out, AND the item is an existing item, i.e. you made changes to the existing item, it will be assigned the status of "Staged Changes."
Manually changing item statuses
Sometimes, you'll need to manually change an item's status. You'll do this with the dropdown arrow next to the Save button, located in the upper right hand corner of the screen when viewing an item.
On an item that's Published, Staged Changes, or Staged for Publish, the Save button's flyout menu (click the down arrow) has the options:
- Publish: Immediately publish this item only.
Useful if you're working on other changes elsewhere on your site, but you'd like to publish this item now without publishing other changes.
- Save as draft: Change the status of this item to draft, and save your changes.
Useful if you don't want this item to go live when publishing other parts of your site.
- Schedule: - Set a time and date to automatically publish this item only.
Useful if, well, you want to schedule something to go live at a specified time.
However, if you're viewing an item that's currently Draft status, the button's text is "Save draft," and the "Save as draft" option that was just discussed is now "Stage for publish."
Clicking the big orange "Save draft" button will save your changes, but leave the item as a draft. If you're ready to publish the item in question, for example, you'll want to click "Stage for publish.," which does the reverse of "Save as draft," and vice versa.
"Publish" and "Schedule" are the same, no matter what the status of the item is.
How publishing works in your CMS
While you make changes to your site, you'll notice a blue "Publish" button in the top right. This button will publish your entire website, including changes to the copy, media, and any new or updated collection items. It's essentially the "master" Publish button.
Every time you click the blue Publish button in your CMS, your whole website gets republished. Any collection item with a "staged for publish" or "staged changes" status gets published. Drafts, as mentioned, stay as drafts until you explicitly stage them for publish using the flyout menu on the 'Save draft' button.
If you know that other collaborators from your team are working on the site when you're ready to publish, you may want to ask them if they're ready for their changes to go live. We don't want incomplete copy on the website!
The Forms Tab
Your CMS will most likely include a Forms tab. If you head over to the Forms tab on your site, you'll be able to see a broad overview of user-submitted form data. In other words, this is where you'll see what people are saying on your contact forms or lead generation forms.
The Forms Tab is grouped by title. For example, you might have two forms on your site, one on the contact page, and one on the services page. You'll be able to see data for "Contact Page Form" and "Service Page Form," so you'll get an idea of what forms are performing better and on what pages.
Regardless, if you look at the bottom left hand corner of each section, you'll see a button that says "Download CSV." This will allow you to download ALL form data and import it into a spreadsheet app for easier viewing. We strongly encourage doing this.
In order to help you import this data into a spreadsheet, click here for Importing CSV to Google Sheets, and click here for Importing CSV to Microsoft Excel. '
III: Creating and Managing Content
Woohoo! You're almost done learning how to manage your website. We've got just one more chapter to go, and you'll be on your way to managing your site seamlessly.
Your CMS gives you two ways to edit content that’s already on your site:
- Right on your live web page (easier for visual people)
- Within your Collection items tab (easier for analytical people)
I'll walk you through both (extremely simple) ways to edit, starting with on-page editing. We prefer editing within Collections, but the intuitive on-page editing is a client favorite!
Editing right on the page is pretty intuitive with your CMS, but there are a few things to know.
When you first log in to your CMS, you’ll see your live website with the CMS toolbar (the grey bar) collapsed at the bottom of your screen. Otherwise, if you don't see your site but rather the inside of your CMS, click on the "Back to Live Site" button at the top center.
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. (Though if you’ve used Medium, it’ll feel pretty familiar.)
In order to style some text, first select it. A grey toolbar will then pop up, giving you the following options:
- B to bold
- I to italicize
- Chain 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 screenshot above "Our Approach" is an H3, and "Design. Technology...." is an H2. Note that most pages only have one H1, so you probably won’t use that often.
- Quote Icon to create a block quote. This is best used for lengthy quotations. See below.
For your reference, this is what a block quote looks like. The design will follow the styling of your site. You can insert one of these by selecting text and clicking the "
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. This was likely done intentionally, but if you need more styling options, let me know!
Your CMS allows you to add a variety of link types to achieve various different functionalities.
When you go to insert a link, it automatically assumes that you want to enter a URL (e.g. www.google.com), 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. This is the default setting, chain icon.
- Page: links a visitor to another page of your site. You’ll see a dropdown list of your site’s pages listed here. The icon looks like a page.
- 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. The icon is an arrow pointing to part of a page.
- Email: links a visitor to their default email app so they can write an email to the address you specify. Icon is an email icon.
- 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. Icon is a phone.
Each link type offers its own customization options. Click the gear icon to see what’s available for your current link type. We recommend clicking the gear and setting all external links to open in a new tab. Any internal links (Page, Section) should leave this option unchecked. This helps your site's bounce rate, an SEO metric.
More Text Editing Options
Some areas of text on your website (typically longer passages) will allow for additional options.
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 (from leftmost to rightmost)
- Insert Image: Clicking this will let you insert an image from your computer into the content. After the image is inserted, you can double click on it to edit the caption, as well as change how the image shows in your site.
- Insert Video: Clicking this will allow you to insert a video. Note: you must have the video uploaded to a hosting platform like YouTube or Vimeo, you're not able to upload a video from your computer.
- Insert Code: Clicking this will allow you to insert HTML code. If you use an external service and you'd like to embed something in your page's content, click this and paste the HTML code you get from it. If you need to add a table, you'll need to code it with HTML and insert it here.
- Rich Media: Clicking this allows you to insert rich media, through a link. Some examples of rich media would be Imgur albums, Google Maps, Books on Scribd, SlideShare presentations, GIFs on Giphy, and SoundCloud audio, among others.
- Bulleted List: Insert a bullet list. Press enter twice to end the list, and once to start a new item.
- Numbered List: Insert a numbered list. Press enter twice to end, and once to start a new item.
Everything you’ve just read about editing text on the page also applies when you’re in the Items tab of the CMS in the Rich Text fields.
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.
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 suddenly changes size, acquires a colored border or shadow, etc.
Managing 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 or Outlook. 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 (slug)
- The item’s title within the CMS
There may, however, be separate fields for items 1 and 2.
The Slug Field
An item's slug is the part of the URL after the prefix. www.example.com/blog/ is a prefix, and blog-post-name is a slug. The full URL is www.example.com/blog/blog-post-name. For most people, don't worry about the slug. It automatically generates as you type the name of the post.
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. Regardless, we STRONGLY recommend compressing your images to help with load times. 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. Plus, slow loading websites are penalized in Google Search.
It’s also up to you to ensure that you have the right to use any images on your website.
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, tags, and authors (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 may be explained in the help text for your Collection item, but if it isn’t, contact us for help.
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.
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.
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 us. One example could be "Featured."
The Color field allows you to add a splash of color to your content in a way that your site’s designer defines. 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.
If you'll be working with color on your site a lot, you might want to grab the Chrome / Firefox plugin ColorZilla, which essentially lets you copy any color you see on the web to then paste into the color picker.
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.
I do not recommend using Microsoft Word, as the files are still stored locally and if you happen to lose your device, you also lose your blog posts backup. Plus, it's outdated and the copy/paste does not work optimally.
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.