WYSIWYG Editors

Use the Styles drop-down list to switch between paragraphs and headings, to add HR stubs, or to style links to look like other calls to action on the site.

Note: Selections under Styles don’t affect bolding, italics, or lists. To add and remove these, use the appropriate tools.

The editor defaults to adding paragraphs when you start editing your page. You can switch to a heading (level 2 through 6) and/or return back to a simple paragraph when appropriate.

To Add Headings

1. Place your cursor where you want to add the heading or select the text that should be a heading.
2. Click the drop-down arrow for Styles.
3. Select the correct heading level.

To Switch a Heading to a Paragraph

1. Select the Heading.
2. Click the drop-down arrow for Styles.
3. Click “Normal text”.

To Add an HR Stub

A stub is a decorative mark you can add to break up content.

1. Add a paragraph where you want to add the stub.
2. Click the drop-down arrow for Styles.
3. Select the style of stub you want. They are:
   • HR Stub (gray)
   • HR Stub - Red
   • HR Stub - Black

Stubs are used between the chunks of this accordion section.

To Add a CTA Link Style

1. Add and select a link. (Note: The CTA link styles won’t appear unless you’ve placed your cursor on or selected a link.)
2. Click the drop-down arrow for Styles.
3. Select the style of CTA link you want. They are:
   • CTA Button
   • CTA Link

Select your text and click Bold — the icon looks like a capitol B — to toggle bolding on and off.

Use Remove Format to remove bolding.

Select your text and click Italic — the icon looks like a capitol I — to toggle italics on and off.

You can also use Remove Format to remove italics.

The editor has two different sets of Link and Unlink icons.

See Links in the Editor's Handbook for instructions on adding links, including how to write excellent links, the different options you have for adding links through the WYSIWYG, and other guidelines and standards.

You have two icons to insert and remove lists:

• Insert/Remove Bulleted (unordered) List: Use for lists where the order is not important or rigid.
• Insert/Remove Numbered (ordered) List: Use for lists where the order provides important information, such as rankings or steps in a process.

To type a new list:

1. Place your cursor where you want the list.
2. Click the appropriate unordered or ordered list icon.
3. Begin typing. Press Return to enter the next list item.

To convert text to a list or switch between an ordered and an unordered list format:

1. Select the text you want to convert.
2. Click the unordered or ordered list icon.

To indent a sublist within a larger list:

1. Add your main list.
2. Place your cursor at the beginning of the sublist and press Tab. This indents that line to create the sublist.
3. Add sublist items.
4. When you are done with the sublist, you can use Shift+Tab on the next item to remove the indent and make the item the same level as the main list again.

You have several options for adding images using the Image Embed icon. See “Adding Images with a WYSIWYG editor” at Images for complete instructions.

You can embed a video that is available on either YouTube or Vimeo using the Video Embed icon.

Videos display a placeholder image with a superimposed play button. When users click the image, the video opens in an overlay.

See Videos for other options and complete instructions for embedding video using the WYSIWYG editor.

You can add a simple table using the Table icon.

You can also copy-and-paste a table into a WYSIWYG editor, but may have to do some extra work to make it look right and be accessible.

Important: Tables are to be used for tabular data only, not for layout or effect. You must set the table headers (first row, first column, or both) in table properties.

See Tables for detailed instructions, information on what options you should avoid, and accessibility requirements.

You can use the Quote Embed or Quote Wide Embed icons to highlight small or large quotes, with or without images. These options make the quote stand out from the rest of the content.

• Quote Embed: For text-only quotes. Icon looks like big black double-quote.
  • “Quote Embed Full”: Stretches the width of the content.
  • “Quote Embed Small:” Can be floated to the right or the left.
• Quote Wide Embed: For text and images. Icon looks like blue bubble with little white double-quote. Consider using a Story paragraph instead of a Quote Wide Embed if you are quoting a Grinnellian.

See Quotes for examples and complete instructions.

By default, our site aligns text to the left. Place your cursor in a block of text and click the alignment icons — Align Left, Center, and Align Right — to change the alignment.

Note: Change your alignment sparingly. It can affect the readability of your content.

Tips:

• Keep text left-aligned most of the time. For English, left-aligned is easiest for users to read.
• Avoid centering large blocks of text. Centered text is OK for short amounts of text.
• Do not right-align English text; it makes it particularly hard for many people to read.
• Do right-align blocks of text in languages that read from right to left. And remember to indicate what language it is using the Set Language icon!

Insert Horizontal Line will insert a line across the width of your content, like so:

Warning: People may stop scrolling or reading when they see a horizontal line, assuming it’s the end of the page. Therefore, use these when it is obvious that there is more content below the line.

If you are using a horizontal line to separate chunks of content, consider other options that can do the same thing, such as adding your sections in an accordion or an image list, or using the HR stub options in the Styles dropdown.

Use the Insert Special Character icon to add characters that aren't easily available from your keyboard. For example: ellipses (…), em (—) and en (–) dashes, accented letters (Å, ë, ñ), and Euro (€) and copyright (©) symbols.

To do so:

1. Place your cursor where you want the symbol.
2. Click the Insert Special Character icon.
3. Click on the symbol you want.

You can clean up code and remove bold or italic formatting from a large amount of text using the Remove Format tool.

Tip: If you copy and paste from an email, Word document, or elsewhere, you can end up with extra code that causes issues when you try to edit your content in the WYSIWYG editor.

To remove extraneous formatting:

1. Select the text you want to clean up.
2. Click the Remove Format icon.

Note: This tool retains most semantic formatting such as lists, headings, or tables. It removes a lot of underlying code that might cause problems, as well as bold and italics.

Our website default language is English. If you include words from another language, set the language to let screen readers and search engines more accurately interpret the word(s).

To set a language:

1. Select the text that is in a different language.
2. Click the Set Language icon.
3. Find and click on the correct language from the list.

Text with a language set shows in a dotted line box with the ISO language code in parentheses after it.

Tips:

• To change or edit the language later, select all the words that need the language changed, then follow the normal steps above. If you don't, you'll get multiple language tags.
• To remove language tags, click Source to view the HTML. Look for a tag like <span dir="ltr" lang="eu"> where the language tag begins and remove it. Or leave us a moderation note and we'll clean them up.
• Fewer than 100 languages are included in the drop-down list, which doesn't include most extinct languages. If you need to mark a language that isn't available from the drop-down list, leave us a moderation note. Tell us what needs to be marked and what the language is and we'll add it for you.

Click Source to toggle back and forth between the WYSIWYG view and the HTML source code.

If you're familiar with HTML, you can use it to quickly make changes that might be more difficult through the WYSIWYG interface, to clean up code, or to correct errors.

If you're not familiar with HTML, just ignore it!

Note: The WYSIWYG editor will strip most code when the page is published. Source view makes a good trouble-shooting tool, but don't use it to try to add styles or effects that aren't supported. If you need help, contact us.

Click Maximize/Minimize to toggle between the regular WYSIWYG view and a larger, full-screen version. This comes in handy if you have large amounts of text and want to see more of it at one time.

Rarely used on our site, the Anchor icon lets you add a anchor so you can link to content in a specific spot on the page.

See "Linking to a Specific Section of a Page" at Links for more information about how anchors works, issues with using them on our site, other options, and tips for using them successfully.

Trying to move an embedded image, table, video, or quote?

Hover over the item and you may be able to spot a small square with a modified plus sign. Click on the icon and drag it to where you want the item to appear. This icon may appear near your item or on the opposite side of the editor. It depends on what you're looking at. So feel free to hunt a little.

Trying to add a new paragraph under a table at the end of the WYSIWYG editor?

You may notice that if you press Return to add a new paragraph, you end up getting a new paragraph in the table. Instead, hover over the table and you should see a red line. Click the Insert Paragraph Here icon (looks like a red box with a white arrow). Voilà, new paragraph!

Having trouble making something look the way you want it to?

Remember that our users have different devices, different browsers, and different abilities. The majority of users will see the page differently from how you see it.

• Focus on making sure your content is marked up correctly.
• Think about what you're trying to accomplish and look at different ways to reach that goal.
• Consider different types of paragraphs.
• Contact us if (or before) you get really frustrated. We may have suggestions or tools that can help.