What are modals?

Modals are popup windows that are displayed on the top of the current page.

There are many uses for modals: subscription popups asking for a user email address, image light boxes, side bars, hamburger menus and so on.

Creating a modal popup window

To create a modal on STUDIO:

  1. Click on the plus sign on the top right corner of the page, and choose ‘modal’. 

Resize the modal as needed.



   2. Add any text, image or other content and style as you wish.

   3. Change opacity of the area outside the modal to hide it or reveal it as you wish.

Access opacity by clicking on ‘fill’ from the top bar. To see how different opacity value look once applied, launch a live preview from the top bar & see how the page looks real time while you style it.


    4. Choose a transition effect from the top bar.

  5.  Rename the modal so that you can quickly find it later.

6. Add a link to your modal on the main webpage. Select the item that you want a user to click on to open the pop up, and add the link through the arrow that appears on the top right corner.

※You can't change the design of modal by each break points.

Did this answer your question?