Skip to end of metadata
Go to start of metadata
Complexity Level: Beginner

This is a beginner topic. Little to no advanced knowledge is required.

Permission Level


This document details how to add shaded backgrounds of color to blocks of text in your website. These blocks are useful for adding emphasis to sections on your web page.


Table of Contents

Step 1:  Select the Text you Want to Add a Background to:

  • Highlight the block of text that you want to add a shaded background to.

Step 2: Select Background Color

  •  While the text is still highlighted, click on the "styles" drop down in the text editor and choose which color you want to use for the background of the text block.
  • You can select from red, dark gray, olympic, white or gray

Once you select the color, it should look like this:

Background Colors

Here is an example what all the different background colors look like.
The color names are provided in each section and should match the name in the styles list. 

Step 3: Adding Space Between Sections

You'll notice when you press "Return" or "Enter" it will simply expand the color block. In order to add space after a section, you will follow the steps below:

  • Hover over the right-hand side of the background block of color
  • A small red box with an arrow in it will appear
  • Click on this small red box and it will add space between the sections

Once you click on the small red box, you will have space to type text without a background color:

Step 4: Click Save

Once you're done, click "Save" at the bottom of the page.