An acronym for “what you see is what you get”, a WYSIWYG editor is a component that allows you to populate, edit, and format content in a form closely resembling the final layout of the rendered text. It has a number of built-in markup options and a familiar interface—allowing for significant flexibility. The WYSIWYG editor is capable of styling many different elements.

General Usage

The WYSIWYG Block is often the first building block in the content region of a page, but it doesn’t have to be. It’s possible to have more than one WYSIWYG block per page which makes it possible to break up long texts into two or more content areas with other more visual building blocks in between. A varied content layout is easier for your readers to scan ¹ and parse ₂.

Warning

Be careful when pasting content from other word processors. The resulting text can be formatted in unexpected ways. If you do paste in from outside, always check the underlying HTML code to see if hidden formatting markup needs to be cleaned out.

Accessibility Note

To ensure you are creating accessible content when formatting text in the WYSIWYG Block, be sure to follow WCAG headline use guidelines. 

Be sure to follow best practices when naming files, using alt text, and creating transcripts. WCAG 2.0 guidelines require the inclusion of descriptive alt text for images and transcripts for videos. When captioning videos, write descriptions that summarize the most compelling and important points contained within the video to encourage users to view the item.

Headers

Headers 2-6 help break up the page into logical priority and hierarchy. As such, they should always follow a sequence. Header 1 is designated for the page title and appears at the top of each page. Header 2 and below are to be used for organizing body copy.

Header 2

Header 3

Header 4

Header 5

Header 6

Inline links

Hyperlinks can be added to words or phrases for when you need to link out to something within paragraph text. Inline links can be to internal pages, external locations, or pdf files.

Bulleted and numbered lists

• Bulleted (Unordered) lists are great for breaking up long paragraphs
• that mention many items broken up by commas,
• or anytime you have a number of equally important items within a particular category.

1. Numbered (Ordered) lists are great
2. for breaking up sequences of information in a process,
3. such as application steps.

Tables

Tables can contain as many rows as you like, though you should limit the number of columns to 4 if possible (though more will still work, they will horizontally scroll). The alternating row coloring will happen automatically.

Blockquotes

Blockquotes are a good way to pull out a particularly salient quote or line from a larger body of text. They are useful for news stories where you want to draw the user’s eyes to a key point or quote. Blockquotes are different from testimonials, though they both serve a similar purpose.

“Testimonials are a more visual quotation and are presented in groups, while blockquotes are intended to be in-line with other paragraph body text.”