Formatting Text

Add subheadings, body text, links, bulleted lists and more using basic formatting blocks.

Meet the block editor. The block editor is how you edit pages and posts (including People, Places, Items and Events). Just type or paste your content into a paragraph block and use the settings toolbar at the top of the block to format it or transform the block into a new content type.

See the guide to the new block editor »


Jump to a section below:


Styling and formatting text

Avoid the Classic Block: You may be tempted to use the Classic Block, which resembles the old default content editor. However, the Classic Block should only be used when converting pages into the new page builder, which uses blocks. Use of the Classic Block is not supported, and page features using this block may break in the future.

Learn more about converting pages to the new page builder »

Paragraph block

As the foundation of the block editor, you will use the paragraph block for the majority of your formatting.

How to use the paragraph block

  1. Add a paragraph block to the page or post you’re working on (or simply begin typing on the page!).
  2. Add basic styling (bold or italics) and alignment options by highlighting the text and selecting from the toolbar at the top of the block.

Special formatting styles in the paragraph block

Select Styles from the panel on the right to apply a special format to any paragraph block:

  • Disclaimer:

    Used at the bottom of a page for legal text, disclaimers or footnotes, disclaimer text will appear in italics and smaller than the body copy.

  • Lead:

    Typically used at the top of a page to format two to three lines of text in larger, gray text.

Pro Tip: Pressing Enter/Return will create a new paragraph block. To add a soft return (a line break within the same block), hold Shift + Enter/Return.

Callout box block

Use a callout box to call out related or important content in a light green box. (You’ll see several examples on this page!)

Heading block

The WashU 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.

How to use the heading block

  1. Add a heading block, or transform a paragraph block into a heading block. Learn more about transforming blocks below.
  2. To change the heading level, click the Heading Level dropdown in the top toolbar, or select Heading Settings in the right panel.
Top Toolbar Block Settings
Right Panel Block Settings

Consider headings and subheadings as an outline that help structure and organize your content:

  • The page title is automatically formatted as a Heading 1 — H1.
  • Within the body content, start with Section Heading 2 — H2, and subsections and the subsequent headings (H3, H4, etc.) only if you need to subdivide larger sections (like the levels of an outline).

For example, on this page, “Formatting text” is the Page Title — H1, “Styling and formatting text” is Section Heading — H2, “Heading block” is Subsection Heading — H3 and “How to use the heading block is Subsection Heading — H4.

Best Practice
Use the heading presets! Avoid using bold, underlining, colors and other text formatting changes to created your own heading styles.

Conversely, only use the heading presets for sections headers. Make use of the other blocks to create eye-catching text that is not a section header.

See best practices and examples for using headings »

List block

Lists are useful for organizing and summarizing key information or outlining a high-level ordered list with substeps (like this tutorial!).

Ordered lists

  1. A numbered list is an example of an ordered, styled list.
  2. When to use: Use numbered lists to outline steps that should be performed in a specific order.
    1. You can style subtasks of any list type in an ordered (a, b, c) or unordered (bulleted) format.

Unordered lists

  • A bulleted list is an example of an unordered, styled list.
  • When to use: Use bulleted lists when order may not matter.
    • Unordered lists are useful for listing items like available courses, program benefits, features or notable alumni.

Unstyled lists

  1. This is an example of an unstyled list.
  2. The text is indented, like an ordered or unordered list, but there are no numbers or bullet points.
  3. It might be tempting to use the unstyled list as a way to indent sections of text, but this is not recommended. Lists use semantic code to provide context and meaning for screen readers and search engines. (In plain English: only put content in lists that belong in lists.)

How to use the list block

  1. Add the list block, or transform a paragraph block into a list block. Learn more about transforming blocks below.
  2. In the right panel, select a list style. Style options are Regular or Unstyled.
    • Regular lists use styled icons (numbers or bullet points) to organize information.
    • Unstyled lists are indented and do not use styled icons.
  3. Select unordered or ordered from the block settings in the top toolbar.
  4. Create sublists by indenting an existing list item. Place the cursor in front of the list item you wish to indent and select Indent list item in the top toolbar. If you decide a sub-list belongs as a new list item, you can select Outdent list item.

Inserting and styling links

Link text should be concise but descriptive. Avoid links that say “Click here” or “Learn more” 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 you wish to link.
  2. Click the Link icon (looks like links of a chain) from the top toolbar, or use keyboard shortcut (PC: ctrl + k / Mac: cmd + k).
  3. Add the link’s destination:
    • Linking to a page or post on your site: Start typing the page title and select from the options that appear below.
    • Linking to a page on another website: Insert the full web address in the URL field.
    • Linking to an email address: Type the full email, rather than hyperlinking generic text like “email us” (i.e., Email us at sites@wustl.edu). Then, highlight the email and click the Link icon. Your text will automatically generate a link for email.
    • Linking to a document (pdf, xls, ppt, etc): See tutorial for linking to documents.
    • Linking to a specific section of a page (anchor links): See adding anchor links in our Basic HTML tutorial.
  4. Do not set links to open in a new window/tab (this goes against best practice for accessibility).
  5. Click the apply button ⏎ to save the link.

To remove text links, highlight the link and click the unlink icon from the top toolbar (looks like a broken chain).


Transforming the block style

You can easily transform blocks from one type to another (e.g., from a paragraph block into a list block and back) using the transform icon.

  1. Hover over the block icon (the first icon) in the top toolbar until you see the Change block type or style icon (looks like a pair of arrows). Click the icon.
  2. Under Transform To, select a different block.

Adding images and other media

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

Learn how to add images to pages and posts »

See instructions for embedding content from other websites »