Skip to content

Using the Rich Text Editor

Rich text is text that supports various types of formatting, links, and media. It's also commonly referred to as a WYSIWYG (what you see is what you get) editor. In Optimizely, TinyMCE (v6) is used as the rich text editor. 

How to Paste in External Content

The TinyMCE editor handles pasting pre-formatted content really well because it retains the overall HTML structure of the pasted content without introducing unwanted inline styles. For example, if a bulleted list from an external website is copied and pasted directly into the editor, it will keep the bulleted list structure but ignore any custom font families, sizes, and colors. 
Use the Ctrl + V keyboard shortcut to paste copied content into the editor. 

TIP: Use Shift + Enter to insert a line break between content. The Enter key on its own will begin a new paragraph.

How to Format Headings

  1. Type your heading text into the rich text field and then highlight it.
  2. In the Paragraph dropdown in the toolbar, select the appropriate heading size (Heading 2, 3, 4, 5, or 6) from the Headings sub-menu. Alternatively, apply a pseudo heading style from the Text Styles sub-menu if the text is not actually a defining header for the content below it. Learn more about heading structure

NOTE: The Heading 1 (H1) is added to every page automatically so you should never need to use the Heading 1 option within the rich text editor since there should only be one H1 on a page at a time. 

How to Create a List

  1. Highlight the content you want to form into a list and click the bulleted or numbered list icon in the toolbar. 
  2. To create an indented list within a list, just hit the Tab key next to the line that should be indented. You can also use the indent/outdent toolbar options. 
  3. To end a listing, hit the Enter key twice after the last item. 
  1. Highlight the text you want to hyperlink and click on the chain icon in the editor toolbar.
  2. Select the link type:
    • Page: Select an internal page to link to. You can speed up the process by simply dragging and dropping a page from the left-side navigation pane directly into the rich text field. 
    • Media: Select an internal file from the Media tab to link to. You can speed up the process by simply dragging and dropping a file from the right-side assets pane directly into the rich text field. 
    • E-mail: Link to a specific email address and have it open the user's pre-defined mail app when clicked (mailto:address@address.com).
    • External link: Link to an external URL outside of the current site.
    • Anchor: Select a previously-created anchor from the current page to link down to.
      TIP: To link to an anchor from another page, use the "Page" option instead and enter the anchor tag (ex. #about) into the Remaining URL field.
    • Remaining URL: Enter an anchor tag or specific query string to add on to the end of the assigned page's alias, used in conjunction with the Page option. When entering anchor tags, make sure to include the #.

TIP: If you're linking to internal content, you can simply drag and drop the page or file from the navigation/assets panes into the rich text field and then update the link text when highlighted as needed.

How to Insert an Image and Assign Alt Text

  1. Drag and drop an image from the right-side assets pane into the rich text field. Alternatively, use the Aprimo icon in the toolbar to insert an Aprimo image into the rich text field.
  2. IMPORTANT With the image highlighted, click the Insert/Edit Image icon in the toolbar and populate the Alternative Description field with descriptive alt text.
    To ensure your imagery is accessible and search engines can understand the context that it provides, alt text needs to be assigned to all non-decorative images on the site. Learn More About Alt Text

How to Add Image Captions

  1. Highlight an image that you want to add caption text to and then click the Insert/Edit Image icon in the toolbar.
  2. Check the Show Caption checkbox and click Save.
  3. Click into the caption text area directly below the image to modify it.
    Edit image caption

NOTE: This method of adding an image caption should only be used on images that are at least 1500px wide as it will span 100% width of the available space when used. 

How to Insert a Table

  1. Under the Table menu in the top toolbar, choose the amount of columns and rows you want through the grid selector.
  2. Enter the table content into the outlined rows and columns.
  3. IMPORTANT Format the header row by updating the row and cell properties (details below). This step is necessary to make the table accessible to screen readers and external search crawlers, as well as to apply the correct styles needed for the header row.

Format The Header Row

  1. Click into the first cell of the header row and then go to Table > Row > Row Properties in the top toolbar. 
  2. Change the Row Type to Header and then click Save. 
    Table Header Row
  3. Highlight all of the cells in the top header row and then go to Table > Cell > Cell Properties in the top toolbar. 
  4. Set the Cell Type to Header Cell and then click Save.
    Table Cell Properties

NOTE: Tables should only be used to render content that belongs naturally in a grid/spreadsheet or when data with the same set of properties are being compared. Tables should not be used for layout purposes. Learn More 

How to Apply Custom Styles

  1. Select or highlight the text/element that you want to assign a custom style to. 
  2. Select the appropriate class from the Paragraph dropdown.

Style Options

Button Styles
Primary Button

Primary Button
Primary Button With Arrow

Primary Button With Arrow

Secondary Button

 Secondary Button

Secondary Button With Arrow

 Secondary Button With Arrow

Simple Button

 Simple Button Link
Text Styles
Section Title

Used to make headings from different sections on a landing page stand out. Commonly used on H2s.

Example

Pseudo Heading 2

Used to style regular non-heading text to look like an H2.

Example

Pseudo Heading 3

Used to style regular non-heading text to look like an H3.

Example

Pseudo Heading 4

Used to style regular non-heading text to look like an H4.

Example

Pseudo Heading 5

Used to style regular non-heading text to look like an H5.

Example

Small Label

Used to style regular non-heading text to look like an H6 or a small label.

Example
Large/Intro Text

Increases the font size from standard to large. Typically used to introduce a page or section.

Example
Disclaimer Text

Reduces the font size from standard to small. Typically used for small disclaimers or notes.

Example
Transcript Name

Used to style names in video or podcast transcripts. This class can be applied to inline text without having to add new paragraphs or line breaks.

Example
List Styles
Styled List (Alternating Rows)

Used to style a bulleted list with alternating background colors.
Can only be applied to the <ul> element.

  • Example List
  • Example List
  • Example List
Styled List (Ruled)

Used to style a bulleted list with dividing lines between each row.
Can only be applied to the <ul> element.

  • Example List
  • Example List
  • Example List
Link List With No Bullets

Removes the bullets and indentation from a bulleted list.
Can only be applied to the <ul> element.

  • Example List
  • Example List
  • Example List
Image Utilities
Image Left

Aligns an image to the left so content can display to the right of it.
Image Right

Aligns an image to the right so content can display to the left of it. 

Image Left Large

Aligns an image to the left so content can display to the right of it. Has no maximum width.

Image Right Large

Aligns an image to the right so content can display to the left of it. Has no maximum width.
Clearfix

Clears all left and right floating to the content directly following the element that it's applied to.

How to View the HTML Source Code

To switch out of the WYSIWYG (what you see is what you get) editing mode and view the HTML code, click on the  icon in the toolbar. If any changes are made, click the OK button before exiting out of the modal window. This is a helpful view if you want to embed a video player or any other kind of code-based media. 

NOTE: When embedding external media, make sure to set the width to 100% in the code to ensure it's responsive (when applicable).