Topics covered in this section

Modal Overview

Modals are popup windows that appear over page content, darkening the background. They're commonly used for call-to-action purposes, such as promoting sales, new releases, or newsletter sign-ups.

Customize your modal's content and functionality as needed. 

Creating a Modal

From the Menu, open the Stories dropdown menu and select Stories

Click on Categories to create a new category for your modals to live.

Then click on New Category

Create a new category for your modals. You can name it whatever you'd like. We'd recommend sticking with Modals for ease of use.

Related Articles

Creating Your Modal

Go back to "Stories" and click the green "+ New Story" button on the top right-hand side of the screen.

Add in the information for your modal on this screen.

Icon

Make sure the master category is set to the "Modals" category we made earlier.

Story Layout

Add in the content you wish to appear on your popup. This is the same process as making a regular story. Choose from an existing story, a story layout, or start from an empty layout.

For this example, start with an empty layout.

Above is a Headline component, a text component, and a button component for the modal content. Add as little or as much content as you see fit.

Icon

Use the responsive slider at the bottom of the screen to check your modal for different screen sizes!

Once you are finished and have checked the different screen sizes, click done editing in the top right. 

Click publish in the top right corner of the screen.

Adding Modals to Pages

To add your modal to a page, go to Pages – under Website in the main menu.

Click Edit on the page you'd like to add the modal to.

Next, drag in a modal component underneath the Stories Dropdown.

Add in the story URL and an automatic timeout if you want the modal to close after a certain amount of time.

Publishing your Modal

Publish your updated page to make your modal live.

  • Publishing Your Page
  • SEO What Is It and How to Use It
  • Hover States on Buttons, Made Simple