How to Visually Design and Deploy Popups Around Your Website

Learn how to deploy a simple notification popup around your site with multiple trigger events and quick display options. First, go to WP Admin > MD > Optins > Popups to add a new popup.

Now that you have created a popup open the settings and click the “Edit in Customizer” button to launch the Popups Designer. You can also access the Popups Designer by going to Appearance > Customize > Popups Designer.

From here you will see a blank canvas to create your new popup. Don’t worry, the MD Popups Designer makes it easy to design plug-and-play popups with versatile templates and quick publishing of effective optin forms.

For this tutorial we will create a “Notification” Template by swapping the template base at the top of the controls.

As you change templates the Text, Image, Button, Email, and Design controls all adapt to fit the current popup design template. Some templates may need refining as they hold content differently, but that’s where the precision of the design controls come in.

With the Notification template we have a blank canvas to create a simple alert with an email form in no time:

When you first start there will be a small learning curve as you see how each control—standardized for all current and future popup templates—interacts with each template and your custom content and images.

You also have a lot of power when it comes to adding call to actions like buttons and email forms available as simple settings:

And you can even create two step button popups by linking other popups together:

In addition to the visual content editing controls, more advanced users can create their own HTML templates using the current popup template and styles as a frame to quickly structure your custom popup:

Take this time to get familiar with the Popups Builder and how the popups design process works. The better you get, the faster you will be able to adjust and redeploy new popups for different offers and uses.

Now that you have created your popup make sure to save your settings, then you can return to the Popups Manager page (tip: press the “X” at the top left of the Customizer to go back) and start adjusting your display settings:

You will see how easy it is strategically deploy popups to key areas of your website, and even supports custom post types, taxonomies, and single pages.

As you can see in the above screenshot I am showing this popup on the Front and Blog page of my site after the user scrolls 35% of the way down the page, and also trigger a cookie to hide it for 7 days after they see it.

Remember… be respectful with your popups! They are a powerful conversion machine when used tastefully, but have the opposite effect when used nefariously.

That’s why to enhance the user experience of Popups we have made their designs simple to be effective lead magnets, and easy to close if a user is just completely uninterested:

You can also create popup triggers by copying the md_popup shortcode (next to the “Edit Customizer” button. This shortcode loads an inline trigger that can be a text link, button, or image, and shows the popup on click.

The default shortcode looks like this:

[md_popup id="vsRugb2" type="button" text="Open popup"]

Open popup

Which produces a main button with the “Open popup” text. The shortcode has the following parameters:

• id — the unique ID of the popup to be shown on click.
• type — change to button, link, or image.
• image — if you set type to image, set this attribute to the URL of the image you want to display
• text — The text to show as the button text, text link, or image alt tag.
• classes — any custom CSS classes you wish to apply to the trigger

Finally, you also have the ability to add/remove popups from individual pages on any Edit Page or Edit Category screen. These controls are available in the MD Optins meta box below the post editor:

As you can see you have a lot of power with the MD Optins Popups Designer and we hope you will wield this feature for good, and after many hours and iterations of this feature we hope it collects you many more new subscribers and customers to your online business.