Skip to main content
  • Updated

Image Overlay Tiles Widget

  1. Jump to

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

The Image Overlay Tiles Widget shows a collection of images in a grid on your page.

Use Case Information

Use image tiles to showcase multiple content items on specific page layouts. Add information like the Content Title, Description, or Author, etc. as needed. Tiles and descriptions for the images are displayed on a semitransparent screen on top of the image, which can link to courses, pages, external URLs, or more.

Widgets_ImageOverlay_LearnerView.png

Add Image Overlay Tiles Widget to Layouts

To incorporate the Image Overlay Tiles 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 Image Overlay Tiles widget to a custom page, click Actions and then Design from the dropdown.

  5. In the left sidebar menu of available widgets, select Hero Image Slider Widget.
  6. Select Content Type to display in widget: Dynamically Display Content or Manually Create Content.
    • Dynamically Display Content:
      • Choosing this option allows you to select content individually or through a query. The tiles will update dynamically as changes are made to the content (i.e. title change, description change, image change, etc.).
      • Populate the widget by selecting content individually or writing a query. See our article on writing queries for further guidance.
      Widgets_ImageOverlay_Dynamic_AdminView.png
    • Manually Create Content:
      • Choosing this option allows you to have flexibility on the Item Title, Item Description, Item Image, and the Item Link. Values in these fields will override the display in the content tiles.
      • Add Items by clicking the plus icon button.
      • The items will be sorted in the order they are added.
      Widgets_ImageOverlay_Manual_AdminView.png
  7. Choose Display Options.
    • Title
    • Use New Title Display
      • Adds a CTA button
    • Dynamically Display Content:
      • Populate Widget
      • Content Sort Order
      • Number of Items (max 50)
    • Manually Create Content:
      • Item Title
      • Item Description
      • Item Image
      • Item Link
    • Content Display Options
    • Row Width
      • 1-5 per row
    • Select Sidebar Type
      • RSS/Atom Feed
      • Static Content
    • CSS Classes
  8. 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 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.

Note

Content must be Released in order to display to the learners in Image Overlay Tiles Widgets.

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 Image Overlay Tiles Widget

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

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

Related articles