Skip to main content
  • Updated

Learning Path Hero Image Widget

  1. Jump to

  2. Use Case Information
  3. Add Widget to Layouts
  4. Where to Add the Widget

 

Learning path pages have a unique hero image widget specially designed with the learning path page layout in mind.

Use Case Information

The Learning Path Hero Image widget will display a large image or photograph on any learning path page. A learning path page will be seen by learners when a user clicks into a learning path after enrolling to start their journey. The text and image for the Learning Path Hero Image Widget is dynamic. For the learning path the user is viewing, the title and description will display with an opaque overlay over the image - all of these fields are set in the learning path content settings. You have the option to choose the size to determine how large the hero image will appear to learners.

LP Hero Image Widget Example_Learner View.png

Tip

To get an overview of specifications for various assets throughout the platform, please reference the Specifications for Assets article.

Add Learning Path Hero Image Widget to Layouts

The Learning Path Hero Image Widget is designed specifically for learning path pages and therefore is only available in one layout: Learning Path Layout. By default, it is the first widget on the Learning Path Layout.

To incorporate or edit the size of the Learning Path Hero Image Widget:

  1. From your homepage, select Design and then Layouts.
  2. Find Learning Path Layout.
  3. Select Actions and then Edit from the dropdown.
  4. From the left sidebar menu of available widgets, select Learning Path Hero Image.

    Tip

    The image, title, and description will dynamically pull for each learning path. Update these fields in the individual learning path content by going to Content > Manage Content > Design.

  5. Choose a size for the Learning Path Hero Image. By default, the size is Large Banner.
    Learning Path Hero Image Size Aspect Ratio Suggested image size
    Large Banner 2:1 2:1 1500 X 750 px
    Small Banner 3:1 3:1 1500 X 500 px
    Title text only 3:1 3:1 n/a
    Custom CSS 3:1 n/a
    Cover Entire window 16:9 1920 X 1080 px

    Note

    If you have selected a learning path hero image size other than the default, we recommend communicating this image requirement to your content creators. On the learning path settings page where hero images are uploaded, we display the following information about suggested image size: Default suggested image size is 1500px X 750px. However, your layout may use another image ratio for the hero image depending on the settings of the Learning Path Hero Image widget in your Learning Path Layout.

  6. Click Save.

If you've just added the widget, your newly designed widget will be easily located at the bottom of your page layout.

Other Editing Options

  • After saving, edit the settings for the widget by clicking the Pencil Icon at the top left of the widget.
  • To reposition the widget on the page, simply click the Carrots on the left side of the widget.
  • To delete the widget off the page completely, click the Trash Can Icon on the right side of the widget.
  • To preview how the widget appears for your learners, click View Preview Mode at the top right of the page. Click Back to Editor Mode to continue editing the page layout.

Tip

After making updates to your page design, we always recommend viewing the final product from a learner's perspective to get the full effect.

Where to Find the Learning Path Hero Image Widget

The following is a list of default Thought Industries page layouts where you could incorporate the Learning Path Hero Image Widget:

  • Learning Path Layout

Related articles