Popups let you overlay content, like a giveaway form or announcement, on top of your site. Kirki lets you build popups visually on the same infinite canvas you use for the rest of your design – no extra plugins or tools required.
This guide covers how to create, style, and configure popups in Kirki – including when they appear and who sees them.
What Are Popups
A popup is an overlay that appears on top of a page’s content, typically used to capture attention for a signup form, promotion, or announcement without taking the visitor away from the page.
Unlike a regular page, a popup doesn’t have its own URL that visitors navigate to – it shows up on top of whatever page it’s targeted to, based on the conditions and triggers you set. This makes it useful for things like collecting emails, promoting a giveaway, announcing a sale, or nudging visitors toward an action before they leave.
How Popups Work in Kirki
Popups in Kirki aren’t elements – they work more like Pages, existing as their own entity.
You can design them visually just like any page, using Kirki’s Infinite Canvas, and even pan sideways to see how they look across different screen sizes.
When you create a popup in Kirki, it will have the following structure:
- Backdrop – The dimmed overlay behind the popup. You can style this to match your site.
- Popup Body – The wrapper that holds the popup window and its elements.
- Popup Container – The visible card that holds your content. This is where you add elements to design your popup.
- Close Button – The close control for the popup.
How to Create Popups in Kirki
Step 1: Create a Popup
- Go to the Pages panel and click the plus (+) icon at the top.
- From the menu, select Popup.
This creates the popup and drops you straight into the builder. Here, you can also give it a Name from the Popup settings in the right panel.
Step 2: Design and Add Content to Popup
- From the Left Sidebar, go to the Insert Panel.
- Here, click or drag from Premade Blocks or Base Elements to build your structure.
- Double-click text elements to replace their content.
- Select media elements, go to their settings in the Right Panel, and add your media.
- If you have forms or buttons in your popup, don’t forget to configure them or add links to them.
- Finally, select your elements and style them using the Design tab in the Right Panel.
Step 3: Set the Trigger
Define when the popup fires using Trigger:
- Select the Popup and go to the Popup settings in the Right Panel.
- Click the Trigger dropdown.
- Choose On Page Load, On Page Exit, or both.
- In Show After, set a delay in seconds before the popup appears.
- From Show Count, set how many times the popup displays per visitor.
Step 4: Configure Display Rules
Control which pages popups will appear on using Display Rules:
- Select the Popup and go to the Popup settings in the Right Panel.
- Click Add next to Conditions to create a new rule. By default, it’s set to Entire Site.
- Select the new condition to open its settings.
- Click Target to access the following options:
- Entire Site – Target the entire site
- User – Target users
- Posts – Target WordPress Posts
- Pages – Target Pages
- Any Dynamic Content Types – Target specific Dynamic Content Collections you created in Kirki.
- Unless you picked Entire Site, the Filter field lets you narrow things down further – here target a specific user role, post or post category, all or single pages, etc.
- Set Display to Show or Hide popup from the defined target.
- Click Apply to save the rule.
- Repeat to add multiple display rules.
Step 5: Set Popup Placement
- Select the Popup and go to the Popup settings in the Right Panel.
- Click a dot on the 3×3 Grid to set the anchor point: Top-left, center, bottom-right, or any of the nine positions.
- Use the Horizontal Offset field to nudge the popup left or right. Positive values move it right; negative values move it left.
- Use the Vertical Offset field to nudge the popup up or down. Positive values move it down; negative values move it up.
Step 6: Configure Close Action
Set up how a visitor can dismiss the popup:
- Select the Popup and go to the Popup settings in the Right Panel.
- Under offset, enable:
- X Icon – To show the Close Icon in the corner of the popup.
- Close Button – To show the Close Button added to the popup’s content.
- Close By Clicking Outside – To allow visitors to dismiss the popup by clicking the backdrop behind it.
Enable any combination of the three or turn off all three to prevent the popup from being dismissed until the visitor completes the action on purpose. Examples of this include Gated Content Popups, Compliance Modals, Mandatory Identity Walls, and more.
Step 7: Animate the Popup
Customize the Popup’s entrance animation:
- Select the Popup and go to the Popup settings in the Right Panel.
- Click the lightning bolt icon at the top right to open the Animation settings.
- Click Animation, and from the dropdown select the style you want. Fade-In is set by default, with more options available in the dropdown.
- Set Easing to control how the animation speeds up or slows down. Ease is the default.
- Set Duration, in seconds, to control how long the animation takes to play.
Step 8: Save & Publish Your Popup
Once everything’s set, save your work and test it:
- From the Popup Builder’s bottom bar, click Save to save your changes and exit. This takes you back to the page you started from.
- In the Pages panel, click the ellipsis (…) icon next to the popup
- From the dropdown, select Publish.
Use Kirki’s Preview feature to test the popup live. Check it across multiple pages and environments to confirm your display rules are working as expected.
Note: If you set your Popup Show Count to 1, you’ll only be able to preview it once.
Once everything checks out, click Save in the top-right corner to save your project, then click the arrow icon next to it and Publish if you’re ready to go live.
Manage Popups
How to Rename a Popup
- From the Left Sidebar, go to the Pages panel.
- Double-click the popup and type in the new name.
- Or click the ellipsis (…) icon next to it, select Rename from the menu, and type in the new name.
How to Delete a Popup
- From the Left Sidebar, go to the Pages panel.
- Click the ellipsis (…) icon next to the popup.
- From the dropdown, select Delete.
FAQ
Can I target multiple popups to one page in Kirki?
Yes. Since popups are created independently, you can set each one’s target to the same page.
Do Kirki popups slow down page speed?
No, not on their own – it depends on what’s inside. A simple form loads fast, but heavy images or content will slow things down, just like anywhere else on the page.
Can I show a Kirki popup only to logged-in users with a specific role?
Yes. Set the display rule’s Target to User, Filter to Role, select the role you want (Administrator, Editor, Author, Contributor, Subscriber), and set Display to Show. If you need to target more than one role, add a separate display rule for each one.
Can I trigger a popup on exit intent instead of page load?
Yes. In the Popup panel, set Triggers to On Page Exit instead of On Page Load.
Can I delay a popup so it doesn’t show immediately?
Yes. Use the Show After field to set a delay in seconds.
What happens if I turn off all three close options?
The popup can only be dismissed by completing its action – there’s no X icon, close button, or click-outside dismissal. Do this cautiously.