Website Editing Guide

Using the Editor to make adjustments to your site, or add/remove content on your site is pretty simple, but here is a helpful guide you can always refer to if you need any help.

First Things First

When you use the Editor to make changes to your site, you are accessing what is known as a CMS, or Content Management System. CMSs were invented for two reasons:

-To help "non-technical" people maintain their websites
-To help everyone publish new content within a consistent design, anytime

What you CAN do with the CMS:

Your CMS allows you to edit most any existing content on your website, including text (or "copy"), images, button text, where a button takes you, links, etc. It also allows you to create new content/blog posts through Collections.

What you CAN NOT do with the CMS:

Your CMS does not allow you to edit any "styles" on your website. This includes most colors, layout, shape, orientation, etc. It does not allow you to add any new pages to your site (unless it is part of a collection like Blog Posts, etc.). This separation is for your own protection so it is essentially impossible for you to "break" your website. However, it does mean that if you desire any changes on this front, you do need to Contact Your Developer.

You can also always Contact Us about monthly webmaster services to make any edits or additions to your site for you!

Getting Started

Making edits on your beautiful new website starts with accessing its built-in content management system. And that process usually starts with an email from your website’s developer adding you as a collaborator to the site.

It probably looks a bit like the screenshot to the right:

When you click that button, you’ll be taken to your website’s CMS — which, at first, will look just like your new website. Except now, you should see a grey bar across the bottom, with a simple form.

Just fill in the required fields to create your account, and log in. These will now be the credentials you use to access your sites CMS from now.

Your content management system should look just like your website — except there’s a toolbar at the bottom with two tabs labeled Pages and Collections, plus a series of icons. More on that later.

For now, take a moment to bookmark this page, or 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!

To the right is a quick video on all the steps mentioned above:

example invitation email from cms editor screenshot

Getting Started

Making edits on your beautiful new website starts with accessing its built-in content management system. And that process usually starts with an email from your website’s developer adding you as a collaborator to the site.

It probably looks a bit like the screenshot below:

example invitation email from cms editor screenshot

When you click that button, you’ll be taken to your website’s CMS — which, at first, will look just like your new website. Except now, you should see a grey bar across the bottom, with a simple form.

Just fill in the required fields to create your account, and log in. These will now be the credentials you use to access your sites CMS from now.

Your content management system should look just like your website — except there’s a toolbar at the bottom with two tabs labeled Pages and Collections, plus a series of icons. More on that later.

For now, take a moment to bookmark this page, or 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!

Below is a quick video on all the steps mentioned above:

Getting to know the 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.

What are those icons? After the Pages and Collections tabs, you’ll see three icons. From the left, these are:
– Account - Shows information about your CMS account, including the associated email, and your photo, if you’ve uploaded one. If you haven’t, you can upload one here.
– Help - Provides answers to a few common questions about using the CMS.
– Log out - Logs you out of the CMS to view your site as anyone else would.

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 - these are pages I built outside of your Collections. These may include your homepage, About page, Services/Products, Contact, etc.
Collection pages - these are pages generated from your Collections, and can include things like a blog, help center, documentation, and more. These are listed with their Collection name, like so: Blog Pages.

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 meta title and description, Open Graph title and description, and Open Graph image. These should be set & optimized for you already

symbol meanings and locations in cms editor screenshot

Getting to know the 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.

What about those icons? After the Pages and Collections tabs, you’ll see three icons. From the left, these are:

Account - Shows information about your CMS account, including the associated email, and your photo, if you’ve uploaded one. If you haven’t, you can upload one here.
Help - Provides answers to a few common questions about using the CMS.
Log out - Logs you out of the CMS to view your site as anyone else would.

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 - these are pages I built outside of your Collections. These may include your homepage, About page, Services/Products, Contact, etc.
Collection pages - these are pages generated from your Collections, and can include things like a blog, help center, documentation, and more. These are listed with their Collection name, like so: Blog Pages.

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 meta title and description, Open Graph title and description, and Open Graph image. These should be set & optimized for you already

symbol meanings and locations in cms editor screenshot

Getting to know the CMS

The Collections Tab

The Collections tab is very similar to the Pages tab, but it only lists your Collection content — the stuff I created with the CMS. When you click on a Collection, 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 + New button and fill out the item’s various fields, paying close attention to the labels and other requirements for each.

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 item button - 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, Not Published, 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 - Makes all saved changes live on your site.
View Site - Click this to view your website. You can use any links on your website to move between pages in this view.

How Publishing Works

The Save and Publish buttons should be fairly self-explanatory. Just note that you’ll need to click Publish twice to confirm your action. Every time you click Publish in your CMS, your whole website gets republished.

symbol and option locations within cms editor screenshot

Getting to know the CMS

The Collections Tab

The Collections tab is very similar to the Pages tab, but it only lists your Collection content — the stuff I created with the CMS. When you click on a Collection, 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 + New button and fill out the item’s various fields, paying close attention to the labels and other requirements for each.

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 item button - 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, Not Published, 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.

symbol and option locations within cms editor screenshot

How Publishing Works

The Save and Publish buttons should be fairly self-explanatory. Just note that you’ll need to click Publish twice to confirm your action. Every time you click Publish in your CMS, your whole website gets republished. If you know that others 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.

Creating & Managing Content

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

– Right on your live web page
– Within your Collection items tab

I'll walk you through both (extremely simple) 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.

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.

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.

editing text in cms editor screenshotediting text in cms editor screenshot

Creating & Managing Content

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

– Right on your live web page
– Within your Collection items tab

I'll walk you through both (extremely simple) 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.

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.

editing text in cms editor screenshot

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.

editing text in cms editor screenshot

Creating & Managing Content

Inserting Links

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

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.

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.

adding a link in cms editor screenshotediting buttons in cms editor screenshot

Creating & Managing Content

Inserting Links

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

adding a link in cms editor screenshot

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.

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.

editing buttons in cms editor screenshot

Creating & Managing Content

More text editing options

Some areas of text on your website (typically longer passages) may 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.

image symbol

Allows you to upload an image and position it with the accompanying text content.

video symbol

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.

rich media symbol

Allows you to embed “rich media,” via a link. There are all sorts of objects you can embed using this feature such as Google Maps, Imgur Albums, Soundcloud Audio, and more!

unordered or bulleted list symbol

Allows you to add a bulleted list.

ordered or numbered list symbol

Allows you to add a numbered list.

Editing Images

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.

rich text element options in cms editor screenshotediting images in cms editor screenshot

Creating & Managing Content

More text editing options

Some areas of text on your website (typically longer passages) may 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.

rich text element options in cms editor screenshot
image symbol

Allows you to upload an image and position it with the accompanying text content.

video symbol

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.

rich media symbol

Allows you to embed “rich media,” via a link. There are all sorts of objects you can embed using this feature such as Google Maps, Imgur Albums, Soundcloud Audio, and more!

unordered or bulleted list symbol

Allows you to add a bulleted list.

ordered or numbered list symbol

Allows you to add a numbered list.

Editing Images

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.

editing images in cms editor screenshot

Creating & Managing Content

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, then check each item you want to change the status of multiple items, just like in Gmail.

Creating new content

Creating new collection items is 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 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

Anywhere you see “Drag & Drop Image Here,” you’re looking at an image field. You can either drag an image in, or click “Upload an Image". 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.

Some fields, usually marked with a magnifying glass on the right side, are Reference fields. These 'reference' another CMS collection and allow you to choose an option from that list.

Multi-Reference fields are just like Reference fields, except you can choose more than one.

bulk selecting cms items screenshotcreating a new cms item screenshot

Creating & Managing Content

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, then check each item you want to change the status of multiple items, just like in Gmail.

bulk selecting cms items screenshot

Creating new content

Creating new collection items is 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 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

Anywhere you see “Drag & Drop Image Here,” you’re looking at an image field. You can either drag an image in, or click “Upload an Image". 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.

Some fields, usually marked with a magnifying glass on the right side, are Reference fields. These 'reference' another CMS collection and allow you to choose an option from that list. For example, you may have one CMS collection for your blog articles, and another CMS collection for different categories of blog articles. When you create a blog article, the reference field lets you categorize that blog, and the fact that the category is also a CMS item allows for it to have its own page that probably shows all articles within just that category.

Multi-Reference fields are just like Reference fields, except you can choose more than one.

creating a new cms item screenshot

Congrats! You're Done!

As always, if you have any questions about your site, feel free to Contact Us.

If this is still confusing to you, no problem! We get it. We offer web maintenance services for an affordable monthly cost. We keep your site up to date, and add any content you send our way so you can keep doing what you do best!

Creating & Managing Content

More text editing options

Some areas of text on your website (typically longer passages) may 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.

rich text element options in cms editor screenshot
image symbol

Allows you to upload an image and position it with the accompanying text content.

video symbol

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.

rich media symbol

Allows you to embed “rich media,” via a link. There are all sorts of objects you can embed using this feature such as Google Maps, Imgur Albums, Soundcloud Audio, and more!

unordered or bulleted list symbol

Allows you to add a bulleted list.

ordered or numbered list symbol

Allows you to add a numbered list.

Editing Images

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.

editing images in cms editor screenshot
(614) 300-1998