This template shows a basic page with a 1-column offset. It also demonstrates different image formats. Images can be added to any of your pages to create visual interest and help break up text-heavy courses. This page illustrates the different ways images can be used.

You can do one of the following:

  • Replace the images and text on this page
  • Follow the directions below to insert new images on other pages
  • Copy the image alignment samples from this page and past them to other pages

Replace Image

This template comes with some image placeholders. To replace the image:

  1. Select the image and delete it (Note: Do not move your cursor)
  2. Click the Insert Image icon
  3. Select the source of your image
  4. Click the Choose Destination button to save it to the folder you want

Recommendation for banner image size: at least 1200 pixels wide and 400 pixels high.

Insert New Image

Inserting your own image is simple. Once in the Edit HTML mode, you can use Insert Image to add an image. If the image is not the right size, you can edit it using the inline image editor.

Inline image editing

Info The HTML editor now has advanced image editing features, including resizing, flipping, rotating, and adjusting brightness, sharpness and color.

Image Alignment

The HTML editor provides Align Left, Align Right and Align Full functions to place an image in particular location.

For example, if you want your image to appear on the left with the text wrapping around it:

  1. Insert your image on the empty line before the paragraph
  2. Crop the image or set its dimension to your desired size
  3. Apply Align Left on the selected image

Samples

To copy any of the following alignment options, please select everything between "start copy" and "end copy" for the specific element, then copy and paste into the HTML Editor.


Align Left start copy

placeholder
Caption, link example

Image Align Left

Floating image to the left with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image.

Remember to adjust the heading level according to your content.

end copy Align Left


Align Right start copy

placeholder
Caption, link example

Image Align Right

Floating image to the right with text wrapping around it. You can replace the image and text with your own. The text area below the image can be used to include a caption, which describes the important content displayed in the image.

Remember to adjust the heading level according to your content.

end copy Align Right


Image Align Full

Align Full start copy

Large image will automatically adjust to its parent to fit small screen size. Recommended image size: at least 1200 pixels wide.

placeholder
Caption, link example

end copy Align Full