HTML Editor: Page Layout

1. About: Layout Tools

The HTML editor contains a number of tools that allow you to adjust the alignment of your text and add numbered and bulleted lists as well as lines.

Note: These tools embed code into your text that help screen readers navigate the content. We recommend using them instead of the space bar, tabs, number, or other keys to align your text or create lists.

toolbar with alignment tools circled

 

Close

2. Add or Remove: Indents

Use the toolbar to indent and outdent blocks of text.

  1. Place your cursor where you want to add an indent.
  2. Click the Indent icon to move the text to the right.indent button

    Note: Click the Indent button twice to double-indent, three times to triple-indent, and so forth.

  3. Or, click the Outdent icon to move the text to the left.outdent button

     

  4. When you hit the enter key, your next line of test will retain the alignment. 
  5. When you are finished, use the Publish (or Update) button to save your work.publish button
Close

3. Create: A Bulleted List

Use the toolbar to add bullets to your text. The spacing and alignment will be handled for you.

  1. Place your cursor where you want to add a bullet.
  2. Click the Unordered list icon.unordered list button

     

  3. Enter your text.

    Note: Any time you hit enter, a new bullet will appear on the next line. If you want to end the bulleted list, hit the enter key twice.

  4. To remove a bullet, place your cursor anywhere on the text and click the Unordered list icon.

    Note: To move your list to the right or left, use the indent icons.

  5. When you are finished, use the Publish (or Update) button to save your work.publish button
Close

4. Create: A Numbered List

Use the toolbar to add a numbered list. The spacing and alignment will be handled for you.

  1. Place your cursor where you want to add the number 1.
  2. Click the down facing-triangle to the right of the unordered list icon.dropdown arrow

     

  3. Select the Ordered list option from the menu.ordered list option

     

  4. Enter your text.

    Note: Any time you hit enter, a new number will appear on the next line. If you want to end the numbered list, hit the enter key twice.

  5. To remove a number from within a list, place your cursor at the start of the associated line of text, and click the Backspace key.

    Note: To move your list to the right or left, use the indent icons.

  6. When you are finished, use the Publish (or Update) button to save your work.publish button
Close

5. Change: Text Alignment

Use the toolbar to right, left, center, of full align a block of text. The line spacing is automatically handled for you. It is possible to use different types of alignment within a single HTML page.

  1. Place your cursor where you want to start the new alignment.
  2. Click the down facing-triangle to the right of the unordered list icon.drop down arrow

     

  3. Select one of the alignment options from the menu.text alignment options in menu

     

  4. Enter your text.
  5. When you are finished, use the Publish (or Update) button to save your work.publish button
Close

6. Insert: A Horizontal Line

Break up sections of text by inserting a horizontal line. You can make the line as wide or as tall as you would like.

  1. Place your cursor where you want to locate the line.
  2. Click on the Insert Quicklink dropdown menu.dropdown arrow

     

  3. Select Insert Line.insert line option

     

  4. In the HR rule box, enter the following information:
    • Width Value: must be a value greater than 0

      Note: We recommend 98% for a line spanning the entire width of the page.

    • Line Height: must be a value greater than 0.line option examples
    • Display Shadow: checked by default, uncheck if you want to remove the shadow.line formatting screen
  5. Click the Create button.create button

     

  6. When you are finished, use the Publish (or Update) button to save your work.publish button
Close

Back to Top