Skip to content

Page hero sections

Mika Tompuri edited this page Mar 10, 2023 · 4 revisions

This page describes how course authors can page hero sections:

  • Edit background color
  • Change font color
  • Add an image
  • Edit label text (Chapter 1, for example)

How to start editing

  1. Start editing any content page (excluding the front page) through the pages tab in the admin view. See instructions for adding and editing pages.
  2. Click the hero element to highlight it.
  3. Click to expand the Background title on the right side.

2023-03-10_edit_hero

Edit background color

Click Background color element and select a color. You can use the color picker to freely pick a color or enter the color value if you want a specific color.

2023-03-10_hero_bg_color

Change font color

Click the Font color element and select a color. For easy readability, we recommend using black (for light backgrounds) or white (for dark backgrounds).

2023-03-10_hero_font_color

Add an image

  1. Click on the Upload button in Background image element.
  2. Upload an image in the .svg (Scalable Vector Graphics) format.
  3. Make changes to image placement or opacity:
  • Repeat background horizontally: If you have a background image that you want to repeat in a pattern-like manner, check this option.
  • Align center: If checked, image will be displayed centered, under the text. If not checked, image will be displayed to the left of the text.
  • Make background image partially transparant: If checked, the opacity of your image will be slightly reduced. This makes the text on top of the image easier to read in many cases. If not checked, the image will be displayed in full color.

2023-03-10_hero_add_image

Edit label text

If the Use default text for label is checked, the system will automatically fill in the chapter number on top of the page title (for example, Chapter 1). If you uncheck the option, you can type in your own label text or remove the text completely.

2023-03-10_hero_edit_label

NOTE: Always remember to save any desired changes with the save button.