Creating a modal popup in Simply Popups is straightforward and requires no coding knowledge. Using the WordPress Block Editor, you can build professional popups in minutes by adding a block, inserting your content, and customizing the trigger button. This guide will walk you through creating your first popup from start to finish.

Before You Begin

Make sure you have:

• Simply Popups installed and activated (Installation Guide)
• Access to the WordPress Block Editor (Gutenberg)
• A page or post where you want to add a popup

Step 1: Create or Edit a Page

First, you’ll need a page to add your popup to.

Option A: Create a New Page

1. In WordPress admin, go to Pages → Add New.
2. Enter a page title (e.g., “Welcome” or “Special Offer”).
3. The Block Editor will open automatically.

Option B: Edit an Existing Page

1. Go to Pages → All Pages.
2. Find the page where you want to add a popup.
3. Click Edit to open it in the Block Editor.

Step 2: Add the Simply Popups Block

Now you’ll add the Simply Popups block to your page.

1. Click the (+) icon in the top-left corner or press / in the editor.
2. In the search box, type Simply Popups.
3. Click on the Simply Popups block when it appears in the results.

Search for “Simply Popups” in the block inserter and click to add it to your page.

The Simply Popups block will be added to your page. You’ll see:

• A button (the popup trigger)
• A content area (what appears inside the popup)

Step 3: Add Content to Your Popup

The popup content area is where you’ll add what visitors see when they click the button.

Add a Heading

1. Click inside the popup content area (the gray/white box).
2. Click the (+) icon to add a block.
3. Select Heading from the block options.
4. Type your heading text (e.g., “Subscribe to Our Newsletter”).

Add Body Text

1. Below the heading, click (+) again.
2. Select Paragraph block.
3. Type your message (e.g., “Join our mailing list to receive updates and exclusive offers.”).

Add a Form (Optional)

If you want to collect information:

1. Click (+) to add another block.
2. Search for your form plugin (e.g., Formidable Forms, Contact Form 7, WPForms).
3. Select your form from the dropdown.

Add headings, text, forms, or any WordPress blocks inside the popup content area.

Step 4: Customize the Trigger Button

The button is what visitors click to open your popup. Let’s customize it.

Change Button Text

1. Click on the button in the editor.
2. Simply type your desired text directly on the button.
3. Examples: “Learn More”, “Get Offer”, “Subscribe Now”, “Click Here”

Style the Button

With the button still selected:

1. Look at the right sidebar for button settings.
2. Choose a Style:
   • Fill – Solid background color
   • Outline – Border with transparent background

Customize button text, style, colors, and spacing in the block sidebar.

1. Select Background Color (for Fill style).
2. Select Text Color for the button text.
3. Adjust Border Radius to make corners more or less rounded.

Step 5: Configure Popup Settings

Now let’s configure how and when your popup appears.

Select the Simply Popups Block

How to select the parent block:

• Method 1: Click the icon in the top-left of the block toolbar, then select “Simply Popups” from the dropdown
• Method 2: Click in the space between the button and the content area
• Method 3: Open the Document Overview (≡ icon in toolbar) and click “Simply Popups”

Basic Settings

With the Simply Popups block selected, look at the right sidebar:

1. Show Close Button (toggle)
   • Turn ON to show an X button in the corner (recommended)
   • Turn OFF to hide the close button

1. Close When Clicked Outside (toggle)
   • Turn ON to close the popup when clicking the dark overlay (recommended)
   • Turn OFF to require using the close button

Configure close button and click-outside behavior in the Simply Popups block settings.

Trigger Type (Default: Button)

By default, your popup opens when someone clicks the button. This is perfect for your first popup!

Pro users can also choose:

• Link trigger
• Image trigger
• Page load trigger
• Exit intent trigger

Learn about all trigger types

Step 6: Style the Popup Content Area

Let’s make your popup look professional with some styling.

Select the Content Block

1. Click inside the popup content area.
2. Look for Simply Popups Content in the block toolbar or List View.

Content Styling Options

In the right sidebar, you’ll find:

Customize popup background, text colors, and size in the content block settings.

1. Size – Choose popup width:
   • Small (narrow popup)
   • Default (medium popup)
   • Large (wide popup)
2. Background Color – Set the popup’s background color
   • White or light colors work well for most content
   • Dark colors for dramatic effect
3. Overlay Color – The dark background behind the popup
   • Default is semi-transparent black
   • Adjust opacity for lighter or darker overlays
4. Text Color – Color for text inside the popup
   • Ensure good contrast with background color
   • Dark text on light backgrounds is most readable

Step 7: Preview Your Popup

Before publishing, test your popup to see how it looks.

Preview in the Editor

Click the Preview button (eye icon) in the top toolbar, then select:

• Preview in new tab – See the popup on a separate page
• Desktop/Tablet/Mobile – Test different screen sizes

Test the Button

In preview mode:

1. Click your trigger button
2. Verify the popup opens
3. Check that content displays correctly
4. Test the close button
5. Try clicking outside the popup to close it

Step 8: Publish Your Page

When you’re happy with your popup:

1. Click Publish (or Update if editing an existing page) in the top-right corner.
2. Click Publish again to confirm.
3. Click View Page to see your live popup.

Your published page with a working popup triggered by clicking the button.

Step 9: Test on the Live Site

Visit your published page and test everything:

Functionality Checklist

• Button appears on the page
• Clicking button opens the popup
• Popup content displays correctly
• Close button works (if enabled)
• Clicking outside closes popup (if enabled)
• Popup looks good on mobile devices
• Forms submit correctly (if you added one)

Common Issues

Popup doesn’t open:

• Clear your browser cache and reload
• Check browser console for JavaScript errors (F12 key)
• Verify button is visible and clickable

Popup looks wrong:

• Check for theme CSS conflicts
• Verify content block styling settings
• Test in a different browser

Full troubleshooting guide

Congratulations!

You’ve created your first Simply Popups modal! Here’s what you accomplished:

• Added the Simply Popups block to a page
• Created popup content with headings and text
• Customized the trigger button
• Configured close button behavior
• Styled the popup appearance
• Published and tested your popup

Best Practices for Effective Popups

Popups can be a powerful tool for conversion and engagement, but they must be used thoughtfully to avoid annoying your visitors. Here are essential best practices to ensure your Simply Popups are effective and user-friendly.

Respect the User Experience

• Use Click Triggers: The most user-friendly popups are those requested by the user (e.g., clicking a “Contact Us” button). These have the highest conversion rates because the user has expressed intent.

Content Design

• Keep it Concise: Popups have limited space. Get to the point quickly. Use a clear headline and a single Call to Action (CTA).
• Visual Hierarchy: Make sure the most important element (like the “Sign Up” button) stands out.

Accessibility

• Focus Management: Simply Popups handles focus management for you (moving focus to the popup when opened).
• Headings: Use appropriate heading levels (H2, H3) within your popup content to maintain a logical document structure.
• Alt Text: If you include images in your popup, ensure they have descriptive alt text.

Performance

• Load Light: Avoid putting heavy media (large videos or high-res images) inside popups that load on every page, as this can slow down your site’s initial load time.
• Clean Code: If using the Shortcode block, ensure your HTML is clean and valid.

Testing

• Preview: Always preview your popup on both desktop and mobile devices before publishing.
• Check Conflicts: If you have other plugins that manipulate the DOM or use extensive JavaScript, check for conflicts (e.g., z-index issues).

Using Multiple Popups on a Page

Simply Popups is designed to allow you to have as many popups as you need on a single page or post. Each popup functions independently, with its own trigger and content.

How It Works

When you add multiple [simply-popups] shortcodes or Simply Popup blocks to a page, the plugin automatically handles them behind the scenes:

1. Unique IDs: Each popup is assigned a unique identifier automatically.
2. Independent Content: The content for each popup is kept separate in the page footer.
3. Specific Triggers: Clicking a specific link or button will only open the popup associated with it.

Common Use Cases

Having multiple popups is useful for decluttering your pages. Common examples include:

• Policy Links: Separate popups for “Privacy Policy” and “Terms of Service” in your footer.
• Team Bios: A “Read More” popup for each team member on an “About Us” page.
• Service Details: Detailed descriptions for different services listed on a pricing table.
• Multiple Forms: A “Contact Sales” form and a separate “Request Support” form.

Example: Policy Links

Here is an example of how you might use shortcodes to create two distinct popups in your site’s footer:

[simply-popups label="Privacy Policy" modal_title="Privacy Policy"]
    <h3>Our Privacy Commitment</h3>
    <p>We value your privacy...</p>
[/simply-popups]

[simply-popups label="Terms of Service" modal_title="Terms of Service"]
    <h3>User Agreement</h3>
    <p>By using this site, you agree...</p>
[/simply-popups]

Best Practices for Multiple Popups

Avoid “Stacking” Popups

Unique Labels

Ensure your trigger links have distinct labels or styles so users know exactly what will open. If using custom buttons, you can style them differently to indicate different types of actions (e.g., a primary color for “Sign Up” and a neutral color for “Learn More”).

Next Steps

Now that you’ve mastered the basics, explore more advanced features:

Improve Your Popups

• Complete Styling Guide – Advanced styling for buttons, modals, and custom CSS
• Adding Content to Popups – Use images, videos, and more

Try Different Triggers

• Page Load Trigger Pro – Show popup automatically
• Exit Intent Trigger Pro – Catch leaving visitors
• Delayed Trigger Pro – Timed popup display

Advanced Features

• Developer Reference – Custom code and hooks
• Formidable Forms Integration – Form integration guide

Quick Tips for Success

Content Tips

• Keep it concise – Popups should be scannable in 5-10 seconds
• Clear call-to-action – Tell visitors exactly what to do
• Mobile-friendly – Test on phones and tablets
• Relevant content – Match popup content to page topic

Design Tips

• High contrast – Make text easily readable
• Strategic colors – Use brand colors or complementary shades
• Adequate spacing – Don’t cram too much content
• Professional images – Use high-quality visuals

User Experience Tips

• Easy to close – Always provide a clear way to dismiss
• Not too frequent – Don’t show the same popup repeatedly
• Right timing – Consider when the popup appears
• Value exchange – Offer something valuable for the interruption

Frequently Asked Questions

Can I have multiple popups on one page?

Yes! You can add multiple Simply Popups blocks to the same page. Each popup operates independently with its own trigger and content. See the Using Multiple Popups on a Page section above for details and best practices.

How do I change the popup after publishing?

Simply edit the page in WordPress, make your changes to the Simply Popups block, and click Update. Changes take effect immediately.

Can I copy a popup to another page?

Yes! In the editor:

1. Select the Simply Popups block
2. Click the three dots (⋮) in the block toolbar
3. Choose Copy
4. Open another page and Paste

Why can’t I find the trigger settings?

Make sure you’ve selected the parent Simply Popups block, not the button or content blocks. Use the List View or click between the button and content area to select the parent block.

Can I use Simply Popups without Gutenberg?

The block editor provides the best experience, but you can also use shortcodes with the Classic Editor. See the Alternative: Using Shortcodes section in the Gutenberg guide.

Related Articles

• Complete Styling Guide – Advanced styling for buttons, modals, and custom CSS
• Using Simply Popups in Gutenberg – Complete block editor guide
• Button Click Trigger – Master button triggers
• Troubleshooting Common Issues – Solve popup problems