Formating Your Content


The WYSIWYG Text Editor

When you edit a page, you will see this toolbar menu that provides a "What You See Is What You Get" (WYSIWYG) method of structuring your content in the page. The menu provides a word processor-like interface for inputting and formatting content. If you are comfortable with raw html, you can click the "Source" button or click “Disable rich-text” below the WYSIWYG ribbon to edit the html code (sometimes this is the only way to accomplish complicated layouts).

The WYSIWYG toolbar has “MS Word-like” buttons to align and style text as well as add links, insert and upload images. One of the most important features is the paste from MS Word (the button that looks like a clipboard with a Word icon on it – W letter). If you are cutting and pasting directly from an Microsoft Office document it is important to use the paste from Word feature to strip extraneous Microsoft code from the clipboard contents.

For each option in the toolbar, you can roll over the icon to read the rollover text to see that action each accomplishes.

WYSIWYG tool bar image


icons for formatting

Bold, italic, Superscript, Subscript, Remove formatting buttons.


Alignment

Align left, center, and right.


Lists icon

Bullets, Insert/Remove numbered list, decrease indent, increase indent and block quotes.


Redo icon

Undo, Redo, insert text, insert Word content.


Link icons

add a "Linkit" link, a hyperlink, Unlink, and add an Anchor.


Source icon

The Source button is a toggle that shows the html code versus the WYSIWYG display.


 

icons for language and accessibility checker

NEW! Use the Check Accessibility (person in circle) icon to check that your text is properly formatted to meet accessibility requirements.

NEW! Use the Set Language when entering non-English text. This allows a screen reader to recognize text as another language and properly read it aloud. Highlight your text and select the language from the dropdown. It will add code around the text that is invisible to you. To see the code, click the Source icon.


Table hard return icon

This grouping adds a hard return, a special or foreign character, and a table.

A hard return is a line that breaks up text on your web page. In HTML, this is an <HR>.

The Omega symbol is used to add special or foreign characters. Use the Omega symbol to enter the following characters (and more) into the body of text. To enter them into the Title field, you will need to use the keyboard or cut and paste.

omega key for special characters

Tables can be aligned left, center, or right. If you right-click any table in the WYSIWYG editor, you can open the Table Properties dialog, which allows you to convert the first row or column into headers, add a caption, and adjust other properties.

table properties dialog box


Heading Styles

Use Heading styles in order to create structure for an accessible site. Select the text and choose a Heading style defined by the theme. It's best to choose an H2 for your pages since each page should only have one H1. Avoid the use of bold for headings.

Headers pull down menu icon


Embedding images

These two options are used to embed images into the web page as well as style the images to float left, right or center. See detailed instructions for embedding and stylizing images to learn more.


Embed image icon

Styles pulldown image