Styles
The PNW CMS implementation leverages purpose-built modules for specific types of content. These modules provide a flexible framework for building many different types of pages. A rich text editor that is similar to popular desktop word processing software is used within many modules, including the Visual Editor module.
Text formats and styles are applied within the rich text editor. An important distinction is the style or look of text versus the underlying structure and hierarchy of a page.
- Heading tags are indicators used in HTML to help structure your webpage from an accessibility and SEO point of view. Heading tags range from H1 to H6 and form a hierarchical structure to your page. Heading tags are pre-styled to match the PNW design, including padding, font size, font weight and text color. Heading tags can be applied to text within the rich text editor by highlighting text and selecting the desired heading from the first drop-down in the toolbar.
- Text styles and formats do not change the HTML structure of the content and are used simply to change the look or display of the content. These can also be easily applied within the rich text editor, using the Formats drop-down box. The options available within the Formats drop-down vary based on the content selected. For example, regular paragraph text has different style options than links.
Heading 2 Example
The H1 or Heading 1 is reserved for the page title and should not be used within the body of the page.
Heading 3 Example
Heading 4 Example
Heading 5 Example
Heading 6 Example
Text Style Examples
Large paragraph for introductory text.
Small paragraph text.
Title
The Title style is useful when a subheading is needed for readability purposes, but not structural or hierarchical purposes.
Subtitle
The Subtitle style is useful to complement the Title or as a standalone style that helps with readability and does not impact the page hierarchy.
All Caps
All Caps is another style that is useful to complement the Title or as a standalone style that helps with readability and does not impact the page hierarchy.
Link Styles
Combinations
Sometimes it is necessary to set the H tag based on a heading’s hierarchical position on the page, but the default style of the heading is not ideal in terms of readability or aesthetic. In these cases, styles and formats can be applied to heading tags without altering the underlying structure of the page.
Heading 2 with Title Style
Heading 2 with Subtitle Style
Heading 2 with All Caps Style
Heading 3 with Subtitle Style
Heading 3 with all caps style
If you cannot see the style options above when logged into WordPress, your toolbar is likely toggled “off.” To change this setting, click the third icon from the right or press Shift+Alt+Z. The icon resembles two rectangles and will read “Toolbar Toggle” on hover.
Additional styles, such as the link styles, will be available in the drop-down box labeled “Formats.”