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 store

1. Login to the project in which you want to install a popup modal. On the CMS homepage click the upgrade store button or add more elements.

The upgrade store 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"

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

installfromupgradestore

B. Add the modal component to the preferred page

1. Click on add element in SiteManager CMS

2. Drag & Drop the element "Teamleader Form builder" on the preferred position in your page

3. Start building & editing the popup modal

buildyourmodal

C. Design the modal

1. Go to SiteManager Design

2. Render the correct content page

3. Default, your modal will follow the general style of your website. But, you can edit the style of each modal element.

4. In the video we edit: position, modal width, title font weight, position button.

designyourmodal

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!