Page Comparison

Note!

Under the “Getting Started” category you are started with a basic theme, so only a Banner Title element is added to your page. These instructions explain how to go beyond that!

1. Image Added

2. The Edit Current Element tab will open in the sidebar.
   

1. Image Added

2. In the Rich Content Editor space on your page:

   1. A Banner Title template will be automatically added

1. 1. .

   2. Select the Banner Title element if it is not selected.
      

1. 1. Image Added

2. Toggle to full screen editor in the sidebar to give yourself more space to work.
   

1. Image Added

2. In the Sidebar, you will see the Content panel and the Style panels that appear below the Theme tool. 
   

1. Image Added

2. To change the style of your banner Title, open the Style Panel.
   

   Image Added

   
   

   1. Hover your mouse over the different options in the list to view what they will look like.
      

   2. Select a style you want to use.
      

   3. If this is a style you wish to use again, add it to your favorites.

1. 1. Examples:

      Circle Left 2

      Image Modified
      Colored Headings (Box Left) 2

      Image Modified
      Rounded Headings 1

1. 1. Image Added

1. 1. Title element within the Theme Tool (recommended)

1. 1. Image Added

2. Both options take you to the Banner Title Tool and will open the Content panel.
   

   1. The heading level for the Banner Title defaults to heading H2. It is recommended you do not change this as it will impact screen readers.
      

   2. The Name## field appears in the banner header which is referred to as the Prefix. There are 2 parts to the prefix.. This can be used to identify the Module or dates for the page. Enter a prefix identifier for the page, such as “Module” in Prefix1 and the module # in Prefix2.
      

   3. Enter a title for your banner
      

   4. (Optional) Add a Banner subtitle below the title. This will add a new element box below the Banner title.
      

   5. (Optional) Enter a brief description or instructions for this page. This will add a new element box below the Banner Title or Subtitle.

1. 1. Image Added

2. After Adding the information, you can change your style selection if you are not happy with the results.
   

   1. Open the Style panel.
      

   2. Hover of the options available.
      

   3. Make a new selection.

1. 1. Image Added

2. Your final version will be displayed in the Rich Content Editor window.
   

1. Image Added

Below the Banner Title you can add a Banner Image. By default, this image will span the width of the page but you are able to edit it.
To add a banner image:

1. Click on the Theme tool in the sidebar from the Getting Started category.
   

1. Image Added

2. Click on the “+” in front of the words “Banner Image” under the Content panel.
   

1. Image Added

2. A default image will be placed in your page below the Banner
   

1. Image Added

2. The words “Banner Image” will become an active link with a trashcan icon in front of it. You have two options:
   

   1. Click on the trashcan icon to delete the image
      or

   2. Click on the active link to change the image
      

1. Image Added

2. If you click the active link, the Change Image panel will open to the course images folder by default. These are images you have uploaded to your course.
   You have the option to:
   

   1. Select an image you have uploaded
      or

   2. Select the institution image folder and select an image from there,
      

1. Image Added

2. You can modify how the image will display by opening the Style panel. In this panel you can select from a variety of display options for the image as described in "Selecting a Theme".
   

1. Image Added

“home page” that students will use to navigate to other pages, you might want to add a link grid below the banner area to help them in their navigation.

1. Click on the Theme tool in the sidebar from the Getting Started category.
   

1. Image Added

2. Click on the “+” in front of the words “Link Grid” under the Content panel.
   

1. Image Added

2. A default link grid will be placed in your page below the Banner or Banner Image
   

1. Image Added

2. The words “Link Grid” will become an active link with a trashcan icon in front of it. You have two options:
   

   1. Click on the trashcan icon to delete the link grid
      or

   2. Click on the active link to modify the link grid

1. Image Added

2. If you click the active link, in the content panel you now have the ability to make modifications to the link grid. In this panel you can:
   

   1. Increase or decrease the number of links you display. There are four links provided as a default.
      

   2. Enter a name for the links if they are different from the default.
      

   3. Change the icon in front of the link using the Icon Picker.
      

   4. Change the link path (URL) for any modified links.
      

   5. If you need to, you can rearrange the list of links using the drag and drop (six dot) icon in front of the link.
      

1. 1. Image Added

2. You can change the style of the Link Grid 
   

   1. Open the Style panel.
      

   2. Hover of the options available to view the design options.
      

   3. Make a new selection.
      

1. Image Added

1. Image Added

2. Click on

1. Preview Content

1. in the window
   

   Image Modified
   

2. The page display will appear on the left side of your window. Click on the pull-down list that is labeled "Fill Window" and select the screen size you want to preview.
   

1. Image Added

2. The page will be displayed based on the size selected. For example, here we have a view that would be seen on a smart phone.
   

1. Image Added

2. After you are satisfied with the way your page looks, click the Save button in the lower right 
   

1. Image Added