Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

This guide will help you understand the available tools so you can use the WYSIWYG Editor to format your website's content.

Character Formatting

To make your text bold or italicized, highlight the text and then click on the desired icon to change your text font.

...

  • Bold: Ctrl + B (⌘ + B on Mac)
  • Italics: Ctrl + I (⌘ + I on Mac)

Special Characters  

When you are writing, you might need to insert characters that are not a part of the standard keyboard.

...

  • Latin letters,
  • numbers (including fractions),
  • currency symbols,
  • punctuation,
  • arrows, and
  • mathematical operators.

Paragraph Formatting

The following formatting will affect an entire paragraph at a time, and cannot be applied only to a letter, word, or sentence inside a paragraph.

Bulleted or Numbered Lists

  • Ordered/Numbered List 
    • This function creates an ordered or numbered list.
    • Select your text, and then click the insert ordered list button.
  • Bullet List 
    • Bullet lists creates an unordered or bullet list.
    • Select your text, and then click the insert bulleted list button to select from the bullet list symbols.

Indent and Outdent Image Modified

  • Use the Indent and Outdent icons to quickly indent or outdent blocks of content. 
  • You can also use the indent icon to further indent list items in a bulleted or numbered list.

Blockquote

There are 2 versions of quote – Blockquote and Callout. The only difference is the design of each. 

  • If you want your text indented and styled differently to indicate a blockquote or callout, highlight your paragraph and click the Blockquote icon.
  • Select which styling you want for your text.

Paragraph Styles

  • Use the drop-down menu, labeled by default "Normal," to change your text's formatting.
  • Formatting different blocks of content on your page such as your headers (H1, H2, H3...) for section titles, as well as other, custom formatting options like paragraph text and addresses. Each Paragraph Format has a defined style based on your website’s theme.

Paragraph Breaks and Line Breaks

To create breaks in your body text:

  • Enter (Return)
    • Ends a paragraph and starts a new one. A new paragraph will begin with a full line of space between paragraphs.
    • This is known as a "hard return." In your html source code, you will see </p><p> to indicate the end of one paragraph and the start of a new paragraph.
  • Shift + Enter
    • Adds a line break and starts the next line directly below the first. You may use line break when you are typing an address, for example, where the City, State line should follow directly after the address line.
    • This is known as a "soft return." This text is all part of the same paragraph, so the same paragraph style (normal, heading, etc.) applies on both sides of the line break.

Use a hyperlink to open another page on your site, open a page on an external site, or to launch a mail-ready email in your user’s email client.  

...

To create a link within the Body of your content item:

  1. Highlight the text you want to hyperlink.
  2. Click the Link icon (Ctrl+K) to open the Link window. Image RemovedTo create a link:
    1. Copy the URL of the page you want to link to and paste it in the URL field.
    2. Click the Link icon (Ctrl+K) to open the Link window. Image Added
    3. As you begin typing your relative path, content will appear. Select the content you want to link.
    4. To link to a page on the same site, start typing the path of the relative URL beginning with the slash ( / ).
    5. Click on the checkmark button to Save.
    6. To link to a Document on your site, you need to select the PDF icon. Image Modified
  3. Click Save.

...

  1. To remove a link

...

  1. :
      Highlight or click on
      1. Click somewhere in the text
      or image that has the
      1. link
      you want to remove
      1. .
      2. Click the
      Unlink icon
      1. Link icon (Ctrl+K) to open the Link window
      Image Removed
      1. Image Added

    ...

      1. Click on the cancel button to Remove.

    Tables

    To use built-in styling, we recommend creating and editing tables directly within the WYSIWYG editor. Copying and pasting tables from other sources can cause them to be unresponsive and mismatched from the rest of your site.

    ...

    Always double-check your tables before publishing. Resize your window to make sure the table will look appropriate for all screen sizes, and keep in mind that if your table has too many columns to fit in its allotted space, it will have a horizontal scroll.

    Create a Table

    To create a new table in the WYSIWYG editor:

    1. Place your cursor in the Body of the page where you want your table to appear.
    2. Click the Table icon to open the Table Properties window.  
    3. Enter how many columns and rows you want in your table
    4. Select the appropriate option from the Headers drop down.
      • Accessible tables require at least a Header Row, if not both a Header Row and Column.
      • If your table does not need either a Header Row or Column, it is not tabular data and the information should not be in a table.
    5. Add a Caption (optional) to display above the table.
    6. Click OK.
    7. Enter your content into the table cells.

    Edit Table Content

    To edit the properties of a table you've already created in the WYSIWYG editor:

    ...

    1. Right-click on the cell, row, or column you want to affect
    2. Choose the appropriate options from the menu that appears

    Accessibility Checker

    You know our platform code is accessible to users with disabilities, but how accessible is the content you write for those pages? We’ve now made it much easier for you to test and improve on the accessibility of your page content.

    As part of our continued efforts to increase the accessibility of our platform content, we’ve added an Accessibility Checker to the WYSIWYG toolbar for Body content. Simply click the last icon on the second row of the toolbar to run an accessibility checker across your text.

    Using the Accessibility Checker

    To use the Accessibility Checker:

    1. Create content as usual.
    2. Click the Accessibility Checker icon. Image Removed
    3. Follow the suggestions in the Accessibility Checker window.
    4. Save and Publish content.