Unlock Hidden Membership Site Growth: Elementor Popups + Memberium

Elementor is a powerful page builder that comes with built-in pop-up functionality. However, if you’re using Memberium to manage membership access on your WordPress site, you’ll quickly realize that Elementor’s default settings don’t allow you to trigger pop-ups based on Memberium tags. In this tutorial, we’ll explore how to integrate Elementor pop-ups with Memberium to ensure that only specific members see the right messages at the right time.

The Problem: Elementor’s Pop-Ups Don’t Work Natively with Memberium

By default, Elementor pop-ups cannot be controlled directly by Memberium’s membership protection or tagging system. For example, if you want to trigger a pop-up only for users who have a certain membership tag, Elementor doesn’t offer an out-of-the-box solution.

When you try to restrict a pop-up to a specific membership level using Memberium’s content protection options, it doesn’t function as expected. Instead of hiding the pop-up entirely, Elementor still triggers it, but the content remains hidden. This results in an odd user experience where a pop-up overlay appears with no visible content inside it.

The Solution: Using Memberium Shortcodes to Control Elementor Pop-Ups

The key to making this work lies in using Memberium shortcodes in combination with Elementor’s scroll-to-element trigger. Here’s how you can do it step by step:

Step 1: Create the Pop-Up in Elementor

1. In your WordPress dashboard, navigate to Templates > Popups and create a new pop-up.
2. Design your pop-up as needed and configure its settings.
3. Under Triggers, make sure the pop-up is not set to trigger on page load or scroll. Instead, you will trigger it based on an element.

Step 2: Set the Pop-Up to Trigger on Scroll to an Element

1. Under Advanced Rules, set the On Scroll to Element option.
2. Enter a unique CSS class name (e.g., .show-popup-trigger).
3. Save your pop-up settings.

Step 3: Use Memberium Shortcodes to Control Visibility

Instead of directly controlling the pop-up through Memberium settings, we will use a shortcode to show or hide the trigger element based on the user’s tags.

Example shortcode:

[mem_has_any_tag tag_ids="123,456,789"]
    <div class="show-popup-trigger"></div>
[/mem_has_any_tag]

Here’s how it works:

• The [mem_has_any_tag] shortcode ensures that the div element (which acts as the trigger for the pop-up) only appears for users with the specified tag IDs.
• If a user does not have any of the listed tags, the div remains hidden, preventing the pop-up from triggering.
• Since the Elementor pop-up is set to trigger only when this div is scrolled into view, it will not appear unless the condition is met.

Step 4: Insert the Shortcode in the Relevant Page

1. Navigate to the page where you want the pop-up to appear.
2. Add a Shortcode widget in Elementor.
3. Paste the above shortcode inside the widget.
4. Update the page.

Why This Works

This method ensures that the Elementor pop-up is only triggered when the user meets the specified membership conditions. If the user lacks the required tag, the trigger element never appears, and the pop-up remains inactive.

Additional Use Cases

This approach is particularly useful for:

• Upsell offers – Show upgrade prompts only to free-tier members.
• Lesson completion nudges – Prompt users to continue their courses based on their progress.
• Personalized greetings – Show dynamic welcome messages using Memberium’s [memb_contact] shortcode to insert the user’s name.

Final Thoughts

By combining Elementor’s pop-up functionality with Memberium’s powerful tagging system, you can create highly targeted user experiences on your membership site. While Elementor’s default settings don’t allow for direct Memberium integration, this workaround provides an effective solution.

If you have any questions about setting up Elementor pop-ups with Memberium, feel free to drop a comment below, and I’ll do my best to help!

Tools & Plugins that used

• Memberium
• Elementor Pro