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.
Creating Your Modal
Go back to "Stories" and click the green "+ New Story" button on the top right-hand side of the screen.
Modal Information
Add in the information for your modal on this screen.
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.
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.
Related Resources
- Publishing Your Page
- SEO What Is It and How to Use It
- Hover States on Buttons, Made Simple