A modal popup is a dialogue box that automatically appears over a webpage when the users fire a pre-defined trigger. They are used to serve various purposes, from displaying important notifications to collecting lead information and guiding users to complete specific actions.

Modals can effectively improve user experience. They provide a distraction-free environment where you can easily engage the users and make them complete the actions you want, like purchasing, subscribing, downloading a resource, etc.

In this tutorial post, we’ll show you an easy guide on how to open a modal popup on button click in WordPress. Get started.

Step 01: Install the Light Modal Block Plugin

Log into your WordPress dashboard. Navigate to Plugins> Add New Plugin.

Type the plugin’s name, Light Modal Block, in the search box at the top-right corner. Once the plugin appears, please Install and Activate it.

Step 02: Design a Poup

Open the Gutenberg block editor. You may open a new post/page as you want.

Add the Light Modal Block to the editor.

# Add the Popup Editor

Once the popup editor opens, you’ll see another Gutenberg plus (+) icon.

By clicking the plus (+) icon, you can add content to it and design the popup.

# Add Content to the Popup

You can see we have added the form block to the popup to collect leads for sending newsletters.

# Stylize the Popup

Go to the Styles tab on the right sidebar, keeping the popup selected. Now, you can stylize the popup using the options color, typography, dimensions, border, and shadow.

You can see that we have stylized the popup.

# Save the Popup with a Name

Come to the Settings tab. Under the tab, you’ll find the Modal Label option.

Write a name for the popup in the Modal Label section. Then, save the editor.

Step 03: Open a Page and Link the Modal to a Button

Now, open a page where you want to display the popup. Come to the button to which you want to link the popup.

Place your cursor on the button. On the right sidebar, click the Advanced option to expand it.

Once the section is expanded, toggle on the Show Modal on the Click option.

Then, click the dropdown option under the Modal section.

Select the modal popup that you saved just a while ago. Next, save the editor to preserve the changes.

Step 04: Preview the Modal Popup

Preview the page. Click the button. Hope the popup will open up instantly on your end. You can see it’s working on our page.

Conclusion

Implementing the modal popup perfectly can be a game changer to boost conversions on your site. But for better engagement and user experience, always try to keep the popup concise with valuable information. Overloading it with too much content might be distracting.

Besides, don’t add too many popups on the same page, as it could negatively affect user experience. Finally, ensure the popup is mobile-friendly, as over 50% of visitors to most websites today come from mobile devices.