📣 WordPress Popup Tutorial (with Popup Maker)

🎯 Goal: Create a promo popup that appears after 5 seconds with an optional “Shop Now” button, fully editable anytime.

---

🧱 Step 1: Install Popup Maker Plugin

1. Go to your WordPress dashboard.
2. Navigate to Plugins → Add New.
3. Search for Popup Maker.
4. Click Install Now, then Activate.

---

🪄 Step 2: Create a New Popup

1. In the dashboard, go to Popup Maker → Add Popup.

2. Name it something like Summer Promo.

3. In the content box, type or paste:

   <h2>🔥 20% Off This Week Only!</h2>
   <p>Use code <strong>SUMMER20</strong> at checkout.</p>
   <a class="button" href="/shop">Shop Now</a>
   

💡 You can also use Beaver Builder to design this popup (see Step 6).

---

⚙️ Step 3: Add a Trigger (Show the Popup)

1. Scroll down to the Popup Settings box below the content editor.
2. Click the Triggers tab → click Add New Trigger.
3. Select Time Delay / Auto Open.
4. Set the delay time to 5000 ms (5 seconds).
5. Click Add.

---

🎯 Step 4: Set Where It Appears (Targeting)

1. Click the Targeting tab in Popup Settings.
2. Click Add New Condition.
3. Select Entire Site or specify where you want the popup (e.g., Post Type → is equal to → Product).

---

🎨 Step 5: Style the Popup (Optional)

1. Go to the Display tab.

2. Choose a theme (or click to create your own).

3. Set:

   • Width (e.g., 500px)
   • Animation (e.g., Fade, Slide)
   • Position (e.g., Center)

4. In Close Settings, enable:

   • Close on overlay click
   • Close on ESC key

---

🧠 Optional: Step 6 – Use Beaver Builder to Design the Popup

Want to use Beaver Builder’s drag-and-drop features?

1. Create a new Beaver Builder layout and design your promo.

2. Save it as a Saved Template (from the top-right Tools menu).

3. Go back to your popup content editor.

4. Insert this shortcode:

   [fl_builder_insert_layout slug="your-saved-template-slug"]
   

   Or use the ID:

   [fl_builder_insert_layout id="123"]
   

---

🧪 Step 7: Test It Out

1. Click Publish (top right).
2. Visit your site.
3. Wait 5 seconds – the popup should appear.
4. Test closing it, clicking links, etc.

---

🔁 Step 8: Edit Anytime

1. Go to Popup Maker → All Popups.
2. Click Edit under your popup.
3. Change content, triggers, or styles easily.

---

💡 Bonus Tips

• 🧠 Use cookies to show only once per day: Go to Popup Settings → Cookies → Add New Cookie.
• 📱 Mobile-friendly: Test your popup on phones and tablets.
• 🧲 Pro Features: Exit intent, scroll triggers, and more available if you upgrade.

---

🎁 Bonus Section: Pro Tips & Cool Stuff for Popup Maker

---

🧲 1. Trigger on Click (e.g., Button or Image)

Want the popup to appear when someone clicks a button in Beaver Builder?

🔧 How-To:

1. In Popup Settings → Triggers → Add Trigger → Click Open.
2. Give it a CSS class like: popup-deal-button
3. In Beaver Builder, click your button or image → go to Advanced → HTML Class → paste popup-deal-button.

Boom. Now clicking the button opens the popup.

---

⏱️ 2. Add Countdown Timer for Urgency

Great for flash sales or limited-time offers.

Options:

• Free Plugin: Countdown Timer Ultimate
• Pro: Use UABB’s Countdown module in your Beaver Builder template

Place it directly in the popup or inside your Beaver layout template, and it works like magic.

---

🍪 3. Set Cookie Rules (Limit Repeat Popups)

Nobody wants the same popup every 10 seconds.

How:

1. Go to Popup Settings → Cookies → Add New Cookie

2. Choose:

   • Set cookie when popup is closed
   • Expire in 1 day (or more)

✅ Popup now shows once per user per day, not every time they reload.

---

🖼️ 4. Use Gorgeous Full-Width Backgrounds

Make your popup look like a mini landing page.

With Beaver Builder:

• Add a Row → Background Image

• Place your promo content inside

• Save as a Template

• Insert into Popup Maker with:

  [fl_builder_insert_layout slug="summer-promo"]
  

📸 Perfect for holidays, big events, or branding.

---

🧠 5. A/B Test Offers

Create two popups:

• A: 10% Off
• B: Free Shipping

Show each on different pages or alternate days using targeting and cookie settings, then track which one converts better.

---

🎯 6. Page-Specific Offers

• Show a “Free Gift” popup only on /cart
• Trigger a “Need Help?” popup only on the Contact page

Use Targeting Conditions:

• Current URL → is equal to → /cart
• Page → is equal to → Contact

This makes your popups super relevant.

---

🔎 7. Track Popup Performance

Add UTM parameters to buttons:

<a href="/shop?utm_source=popup&utm_campaign=summer-sale" class="button">Shop Now</a>

Then view traffic in Google Analytics or Fathom Analytics to measure popup ROI.

---

🧼 8. Close Popups Cleanly

Popup Maker lets you:

• Enable background click to close
• Press ESC key to close
• Add a little ✖ close icon with animations
• Use auto-close after 10 seconds if you’re just nudging

---

🤯 9. Stack Popups (Safely)

You can open one popup from another:

• Great for confirmation messages
• Use Popup Maker’s Open Popup shortcode or a button trigger

But don’t overdo it — too many popups = 💀 user rage.

---

🎉 10. Surprise & Delight Popups

Try:

• 🎂 “Happy Birthday” deals using user meta + shortcodes
• 🛒 “Still Thinking About It?” popups on checkout exit
• 🎁 “You unlocked a surprise!” popups after button click

Make it fun. Make it memorable. Make it click.

---

Absolutely — here’s a full section on how to use Popup Maker with Beaver Builder to create beautifully styled, reusable popups using drag-and-drop tools.

---

🧱 Using Popup Maker with Beaver Builder

🎨 Build Gorgeous, Custom Popups with Full Beaver Builder Control

---

✳️ Overview

Instead of using the basic WordPress editor inside Popup Maker, you can design your popup in Beaver Builder, save it as a Saved Template, and insert it into the popup using a shortcode.

This gives you complete visual control and makes updating promos super easy.

---

✅ Step-by-Step: Integrate Beaver Builder with Popup Maker

1. Create the Layout in Beaver Builder

1. Go to Beaver Builder → Templates → Add New.
2. Name it something like Summer Promo.
3. Choose Template Type: Saved Rows or Saved Layout.
4. Click Launch Beaver Builder to start designing.

2. Design Your Popup Layout

• Add Headings, Images, Buttons, Countdowns, etc.
• Use any Beaver Builder module you like (including UABB or PowerPack if installed).
• Keep the width around 500–700px for popups.
• Click Done → Publish when you’re finished.

---

3. Insert Layout into Popup Maker

1. Go to Popup Maker → Add Popup (or edit an existing one).

2. In the content box, insert this shortcode:

   [fl_builder_insert_layout slug="summer-promo"]
   

   Or use the layout ID:

   [fl_builder_insert_layout id="123"]
   

🔍 To find the slug or ID: Go to Beaver Builder → Templates → All Templates, hover over the title, and look at the URL (post=123&action=edit = ID 123).

---

4. Add Triggers and Targeting

• Set up Triggers (e.g., Time Delay or Click).
• Add Targeting Conditions for where it shows.
• Save or update the popup.

---

💡 Example Use Cases

Popup Type	What to Use in Beaver Builder
Flash Sale	Countdown + Call-to-Action button
New Product Teaser	Image + Short Description + Button
Exit Intent Opt-In	Form module + Incentive (PDF, etc.)
Holiday Promo	Themed background + animated text
Contact Reminder	Phone icon + quick message

---

🔁 To Update Later

1. Go to Beaver Builder → Templates → All Templates.
2. Edit the layout directly.
3. Any popups using that saved template will instantly reflect the change.

---

🔥 Extra Pro Tips

• 💻 Responsive: Beaver Builder layouts are mobile-friendly out of the box.
• 🧪 A/B Test: Use multiple saved templates and compare performance.
• 🧼 Keep It Simple: Don’t overload popups with full page elements (skip sidebars, menus).
• 🔗 Button Tracking: Add UTM tags to buttons to track conversions.

---