Markers may be the quickest and easiest way to add interactivity to a Storyline 360 course. They function a lot like a “widget” with a set of predefined functions. Some of the benefits are:
- The Marker is pre-programmed with mouse-over and click functionality.
- You can select from over 200 built-in icons that are organized into 10 different categories.
- They work well on mobile devices.
- They meet accessibility standards.
If you have not used Markers before, you may want to give them a try. They are very intuitive to use and add interactivity to your course without the use of triggers. Visit this article for even more information.
Really, the most challenging part of using Markers is thinking about how you want to use them and what content you want to put in them.
Are you going to answer the question about customizing a Marker or not?
Even though Markers offer 10 different categories of icons and unlimited color customization, the most common question we receive about them is how to customize them even more (mainly sizing and custom icons).
Why?
So before we talk about HOW, let’s discuss WHY or WHY NOT. Markers are designed to be a quick and easy way to add interactivity while also maintaining a consistent design style throughout your course. Once you start customizing the look and feel of the Markers, you risk losing some of the course unity. Having a bunch of Markers of all different shapes, sizes, and customization options can easily look messy instead of creative. So, the Markers, with their consistent design style can protect you from making some bad design choices. (Not you, of course…your designs are always solid! We are really talking about other people.)
How?
Okay, so now that we have that out of the way, here are 3 ways you can easily customize Markers beyond the basic options. You can view the methods in-action in the sample here.
Adjust Border Size
The quickest and easiest way to make a Marker a little larger is to adjust the weight of the border. Markers can be edited much like any other shape in Articulate Storyline. Here’s how:
- Insert a Marker from the Insert tab.
- With the Marker selected, you will see a Marker Tools section available on the ribbon.
- Select Marker Border.
- Select Color and Weight from here.
Tip: Choosing More Lines allows you to make the border even larger. If you are using a Marker with an icon, a border that is too big can look a little awkward.
Fill with Picture
If you need a more custom icon, you can format the fill of the Marker by choosing a picture fill.
- Insert a Marker from the Insert tab.
- Choose Marker Fill from the Marker Tools.
- Choose Picture and select an image you want to use as a Marker.
- You may also want to select No Outline under Marker Border.
Edit the Normal State
Lastly, for a more drastic change, consider editing the Normal state of the Marker. Using this method, you can insert any item of any size that you like on the Normal state of the Marker.
- Insert a Marker from the Insert tab.
- You may want to consider giving the marker No Fill and No Border, just in case your new picture does not completely mask what’s behind it.
- From the States tab, choose Edit States.
- Now you can insert any picture you prefer on the Normal state of the Marker.
- Resize and position the picture over the original Marker (do not delete the original Marker*). Keep in mind, if you make your new picture too large, it may cover up a portion of the Marker Label.
- Choose Done Editing States.
Tip: It is very important that you do not delete the original Marker when editing the States. If you do that, when you choose Done Editing States, you will also be done editing the Marker. It will still work as an interaction, but it can no longer be edited.
Download the sample file here.
Do Markers Need Customization?
Of course not, they are a wonderful asset as-is. But we know that some of you cannot help yourself! You have been that way since you were a child…you probably colored outside the lines, too. So have fun experimenting with these three simple ways you can make Markers even cooler.
That’s Storyline, and I’m sticking to it.
~Ron
NEW! The latest version of Storyline 360 now allows you to adjust the size of interactive markers to improve accessibility. Learn more here!
@Ron, thank you for sharing this. It had never occurred to me to adjust the width of the marker border: So easy, yet so effective!
Glad you liked it, Jon!
I have an issue with Markers not allowing users to click them if they navigate backwards in the course and return to the page with Markers on them. Any ideas what might be causing that?
Sorry you’re experiencing this, Anna! We’ve reached out via e-mail to assist in troubleshooting. Let us know if you haven’t received a message from Ron!
Got your email, will respond with a slide shortly.
Hi
When using a slide size of 1920 X 1080, markers are extremely tiny! I’m going to have to edit the Normal state for all markers. Or am I missing something? Thanks!
Thank you for reaching out with your question about markers. We too have noticed that the markers come across as quite small on a 1920×1080 aspect ratio.
There is an active feature request about this issue and we have added your email to this feature request so that you will be notified when it gets addressed.
Currently, the best option may be to bring the slide size back down to another 16×9 size, for example, 1280×720. Thanks!
@Ron, thanks for sharing, it’s been a great help!
So glad it was helpful!