Skip to main content

Outline

This component is NOT recommended for use when creating accessible courses.

The Gif component is a presentation component that displays a Gif image to the learner.

This article provides an overview of the Gif component, component setup, and behavior.

Component overview


The Gif component presents a Gif image to learners when the Gif component comes into view on a page in an Evolve course. The Gif component can be configured to replay when revisiting the course page.

The Gif component is fully responsive.

Component Set Up


To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.


General section

In the General section:

Screenshot showing General settings

Add Title, or a Display Title, as needed. Display Title is seen by learners.

Screenshot showing General settings

Scroll down and add your Body. Use the text editor to style and format your text, as needed.

Screenshot showing General settings
  1. Add Instruction Text that tells users how to use the component.
  2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label.

The Interaction Label allows you to add a widget before or after the Gif component. This widget can display an icon and label prior to the Gif component completion, which changes to a different icon and label once the Gif component is completed.


Gif section

Screenshot showing Gif settings
  1. In the Gif section, you select a Gif to display.
  2. Enable Set Gif Per Device Size, as needed.
  3. Add an Alt Text, as needed.
  4. Add Caption to be displayed below the Gif, as needed.

Behavior section

Screenshot showing Behavior settings

In the Behavior section, toggle Replay Gif to allow Gifs with a fixed iteration count to replay when revisiting a page.

Note: By default, the Replay Gif toggle is disabled.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.