A little while ago, I shared a simple tabs interaction template for Articulate Storyline 2 with the community, which people seem to love.

View Demo | Download Template

I shared this template alongside an article I published about the most straightforward way to build a tabs interaction in Storyline. Like most things in Storyline, there’s more than one way to build a tabs template. This article outlines an optimal process that will make tab template building as easy as possible for you. And if you’re interested in building your very own custom tabs interaction from scratch, I’ve laid out my suggested steps in that article as well.

However, I’ve also heard from customers who love this template and simply want to know how to modify it, add (or remove) some of the tabs, and/or adjust the color scheme. So today, let’s have a peek at how easy it is to do this with Storyline with just a few simple clicks!

To start, download the tabs template file and open it in Storyline. Double-click on the slide to open up slide view. Your slide will look like this:

Add a New Tab

This tabs template comes with five tabs by default, but adding a sixth tab is a breeze. The first thing to do is copy and paste one of the existing tabs, and update the label to say “Tab Six.” The great part about copying an existing tab shape is that the copy of the shape retains the existing hover and selected states, which are important in this interaction.

Next, place the newly created tab alongside the other tabs. You might notice that there isn’t enough room for the sixth tab and it’s falling off the slide, like so:

No problem; simply grab all six tabs at once (by pressing the CTRL key and clicking on each tab shape, one at a time) and use the left arrow key to shift all the tabs over toward the left side of the slide, until they look like this:

Now, all six tabs fit nicely on the slide. If you need to fit more than six tabs on one slide, you can adjust the size of the tabs to make each one smaller, allowing you to fit more tabs. To adjust the size of all the tabs at once, select all the tab shapes at the same time and head over to “Format” on the Storyline ribbon.

Under the format tab you’ll notice options to adjust the size of the shapes and to arrange them. Use the height and width fields to adjust all the tabs at once and keep them uniform in size.

Keep in mind, the smaller your tabs become, the shorter and more concise your tab labels need to be. You should also make sure your tabs are well aligned by selecting them all at once, and using the “Align” drop-down options from the format tab to align the tab shapes along the bottom and to distribute them evenly horizontally.

Add New Tab to Button Set

One of the keys to building the most optimal tabs interaction is to use what we call button sets. Button sets are a super-handy feature of Storyline. When objects are included in a button set, only one of said object can display the “selected” state at any given time. This works great for a tabs interaction because we only want one tab at a time (i.e., the tab we are viewing) to display the selected state.

You’re going to once again grab all the tabs at the same time and, once they’re all selected, right-click on a corner anchor on one of the shapes to bring up the right-click menu.

From this menu, select “Button Set” and then click “New Set.” Name your button set and click the “Add” button. Now all of your tabs are included in a button set.

Add a New Layer

The next step to this process is to add a new layer, which will be displayed when we click on Tab Six, the tab we just added. You’ll notice in the layers panel that there are already five layers (labelled Tab One through Tab Five).

Again, you’re going to save time by copying an existing object. Select the layer titled “Tab Five” and click the “Duplicate Selected Layer” icon to replicate the layer. Rename the duplicate Tab Six, and make adjustments to the text and the image on the slide.

Add a Trigger

Now that we have created our new tab (inside a button set) and our new layer, the final step is to update the trigger on the sixth tab we added to our interaction. Head on down to the base layer of your slide and click on the sixth tab. Do you notice that there’s already a trigger associated with the tab in the triggers panel? You might be wondering how that got there, since you didn’t add it. Here’s what happened: when you copy an existing tab, it already has a trigger associated with it, and the copy keeps the trigger. So, all you need to do is update which layer is shown when the tab is clicked.

And there you have it! Now you can hit “Preview” and watch the magic happen as you select your newly added tab. Do you have any other questions about updating this template? If you do, leave them in the comments below and I’ll get back to you with an answer!

Want to try something you learned here, but don’t have Articulate software? Download a free 60-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.

1 Comment