When developing e-learning courses in Articulate Storyline 360, eLearning designers often look for ways to improve user experience and accessibility.
Two common challenges are:
1. Setting a scroll panel to start at the bottom instead of the top.
2. Customizing closed captions to better fit the course design and improve readability.
Click Preview to watch how to Set Scroll Panels and Customize Closed Captions in Storyline 360.
In this blog, you’ll learn both how to use a simple JavaScript trigger to control scroll panel behavior and how to customize closed captions in Storyline 360 for a professional and learner-friendly experience.
What is Articulate Storyline 360?
Articulate Storyline 360 is a powerful e-learning authoring tool that allows eLearning developers to create interactive, responsive courses with quizzes, animations and multimedia. It’s widely used for corporate training and online education.
Part 1: Setting a Scroll Panel from Top to Bottom in Storyline 360
The Challenge
By default, Storyline 360 scroll panels always begin at the top. This can be a problem if you’ve designed a step-by-step process where learners should start at the bottom, such as beginning with Step 1 and scrolling upward.
Steps to Set Scroll Panel from Top to Bottom Using JavaScript
1. Open your project in Articulate Storyline 360.
2. Preview your slide to confirm the scroll panel starts at the top. Then close the preview.
3. Open the Triggers panel and create a new trigger.
4. Select Execute JavaScript and set it to run when the timeline starts on the slide.
5. Click to open the JavaScript editor.
6. Paste the following code:
var x = document.getElementsByClassName(“scrollarea-area”);
x[0].scrollTop = x[0].scrollHeight;
7. Click OK to save.
8. Preview the slide again. This time, the scroll panel will open at the bottom and allow learners to scroll upward in the correct order.
Part 2: How to Customize Closed Captions in Storyline 360
Why Customize Closed Captions?
Beyond scroll panels, closed captions are essential for accessibility and learner engagement. Storyline 360 allows you to customize how closed captions appear so they align with your course design and brand guidelines.
Customizing captions helps ensure they are:
✔ Easy to read
✔ Visually consistent with your course design
✔ Positioned in a way that doesn’t block important on-screen content
How to Customize Closed Captions in Storyline 360
1. Close the preview and go to the Player tab on the ribbon.
2. In the Player Properties window, click Colors and Effects.
3. Scroll down to the Closed Captions section.
4. Adjust settings to fit your course style:
✔ Text Color – ensure high contrast for readability.
✔ Background Color – add contrast or transparency to blend with design.
✔ Font Style and Size – match your brand guidelines or learner preferences.
✔ Caption Position – move captions to the top if they overlap with key visuals at the bottom.
5. Once you’re happy with the design, click OK.
6. Preview your slide to check the results.
7. If something doesn’t look right, return to settings and refine until the captions perfectly complement your course.
Why These Enhancements Matter For Storyline 360 Project
By implementing these two techniques, you’re not just fixing minor design quirks, you’re significantly improving the learning experience.
✔ Better learner flow: Scroll panels starting at the bottom ensure learners follow instructions in the intended order.
✔ Accessibility compliance: Customized closed captions meet accessibility standards like WCAG and make content more inclusive.
✔ Professional polish: Aligning captions with your brand colors and typography makes your course look modern and consistent.
✔ User engagement: When learners don’t have to fight with the interface, they can focus fully on the content.
Looking for a Learning Management System (LMS) Solution?
We offer Learning Management System (LMS) solutions tailored to your organization’s unique training, compliance, and performance management goals.
Whether you’re a corporate organization, educational institution, or non-profit, we’re here to help you deliver engaging, scalable, and measurable learning experiences.
Summary
Storyline 360 gives you flexibility, but sometimes small tweaks make a big difference. By using a JavaScript snippet, you can control scroll panel behavior and guide learners through your content exactly as planned. At the same time, customizing closed captions ensures your course is accessible, stylish and learner-friendly.
Together, these adjustments improve usability, accessibility and the overall professionalism of your e-learning project.
Now it’s your turn: Try applying these enhancements in your next Storyline 360 project and see the difference it makes in learner engagement.
Frequently Asked Questions (FAQs)
Q1. What is a scroll panel in Storyline 360 and how does it work?
A. A scroll panel in Storyline 360 is a container that holds content allowing learners to scroll through it vertically or horizontally. By default, it starts at the top, but you can use JavaScript to control the starting position.
Q2. What are closed captions in Storyline 360?
A. Closed captions are text overlays that display spoken audio, narration, or sound effects on the screen. They improve accessibility and help learners follow content in noisy environments or for those with hearing impairments.
Q3. Why should I start a scroll panel from the bottom in Storyline 360?
A. Starting a scroll panel from the bottom ensures learners view content in the intended sequence, especially for step-by-step instructions. It improves engagement and reduces confusion.
Q4. Why is customizing closed captions important?
A. Customizing closed captions enhances readability, aligns captions with your course branding and ensures your e-learning content meets accessibility standards like WCAG.
Q5. How can I customize the look and position of closed captions in Storyline 360?
A. Go to the Player tab > Player Properties > Colors and Effects > Closed Captions, then adjust text color, background color, font style, font size and position. Preview to check your changes.
