Add a Custom Banner Image

[   User Guide Navigation]

Page Design & Structure Add a Custom Banner Image

Rather than using one of the images from the DesignPLUS image library for your banner image, you may prefer to use an image from Adobe Stock, another online image source, or a personal photo or image that you created. 

Custom Banner Image Tips

  • To ensure accessibility, avoid using text in banner images. Instead, use the Banner Title element to convey important information about the course or page.
  • Cidi Labs recommends using images with a 10:3 ratio with an image size of 1100px (width) x 330px (height). Larger, higher-resolution images will require more storage space and take longer to load. You can use the DesignPLUS Upload/Embed Image tool to crop your image to the appropriate size.
  • You are responsible for ensuring that the image is in the public domain or that your use of the image is in compliance with the terms of use for any license or copyright attached to the image.

Instructions

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 Stock or one of the following open-source image libraries.
  2. Download the image to a local storage device.

 Add your custom banner to the page

The easiest way to replace a placeholder banner image with an image that has not yet been sized is to use the DesignPLUS Upload/Embed Image tool.

  1. If your page does not already have a placeholder banner image, follow the instructions in Add a Banner Image to add one.
  2. Click the placeholder banner image to select it.
  3. In the Canvas rich content editor toolbar, choose the Apps tool ( ) and select Upload/Embed Image tool. The Upload/Embed Image window will open. Note: if you do not see the Apps tool, you may need to click the More (︙) icon to expand your toolbar. If this is your first time using this tool, you will be asked to click Authorize the tool.
  4. When prompted for Image Source, choose Computer. Note that you can search for images directly in Unsplash or Pexels from this interface as well.
  5. Drag and drop your file onto the upload window or click to browse for and upload your file. Your image will load into the app.
  6. At the upper left of the window, choose the Crop tool to view the crop tools:
    Crop Tool
  7. At the bottom left, open the Image Ratio menu and choose 10 x 3.
    Image Ratio menu
  8. A 10 x 3 region of the image will be selected. Use your mouse to move the selection to the image region you want to include in the banner and click the Crop Image button.
  9. You will be returned to the Image Size screen, and the image should have been resized automatically to 1100px x 330px.
  10. At the bottom, enter a Name (this is the name the image will have in the Canvas Files tool), the Alt text for the image, and the folder Location in the Canvas Files tool where the image will be stored.
    Image attribute fields
  11. Click Upload and Embed. The placeholder banner image on the page will be replaced with your custom image.

Learn More