Text Narrative Component

The Text Narrative component lets you build in text blocks that the learner can navigate through in sequence. The Text Narrative component is suitable for displaying sequences of information to learners.

This article provides an overview of the Text Narrative component, component setup and behavior, and examples of Text Narrative component configurations.

Component overview

The Text Narrative component is an interactive component that lets you present sequences of text information to the learners. The Text Narrative component is great for describing company history or technical processes.

The Text Narrative component is fully responsive and is added to your Evolve course as a full-width component.

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, add Title or a Title, as needed. Title is seen by learners.

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

1. Add Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.
3. Add Next Button Aria Label, as needed.
4. Add Previous Button Aria Label, 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 Text Narrative component. This widget can display an icon and label prior to the Text Narrative component completion, which changes to a different icon and label once the Text Narrative component is completed.

Slides section

In the Slides section, you Add Slides to your Text Narrative component.

For each Slide:

1. Add a Slide Title to tell the learner what this Slide is about.
2. Add a Slide Body. Use the text editor to style and format your text, as needed.
3. Choose your text layout. Set layout to the Left, Center, or Right. By default, the text layout is set to the left.

Add, Duplicate, and Delete Slide Items as needed.

Component Examples

The Text Narrative component gives you a lot of flexibility. Below are examples that illustrate different layout choices for your Text Narrative component:

Example 1 – Text Narrative Slide with text positioned to the left.

Example 2 – Text Narrative Slide with the text positioned center.

Example 3 – Text Narrative Slide with the text positioned to the right.

Animations section

In the Animations section, by default, the Slide Items is enabled. This setting animates the next item by sliding in.

Select your animations settings for Fade In Item, Scale In Item, and Easing.

Finally, in the Animations section, the Next Button Animation is enabled by default. This setting displays a pulse animation on the “next” button until it is clicked.

Did this article help?

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