Tips for Using the Rich Text Editor

Ensure your website is user friendly and aligned with the Arts Visual Identity Strategy by following these best practices when using the Rich Text Editor in Arts CMS.

Overview

The Rich Text Editor is the main content field found primarily in Pages and Posts. It includes a set of formatting options that you can apply to your content and includes tools to insert pre-styled modules (buttons, accordions, alerts, etc.) and forms.

Tips

There are a lot of great features you can leverage when using the Rich Text Editor, however it’s important to follow best practices to ensure your website is formatted correctly, user friendly, and follows the Arts Visual Identity Strategy.

Copy and pasting content

When copying content from external applications or web pages, ensure that junk code does not get pasted into your website. This may not be apparent in the “Visual” view of your Rich Text Editor, but it will be evident in the “Text” view. Junk code may cause inconsistency with formatting and, in some cases, break your web page.

1. Copy your content
2. Click on the Text tab in the top right of the Rich Text Editor
3. Paste your content
4. Click on the Visual tab in the top right of the Rich Text Editor
5. Apply formatting with the tools available in the editor tool box

By copying content into the “Text” view, source formatting and junk code is stripped.

Introduction formatting with Blockquote

Provide context to your content with introduction text that stands out visually by using Blockquote formatting. It is pre-styled to be larger in size and is best used at the very top of your pages or posts. We typically recommend only adding this styling to one or two sentences at the top of the page.

1. Highlight the text that you would like to apply formatting to
2. In the editor tool box, click on the Quote icon

Heading 2 and 3 formatting

Use Heading 2 text formatting for main headings in your pages and posts, and Heading 3 for subheadings. In pages specifically, text applied with Heading 2 formatting will appear under the “On this page” topics menu in the right column of a span 6/three column page layout.

1. Highlight the text that you would like to apply formatting to
2. In the editor tool box, click on the Paragraph drop-down menu
3. Select Heading 2 or Heading 3

Horizontal line

To divide and define sections in your content, consider using a horizontal line.

1. To see your full editor tool box, click on the Toolbar Toggle icon (looks like a double keyboard)
2. Place your cursor where you would like to insert the line
3. In the editor tool box, click on the Horizontal Line icon 

Modules for links, organization, and visual interest

Modules are pre-styled tools and features that are specifically created to highlight call-to-action links and information, organize your content and add visual interest to the overall design of your pages and posts.

Below, are some commonly used examples of modules and their uses:

• Buttons: use for linking and inserting document files or internal / external links, instead of applying hyperlinked text which can clutter content, making it difficult for users to read
• Accordions: use to condense information within expandable sections
• In-line alerts: use to highlight important information and deadlines
• News and event feeds: use to feature news or event posts by a category, topic or tag

Tutorial