Modals are popup windows that appear on top of the page content, instead of in a new tab or window. Our modal style will darken the background when the modal appears.

Most of the time modals are used as a call-to-action space. Where you can call out special sales, new releases, or newsletter sign-ups.

Whatever you want to do with your modal, is up to you. Learn how to set up a modal, link it to a page, and push your changes live below.

First, navigate to Stories under Publishing in the main menu.

Click edit by the headline "Categories" on the left-and side of the screen.

From here, drag the blue "Drag To Add Category" button down. A new category will pop up, prompting you to name it, in this example, we will name the category "Modals."

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

You may have story layouts, if so, select the one you'd like to use. If you don't have any, move straight to the Master Category Step, as you don't need to add a Cover Image for modals.

Set the Master Category to the "Modals" category we made earlier.

Then add a title, this won't show up on the modal, so this title is for your reference only.

Set "When Clicked" to, "Open Story Detail", then click "Create Story" in the upper right-hand corner.

Make sure your "Homepage Modals" category is checked off as a top level category and click the blue "Save Categories" button in the upper right-hand corner.

First, go to canvases and drag in a canvas. For more info, see our pages tutorial.

Go to containers next, and drag in a container. For more info, see our pages tutorial.

Now go to content and drag in a content component. For more info, see our pages tutorial. In this example, I've dragged in some text and a form. Add and edit content to fit your needs.

Once you are done adding content, click the blue, "Publish Story" button in the top right corner. If the button appears grey, try refreshing your page.

Don't forget to check tablet and mobile to see how they look before you publish!

Next go to Pages, under Publishing in the main menu. Click Edit on the page you'd like to add the modal to, in this case I went to the homepage.

On your page, in content view, drag in a text component and click the Insert/Edit Link icon.

Or add a link to an existing piece of text. (we're not actually linking text here, we just want to find the story URL, so don't worry about picking a specific piece of text)

Next we'll select a link, choose a "Story" to link to, and select the story you made in the stories pulldown.

Once selected you'll see a link URL, write this link down, you'll need it to hook up the modal.

Close the link menu, then click "Cancel" in the upper-right hand corner of the page, finally click "Close" on the text component.

Next, click on the "Stories" tab and drag in a "Modal Story" component.

Give your modal a headline, if you'd like a headline to show above your modal content (the content in the modal story you made). If not, leave it blank.

Type in your story URL and set a timeout, then click save.

The "Timeout" specifies the amount of time it takes for the modal to pop-up on your page. This is measured in milliseconds, we recommend setting it to "2500" which is equal to 2.5 seconds.

Once you are ready for your page (and modal) to go live, click "Publish" in the upper right-hand corner of your page.

If you want to make any edits to your modal, simply edit the modal story, no need to go into the page again or update the link.

If you change the name of your modal, in the info section of the story, then you will need to update the URL within the page.

To edit your modal, go to the page you placed it in, click the modal component, and then the gear icon. This is where you would type in your updated URL.