Getting Started #
Display any information or conversion-oriented messages in the form of a popup. You can show a photo, button, page, text, etc with various animation styles. Here’s a comprehensive article to explain every method in detail.
Watch our video guide:
Or, just follow the step by step process:
Step->1: Add Popup Modal #
- Go to ElementsKit=> go to Elements=> Make sure to turn on Popup Modal=> Click on Save Changes.

- Now search for Popup Modal.
- Drag the widget.
- Drop on the selected area.

Step->2: Customize Popup Layout #
Toggle Button #
You can use this button as a trigger. Let your user click on it and a popup will display accordingly.
- Choose popup toggler Type: Button.
- You can see the popup toggle button showing.

- Now Expand the Popup Toggle Button: This section will appear when you choose toggle type: Button from the Layout Section.
- Add or edit the Button Label.
- Choose Alignment: Left, Center, or Right.
- Control Width.
- Enable the toggle to Show Icon.
- Upload any Icon from the selected area.
- Control Icon Positioning by simply dragging.
- You can see your popup toggler button showing accordingly.

Toggle Image #
You can use the image as a trigger as well.
- Choose popup toggler type: Image.
- Expand the Toggler Image Section: This section will appear when you choose toggle type: Image from the Layout Section.
- Upload Image.
- Choose Image Size.
- Choose Image Alignment: Left, Center, or Right.
- You can see the popup toggle image showing in the center.

Toggle Time #
Pop-up Modal will appear automatically when a user visits the website. You can set the exact time for that.
- Choose popup type: Time.
- Set popup time: 3.
- Enable the cookie consent.
- Popup will appear automatically after 3 seconds.

Customize Popup Show Type & Position #
You can control the way of displaying your popup. Either popup will appear in a modal or a slide.
- Choose popup show type: Modal.
- Select button position: Center.
- You can see the popup appear in a modal and center in position.
- Choose popup show type: Slide.
- You can see a popup showing from the left in a slide.

Step->4: Customize Popup #
- Control Pop-up Width.
- Set Height.
- Enable Overlay.
- Enable Close Icon.
- You can see the closed icon appeared.

- Enable Header.
- Enable Footer.
- Choose Animation.
- Select Animation Duration Type.
- You can see the header & footer section showing accordingly.

Customize Overlay #
This section will appear when you Enable the Overlay Option From the Popup Section.
- Enable this section to close the popup just in one click.

Customize Close Icon #
This section will appear when you Enable the Close Icon Option From the Popup Section.
- Select icon position: Popup Top Right. You can also select Popup Top Left, Window Top Right, Window Top Left from the drop-down.
- Control Horizontal Position.
- Upload Close Icon.

Customize Header #
This section will appear when you Enable the Header Option From the Popup Section.
- Add or edit Header title.
- Enable and edit Subtitle.
- Enable Divider.
- You can see the header title, subtitle, and divider showing accordingly.

Customize Footer #
This section will appear when you Enable the Footer Option From the Popup Section.
- Enable Divider.
- Enable CTA Button.
- Add or edit Label.
- Choose Variant: Filled. You can also select Outlined or Text.
- You can see the CTA button and divider showing accordingly.

- Add URL.
- Enable to Open Link in New Tab.
- Choose Alignment.
- Enable to Reverse Alignment and Button.
- Control Spacing.
- You can see the CTA button showing accordingly.

- Customize the close button in the same way.

Step->5: Add Content #
- Disable the Template Area.
- Add or edit any content.
- You can see the content showing accordingly.

- Enable Template: You can select any widget from the selected area and customize your popup content area.
