Follow

How do I style my page with headers and alerts in the CMS?

Styling your web page creates visual organization of your content and two great ways to style your page are through headers and alerts.

 

Headers

Headers are used to organize text into major concepts or ideas. The title of your page will appear at the very top of the page formatted automatically with Heading 1. For the main content of your page, please use Heading 2 through 6 to further organize your text. Use Heading 2 for the main headers of your page. Each subsequent sub heading should be a Heading 3. Sub-sub headings should be a Heading 4 and so on.



The above image illustrates how you might use headings.

  • The text highlighted in yellow is the title of your page.
  • In the main content region, the text highlighted in red are Heading 2s.
  • The text highlighted in orange are Heading 3s.

 

To add a heading style to some text once you are in the WYSIWYG Editor, highlight the text then select the paragraph formatting dropdown.

 

For more on writing headers visit Using Headers.

 

Alerts

Alerts will give your text the appearance of a pop-out information box. There are four styles to choose from:

  •  

    This styling will make your text green, placed over the top of a light green message box, and might be used to indicate something positive.


  • This styling will make your text blue, placed over the top of a light blue message box, and might be used for informational text.


  • This styling will make your text gold, placed over the top of a light gold message box, and might be used for warning messages.


  • This styling will make your text red, placed over a pink message box, and might be used to indicate something dangerous. Think Red Alerts.

 

The following image illustrates how you might use an alert.

To add an alert to some text once you are in the WYSIWYG Editor, highlight the text then select the styling dropdown.

You will need to scroll down to the alerts.

 

Remember the WYSIWYG Editor has a clear formatting feature. If you need to remove heading or alert formatting highlight the text and click the eraser icon.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request
Powered by Zendesk