Skip to content

How to Customize a Scrolling Panel in Articulate Storyline

Recently, a client asked us to add a message from its CEO, which included an image, to all courses implemented by them. The content (message) was too heavy to fit on the screen, and the only option is to add a scrolling panel, so that learners can scroll to read the content.

The client accepted the scrolling option, but asked us to match the color of the scrolling panel with the interface.

We don’t have a default option in Articulate Storyline, for this. The only thing we can do is customize.

In this post, I would like to share the steps to add a custom scrolling panel for which you can add the required color to match with the interface (GUI).

Step 1:

Create your eLearning course, as per the requirement.

As per requirement - Step1

Step 2:

Develop a HTML page with your contentand a scrolling object. Format itusing CSS, as shown in the screenshot below.

HTML-Page setup

Make sure to save the HTML file as index.html.

Step 3:

Go to the Insert tab and select theWeb Object option to insert index.html file.

Insert tab-step3

Step 4:

In the window opened, paste the location of index.html file. You can even browse for its location.

Step4 - Insert web object

Step 5:

Adjust the size and position ofthe Web Object on the screen. You can even placea portion of the Web Object off the stage. However, the output remains the same.

Adjust file position

Step 6:

Publish the eLearning course and check the output.

For WebKit browsers (Chrome and Safari)

Webkit browers - step6

For IE

IE - step 6

These are the 6 simple steps to add custom scrollbars in Articulate Storyline.

Hope you find this post useful. Do share your views.

Authoring Tool Finder - Find the Best Suited Authoring Tool for Your Needs