Getting Started With MD Popups

[toc]

← back to MD Popups

Install MD Popups + Activate License

MD Popups is a plugin that connects to the Marketers Delight Theme + Plugin suite. Before installing MD Popups, make sure you’ve updated both the theme and plugin to the latest version (minimum 4.3.4) to ensure the installation process goes smoothly.

With that in mind, head over to your Kolakube Downloads section and download the latest version of MD Popups to your computer. From there, login to your WordPress dashboard and navigate to Plugins > Add New and follow the onscreen instructions to upload the md-popups.zip plugin file.

After you upload MD Popups, activate it and the installation process is all done! From your Plugins screen, you can head over to Appearance > Popups to begin creating popups.

Upload Not Working?

If for some reason you can’t upload the plugin from the Dashboard, login to your FTP client and upload the unzipped /md-popups/ folder to the /wp-content/plugins/ directory and activate MD Popups from the Plugins menu.

Activate License Key

It’s recommended you always have your license key activated to ensure you get the latest plugin updates (new features, bug fixes, etc.) for MD Popups sent right to your dashboard.

Go to Appearance > Marketers Delight > License Keys and input the license key highlighted in yellow from your downloads receipt.

Create Your First Popup

You can create and manage all your popups from the Appearance > Popups section in your dashboard. There is no limit as to how many popups you can make, and you have basic features such as editing existing popups, deleting unneeded ones, and grabbing the shortcode.

Once you start building and designing popups you’ll notice that the Popups Manager will begin to design itself to match your custom designs. This is an easy way for you to browse all your popups and find them by design and label.

After you’ve created your first popup, go ahead and click the edit popup button that overlays the popup preview. You’ll be redirected to a Customizer screen where you can then build out your first popup with the pre-built options panel.

In the Edit Popup screen, you have a variety of options you can place your content in that will be formatted for you live. The elements you can add to your popup out of the box are:

• Headline, description, bullets, and a button
• Featured image
• Email form
• Custom HTML template

Now, there is no one set layout you can create with MD Popups. Once you get familiar with the settings, you’ll realize that you can format your content in any number of ways.

Experiment with uploading different Featured Image sizes (you could stream an image full-width across the entire popup, or align an eBook cover to the left of your headline text) and create different kinds of call-to-actions (email form or a button download)

And of course, you are given some powerful Design Options that allow you to style your popup any way you want.

Custom Templates

If you need more control than the Popups Builder gives you, then the Custom Templates panel is exactly what you’re looking for.

With Custom Templates, you have the ability to write your own custom HTML into a popup and format it exactly to your needs. You can even execute shortcodes here, which can be great for embedding contact forms or even login/register screens into popups.

Alongside writing your own custom HTML, you can write custom CSS if you need to make further customizations from the Builder.

Each popup is given a unique ID you can target so your changes only apply to the popup you’re customizing (the ID is given to you in the settings panel).

I always recommend writing custom CSS in your Child Theme, but this is a handy option if you’re in a rush.

There’s a growing list of free popup templates you can apply, all you have to do is copy the template code over or write your own.

Get Free Popups Templates

Playing Videos in a Popup

Display Popups on Your Site

After you’ve created some popups, you can begin displaying them throughout your site with either the shortcode or the valet admin options throughout your admin panel. Let’s explore the 3 different ways you can display popups on your site.

skip to: display a popup trigger with the shortcode ↓

Global Display Settings

At the bottom of the Popups Manager, you’ll see an area to display a default popup throughout your site. Think of this as your global command center for the main popup showing throughout your site.

The settings are pretty straightforward:

• Choose a popup: Choose from your currently active popups from the Popups Manager
• Show Method: Show popup as Exit Intent or on Delay
• Display: You can show the main popup sitewide, or finetune to only display on posts, pages, or categories
• Delay Time: How long (in seconds) before Exit Intent is detected, or popup is shown on delay.
• Cookie Expiration: The number of days to show the popup again to a visitor who has already seen it. Set 0 to never store cookie and show on every page load.

Once configured, click “Save Popups” and your selected popup will show based on the criteria you selected. Go ahead and test it out!

Individual Display Settings

Having global control over popups is nice, but you can get even more strategic by setting custom popups on an individual post/page/category basis.

Simply edit any post, page, or category and look for the Popups side meta box on the Edit screen.

You’ll be given the same exact options to control the popup display of that page as I explained above as well as the control to not display a popup on a page.

This is useful if, for example, you set a popup to show on all posts from the Global settings, but don’t want a popup to show on one of your posts.

Popup Trigger [shortcode]

You can trigger a popup to show by clicking any text link, button, or image with the shortcode. To grab a popups shortcode, click the “copy shortcode” button from the Popups Manager.

Once you have the shortcode, you can place it anywhere on your site to output a trigger, which will then call the popup of choice on click. Try pasting it in a post to see for yourself!

Shortcode not working in Text Widgets? Read here for a quick fix.

The default shortcode output is a button with the text “Open Popup” on it. You can change the trigger to a text link or image depending on how you want this popup to work in your content.

Here’s a rundown of the shortcode attributes:

			Open popup
	

• id — the unique ID of the popup to be shown on click.
• load — this will load the HTML of the actual popup to the footer of your site. If set to false, the shortcode will only output the popup trigger. If you place the same trigger multiple times throughout the same page, make sure you only load the popup HTML once.
• 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

Popup Trigger Custom HTML

If, for more advanced development purposes, you don’t want to use the shortcode to output the trigger, you can write custom HTML to trigger a popup.

First, get the ID of the popup you want to show from the Popups Manager (ex. mypopupid).

Then when you’re writing your HTML, apply the data-popup attribute and the md-popup-trigger class like so:

<span data-popup="md_popup_POPUPID" class="md-popup-trigger">My custom popup trigger

…the .md-popup-trigger class has no styling, so it can be applied to anything.

Keep in mind if you don’t use the shortcode to output a popup trigger, you will have to make sure your popup HTML is being loaded to the page.

For this reason, you can use the shortcode like so to only output popup HTML and no trigger:

Open popup

Working in a template file? Use this instead:

<?php echo do_shortcode( '
			Open popup
	
' ); ?>