Create Overlays

Create a Modal Overlay component

Below are the fields to complete, along with tips for completing them. To see where each of these fields render on the published page, please click the Component Template tab above.

1. Name: enter a name for your component. 
2. Schema: select Modal Overlay
3. Modal introduction text: this is a rich-text field where you can enter some intro text for your overlay. Rich-text fields allow bulleted lists, images, links, and some text formatting. 
4. Modal code: this field accepts HTML or Javascript code. This is where you'll put the code snippets you get from other sources, such as GovDelivery.
5. Modal bottom text: this is a rich-text field where you can enter some intro text for your overlay. Rich-text fields allow bulleted lists, images, links, and some text formatting. .
6. Modal name: give your overlay a unique name using only alpha-numeric characters and hyphens.
7. Width of the modal: select small, medium, or large to define the width of your overlay.
8. Automatically display when page loads?: select true to have your overlay automatically pop-up on page load, or false if you don't want it to automatically appear.
9. Button text: if you selected false in the last step, a button will appear on the page that triggers the overlay. Enter the text to display inside that button here.
10. Style: select the color scheme for your overlay. The options are white, branded (the MN state blue), dark gray, or light gray.
11. Expiration: if you want your pop-up to expire after a certain period of time, enter the number of days here. If you don't wish for it to expire, enter 0.

Save and Close your component.

Create Additional Components

Overlays are just one small part of a page, so you will need to create additional components to fill in the other space on the page. Other components you could include (but aren't limited to) are: body text, rotators, images, calendars, etc. 

Please create those components at this time. 

Create the Page

1. In the 050 section, navigate to (or create) the structure group where the page will reside.
2. Create a new page.
3. Fill in the Name, File Name, Page Display Name, Dublin Core Title, and Dublin Core Description fields.
4. For the Page Template field, select the page template for your page. Overlays only work on Flex Layout page templates.
5. Click the Design tab.
6. Click the Add button:
   1. Navigate to the Modal Overlay component you created in step 1, select it, apply the Modal Overlay component template, and insert it into the page.
   2. Navigate to any additional components you created in step 2, and insert them with the appropriate component templates in the appropriate order.
7. Close the Insert Component Presentation pop-up window.
8. Save and Close your page.

Publish the Page

When you've completed all the steps above, then all you need to do next is publish your page. 

In the 050 section, navigate to the page you built in step 3, right-click and select Publishing > Publish.

Select the site you wish to publish to and click Publish. This will send the page to the publishing queue.

Verify the page looks like you want it to, and edit/republish as needed.