Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 46 Next »

Whether you are just beginning your journey with MyClasses or DesignPLUS, this page focuses on getting you started in the design process, 

The Getting Started Category contains tools that let you easily create content pages with basic layouts, while offering the ability to customize the look and feel of your page. The Getting Started Category contains four tools: 

  1. Banner Title: This element adds a header including the page title and other information to the top of the page.

  2. Content Block: This element groups page elements into sections of content.

  3. Template Content: This element adds page templates to content from various sources, for example the template for a syllabus.

  4. Theme: This element applies thematic styling to page elements.



This article will provide you step-by-step instructions on how to create a basic content page using the Theme feature available in the Getting Started Category. To jump to a specific section in this article just click on the name in the list or scroll down. If you just want a refresher on steps to follow, jump to a list of steps by selecting "Summary of Steps". 


Selecting a Theme

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!

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.



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



  3. A Banner Title template will be automatically added to the Rich Content Editor space on your page. 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


Back to List 


Adding a Banner Title

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.



Tip!

Periodically save your page by clicking the red “Save button” at the bottom of the page!

Back to List 


Including a Banner Image

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

    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

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




Back to List 


Adding a Link Grid

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

    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.



    Tip!

    Periodically save your page by clicking the red “Save button” at the bottom of the page!

Back to List 


Previewing Pages


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 the "Preview Content" button



  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 



Back to List 




Visit the DesignPLUS Training Series Tutorials for more videos. For more step-by-step guides, visit the DesignPLUS User Guide. 


  • No labels

Didn't find what you are looking for? Raise a request