How to Create Popups in WordPress Using Gutenberg

Have you ever been browsing the internet and suddenly been greeted by a popup? A poping window that appears with overlay while you are visiting a web page. 

Sometimes these popups can be super helpful, offering you useful information or great deals. Or, they can feel a bit annoying and intrusive.

But from a website owner’s point of view, popups have turned out as a powerful way to capture attention, promote offers, and generate leads.

So building the right popups that engage the user without annoying them at the same time is crucial.

To help you with this, we will walk you through each step of setting up effective popups tailored to your website’s goals. By the end of this guide, you’ll have the easiest way to create popups that not only attract attention but also enhance user experience.

What is a popup on the website?

Popups are small windows that appear on a webpage, typically as an overlay, to grab the user’s attention. These windows can include various forms of content like promotional ads, subscription offers, notifications, or call-to-actions. 

Popups often require interaction, such as entering or exiting a page, clicking a button to close them, or filling out a form. They are designed to stand out from the rest of the page to prompt immediate engagement.

When do people usually use popups on their websites?

Popups are most commonly used to achieve specific goals related to user engagement and conversion. Here are some common scenarios when people use popups on their websites:

• To capture leads or build an email list with a subscription.
• Promote exclusive deals, discounts, or limited-time offers.
• Announce new products, features, or major updates.
• To provide important notices to alert visitors. 
• Ask visitors to sign up for an account on the website.
• To collect feedback or conduct surveys among audiences.
• Show cookie consent or privacy policy notification.
• Drive the users to register for events, webinars, or workshops.

These strategic uses of popups help enhance user engagement and conversion, but it’s essential to implement them thoughtfully to avoid disrupting the user experience.

How to create WordPress popups in Gutenberg

Let’s jump into the core part of this tutorial guide on how to add a popup on WordPress using the Gutenberg block editor.

The default Gutenberg editor doesn’t come with a popup builder. So you need to pick a WordPress popup plugin for the block editor. For this tutorial, we have used the GutenKit plugin.

GutenKit is a block editor plugin that comes with a Popup Builder designed specifically for the Gutenberg. With this popup builder, creating popups in Gutenberg is now easier than ever.

Here is the step-by-step process of creating a Gutenberg popup in WordPress editor.

Install and activate a WordPress popup plugin for Gutenberg

To install the GutenKit Popup Builder, you need to have the GutenKit block editor plugin installed on your website. Here are the required plugins and themes to use popup builder seamlessly on your website.

☑️Prerequisite Plugin(s):

• GutenKit Free version
• or, GutenKit Pro version

☑️ Theme: Hello Blocks Theme or any WordPress block theme.

Once you’ve installed the GutenKit plugin, go to GutenKit > Modules. Find the Popup Builder and click on the Install button. With the Popup Builder activated you’re all set to start building WordPress popups in Gutenberg for your WordPress site.

Design popups for WordPress using any Gutenberg block

Now navigate to GutenKit > Popup and click Create New Popup to open the editor where you will be creating the popup.

Then you can use the block to build the popup in the editor.

With the GutenKit Popup Builder, you can use any Gutenberg blocks to design your popup. 

You can use 65+ GutenKit blocks and 18+ modules to design a modern and sophisticated popup for your site.

This includes blocks like, heading, paragraphs, buttons, images, and even videos to your popup, making it highly customizable. 

Create Gutenberg popups with pre-designed templates

On the other hand, instead of starting from scratch, you can save time and effort by using the ready designs.  With over 500+ patterns and templates available in GutenKit’s Template Library, you can quickly create professional-looking popups in just minutes.

To import the readymade designs

1. Popup builder editor for Gutenberg.
2. Click on the template library button.
3. Choose a pattern from the library.

After that, you can change the content and customize styles to align with your campaign. It’s a fast and hassle-free way to get stunning popups up and running!

Use smart conditions to display Gutenberg popups on your website

You have the flexibility to choose which pages you’d like your popups to appear on. Just head over to the popup block editor, and under the “Content” tab, you’ll see an option named “Conditions.” 

From there, simply click the  + Add Condition button and set the rules for where you want your popup to be displayed. It’s that easy!

With the GutenKit popup builder, you can set the Include and Exclude conditions.

• Include condition: With the Include conditions, you can add popups to the entire website, specific pages, or archive pages.
• Exclude condition: You can decide where not to show the popups on your site with the exclude conditions.

Here is how you can display popups on your website using smart conditions:

Show Gutenberg popups on the entire website

To show the popup on all of the pages of your website, 

👉 Step 1: Add a new condition for popups.

👉 Step 2: Select the “Include” condition.

👉 Step 3: Choose “Entire Site” to show popup on every page.

Opt out specific pages from showing popups

There might be times when you don’t want popups to appear on certain pages. You can do it with Exclude conditions. 

👉 Step 1: Add a new condition for popups.

👉 Step 2: Select the “Exclude” condition.

👉 Step 3: Choose “Singular”.

👉 Step 4: Select a page to exclude the popups from appearing.

Display popups on specific pages only

If you’re aiming for more focused campaigns, you might want to display popups on certain pages of your website.

👉 Step 1: Add a new condition for popups.

👉 Step 2: Select the “Include” condition.

👉 Step 3: Choose “Singular”.

👉 Step 4: Select a page to display a popup.

Besides, to be sure that the popup doesn’t show up on other pages, you can add an exclude condition, and select the entire site to restrict the the popup from showing on the whole website.

WordPress popups on the archive pages

You can also display popups on any WordPress archive page by setting a condition. For that, Add Condition > Include > Archive > Select Archive page.

On the other hand, if you want to prevent popups from showing on a particular archive page, you can set up an exclude condition. Just follow the same steps: For that, Add Condition > Exclude > Archive > Select Archive page.

Decide how and when to trigger the Gutenberg popups

You have complete control over how popups appear on your website pages. You can decide if the popups will appear on page load, exit intent, or after an interaction.

On the GutenKit Popup Builder, you can select how the popups will trigger on your website from Content > Open Events on the block editor..

This helps you to develop different types of popups on Gutenberg. Here are the types of WordPress popups on Gutenberg you can design with GutenKit Popup Builder.

1. Entry Popups

• Trigger: Instantly triggered when the page loads on the user’s browser.
• Purpose: Engages users as soon as they land on the website.
• Use Case: Welcomes users with a discount, event announcement, or asks for a subscription right away.

💡 How to trigger? Select the Open Event as “On Page Load”

2. Exit-Intent Popups

• Trigger: Activated when the user intends to close the tab or browser.
• Purpose: Captures users before they leave the site.
• Use Case: Offers a discount, newsletter subscription, or special deal.

💡 How to trigger? Select the Open Event as “On Page Exit Intent”

3. Scroll Trigger Popups

• Trigger: Triggered by the user scrolling down a page.
• Purpose: Offers a promotional deal or asks for feedback after the user has explored a certain portion of the page.
• Use Case: Promotes additional content, a sign-up form, or a limited-time offer.

💡 How to trigger? Select the Open Event as “Page Scrolled”.

After that set the “Page Scroll Progress to decide at what point the popup will appear as the user scrolls down the page.

4. User Inactivity Popups

• Trigger: When the user is inactive for a certain amount of time.
• Purpose: Re-engage users who have been idle for a certain period of time on the site.
• Use Case: Reminds users of special offers, prompts them to take action, or suggests items they might have left in their cart.

💡 How to trigger? Select the Open Event as “After Inactivity”.

Now set the User Inactivity Time in seconds to decide when the popup will appear after the user has gone inactive.

5. On-Click Popups

• Trigger: Activated by user interaction with a section on the page.
• Purpose: Displays content when the user clicks on a specific page element (e.g., a button or image).
• Use Case: Often used for product details, additional form submissions, or video playbacks.

💡 How to trigger? Select the Open Event as “Custom Selector Click”.

Now add Selector Class for the section. 

With these various types of WordPress popups available in Gutenberg, you have the flexibility to choose the best format that aligns with your goals and enhances user experience, making your website more engaging and effective in capturing attention and driving conversions.

Schedule popup activation for your campaign

Sometimes, you will use the popups to promote campaigns on your website. Now, these campaigns have a certain date and time for launch. So you need to match that exact timing to activate the popup.

You can do that with the Advanced Rules. 

➡️ Step 1: Toggle the button to on for “Schedule date & Time”.

➡️ Step 2: Set the Time when you want to activate the popup.

➡️ Step 3: Choose the Date of the popup campaign launch.

Why Choose the GutenKit Popup Builder for WordPress?

The GutenKit Popup Builder stands out as a top choice for creating popups in WordPress due to its seamless integration with the Gutenberg block editor, offering an intuitive and highly customizable experience for users. Here’s why it’s an excellent solution for WordPress sites:

✅ Seamless Gutenberg Integration:

GutenKit is built specifically for Gutenberg, meaning you can design and manage popups using the same block-based interface you’re already familiar with. This eliminates the need for external popup builders or coding, streamlining the entire process and allowing for a cohesive experience.

✅ Pre-designed Templates for Quick Setup:  

   GutenKit comes with a variety of professionally designed popup templates that can be easily customized to fit your brand’s style. These templates save time and effort, offering a starting point for those who don’t want to build popups from scratch but still want a polished, modern design.

✅ Advanced Display Rules: 

With GutenKit, you have full control over when and where your popups appear. You can set precise display conditions based on which pages you want to show the popup. 

This ensures that your popups are shown at the most optimal moments, improving engagement without being intrusive.

✅ Multiple Trigger Options:

GutenKit offers multiple trigger options for displaying popups, such as on page load, after a timed delay, on scroll, or when the user is about to exit the page. 

You can also trigger popups when users interact with specific elements, giving you complete control over the user journey.

✅ Flexible Customization

The GutenKit Popup Builder allows for extensive customization of your popups, from animations and styles to typography and colors. 

You can even add custom CSS for more advanced styling, ensuring that your popups match your website’s unique design and branding.

✅ Responsive and Mobile-Optimized 

Popups created with GutenKit are fully responsive and mobile-friendly, ensuring that your popups look great on any device. You can customize the appearance with entrance and exit animations, background styles, overlay colors, and more.

✅ Lightweight and Performance-Oriented 

Unlike many other popup plugins, GutenKit is designed to be lightweight and performance-optimized. 

This means you won’t have to worry about popups slowing down your site, which is crucial for both user experience and SEO.

Wrapping up

By following these steps, you will be able to build and show popups on your WordPress sites easily. With the GutenKit Popup Builder, you can easily integrate dynamic popups into your WordPress site, allowing you to communicate effectively with your audience. 

Take the insights from this guide and start experimenting with different popup strategies to maximize your site’s potential!

Like Popup Builder, GutenKit comes with 65+ blocks, 18+ modules, and 500+ ready designs to give you an advanced page builder experience in the Gutenberg block editor. So install GutenKit today and start building your dream website in WordPress.