In this video, I’ll show you what scrolling panels are, and how you can use them to create scrollable content in your next Storyline project.
cta under video
What is a scrolling panel in storyline 360?
The scrolling panel in Articulate Storyline is a feature that you can use to show extra content on your slide in Storyline. Now, the scrolling panel can scroll vertically. This way you can, for instance, place a large amount of text on your slide, and you see it with a scroll bar in your preview mode, or when you publish your course. Now, besides text, you can also add shapes, images, buttons, even web objects in your scrolling panel.
How do you make a scrolling panel in Articulate Storyline?
And now you know what a scrolling panel is, let me show you how you can add a scrolling panel in Articulate Storyline. To add a scrolling panel in Articulate Storyline, go to your Insert tab, and here on the right, you will find the scrolling panel option. Click the scrolling panel, and you can drop the scrolling panel on the slide. And if the scrolling panel is on slide, you can resize the scrolling panel by dragging it in the width and height that you need.
Add Objects to the Scrolling Panel
Now, let’s add some objects to our scrolling panel, and the first one is text box. So I’ll go to the Insert tab again, click Text Box, and draw a text box on my slide, and I will type #lorem and six between brackets, and I’ll show you what it does. So type #lorem, bracket, 6, bracket, and I’ll enter it. And Storyline now automatically adds six paragraphs of lorem ipsum text, so this is dummy text. Let’s change the font size a little bit, and it’s okay, and I’ll make it a little bit wider. And now let’s add this text box to our scrolling panel. So you see here on the timeline, I have a text box here and a scrolling panel. Now, I grab my text box, and I drag it onto my scrolling panel, and I’ll release it. And now you see, it’s in the scrolling panel, so it’s no more on the timeline, but if I click here on the triangle before the scrolling panel and I open it, you’ll see the scrolling panel here. And you’ll see here, my text box inside the scrolling panel.
Now let’s preview this slide to show how the scrolling panel looks like in your course. So I’ll go to Preview here, and I’ll preview this slide. So I now see the scrolling panel, the text inside, and you see here the scroll bar. So I scroll, so the whole text is visible. You see that now only the scroll bar is visible, so what you can do is format the scrolling panel, so let’s close our preview right now.
And what I will do, I’ll go to my Format tab and give the scrolling panel a shape fill, for instance, this one, and I can also give it a border, a black border, and I want it to have a weight of one. So let’s preview it again and see how it looks like. So you see now, our scrolling panel has the background and also a border. And you see here the scroll bar. So now you see that the scrolling panel is here and the white area is the rest of our slide. So let’s close our preview right now.
Remove objects from the Scrolling Panel
We’ve added an object to our scrolling panel, but how do we remove an object from our scrolling panel? You’ll select the object in scrolling panel that you want to remove from the scrolling panel, and if you want it outside your scrolling panel, you will grab the object and drag it outside the scrolling panel. And what you’ll now see is Storyline automatically removes it from the scrolling panel, and your object is now outside of the scrolling panel. If your object is inside the scrolling panel and you don’t need it anymore, you can also press, for instance, the Delete key on your keyboard, and the object is deleted off your slide.
Now I said earlier, you can resize the scrolling panel by dragging the width and the height, but you can also go to the Format tab, and here, with width and height, set correct numbers. For instance, I want the height of 500 pixels and a width of 425, so this is okay, and I want it to be centered on my slide vertically.
Now you’ve seen the basics, with one object in our scrolling panel in Storyline. Now let’s add more objects to the scrolling panel.
Insert Multiple objects to Scrolling Panels
I’ll now show you how you can insert multiple objects in a scrolling panel in Articulate Storyline. And the way I normally do this, what I will do is I’ll add two text objects and an image. So let’s start with the text objects. So I can go to the Insert tab, but I also can press Control key on my keyboard. I want some paragraphs of lorem ipsum text, so what I will do is type #lorem and two, and give them Enter, so there are now two paragraphs of text, and I’ll make it a little bit less wide, for instance, 400 pixels, that’s okay. And I can also get a little bit smaller font size, this, okay. This is my first scrolling panel.
Now, let’s add an image. So I’ll go to Insert, I’ll use the content library in Storyline, a nice image of a forest, for instance, forest. I think this is a nice image. So Storyline will now add it to my slide, so I will make it a little bit smaller. You can do this by dragging, but you can also do it on the Format tab here to adjust the width and the height. And what I’ll do now is I’ll copy this text box. So this will be my second text box, and I will place it under my image.
So I want to set the margin left on zero pixels so I can align them all to the left and vertically align them. What I’ll now do is I’ll press Control and G on the keyboard, so I’ll create a group, and I’ll direct the group inside the scrolling panel. And you’ll see here, now in the scrolling panel, here is my group, and here are the different objects. And it show how this looks like when I preview this slide. So you see here our scrolling panel with the text, the image, and the other text box. So what I normally do is I’ll create the content outside of the scrolling panel and then drag it inside the scrolling panel.
I’ll show you that it’s a little bit difficult to add another object, for instance. Let’s say we want to add a button beneath that second text box. So I’ll close my preview, go to Insert, add a button. I can type next into it. If I want to drag it, I cannot drag it here. You see it’s not on my text box, it’s inside my scrolling panel. But it’s a little bit difficult now to move it. I cannot see, because it’s now, we are outside of my scrolling panel. So let’s add it inside my scrolling panel. And what I can do now is I have to adjust the width or the height. So it’s on 483 now, 600. You see it’s now under my second text box. If I want to have it a little bit higher, I can do it with the arrow key on my keyboard or adjust the height here. So I think this is okay. And now, let me show you how it looks like if I preview it.
You see here is our scrolling panel. We have the first text box, the image, second text box, and here is the button. You see it’s a little bit more work to add something inside the scrolling panel when there are already objects, so my tip is to think about what objects you want in your scrolling panel, create them outside the scrolling panel, group them, and then drag it into the scrolling panel.
Use Scrolling Panels for Masking
You can use a scrolling panel in Articulate Storyline also for masking. I’ve used this, for instance, in my video about video backgrounds, on the icon and the text on this video background slide. And I’ve added a car to this video, so you can view this video. But now, let me show you how you can use masking in your next Storyline project.
Now for your second slide, with a text box called Title, and I’ll show you what I’ll mean with masking. Normally, if you add an animation, for instance, if I’ll add a fly-in animation for one and I’ll set it to from left, and now let’s preview our slide to see what it does. You see the animation flies in from the left, from the slide, but from the left. But for instance, I don’t want it. I have a line on the slide and I want the animation to appear from, as it look likes behind it, this line. So what I’ll do, I’ll draw a line on the slide, go here to insert shape, and add a line here. This is okay.
Now, if I preview it, the text box will still be flying in from the left of the slide. What I’ll do now, can do now, is I’ll create a scrolling panel. I’ll create a scrolling panel here. I’ll grab the title here on top of it, and now I’ll place the title inside my scrolling panel. So I drag it and place it inside of the scrolling panel. And I want it to be aligned a little bit like this.
Now, if we now look at the slide in our preview mode, let’s see how this looks. So you have the line, and you’ll see now it looks like the title is appearing from behind of this line. Now with this technique, you can create awesome, for instance, cover slides in your next Articulate Storyline course.
So now you know how scrolling panels work in Articulate Storyline. You can use it to add large amount of text on your slide, for instance, or use it with animations and the masking option to create cool slides in your next Storyline project.
Want to learn how to create effective and engaging e-learning courses quicker and with less errors? Then download my ebook now, where I review my personal eight-step process on how to create effective and engaging e-learning courses that I use for all my e-learning projects in Articulate Storyline for my clients.
And was this video useful to you? Then don’t forget to hit the Like button below. And if you don’t want to miss any upcoming videos, then hit the Subscribe button and the bell notification icon. Thanks for watching.
