Add a Link Grid

About Link Grids

Looking to add a sleek navigation menu to your course home page or module overview pages? Look no further than the Link Grid tool!   A link grid is a collection of hyperlinks organized into an attractive grid pattern that matches your selected theme.  

Link grids can be inserted anywhere on the page.  When you use it as part of a DesignPLUS theme, the link grid sits right below the banner title (or banner image, if you’ve got one), providing quick access to key elements of the course or module.

Practice what you've learned

Time to practice your skills.  If you need help, open the DesignPLUS Task Instructions page in a new browser tab.  

1. Apply the theme you selected previously to the current page.
2. Add a banner image to this page.

Exercise: Add a link grid to the page

 Keep the tips below in mind as you construct your first link grid:

1. Click Edit to modify this page, then return here.
2. If the Sidebar isn't already visible, turn it on.
3. Place your cursor in the banner title of this page. 
4. In the Sidebar main menu, select the Edit Current Element (  ) tab. Then choose Theme as the active tool.
   
5. Open the Content panel if it's not already open and click the Add Link Grid (  ) button.
   
   
6. A link grid with 4 default links (Start Here, Syllabus, Modules, and Resources) styled to match your selected theme will be added beneath the banner image on the page.  
   
   
   (Don't worry!  After you save the page, your link grid will look more like this.)
   
7. Now it's time to customize the grid with your preferred link and icons.  Place you cursor anywhere within the link grid element.  Then, in the Edit Current Element (    ) tab, select Link Grid as the Active tool.
   
8. In the  Edit Current Element (    ) tab, open the Content panel if it's not already open.  Use the following controls in the Content panel to customize the links and icons in the grid:
   
   
   1. Use the the Items textbox to set the number of links in the grid by entering a number in  or clicking the + or - keys.  
   2. Use the Alignment icons ( left [   ], center [  ], right [   ], and default [  ]) to set the alignment of the links  text in the grid.
   3. Click and drag the Drag Handles (   ) or use the arrow keys to rearrange the order of the links.
   4. Click the Icon Picker (   ) button to select an icon for each link.
   5. Use the Item Name textboxes to revise the text for each link.
   6. Click the Clear (   ) icon  as needed to clear the link text for a link so you can replace it.
   7. Click the Link  (   ) icons  set the destination for each link.
      Link Setting Notes:
      1. Should you decide keep to the Syllabus and Modules items in the grid, you can leave the underlying links as is.  The link destinations are already configured properly.
      2. To use the Start Here and Resources items, you'll need to create Canvas pages or content items that will serve as the destinations for these items. Then set the link destinations to point to your newly created content.
      3. When you click a Link (    ) icon in the link grid, the active tool will change from Link Grid to Link.  In the Content panel for the Link tool, use the Course Links menu (a, below) to select a page or other course content as the destination of the link.  If the link will take users to a page or site outside of your Canvas course, paste the URL in the Link textbox (b).  If you want the link to open in a new tab, check the Open in New Tab box (c, strongly recommended for external links).
         
      4. After setting each link destination, you'll need to reselect Link Grid as the active tool to continue editing the link grid.
   8. Click the Delete (  ) icon as needed to delete a link from the grid.
9. After customizing the links in the Content panel, open the Style panel for you link grid.  Use the controls to determine how many links should display per row on a large screen (a, below), medium screen (b) and small screen like a mobile device (c). 
   
10. When you are finished setting both the content and the style for the link grid, you can preview how it looks with different screen sizes.  Open the Sidebar More Options ( ) menu (a, below), select Preview Content, and click the Preview Content button (b).  
    
    
    A Content Preview screen will appear over your existing content.
11. On the Content Preview screen, use the dropdown menu to preview your link grid at different screen resolutions.  It may be necessary to adjust the total number of links, the number of links per row, and/or the link text lengths to get it looking right for all screen sizes.  
12. To close the Content Preview page, click the close (   ) at the upper right of the page.
13. If you were satisfied with your link grid, save the page.  If not, you may resume editing.
14. Save the page when you are finished.

Whew, that was even more steps than adding a banner image! When you are ready to learn how to add a module progress bar like the one on the bottom of this page, click Next.