How to show WordPress Popup on link Click of other Element using selector?

Key Takeaways

  • Nexter Blocks includes a Popup Builder block that allows users to create popups triggered by custom elements like images.
  • Users can add a class name to the Image block and configure the Popup Builder block to open popups on clicks of that image.
  • The Popup Load Settings tab requires users to set the Type to Hidden if there are no other popup trigger elements on the page.
Table of Contents

When creating a popup with the Popup Builder block from the Nexter Blocks you get the popup trigger element options within the block. 

While it is a great option but at times you might want to have the trigger element outside the popup or you might want to use some custom elements like an image as the popup trigger element. You can absolutely do that with the Popup Builder block using CSS classes.

To check the complete feature overview documentation of the Nexter Blocks Popup Builder block, click here.

Requirement  – This block is a part of the Nexter Blocks, make sure its installed & activated to enjoy all its powers.

Let’s say you want to use the WordPress Image block and when someone clicks on that a popup will open.

YouTube video

For this add both the Image block and the Popup Builder block on the page. Select the Image block and go to Advanced > Additional CSS class(es) and add a class name.

pop up builder content image block additional css class

Now select the Popup Builder block and go to Display Conditions > On Any Other Element’s Click and turn on the toggle. In the Element’s Class field add the same class name.

pop up builder content display condition any other elements click

Now the image will act as the popup toggle button you can use it to open and close the popup.

Note: Make sure there are no popup trigger elements on the page, so set the Type to Hidden in the Popup Load Settings tab.

About the Author

Photo of Aditya Sharma CMO of NexterWP
CMO at POSIMYTH Innovations · NexterWP · 7 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordpressThemesElementorn8nAIClaudeAutomationServer

Share your Thoughts

Get Instant Answers to all your questions about Nexter Blocks,
Extensions & Theme trained on 1000+ Docs and Videos

Still in Doubt? Let’s Assist You

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Related Frequently Asked Questions

What should I do if the popup doesn't appear when clicking the image?

If the popup doesn't show up, ensure that you've added the correct CSS class name to both the Image block and the Popup Builder block. This class name must match in the Element's Class field of the Popup Builder block. Additionally, check that there are no other popup trigger elements on the page, as this can interfere with the functionality. Setting the Type to Hidden in the Popup Load Settings tab can help avoid conflicts.

What are the best practices for using the Popup Builder block?

When using the Popup Builder block, it's crucial to ensure that the trigger element is correctly set up. Use a unique CSS class for the trigger element and ensure that it matches in the Popup Builder settings. Additionally, avoid having multiple popup triggers on the same page to prevent conflicts. Setting the Type to Hidden in the Popup Load Settings tab is also recommended to streamline the user experience.

Does the Popup Builder block work with other Gutenberg blocks?

The Popup Builder block is designed to work seamlessly with other Gutenberg blocks, allowing you to create versatile popup triggers. For example, you can use an Image block or any other block as a trigger by assigning a CSS class. This flexibility enables you to customize how popups are triggered on your WordPress site, enhancing user engagement.

What happens if I forget to set the CSS class for the trigger element?

If you forget to set the CSS class for the trigger element, the popup will not function as intended. The Popup Builder block relies on this class to identify which element should trigger the popup. Without it, clicking the designated element will not open the popup, leading to a frustrating user experience.

Are there any limitations when using the Popup Builder block?

One limitation of the Popup Builder block is that it cannot function as a standalone theme without Gutenberg. Additionally, if there are multiple popup triggers on the same page, it may lead to conflicts. It's essential to ensure that only one trigger is active at a time and that the Type is set to Hidden in the Popup Load Settings tab to avoid issues.

Last reviewed: April 15, 2026

Related Docs