Agencies
Services
Modal
Modal is a component that displays content as a pop up.
This is typically useful for bringing immediate attention to first-time visitors of the site, such as relaying major site updates, assisting users with signing up or subscribing to email lists, or even for general feedback.
The Modal component has 2 functional setups: An automatic pop-up on initial website visit controlled via Home Page properties, and an on-page component that enables the modal content to pop-up on a page.
Building the pop up content
- Create a page using the Empty Template.
- Use different components to author and format the modal content you want.
Enabling the 1st Time Site Visit Modal on any Home Page
- Go to the home page properties page.
- Go to the Modal tab.
- Enable Modal: When checked, enables the selected modal to load when a visitor visits the website Live for the first time.
- Title: Enter a Title to display for the Modal Title.
- Modal Content Page: Select the content page curated with modal content to use.
- Dismiss modal aria label: Set an aria label for the "X" Close button on the Modal popup.
Enabling the Modal on Content Pages
Configuring the Properties tab
- Text: Add button text for the Modal button.
- Display text as: Dropdown field that allows selection of Button or Text CTA to display the link as.
- Modal Title: Enter a Title to display for the Modal. Automatically sets as an H3 Title on the Modal.
- Icon Selector: Set an Icon for the Modal button, if needed.
- Modal Content Page: Set the page used for the content of the modal.
- ID & Class: Set an ID and Class to the component for CSS targeting.
Configuring the Accessibility tab
- Label: Set an aria-label to use for the Modal button.
- Close modal aria label: Set an aria-label to use for the "X" Close Modal button on the Modal popup.