Editor Basics

The site editor has many tools to format and style your content (see list below). Most of the tools are similar to using Microsoft Word, so in this tutorial we will cover the more uncommon tools:

Tools of the Editor:

  • Bold, Italic
  • Superscript, Subscript
  • Remove Format
  • Text Alignment: left, center, right
  • Insert/remove bulleted or numbered list
  • Block Quote
  • Undo, Redo,
  • Hyperlink or unlink text
  • Insert Media: opens media library
  • Horizontal line
  • Special Characters
  • Insert Table
  • Insert buttons: icons, box, button, button group, map, calendar, screen reader only, count up, count down and callout
  • Paragraph Format: heading styles
  • Text styles: lead, hero, supersize
  • Source: Work with the HTML

Add a Block Quote

Block Quotes add emphasis and interest to text. They are a great way to call out a tip or a quote in a profile. 

  1. Highlight the text that you want to block quote.
  2. Click the Block Quote icon (quote marks icon) in the editor.

block quote button

Bold, Italic, Bulleted lists

The editor works basic text formatting tools such as bolding, alignment and list creation.

  • Bold: To bold part of your content, just highlight the text and click on the B icon.
  • Italic: To Italicize text, just highlight the text and click on the I icon.
  • Sub and Superscript: sets character slightly below or above the normal line of type. Subscripts appear at or below the baseline, while superscripts are above.
  • Alignment: Aligns content left, right and center.
  • Bulleted lists: To create a bulleted list, just highlight the text and click on either the bulleted list or the numbered bullet list.

Text formatting buttons on editor

Add Media

  1. Click the Insert Media icon to add or select media.
  2. Choose any media in the Media Library to use or upload a new file
  3. See our tutorial for working with the Media Library.

Insert media button

Add a Table

  1. Click the Table icon to set initial table properties.
  2. Set the number of rows and columns.
  3. Click on the table to bring up formatting options, such as adding and removing rows and columns.
    1. To make a header column, choose Column and toggle Header Column on.
    2. To make a header row, choose Row and toggle Header Row on.
    3. Merge and Split cell option.
    4. Caption on /off.

Add Table button

Insert Buttons

This set of icons in the editor insert things such as buttons, icons, maps and google calendars. We have individual tutorials for each insert button in the editor.

Insert buttons on the editor

About Screen Reader Only

Use the Insert Screen Reader Only component when you are required to provide additional or contextual information to a screen reader user which a sighted user maybe able to infer.

A common use case is for providing correct context to repetitive text on a page. You may have several buttons or links on a page that all say "Learn More". The "Learn More" button is clearly visually associated with the surrounding text to a visual visitor. However, to a screen reader user, this association may not be as clear. To provide additional clarification we can add what  each learn more link goes to as visually hidden text to the button. This way, we can keep the same level of context for all users.

Insert screen reader only button