Page Comparison

ID&D KB How-to

Guide

Working together to enhance teaching & learning. If you need additional assistance, please reach out to the ID&D team.

1. 1. Select Advanced

1. 1. Tools using the icon at the top of the Sidebar
      

   2. Select the Style Editor
      

      Image Added

2. Place your cursor into the element on your page that you want to edit.

1. 1. At the top of the Style Editor a list of elements in the content area will appear.
      

   2. Hover your mouse over each element to determine which element you will be editing
      

   3. Select the element

1. 1. you are modifying
      

      select1.mp4

1. To change the color of an element on a page, place your cursor on the page where you want the color added, and open the Style Editor:
   

   1. Scroll down and open the Colors panel

1. 1. 
      

   2. Select the Background Color

1. 1. icon from the bar at the top of the Colors panel

1. 1. (

1. 1. first icon)
      

   2. The current background color of the element will display below the item
      

   3. Open the Basic Colors panel if it is not open
      

   4. Select a new color from the Basic Colors, or
      

   5. Open the Color

1. 1. Picker and select a color you want

1. 1. 
      

      Image Added

2. Repeat this process for any items you want to add a background color

1. . For example, you can add a background color to the heading of the content block:

1. 
   

   1. Place your cursor in the heading element of the content block
      

   2. Select the heading element at the top of the Style Editor
      

   3. Select the Background Color

1. 1. icon from the bar at the top of the Colors panel

1. 1. 
      

   2. Select a new color from the

1. 1. Basic Colors or open the Color

1. 1. Picker and select a color you want.
      
      

      Image Added

2. In this example using the page pictured previously, we changed the background color of the page heading, the background of the heading for the content block, and added a background color to the text in the first content block.
   

1. Image Added

1. Editor, first select the text you will be changing:
   

1. 1. Place your cursor in the field of the element you want to change (in this case the content block header

1. 1. )
      

   2. Select the appropriate element from the item list at the top of the Style

1. 1. Editor
      

   2. Highlight the text you want to change
      

      Image Added

2. Then determine your color choice in the Style

1. Editor:
   

   1. Select the Text Color icon from the Colors panel (

1. 1. second icon)
      

   2. Select the color from the Basic Color table or the Color Picker

1. 1. Image Added

1. using the Style Editor:

1. 1. Place your cursor in the content block

1. 1. you want to add a border around

   2. Select the appropriate element from the item list at the top of the Style Editor – make sure it is for the entire block

1. 2. Scroll down and

1. 1. open the

1. 1. Border and

1. 1. Background panel
      
      

      Image Added

2. Determine how you want a border to appear. Using Border Direction, select where a border will appear:

1. 1. All sides (for a border around the whole item)

1. 1. or

   2. Any combination of individual borders: Top (T), Bottom (B) Left,

1. 1. (L), or Right (

1. 1. R)
      

      Image Added

2. Customize your border using the following options:

1. 1. Determine the width of the border:

1. 1. Small (S), Medium (M), or Large (L), or set a specific size using

1. 1. pixels

   2. Select a Border Style for the line: Dashed, Dotted, Solid

1. 1. Line, or Double Lin

   2. Select a

1. 1. Border Color from the presets

1. 1. (You can change later)

   2. If you want the bordered area to have rounded corners, select a Border

1. 1. Radius: Small (S), Medium (M), or Large (L), or set a specific size

1. 1. in pixels
      
      

      Image Added

2. Customize the area surrounded by the border:

1. 1. Select a background color if you want the area to have a background color (in this example we

1. 1. do not select one)

   2. Select a shadow if you want the bordered area to appear to float on the page
      
      

      Image Added

2. In this example, we have added borders and a shadow to change the appearance of the second content block:
   

1. Image Added

1. 1. Select the appropriate element from the item list at the top of the Style Editor

1. 1. - make sure it is

1. 1. the entire block

1. 2. Scroll down

1. 1. to

1. 1. the

1. 1. Spacing and Alignment

1. 1. panel

1. 2. To set the margin (space between item and edges of page), you can either

1. 1. set them all equally with a preset

1. 1. (Small

1. 1. , Medium

1. 1. , or Large

1. 1. ) or set each margin individually by selecting the cross icon

1. 2. To set the padding within the area (space between edges of item and the content), you can also

1. 1. select from a preset (

1. 1. Small,

1. 1. Medium,

1. 1. or Large), or set each edge individually

   2. You can determine how the items are aligned, floating items to the left, center or right.
      

      Image Added