Formatting Text in the Content Editor

The content editor is the main editing box used to add and format text in the body of a page, post or Tailor element.

Use for default editing mode with pagesnews/blog postseventspeople, places and items

Use for Tailor page builder when elements include a content editor

Adding new pages

If you’re creating a new page, follow the steps for adding a page first. This page provides instructions for step seven: Add body content > default editor.

Meet the content editor. It’s like a word processor embedded into your admin screen. Just type or paste your content into the box, and use the toolbar at the top to style and format it.

The content editor is the default screen for editing the main content of pages and posts (including people, places, items and events) — unless you choose to tailor the content instead.

Even in Tailor, the trusty editor shows up when you edit individual elements. In Tailor, the content editor appears in a window squished to the right side of your screen, but you can drag the window to make it as large or small as you like.

 

Setting up the editor (do this first!)

Whether you’re editing a full page or a tiny Tailor element, the editor displays as a text box underneath a toolbar. This toolbar has all of your text editing options — but the first time you use the editor, only half of those options show up.

To reveal the entire toolbar, turn on toolbar toggle. You only have to do this once, and it will be saved as your default preference happily ever after.

Toolbar toggle is the last icon in row one. Click the icon to turn it on.


Pasting text into the editor

Strange but true: Copy and pasting can be the trickiest part of using the content editor.

If you paste text from anywhere else into your site — from another website, email, Google Doc or Microsoft file — turn on the paste as text tool first. This tool prevents the document’s source code from invading your page. Take it from us: Invader code can wreak all kinds of formatting havoc on your site.

  1. Click the paste as text button, which looks like a clipboard with a T; when this mode is turned on, the icon has a thin square around it
  2. Paste your text
  3. Add any links, bold, italics and other formats that the plain text tool stripped out; instructions for formatting text are included below
  4. Keep pasting; plain text mode will remain turned on until you click the icon again or update/refresh the page

Invader code can cause all kinds of formatting issues, including unexplained spaces or line breaks; background colors, fonts or text colors that don’t match the rest of your site; and links that appear underlined or blue.

If you find mystery formatting on a page, don’t despair. It’s never too late to paste as text! Simply cut the offending text, click the paste as text icon, then paste the text right back into the editor. Voilà!


Adding formats, styles and links

After you add text to the editor, add styles by highlighting the text to format and selecting the icon for the style you need from the toolbar.

  1. Make sure the toolbar toggle is turned on so the second row of editing icons appear
  2. Highlight text that needs formatting
  3. Click the editing icon with the style you need from the toolbar at the top

Good to know: To see what an editing icon does, hover over it with your cursor.

Basic styles

Add bold, italics, bullet points, numbered lists, or blockquotes by highlighting the text and selecting the icon from the top row of the toolbar.

Blockquotes are used to style and highlight quotes, testimonials, and other sections of text within a page.

Headings

To add section headings, highlight the heading text, click the paragraph dropdown, then select a heading level. Start with Section Heading – h2, and use the subsection and other headings only if you need to subdivide larger sections (like the levels of an outline). For example, in this section, “Formatting text” is Section Heading – h2, and “Headings” is Subsection Heading – h3.

To remove a heading: Click your cursor anywhere in the heading text, then use the same style dropdown to select paragraph

See best practices and examples for using headings as signposts »

The web theme’s predefined styles make it easy to format content consistently across your site. This consistency makes navigating your site easier for visitors, and it makes maintaining your site easier for you. Using the predefined styles also ensures that when the theme is updated, your formats aren’t left behind.

Avoid using underlines, colors and other text changes to create your own heading or link styles. Instead, allow your content to set you apart: Channel inventive urges into your writing, photos or even a video series that shows off your group’s unique perspective.

Special formats

Select from the formats dropdown in row two of the toolbar to add any of the following:

    • Lead paragraph: Use at the top of a page to format two to three lines of text in larger, gray text.
    • Unstyled list: Use to indent text. Text must be bulleted or numbered before the style can be applied.
    • Buttons: Use to highlight your site’s most important links and actions. First, highlight the button-to-be text and add the link; then select Formats and (see the Tailor tutorial for examples).
    • Quote citation: Use to differentiate the source or citation from a quote. First, highlight the quote and citation and select “blockquote” from the top row of the formatting toolbar. Then, select the citation inside the blockquote, and apply the quote citation format. (Note: If you are editing a page in Tailor, you will need to do the above steps in a draft page and copy the text into Tailor).
  • Just a blockquote.

    Quote citation

  • Callout: Use to call out related or important content on your page. The callout puts your text in a light green box. (You may have noticed a few on this page!)
  • Disclaimer: Use at the bottom of a page for legal text, disclaimers or footnotes. Disclaimer text will appear in italics and smaller than the body copy.

Good to know: To add a soft return (line break with single space instead of double), hold Shift + Enter/Return.

Links

Link text should be concise but descriptive. Avoid links that say “click here,” and instead use the link text to indicate the destination’s title or content. A visitor should be able to skim the links on a page and understand what they link to without reading the context.

See more best practices and examples for using links effectively »

  1. Highlight the text that will link
  2. Click the “Insert/edit link” button from the top toolbar (looks like links of a chain), or use keyboard shortcut (PC: ctrl + k / Mac: cmd + k)
  3. Add the link’s URL / web address:
    • Page on your site: Start typing the page name and select it from the options that appear below
    • Page on another website: Insert web address in the URL field
    • Email address: Insert mailto:email@address.edu (Ex: mailto:me@wustl.edu)
    • Link to download a document (pdf, xls, ppt, etc): See tutorial for linking to documents
    • Link to a specific section of a page: See HTML code for adding anchor links
      For more link options, click the gear icon.
  4. Do not set links to open in a new window/tab
  5. Click blue ⏎ button to save link

Adding photos and other media

Media include images, documents, audio files and video files. You can insert any of these from within the content editor.

Read the instructions for adding media »


Switching modes: Visual and text/html editors

You can switch the editor between visual and text modes by toggling the tabs at the top right of the editor box. 

  • Visual mode is the default. It allows you to add formatting with the click of a button, much like Microsoft Word, Google Docs and other word processors. This mode is also called a WYSIWYG  — pronounced “wizzywig” — because “what you see is what you get.”
  • Text/html mode allows you to edit the code directly. This typically isn’t necessary unless something has gone wrong and you need to clean up the html.

 

Creating a new page?

Head back to the adding pages tutorial to make sure you complete all of the steps.
View the tutorial »