Masthead Banner and Touts

You may customize the masthead banner - the page-wide horizontal image - at the top of the home page, YL Builder page, or YL Service Center page. The home page only advertisement called a tout can also be customized. These graphics and text can be created independently, uploaded, and changed as needed. Multiple banners can be uploaded and will rotate automatically each day. Below is an example of how they appear in the Your Learning interface.

Masthead and tout example

Masthead images dashboard

For this access, the user must have the Your Learning Security role MASTHEAD IMAGE - ADMIN.

From any Your Learning page, scroll to the bottom and choose YL Service Center. From there, navigate to the Platform settings area and select Masthead images.

Platform settings masthead image tile

The masthead dashboard provides a list of active images by page and option to add a new image. There are tabs for each page that allows a masthead image to be set. The images are sorted by the rotation order which is set by administrators. Each image has the day for it's next display date which is updated at midnight Coordinated Universal Time (UTC). Once active, the current day's image cannot be edited unless another image is first designated as the current day's image. Setting the current day's image is an option only available on the ellipsis (3 dots) menu in the last column of the dashboard.

Though not necessary, consider using multiple images to provide variation and interest to learners. IBM has thirteen images in rotation for the Your Learning home page. Using thirteen images results in a staggered image that provides a different image every day for two weeks, yet doesn't result in displaying the same image on the same weekdays.

Masthead image dashboard

Reorder masthead images

You may reorder masthead images by either dragging and dropping the image entries or by changing the rotation order numbers.

  • a. Click and drag the drag and drop handle drag drop handle for each item to the new position. The numeric assignments will automatically be reordered.
  • b. Change the numeric assignments for the item by entering new number assignments directly. Entering numeric assignments higher than the total number of items will move the item to the bottom of the list.

Add a new masthead image

Prior to uploading an image, use these recommended guidelines when creating banners for the Your Learning platform. Only upload images that your organization is authorized to use.

  • 3200 x 800 px size recommended; 1600 x 400 px minimum (4:1 ratio)
  • JPG recommended for photographic images (e.g., people); otherwise PNG. No animated GIFs.
  • 250 KB file size recommended; 2.0 MB max file size.
  • Keep in mind that some text and elements will display over the top of the left side of the banner image.
  • Avoid adding text to the masthead images. They are not multilingual or accessible.
  • Preview the image on multiple devices (including mobile) to ensure it displays as expected.

Instructions to add an image which meets the above specifications.

  1. From the masthead image dashboard, click add image.
  2. For application choose the page where the image will be displayed.
  3. Click upload to select the image file to be used.
  4. Set the status as active to include it in the active rotation.
  5. Click save.
  6. Once saved, from the masthead image dashboard, on image record entry, click to preview to confirm it displays as expected.

    Masthead image add image

Masthead touts dashboard

For this access, the user must have the Your Learning Security role MASTHEAD TOUT - ADMIN.

From any Your Learning page, scroll to the bottom and choose YL Service Center. From there, navigate to the Promote learning area and select Masthead touts.

Promote tile masthead touts link

The masthead touts are similar to spotlights, designed as a call to action advertisement of courses or programs for all learners or targeted to specific audiences by demographics, job roles or skills. The masthead touts dashboard lists all current active touts, sorted by display order which is set by administrators. If there are multiple touts visible to a learner, the first tout in the display order will be shown. Touts aren't rotating. Touts are only allow for two lines of text. Note that there is only one tout displayed for each learner and the system will take the first matching one according to that learner's demographics, so it's best to put the touts for 'all learners' at the bottom of the list on the Tout management page.

Masthead tout dashboard

Create a tout

  1. From the masthead touts dashboard, click create tout.
  2. Enter text for the first line to be displayed. There's no character limit but should be kept to approximately 40 characters or less to display correctly. The text will not wrap.
  3. Enter text for the second line to be displayed. There's no character limit but should be kept to approximately 30 characters or less to display correctly. The text will not wrap.
  4. Enter the url of the learning activity, digital credential, channel, or site where the learner will find or start the learning. This is the link the learner will be directed to when they click the tout text.
  5. To display in multiple languages, click and choose another language and click add. Multi-language support
  6. Target audience can be all learners or a target audience specified by your tenant's taxonomy. Learn more about setting target audience with demographic filters.
  7. Set the status as active to include it in touts to be currently displayed.
  8. Click save.
  9. Once saved, from the masthead tout dashboard, on tout record entry, click to preview to confirm it displays as expected. It's recommended to check the preview on multiple devices, including mobile.

    Masthead tout add image

Tout example

The following is an example tout specified to only display to learners matching the Country demographics of USA. This option is an IBM demographic selection and your tenant taxonomy may be different.

Tout form example

Published masthead tout on YL home page

Below is the example tout published on the YL home page.

Masthead tout example