Creating Popups in Elementor with Spexo Popup Builder

This guide explains how to create a popup using Popup Builder in Elementor. You will learn how to create a popup, configure display settings, and publish it on your website.

You can design your popup from scratch or use prebuilt templates. Popup Builder allows you to control where the popup appears and how it behaves without affecting your site layout.

Make sure Spexo Addons is installed and activated before proceeding.

Step 1: Access Popup Builder #

To start creating a popup, first navigate to the Popup Builder section from your WordPress dashboard.

This screen displays all existing popup templates and allows you to create new ones.

Step 2: Open the Popup Library #

The popup library (where you can choose prebuilt designs or start from scratch) opens only after you click the + Create Popup button. It does not appear automatically when you land on the Popup Builder page.

• On the Popup Builder screen, locate the + Create Popup button.
• Click + Create Popup to open the Popup Library modal.
• The library window will show two main tabs: Blocks and Popups.

After you click the button, the Popup Library will appear, and you can choose to start from scratch or use a prebuilt popup design.

Step 3: Creating a Popup From Scratch #

Use this option when you want to start with a completely blank popup layout and design everything yourself.

• In the Popup Library modal, switch to the Popups tab (if it is not already active).
• Look for the Create from Scratch card at the top of the grid.
• Click the + Create from Scratch card.

When you click this card, the plugin will open the new Popup Setup screen, where you can define the popup name and display conditions before moving to the editor.

Step 4: Inserting a Prebuilt Popup Design #

If you prefer to start from a ready-made design, use one of the prebuilt popup templates.

• In the Popup Library modal, go to the Popups tab.
• Browse through the available predefined popup layouts.
• To preview a popup:
  • Click on the popup thumbnail to open the full preview overlay.
  • Use the preview header’s Insert button to insert the selected template.
• To insert directly (without opening the large preview), click the Insert button on the popup card.

After you insert a prebuilt popup, the plugin will still take you through the Popup Setup step to confirm the name and display conditions before redirecting you to the editor.

Step 5: Popup Setup — Name & Display Conditions #

Whether you create a popup from scratch or insert a prebuilt design, the next step is the Popup Setup screen. This step is required so the plugin knows how to identify and where to show your popup.

5.1. Adding the Popup Name

• In the Popup Setup window, locate the Popup Name field.
• Enter a descriptive name (for example, “Black Friday Discount Popup”).
• This name is used to identify the popup in your templates list and inside the editor.

5.2. Setting Display Conditions

The new setup popup uses a modern display rule system where you can define where and when your popup should appear.

• In the Display Conditions section of the setup screen:
  • Click Add Display Rule to add your first condition row.
  • Use the dropdown to choose the target area (for example, “Entire Site”, “Singular > Posts”, “Specific Page”, etc.).
  • If available, use the second dropdown or additional fields to narrow down the target (such as a specific post, category, or page).
• To add more rules, click Add Display Rule again and repeat the process.
• To remove a rule, use the corresponding Remove icon for that row.

Conditions are fully suppoted in the Pro versions.

You can combine multiple rules to include or exclude different areas of your site. Make sure all conditions are configured correctly before proceeding.

Want to learn more about how display settings work? Check out our Popup Display Conditions & Targeting documentation.

Step 6: Completing Setup & Redirecting to the Editor #

After entering the popup name and setting up the display conditions, you can proceed to the editor to design the popup.

• Review your Popup Name and Display Conditions to ensure they are correct.
• Click the Save Condition button at the bottom of the Popup Setup screen.
• The plugin will create the popup template and automatically redirect you to the Elementor editor for that popup.

Once the editor loads, you will be able to design the popup content (text, images, buttons, forms, etc.) like any other Elementor layout.

Step 7: Finding Popup Settings Inside the Editor #

Popup Settings control how the popup behaves (opening trigger, show again delay, display mode, etc.). In the new flow, these settings are always accessible from two main places in the editor:

7.1. Popup Settings Button in the Top Toolbar

• In the Elementor editor, look at the top toolbar.
• You will see a button labeled Popup Settings (next to the“Add Element” button).
• Click Popup Settings to open the Spexo Popup Settings panel on the left.

Step 8: Tooltip Guidance for Popup Settings #

To help you quickly return to Popup Settings when needed, the plugin displays a small tooltip notification near the top toolbar.

8.1. When the Tooltip Appears

• When the popup editor first opens, Popup Settings are opened automatically and the tooltip is hidden.
• After you leave Popup Settings (for example, when you:
  • add a new widget, or
  • open another panel to edit an element’s settings),

  the tooltip appears with a message such as:
  “Please Note – Click here to access Popup Settings.”

• The tooltip is designed to remind you how to get back to Popup Settings once you move away from the document settings panel.

Step 9: Designing and Saving Your Popup #

After configuring Popup Settings and setting up your content, you can finalize your popup.

• Use the Elementor widgets and sections to design the popup layout: headings, text, images, forms, buttons, etc.
• Preview the popup on different devices (desktop, tablet, mobile) using Elementor’s responsive preview tools.
• When you are satisfied with the design and settings, click the Publish button in the bottom panel to save your popup.

Your popup is now ready. It will be displayed on the site according to the display conditions you configured in the Popup Setup step.

Summary #

• Go to WordPress Dashboard → Spexo Addons → Popup Builder.
• Click + Create Popup to open the Popup Library.
• Use either Create from Scratch or a Prebuilt Popup template.
• Use the Popup Setup screen to define the popup name and display conditions.
• Click Save Condition to go to the Elementor editor.
• Access Popup Settings from the top toolbar button or the footer gear icon.
• Rely on the Popup Settings tooltip to guide you back whenever you leave the document settings panel.

Best Practices #

• Use clear and focused popup content
• Avoid showing popups too frequently
• Test popup behavior on different devices
• Use proper triggers and conditions
• Keep design simple and readable

Related Documentation Guide #

Before creating a popup, make sure you understand how popup behavior works.

• How to Configure Popup Layout, Overlay and Close Button
• Popup Trigger Settings
• Popup Display Conditions
• Prebuilt Popup Designs

Frequently Asked Questions #

Can I create a popup without coding #

Yes. Popup Builder works with Elementor and does not require coding.

Can I use templates instead of building from scratch #

Yes. You can use prebuilt popup designs from the template library.

Why is my popup not showing #

This usually happens when display conditions or triggers are not configured correctly.

Need help? Feel free to contact our support for further assistance.