Jump to what you need or read through all of the elements. ➡️

Setting the Alignment Grid

You may find that positioning and sizing lesson content can be challenging. You may not be able to line up your layouts from screen to screen because you are free-handing everything. However, there are interface guides you can add!

  1. In Screen View, select Lesson in the right panel.
  2. Choose one (or multiple) interface settings.

image.png

You can use these to help make consistent layouts! These are not viewable to learners, so you don’t have to turn them off before sharing your lesson.

Screen Padding and Content Margins

The lesson’s screen dimension is 1000 x 540px. Maintain a screen padding of 20px. In other words, do not place content in the yellow areas indicated below.

dimension-padding.png

<aside> 💡 As a general rule, try to be within 5px of the inmost screen padding edge.

</aside>

Similar to the screen padding, maintain a content margin of 20px between lesson content. Do not place content in the yellow areas indicated below.

content-margin.png

<aside> 💡 You are allowed to change the spacing sizes as long as the overall aesthetic is consistent.

</aside>

Positioning Content Using the Grid Feature