Add a Banner Image

From Drab to Fab Add a Banner Image

About banner images

A banner image is a captivating photo or illustration near the  top of a web page, providing visual context for the content that follows. You’ll commonly find banner images on course home pages and module overview pages. In DesignPLUS, the banner image element sits just below the banner title by default.

​

Banner Image Tips

  • Aspect ratio and size: Cidi Labs recommends using images with a 10:3 aspect ratio or dimensions of 1100 pixels (width) by 330 pixels (height). Seek out large images that will still look great when cropped to this size.
  • Vertical space optimization: If you prefer to conserve vertical screen space, consider reducing the image height to 220 or 110 pixels while keeping the width at 1100.
  • Text in images: For accessibility, avoid using images with text meant to be read (such as course titles or numbers). Instead, convey essential course information through the banner title positioned above the image. However, photos or drawings of objects containing text (like handwritten manuscripts, books on a shelf, or musical scores) are acceptable as long as students don’t need to read the text within the image.
  • Copyright Considerations: Remember that you’re responsible for ensuring the image is either in the public domain or used in compliance with any associated license or copyright.

 

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. Select icons for the top-level section headings (H3's) on this page.

 

Exercise: Add a banner image to a page

This exercise has two parts. First, you'll find and download an image. Then you'll edit the image and add it to this page.

Part 1: Find and download your image

  1. If you don't already have an image you want to use for the banner image, you'll need to look for an appropriate image online. We recommend using Adobe StockLinks to an external site. or one of the following open source images libraries.
  2. Use the search feature of your selected image repository to find images that convey the topic or idea that you want the banner to represent.
  3. When you find images that you may want to use for your banner, save them to a local storage device with meaningful names.

Part 2: Edit, upload, and embed the image

  1. If this page isn't already in edit mode, click Edit to modify this page. Then return here.
  2. Place your cursor within this page’s banner title. 
  3. In the Sidebar main menu, select the Edit Current Element (  ) tab. Then choose Theme as the active tool.

    The Edit Current Element Tab with Theme selected as the active tool.
  4. Open the Content panel if it's not already open and click the Add Banner Image (  ) button. A placeholder banner image will be added to the page.
    The Content Panel for the Theme tool with the Add Banner Image button highlighted.
  5. Click the placeholder banner image to select it. You should see a colored border and selection handles around the image.
  6. In the Canvas editor toolbar, click the Apps icon () and select Upload/Embed Image tool. The Upload/Embed Image tool window will open.

    Note: if you do not see the Apps tool, click the More (︙) icon to expand your toolbar.
  7. When prompted for Image Source, choose Computer. (Note that you can search for images directly in Unsplash or Pexels from this interface as well.)
  8. Drag and drop one of your downloaded image files onto the upload window. Or, click the link to browse for and upload your file. Your image will load into the Upload / Embed Image window.
  9. At the upper left of the window, choose the Crop tool to view the crop tools:
    Screenshot of the Crop icon in the Cidi Labs Upload / Embed Image tool
  10. In the bottom left corner, open the Image Ratio menu and select the 10 x 3 option.
    Screenshot of the Image Ratio menu in the Cidi Labs Upload / Embed Image tool
  11. A 10 x 3 region of the image will be selected. Use your mouse to adjust the selection to the desired area for the banner and then click the Crop Image button.
  12. You’ll be taken back to the Image Size screen, where the image should have been automatically resized to 1100px x 330px.
  13. At the bottom, fill out the following fields:
    • Name: Provide a descriptive name for the image in the Canvas Files tool
    • Alt: Add alternative text that describes the image content for accessibility purposes.
    • Location: Specify the folder in the Canvas Files tool where the image should be stored.

      Screenshot of the Image attribute fields in the Cidi Labs Upload / Embed Image tool
  14. Click the Upload and Embed button. Your image will be uploaded to the selected location in Canvas Files and embedded on the page, replacing the placeholder image.
  15. If you are satisfied with the image, save the page. If not, find a different image as described in part 1 above. Then select the current banner image and repeat steps 6 - 15 in part 2.

Whew, that was a lot of steps! Ready to move on? Click Next to learn how to add a course or module navigation menu below the banner image.