Skip to main content
  1. Thought Industries
  2. Design
  3. Widgets
  • Updated

Hero Image Widget

  1. Jump to

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

 

Create a lasting impression with your learners by implementing the Hero Image widget onto numerous Thought Industries page layouts.

Use Case Information

The Hero Image widget will display a large image or photograph on your page. You can also add text by using the Title and Subtitle fields, or a call-to-action button to link the image to a URL. If you enter text in these fields, an overlay screen will automatically be added across the bottom of the image to increase readability. You can input several versions of the image for optimal browsing on multiple devices. The recommended dimensions are 1500 pixels wide for large screens, 800 pixels wide for standard, and 600 pixels wide for mobile.

Widgets_HeroImage_Dashboard_LearnerView.png

Tip

The platform will typically display the required specifications for assets. To get an overview of specifications for various assets, please reference the Specifications for Assets article.

Add Hero Image Widget to Layouts

To incorporate the Hero Image Widget onto a standard layout or a custom page:

  1. From your homepage, select Site > Site Builder.
  2. In the left menu, select Layouts.
  3. Choose from the provided default page layouts.
  4. Select Actions and then Edit from the dropdown.

    Note

    If you want to add the Hero Image widget to a custom page, click Actions and then Design from the dropdown.

  5. From the left sidebar menu of available widgets, select Hero Widget. HeroImageWidget_AdminView_GIF.gif
  6. Optionally, title your Hero Widget and/or provide a subtitle.
  7. Following the specifications for each container, choose your image to upload or drag and drop.

    Tip

    Best practice is to load all three containers with your image.

  8. Optionally, provide any custom code you wish to add to the widget, as well as, a call-to-action if needed.
  9. Click Save.

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 up/down arrows 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 Hero Image Widget

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

  • Homepage
  • Video
  • Transcript
  • Article
  • Support
  • Registration
  • Redemption
  • Learning Path
  • Dashboard
  • Catalog
  • Custom Pages

Related articles