How Do I Align e-Learning Content?

Have you found that text or images in your Storyline 360 e-Learning seem to move around from one slide to the next? Or maybe you can’t decide on appropriate placement for your content?

During our hands-on Articulate 360 training, we are often asked how to ensure proper positioning of slide elements. So, let’s answer this “as heard in training” question today around content placement!

Spacing and alignment are fundamental principles in graphic design. If objects are uneven, crowded, or too far apart, it can overshadow the content. Proper placement, however, helps cultivate design consistency, a positive learner experience, and rapid e-Learning development. There are techniques that can help with these concepts, both before and during Storyline 360 e-Learning development!

First, give yourself a head start! Create an e-Learning template for consistency and reuse, and consider the following:

• Where will you place text and titles?
• What formatting will you use for interactive objects?
• Where and how will your stylized elements and graphics appear?
• Remember the brand! When we develop custom templates, we strive for e-Learning design that can be consistently and easily used over and over again, but we also want to make sure we’re adhering to an organization’s brand. Your brand keeps you compliant with style guidelines and handles much of the creative work for you!

Tip: In the Slide Master (or Feedback Master, for layers), utilize Storyline 360 Placeholders to create quick-to-use layouts.

Remember these tenets throughout e-Learning development:

• Similar objects should be evenly distributed. (Give ‘em some space!)
• Slide elements should have space between both each another as well as the edge of the slide.
• Text within an object should also have some “breathing room” between the text itself and the edge of its encompassing object.
  • Tip: You can always right-click a shape and navigate to Format Shape | Text Box | Margins to increase that marginal space.

Try these alignment tools under Grid and Guides on the View tab:

• Ruler: Display rulers along your slide to measure the distance between objects.
• Grid: Gridlines provide a visual reference as you size and place your content, appearing as fixed, dotted lines that divide your slide into equally sized spaces.
  • Tip: Modify their default spacing by selecting the Grids and Guides button.
• Guides: Guides are draggable, moveable visual references to help you more precisely position items. Add, delete, and move them—mid-development!
  • Add a guide by right-clicking on or near the slide canvas and selecting to add new guide or by dragging a guide while holding the Ctrl key.
  • To delete a guide, select it and press the Delete key.
  • Move a guide by clicking and dragging it.

Select an object and navigate to the Size and Position section of the Format tab for a few more helpful techniques:

• X/Y Axis: These values represent the slide location of upper-left corner of your object. The X coordinate indicates how far to the right the object is and the Y coordinate tells you how far down the item is on the slide.
  • Use the arrows or the entry fields to fine-tune object placement.
  • Guarantee your slide elements are consistently and evenly placed by referencing their numeric coordinates on the X/Y Axis.
  • We also recommend using these values to ensure copied items are in the exact same spot from slide to slide or layer to layer!

Speed up your development workflow with the following shortcuts:

• Ctrl + Shift + D: If you’ve copied an object, this shortcut allows you to paste the object into the exact same location as the original. (More on copying items here!)
• Shift + (mouse drag): When moving an object, this constrains the movement to straight lines only.
• Ctrl + Shift + (mouse drag): Duplicate an object while keeping the copied item in line with the original.
• Ctrl + Shift + Enter: This shortcut opens the Size and Position window. Fine-tune an object’s position pixel-perfectly!
• Alt + (mouse drag): Move or resize an object with precise control.
• Arrow keys: Use the arrow keys on your keyboard to nudge slide elements a little at a time.
• Arrow keys + Ctrl: Holding the Ctrl key while using arrow keys to position an object changes the distance the object moves. (The distance moved depends whether the snap-to-grid feature is enabled.)

As you place and align content in your Storyline 360 e-Learning, be sure to visit Articulate’s site for more shortcuts and helpful tips. And if you have tricks that we haven’t mentioned, let us know in the comments below!

 

 

 

~Tara