Text Formatting & Styles

Creating Text on a Web Page

Omni CMS uses a variety of text styles and formatting options to help create what is referred to as content hierarchy. This hierarchy not only helps distinguish content on your web page, it plays an important role in accessibility. Text styles and proper use of headings — the larger "titles" on a page that usually title different sections — are essential for accessibility so that website visitors using assistive technology to view our site have equitable access to your page content.

The Difference Between Formatting & Styles

A computer mockup with the Omni WYSIWYG text styles dropdown toolbar expanded on the screen.

Formatting Dropdown Tool

Formatting is a dropdown option available inside your WYSIWYG toolbar — the toolbar at the top of your editing screen when your page is checked out in Omni — and allows you to change any highlighted text to a different heading or text format. This is typically what makes up the hierarchy of your page when headings are used in combination to identify different sections or important content areas. The most common type of formatted text on a page is the Paragraph option which is what you're reading right now.

Styles Dropdown Tool

Styles allow you to creating further styling of your text. Styles are meant to be used in combination with your text formatting. For instance, if you wanted to make your H2 (Heading 2) smaller, you would begin by typing out your text that you want to be made into a heading, highlighting it, selecting the Heading 2 option from the formatting menu and then applying the SMALL HEADING STYLE in the adjacent Styles dropdown.

Here is an example:

Heading 2 with a Small Heading Style

Types of Formatting

In this section you will see examples of all our text formatting options that are available to site editors along with notes for recommended uses. Please note that this page may contain accessibility errors in order to demonstrate how formatting is used. Site editors will also see additional formatting options inside their dropdown that are not covered in this section. These format options are typically reserved for advanced administrators and should be be avoided by standard site editors.

H1 Heading

This is also your Page Title which can be customized under Properties > Page Parameters. When you create your page, this H1 tag will be automatically created and placed at the top of the page. It cannot be formatted or styled. H1s are critical to Search Engine Optimization because it allows Google and other search engines to read your H1 and display it in a user's search results. Never turn off your Page Title (H1) and never add additional H1 headings to your page as this can also create accessibility violations. It is only shown here to demonstrate what this looks like on a page.

H2 Heading

H2 Headings are an important part of creating page hierarchy. Each editable content region inside Omni — also known as a "sections" — should always contain an H2 at the top of the section to identify what type of information is in the section. Not only does this create excellent usability for a site visitor, it also helps screen readers identify important sections of your web page so that someone using assistive technology can easily navigate your content.

H3 Heading

H4 Heading

H5 Heading

H6 Heading

These additional headings are also used to give prominence to content areas on your page. While you can use multiple headings in the same section, all headings must appear in chronological order inside a single section so that screen readers know what order to present page content to people using assistive technology. Try the WAVE accessibility plugin tool for your Chrome browser to see if your page meets these mandatory accessibility standards. If it's not, take some time to correct these so you can provide an equitable experience to all website users!

Standard Paragraph Text
The most common type of text formatting on a page is Paragraph. This text is in a dark brown color when placed on white, gray and gold backgrounds. Likewise, it will be in white on dark backgrounds. Since this is the default format, all you need to do is type your words and press Return (OS) or Enter (Windows) to create this formatting. Paragraph text can then be formatted to be bolded, italicized, hyperlinked, bulleted, etc. This is also the default format of text when you first add words onto your page. For help formatting your standard text with some of these options, visit our WYSIWYG toolbar tutorial.

Block Quote Text
This text is about one and half times the size of standard text and contains a small vertical "bar" to the left of the text. This can be achieved by highlighting your standard paragraph text and selecting the Block Quote Text option from the formatting dropdown menu. This can be a great way to emphasize a couple of sentences on your page.

_{Important Note: Never copy and paste into Omni CMS directly from an external source (such as Microsoft
Word, other web pages, etc.) Always copy your desired text, paste it into a plain
format editor such as Notepad (Windows) or TextEdit (OS), recopy the text and then
paste it into your Omni editor. This ensures extraneous formatting is not accidentally
copied into hidden HTML code within your web page which can be difficult to eliminate
by standard site editors.}

Types of Styles

As we covered in the beginning of this page, styles allow you to achieve even more styling of text after your formatting has been selected. Additional tutorials have been linked to help you learn more about how to use these styles. Site editors will also see additional style options inside their dropdown that are not covered in this section. These style options are typically reserved for advanced administrators and should be be avoided by standard site editors.

H2 Small Heading

H3 Small Heading

H4 Small Heading

H5 Small Heading

H6 Small Heading

Small heading styles can be applied to any heading, though it is most commonly used with H2 and H3 headings. When applied to a heading, it will capitalize all the characters in the text and will change the size of the heading. This is a great way to downsize your headings and maintain your chronological order if you're not satisfied with the size of the plain heading formatting. As you can see, this style creates a similar size and look among Headings 2-6.

Large Paragraph Text

Large Paragraph Text is...well, large! It's intended to create small callouts (only 2-3 words max) so that your text appears larger on your page but is not confused for a heading (remember — screen readers need to identify the hierarchy of pages using headings). It is not recommend that you create large blocks of texts and apply the Large Paragraph Text formatting as it can be difficult to read. To create large text, highlight a few standard paragraph words and select the LARGE PARAGRAPH TEXT option from the Styles dropdown menu.

Brown Button/Gold Text Gray Button/Black Text

Buttons can be achieved through the use of styles, however it should be noted that site editors can also use the (ANY PAGE) Button with Two Color Options component which many find to be much easier to edit. However, if you wish to use this style, simply highlight the text you wish to change to a button (usually less than 3-4 words) and then select one of the two button options in the styles dropdown menu of the toolbar. With the text still highlighted, you can then add a link to your button. Since this can be tricky to create, we highly recommend using the button component whenever possible.

Bulleted List on White Background

Item 1
Item 2
Item 3

While you can create standard bulleted lists from the WYSIWYG toolbar, you can further style bulleted lists which many site editors find more attractive. You will most commonly use the List on White style option, however you may have the need to create different colored bullets if you are using a Gold background color or a parallax which has a dark overlay. This helps keep your styled bullets from containing accessibility contrast errors. This option does require additional knowledge so be sure to visit our styled bulleted list tutorial to see how these styles are applied to a bulleted list.