Using the Design Tools Add Advanced Elements

This option will pull details from your Canvas profile and you can add more information as desired. It is important to update your profile photo. See the following guide for details on to update your photo.

• How do I add a profile picture in my user account as an instructor? Links to an external site.

Review the numbered items below. 

1. Edit a page in the course. In this example I am adding this information to the syllabus. I have added a content block called  Instructor information (see Create/Edit tutorial). Place your cursor where you want the information to  display. 
2. Launch Design Tools and select Add Advanced Elements. Select Teacher & TA Details.
3. Select your name to open the details. Your profile picture, name, role, and email will be filled in already. Add your phone number, department, and office hours if desired. 
4. You add the information to the page as content block or at cursor. In this example the information will be added by clicking Insert Details at Cursor. 

When you apply content blocks to a page there is associated icon with heading. You can change these icons from the Add/Rearrange Content blocks from the Create/Edit Content section of Design Tools (see Create/Edit tutorial). You can also add icons anywhere in your content from the Add Advanced Elements. In this example I am using a list with the bullet options turned off. You can accomplish this by selecting the list and using the Customize the Style option (See Customize the Style tutorial). Review the numbered items below. 

1. Edit a page and place the cursor where you wish to add the icon. 
2. Launch Design Tools and select Add Advanced Elements. Select Icons. 
3. You can choose previously used icon or click Insert Icon at Cursor button. 
4. The Custom Icon panel will display. You can search for icon or navigate by category. Select the desired icon. 

The description list option allows you to create glossary of terms. This feature uses the description list element Links to an external site. in HTML.  Edit or create a new page. (1) Place the cursor at the location where you want the description list to appear. (2) Launch Design Tools and click Add Advanced Elements. Select Description List from the list. Click +Add Description List at Cursor. 

The description will be created with one term and description. (1) Update the test for your first term. (2) In the Description List section click +Add Item. This will create another term. (3) Update the text for the second term. Continue this process until all terms have been added. (4) If desired, you can choose to  display the list horizontally.  Don't forget to  save your work when done. 

The HTML snippets feature takes advantage to the Canvas style guide and this allows you highlight information on the page. (1) Edit a page and place the cursor where you want the HTML snippet to appear. (2) Launch Design Tools and click  Add Advanced Elements. Select HTML Snippets. (3) Under the Design Tools core snippets select the desired snippet from the drop down menu. Enter the desired text. Be sure to save your work when done. 

The Accordion and Tabs options help you to split up information on the page into sections that can hidden until the student clicks the accordion or tab. Review the numbered items below. 

1. Edit a page and place the cursor where you wish to add the accordion or tab element. 
2. Launch Design Tools and select Add Advanced Elements and click Accordions/Tabs. 
3. You can choose to add the content as a block or at cursor. 
4. You choose the type of divider to use. As you edit the content, it is easier to leave set to none. 
5. Click +Add Panel to add a divider. Update the text as desired. 
6. When the cursor is in the element, each panel you add will be listed in the accordion/tabs section. You can rearrange the panels as desired. Be sure to save your work.