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

 

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. (Though if you’ve used Medium, it’ll feel pretty familiar.)

 

Select text to show a toolbar with 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 italicise
  • 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. This was likely done intentionally, but if you need more styling options, let us know!

 

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

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: 

  1. 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.
  2. Page: links a visitor to another page of your site. You’ll see a dropdown list of your site’s pages listed here.
  3. 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.
  4. Email: links a visitor to their default email app so they can write an email to the address you specify.
  5. 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

 

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. 

The image icon             

Allows you to upload an image.

 

The video icon          

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.

 

The rich media icon

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

 

The bulleted list icon

Allows you to add a bulleted list.

 

The numbered list icon

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 Collection Text

If you edit content that comes from one of your CMS Collections, all other instances of that same text will automatically update across your site. 

For example, if you edit the title of a blog post on your blog’s index page, the title will update on the individual blog post’s page, as well as anywhere else it appears on your site.

 

Editing Buttons

To edit a button's text or link, click the gear icon, then the appropriate option

 

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:

  1. Edit link settings lets you update the page the button takes viewers to.
  2. 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

 

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.