Get Early Access to GutenKit Page Builder Blocks

Popup Modal

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.
What are your feelings
Updated on October 9, 2022