In this article:
Basic WYSIWYG options
The WYSIWYG editor is the standard tool to add and manipulate content on pages and in blocks. It contains a lot of options:
Some of these may already be familiar to you. In order from left to right, are:
- Bold,
- Italic,
- Strikethrough,
- Remove text formatting, which allows you to remove effects like bolding, italicizing, and strikethrough (it's only clickable if you select text with formatting applied),
- Link,
- Anchor, which allows you to create a link directly to a section of the page.听
- Increase indent,
- Decrease indent,
- Text alignment,
- Bulleted list,
- Numbered list,
- Text hierarchy options, for designating headings ("paragraph" text is the default).
Since these are commonly found in many softwares, we won't cover them here. In general, you'll select your text (or other objects in the WYSIWYG) and click a style to apply it. You'll reverse the style the same way: select the text or object, then re-click the style to remove it.听
Note that text hierarchy is important for screen readers, search tools, and sighted users to understand the structure of your content. Remember to:
- Choose headings according to the structure of your content. Use Heading 2 for your main categories, Heading 3 if you have sub-categories below a Heading 2, and so on. In most cases, you'll always have at least 2 of each heading type, since headings are used to split and categorize content at the same level.听
- Don't skip heading classes. For example, you might prefer smaller heading sizes and be tempted to use the Heading 3 instead of Heading 2 for your first heading. This can be confusing, since it can give the impression that top-level content is missing.
- Only use headings for structural labels that help organize content by topic. Don't use headings for key points or decorative purposes. You'll discover better ways to style text in this article!
Styles options
The Styles menu allows you to customize the appearance of your content. Styles can be applied to blocks, or to text. To use block styles, it can help to use the "show blocks" button, which looks like a little H1 in a square:
Note that you won't be able to apply block styles to heading blocks. But you can do a lot of fun things with paragraph blocks and other content! Let's explore the options.听
Muted
This style will reduce the contrast of your content, making it stand out less.听Using a muted style helps users visually convey the optional nature of some content, so they can distinguish it from regular material on the page.
This is good for:听
- Disclaimers,
- References,
- Footnotes, or
- Other content that must be present on the page, but isn't critical for most users.
Don't听use this for:
- Important information, or
- Lengthy content.
This is because users are less likely to read or pay attention to content formatted this way.听
Lead
The "Lead" style lets you create text that stands out.
This is good for:
- Subtitles under headings,
- Emphasizing an important point, or
- Occasions when you want to use large, decorative text
Don't use this for:
- Headings that structure your layout - these should use heading styles, so that screen readers and other software can recognize them.听
- Content your users don't need or recognize. If users are missing important points on your page, make sure the language is clear and the layout is easy to read before you start making things bigger!
Micro
This is another style that will make content stand out less, by making it smaller.听Similar to the "muted" style, micro helps you reduce the visual impact of information, making other content stand out more.听
This is good for:听
- Disclaimers,
- References,
- Footnotes, or
- Other content that must be present on the page, but isn't critical for most users.
Don't听use this for:
- Important information, or
- Lengthy content.
As with "muted," users are less likely to read or pay attention to content formatted this way.听
Collapse
By default, a table in the WMS will fill the width of the content area it's in:
The collapse option lets you compress a table so that the column widths hug the contents:
This is good for听tables with shorter content in some or all of the columns.听
Table sort
Table sort allows you to activate sorting. This lets users to click a column heading to reorder the rows alphabetically (ascending or descending) based on the content of the selected column.听
This is good for:
- Lengthy tables where users don't need to read all the content to find what they're looking for.
- When the content is clear and concise - sorting by first letter works well for names and categories, but not well for conversational phrases.
Since users will choose whether, when, and how to use the sorting options, there's no risk in enabling it!
Info message
Info messages highlight information or context for the page, or actions users might take on the page. For example, you might use an information notification to tell a user that the content they're looking at will be moved to a new page soon.听
This is good for:
- Announcements,
- New or updated information on a page users consult regularly,
- Temporary changes or exceptional circumstances.
Don't use this for:
- Permanent content,
- Detailed information,
- Content that most users won't need,
- Decorative purposes.
Info messages are meaningful because they're only used when necessary. Don't misuse them or overuse them; this will encourage users to ignore them!
Warning message
Warning messages provide important information which may lead users to adapt their course of action. For example, you might warn users that event registration will close on a specific date.
This is good for:
- Important announcements,
- Key actions users must take, and
- Changes that require users to take action.
Don't use this for:
- Updates or announcements that don't require user action (an info message will be better for this),
- Detailed information, and
- Decorative purposes.
As with info messages, warning messages are impactful because users can distinguish important messages from other content. If you overuse or abuse them, users will learn to ignore them.听
Success message
Success messages indicate that a user-initiated action has been successful. A common example is informing a user that they've successfully submitted a form.
This is good for听confirmation messages and courtesy messages.
Don't use this for听decorative purposes, or for other types of message.听
Presentation stats and presentation caption
This feature allows you to use eye-catching typography to present a short statement or statistic.
The "presentation stats" style uses large typography in the 海角社区 Serif face. You should use this style for the key point or number in your content. The "presentation caption" style uses our sans serif face at a smaller size. Use this for supporting information, which can be placed above and/or below your key point.听
This is good听for:
- Facts,
- Statistics,
- Concise marketing messages, and
- Rendering content in a more decorative way.
Don't use this for:
- Headings or structural elements: these should use heading styles so that screen readers and other software can recognize them.听
- Warning messages or important information: these should use the "messages" styles so they're consistent and easy for users to find.听
- Lengthy content: this feature can take up a lot of room for a simple message. If you overdo it, you page will feel long and it may be hard for users to browse (especially on mobile).听
Box
The box style adds space around whatever it's applied to, which helps that item stand out. This can be used with paragraph text, or combined with other styles like block quotes (shown) or presentation stats.听
This is good for:
- Adding visual emphasis to content,
- Introducing more space in a layout,
- Representing excerpts, quotes, or summaries, and
- Amplifying the effect of other features.
Don't use this for:
- Multiple items in a single layout: a little extra space here and there is impactful; too much will make your page overlong and hard to scan.听
- Critical content: styles like this are typically used for excerpts or summary content, so users may skip over them. A message style (above) may work better for critical information.
UL or OL grid and UL or OL muted
These styles can be applied to lists: "UL" stands for unordered or bulleted lists, while "OL" refers to ordered or numbered lists.
The OL or UL "grid" style transforms each bullet point or numbered item into a box arranged in a grid. In a grid, each item is considered a separate object. This can be useful for screen readers (in contrast to column layouts, where all content in a single column is read together).听
Unlike columns, the grid style adjusts automatically to the content that's used and the width of the screen. This means chunks of content always stack in a neat grid, but there may be variations in the exact column or row placement.听
The grid looks like this:
OL and UL grids can also have the "muted" style applied. The low contrast grid has a subtle background color, so the grid structure is more visible to users:
This is good for:
- Organizing relatively short content,
- Providing a unique display for certain types of list (like steps in a process), and
- As a more accessible alternative to columns for certain layouts.
Don't use this for:
- Critical information:听, the grid may be harder to scan and lead to missed information.
- Content users expect to find in a standard bulleted or numbered list.
- Content where each list item is only a few words - the grid layout will take up a lot of space for very little payoff.听
OL enhanced
This style enhances the appearance of numbered lists (also called "ordered lists," hence the "OL" designation). It helps important lists stand out from other content.听
This is good for:
- Lists that summarize content or link to other pages. The presentation implies that this list is more important or authoritative than other lists that might be used on a site.听
- Helping users through steps in a process.听
- Lists that aren't terribly long (7 or less, give or take).
- Lists that have a longer text. The larger format of the number can help visually balance out lists where each item spans multiple lines. The number size and spacing rules can also help eyes move more easily through this type of list.听
Don't use this for:
- Very long lists (10 items or more), since this format will take up a lot of space.听
- Every list on your site, or multiple lists in the same layout. This is a way to add emphasis to an important list, but it only works if less-important lists use the standard style.听
- Content that doesn't follow a chronological order. These should be represented using bulleted lists or other formats.听
Ghost button
This allows you to turn a link into a button. (We call it a "ghost" button because it's transparent.)
Buttons indicate important actions. Button labels and design choices should be concise and action-oriented: keep text brief, use sentence case, and clearly describe the action that results from a click (for example, "Download the guide" or "Sign up now").
This is good for:
- An action that should stand out in contrast with optional or less important text links,
- A link that would benefit from a large tap target (for example, links commonly used on mobile), and
- Use alongside other buttons. Because the ghost button style is visually "lighter" than other button styles, you can use it more freely in layouts. You can put multiple ghost buttons together, or use ghost buttons in layouts that include other button styles.
Don't use this for:
- Links that give in-context support for content. Linking background material and references directly in your content can be a more powerful and efficient way to share supporting information.听
- Navigation options. Users don't expect to navigate a site this way, so don't use buttons to repeat or substitute for main navigation, drop-down or sidebar menus, or table of contents.听
- Decoration. The button is an action item! You have other options for creating decorative text and layout elements.听
Other options
You might notice some unfamiliar options lower down in the WYSIWYG editor. Let's have a look at these!
Horizontal line
听
The horizontal line icon allows you to (surprise!) insert a simple horizontal line in your layout:
This is good for:
- Separating content types (such as main content from footnotes) within a single page.
- Adding more visual emphasis to separate blocks or content types (for example, separating a block quote from paragraph text).
Don't use this for:
- Turning column layouts into block-like layouts. Although this can be visually effective, screen readers may be less able to distinguish which content belongs together when using columns. Blocks might be a better option.听
- Adding emphasis to important messages. The "message" styles (described above) will be more effective at this.听
Block quote
听
The quotation mark icon lets you create a block quote. This is large, italicized decorative text that can emphasize a quote or other important phrase. You could also pair this with the "presentation caption" style, which would work well for quote context or attribution.听
This is good for:
- Quotes (obviously!),
- Adding emphasis to important phrases or concepts, and
- Creating an impactful presentation of text that isn't structural.
As with other large text styles,听don't听use this for:
- Headings that structure your layout - these should use heading styles, so that screen readers and other software can recognize them.听
- Content your users don't need or recognize. If users are missing important points on your page, make sure the language is clear and the layout is easy to read before you start making things bigger!
Details (Accordion)
The down caret in a square box lets you insert an accordion or "details" box.听Use this component to present a compressed view of content that users can expand to read more.
You can build an accordion by stacking detail boxes, or use a single one to allow users to show (or hide) additional information:
This is good when:
- Users won't need all (or even most) of the content,
- Users know what content they're looking for, and
- There's a moderate amount of content under each heading.
Don't use it for:
- Small amounts of content under each heading. Brief content is manageable using simple headings and text. This will allow users to scan down to what they want, and they can see it without an extra click.
- Content most users would benefit from. A summary followed by well-formatted text is easy to scan and provides better access to content.
- Large amounts of content in each box. Long content benefits from being formatted with headings; these may be easier to read and browse using another tool, like tabs.
Need more help?
All the features of the WMS (including these) are described in detail in the听听(also called the KB). If you're having trouble finding or using a feature, start with the KB!
Still feeling lost?听听to get hands-on help.听
