Layers - Add modals and sidebar menus

Layers allow you to add elements over the top of your screens as hotspot destinations. It's perfect for adding realistic overlays such as:

  • Action sheets
  • Sidebar menus
  • Modals
  • Popovers

All you need to do is upload the layer(s) directly to Marvel, as you would any other screen. 

How to add a Layer:

  1. Select any image in your project and click view
  2. Once the Editor opens, click and drag anywhere on the image to draw a hotspot
  3. In the image selector pop up, select the destination for your hotspot
  4. The layer an image option on the left will become available, click the button
  5. Position your layer by dragging the image in the editor,  you can also change the opacity and background colour
  6. Click save layer

You can see an example of layers in action in this prototype:

 

Layer to layer:

Now you've got the basics, lets take it a step further by using our layer to layer feature:

To add the layer-to-layer feature to your own prototype:

  1. Open any screen in the Editor
  2. Click and drag to draw a hotspot 
  3. Select the layer image from the menu at the bottom > click on the 'layer' button towards the left of the menu
  4. Open the layer image itself within the editor > click and drag to draw a hotspot on the image
  5. Select another layer image from the menu at the bottom > click on the 'layer' button again

You can see an example of the layer-to-layer feature in action here:  

 

Introducing Scrollable Layers 🎉

We have recently released the latest update to layers; scrollable layers! You can add another dimension of sophistication to your prototype by using long menu panels or modals which you can scroll to see the full content.

To create the effect of a scrolling element within your design:

  1. Select any image in your project and click view
  2. Once the Editor opens, click and drag anywhere on the image to draw a hotspot
  3. In the image selector pop up, select the destination for your hotspot
  4. The 'layer an image' option on the left will become available, click the button
  5. Position your layer by dragging the image in the editor,  you can also change the opacity and background colour
  6. Click allow layer to scroll
  7. Click save layer

Check out an example of scrollable layers below:

 
Was this article helpful?
122 out of 167 found this helpful

Articles in this section

See more

    Still have a question?

    Submit a help request