Creating Basic Content Pages with Themes

To start you should have your new page open and have the DesignPLUS Sidebar open at the Add New Elements tab.

1. Scroll down to the Getting Started category in the Sidebar. Click on the Theme tool.
   
   

   Open

   

   Select Theme

    

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

    

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

   1. A Banner Title template will be automatically added.

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

       

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

    

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

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

   
   
   

   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.

       

      Examples:

      Circle Left 2

      
      Colored Headings (Box Left) 2

      
      Rounded Headings 1

       

Now its time to add your page information to the Banner Title element.

1. To add a title, you have two options:
   
   

   1. Select the Banner Title element from the top panel
      
      or
      
      

   2. Open the Banner Title element within the Theme Tool (recommended)

       

       

       

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.

       

       

3. 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.

       

       

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

    

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.
   
   

    

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

    

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

    

4. 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
      
      

    

5. 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,
      
      

6. 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".
   
   

If the page you are creating is the “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.
   
   

    

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

    

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

    

4. 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

    

    

5. 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.
      
      

    

6. 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.
      
      

    

Sometimes it is helpful to preview a page prior to saving it to check the layout of the content, especially if your students will be viewing it on a variety of devices. This can be done from the DesignPlus Sidebar by doing the following:

1. Click on the settings icon (Three vertical dots) at the top right corner of the blue bar. Select "Preview Content" from the drop-down menu.
   
   

    

2. Click on Preview Content in the window
   
   

3. 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.
   
   

    

4. 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.
   
   

    

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