Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


How can I create fixed headers and footers in Studio?

Follow

With Studio, it’s possible to create fixed headers and footers for your prototypes.

Depending on your layout and desired functionality for scrolling, the specific instructions may change. The following example is just one possibility for creating a fixed header.

Creating a fixed header or footer

To create a fixed header on a mobile prototype:

  1. Select your artboard and, in the right-hand inspector panel, set Scrolling to Vertical.
    studio-set-scrolling.png
  2. In the left-hand layers panel, order the header layer before other layers on the artboard.
    studio-order-header-layer.png
  3. Select the header layer and, at the top right of the inspector panel, click the Fix Position when Scrolling icon (fix-position-icon.png). This will fix the header layer to its current position.
  4. Pin the header layer vertically to the Top, and horizontally to the Left & Right. This is helpful if you need to resize the artboard later.
    studio-pin-header-layer.png

After completing these steps, you can preview the artboard to see how the header remains fixed.

studio-create-fixed-header.gif

Creating a fixed footer is very similar. However, instead of pinning the footer layer vertically to the top, you would pin it vertically to the Bottom and horizontally to the Left & Right.

pinning-footer.png

Scrolling tutorial

For more practice with fixed headers, check out the Studio tutorial. To access the tutorial:

  1. Open Studio.
  2. In the left-hand panel of the launcher window, click Examples & Tutorials.
  3. Scroll to the Tutorials section and double-click the file Scrolling Within Artboards.
open-studio-scrolling-tutorial.gif
If Studio is already open, you can access the tutorial by navigating to File > Examples & Tutorials > Scrolling Within Artboards

Was this article helpful?

Still have a question?

Contact Us