How to use, build and design popup modals

In this article you will learn to install the popup modal builder from the upgrade store and style the modal with the SiteManager design editor.

A. Install from Upgrade Center

1. Login to the project in which you want to install a popup modal. In the CMS Application click the Upgrade Center button or add more elements.

Screenshot_218-1

The Upgrade Center is the place where you install additional components and functionalities that come with every SiteManager website.

You can restrict access to the upgrade store for your clients.

2. Click on the category Page Components > Popup Modal Builder

Screenshot_331

3. The page component will be added to the page elements section in SiteManager CMS.

 

B. Add the modal component to the preferred page

1. Click on a blue plus icon in SiteManager CMS Application where you want to add the component.

2.Select  the element "Popup Modal Builder" from the list.

Screenshot_332-1

3. Start building & editing the popup modal

 

 

C. Design the popup modal

1. Go to SiteManager Design

2. Render the correct layout page

3. Default, your popup modal will follow the general style of your website. In the CMS App the popup will be rendered at the bottom of the page. In de Design App the component will have a light blue background. This is where you can add styles to your component.

Screenshot_334

Screenshot_333

 

D. More Information

Check our SiteManager YouTube channel: https://www.youtube.com/channel/UC810UiLZD_sgjdPSykCDDJQ
or watch the video below.

 

Find more tips about popup modals on our blog: http://www.sitemanager.io/blog/5-tips-when-building-a-popup-modal-for-your-website/?lid=425

We hope you will enjoy the integration!