GutenKit’s Popup Builder is a module that allows users to create and customize various types of pop-ups, such as modal windows, lightboxes, or overlays, for their websites.

Let’s see how the module work.

GutenKit Popup Builder #

It is a Pro module. Don’t forget to get it from here.

• Access to your WordPress dashboard
• Find GutenKit and go to Modules
• Find Popup Builder and turn it ON

Create New Popup #

Now, you can see Popup Builder under modules, you have to click on it and you can create popup.

1. Click on the plus sign
2. You’ll see the Popup Builder, click on it

Next, in the popup field, you’ll again see a plus sign and add any block of your choice.

Editing Content Part #

• Open Event: Determines when the popup appears. The options here are –
  • On Page Load: Here you can adjust Open Delay (s) time to load the page.
  • After Inactivity: It allows you to adjust User Inactivity Time (s).
  • Page Scrolled: You have to set Page Scroll Progress (%) here.
  • On Page Exit Intent: It triggers a popup when a user is about to leave the page.
  • On Date: Here you can adjust Time and Date.
  • Custom Selector Click: It has a Selector Class adding option, that specifies an element on the page to trigger the popup.
• Entrance Animation: Here you can choose the popup’s entering style. (e.g., fade, zoom, rotate, roll, etc.).
• Exit Animation: It allows you to choose the popup’s leaving style (e.g., fade, slide).
• Animation Duration: It lets you control the speed of the entrance and exit animations.

• Close Button: This is a button to manually close the popup.
• Close On Clicking Outside: By enabling the button you can allow the users to close the popup by clicking outside of it.
• Overlay: This is the background behind the popup, which can be customized in appearance.

• Close Button: This is a button to manually close the popup.
• Close On Clicking Outside: By enabling the button you can allow the users to close the popup by clicking outside of it.
• Overlay: This is the background behind the popup, which can be customized in appearance.

Setting Condition #

Condition: This part allows you to specify under what circumstances the popup should appear or be hidden.

• Include –
  • Entire Site: The popup will be shown on all pages of your website.
  • Singular: The popup will be shown only on specific individual pages.
  • Archive: The popup will be shown only on archive pages (e.g., Author archives, Search results, Post categories, etc.).
• Exclude –
  • Entire Site: The popup will be hidden on all pages of your website.
  • Singular: The popup will be hidden on specific individual pages.
  • Archive: The popup will be hidden on archive pages.

Editing Style #

Like any other GutenKit block and module, you can also style the Popup builder. Here the styling options are – Width, height, position, color, padding, and so on.

How the Popup appears #

You can customize the popup according to your choices. See the example.

Output #

This is how the Popup builder works.