Easy Modal Getting Started

Getting Started Guide

Get started with EasyModal no time. We’ll have those Popups on your site in minutes.

This guide covers the basics of EasyModal: Creating, Theming, Loading, & Calling your popups.

If you’re having trouble, check out our Support Forums over at WordPress, or if you’ve purchased an EasyModal product, see our on site forums.

Creating Your Popup

Adding a New Popup

Creating a Pop Up in EasyModal

Create a pop up by clicking the Add New button from the Modals screen.

Modals General Settings Tab

Once you create a modal or select one from the Modals Menu, you’ll be directed to the General Settings Tab

Modal General Settings

The Pop Up General Settings Tab.

Name (Required)

Enter a unique name for your pop up, as you can see, this is required. This is only used to identify your modals easily.

Load Type

This setting gives you two options:

Site Wide

If you enable the Site Wide Load Type on your popup it will be loaded in the footer of every page on your site (you still have to “Call” it – see below.) Obviously, this is very useful if you’re going to be using a particular popup on every page or the majority of your pages, for instance in your menu, sidebar or footer.

Per Page/Post

In some situations, it’s preferred to use the Per Page/Post Load Type because many times you might just be creating a special popup for a particular page or pages. In these circumstances, we don’t want a popup to load on every page, wasting valuable load time, therefore we can use Per Page/Post to load on only that page/post.

Per Page/Post Modal Editor
EasyModal Per Page/Post Editor (Minimized)

EasyModal Per Page/Post Editor (Minimized)

EasyModal Per Page/Post Editor (Maximized)

Maximizing the Editor drops down all your options for Per Page/Post pop ups.

Theme

Select your Theme from the drop down. Even if you haven’t created a theme yet, you will have access to the Default Theme. If you don’t have the Unlimited Themes Addon, you will only get the Default Theme, which you are free to customize, edit, change the name, etc.

Title

Think of this as your header of the popup – leaving this blank causes nothing to appear, which can be useful in some situations.

Content
WYSIWIG Content Editor

Not much to be said here: place any content you want into your popups easily and quickly. Any Short Codes, Forms, Images, anything you can think of.

Display Options

EasyModa Pop Up Display Options

Pop Up settings for size, animation, and position

Size

There are 3 categories of size:

Auto

Selecting Auto will cause the modal to size itself according to the content within it, regardless of user screen size. The popup will always stay the same size regardless of user screen size. This can be handy if you’re doing a popup that contains only an image, and you don’t want the image to be scaled in any way.

Responsive

The majority of popups are going to be of responsive type – they will resize automatically according to user screen size – choosing any one of these settings is a great option for practically any popup.

Non-Responsive

Use the Custom sizing option to make some exact sizes for Width on your popups (PX, EM, REM, and %.) Selecting this from the drop down gives you some interesting options for sizing your modals. Specifically the % option. This can be great if, say, you want a modal or lightbox to cover 1/3 of the screen, or 33%.

Using Non-Responsive also opens the Auto Adjusted Height Setting. Checking this feature, which in most cases you’ll want to use regarding Non-Responsive, will make the popup as tall as the content, other wise if unchecked and the content is too tall for the height of the modal, you’ll get a scroll bar in the popup itself.

Animation
Animation Type

Select from 6 options: None, Slide, Fade, Fade and Slide, Grow, and Grow and Slide.

Animation Speed

Use a slider to select the fastest animation possible (0 ms) or the slowest animation possible (1000 ms).

Animation Origin

Select where you want the modal animation to begin. There are 13 options: Top, Left, Bottom, Right, Top Left, Top Center, Top Right, Middle Left, Middle Center, Middle Right, Bottom Left, Bottom Center, and Bottom Right.

Position
Modal Positioning Settings

Modal Positioning Settings.

Location

This is where your pop up will be located, and if you’ve attached some type of animation, this is where the pop up will be at the end of such animation. Remember, you set the Animation Origin in the Animation Settings.

There are 9 options here: Top Left, Top Center, Top Right, Middle Left, Middle Center, Middle Right, Bottom Left, Bottom Center, and Bottom Right.

Fixed Positioning

If you check this box, the Positioning of the pop up is set to Fixed (a la CSS). In other words, it will keep the pop up in the same position, no matter the circumstances.

Positioning Sliders

These will switch depending on what setting you choose for Location. These sliders give you the ability to precisely control how far from the edge of the screen your popup will be.

Close Options

EasyModal Closing Options

EasyModal gives you numerous options regarding how users can close pop ups.

Click Overlay to Close

Users can close the pop up by clicking the background overlay behind the popup.

Press ESC to Close

Pretty self explanatory – enabling this lets users close the popup by pressing Escape.

Disable Close

This Force User Action Add On allows you to disable and hide the close the button on the pop up, forcing users to act. For example, this can be useful if you want to get user input before they are able to access the page behind it. Works well with Login Modals and Auto Open.

Examples

The Examples Tab has everything to do with Calling Your Popups – more information on this below.

Theming Your Popup

Clicking on one of your Themes take you to the General Settings Tab

Theme General Settings Tab

Theme General Settings Tab.

If you haven’t named your Theme, you’ll be required to do so.

Overlay, Container, Title, Content & Close Button Theme Settings

Theme Overlay Settings

Theme Overlay Settings Tab.

Theme Container Settings

Theming your pop up container is a snap.

Theme Title Settings

Theme the Title of your pop up.

Theme Content Settings

Theme the content and style the text.

Theme Close Settings

Theme the Close Button.

Choose from a plethora of settings, 55 to be exact, to customize your pop up like never before. Edit text styles, padding, and shadows, change you container and overlay background colors and images, plus much more. Theme every element of your popup.

You may also be interested in our Unlimited Themes Addon or our Advanced Theme Editor Addon.

Loading Your Popup

As mentioned above, there are 2 ways to load your popup (Load Type):

Site Wide

Choosing the Site Wide Load Type does exactly that. You’ll want to use this Load Type if the particular popup is going to be used frequently throughout your site.

Per Page/Post

Use this Load Type if the said modal or lightbox is only going to be used but on a few pages/posts or a single page/post. Once you’ve set this load type, find the particular page/post you want to load it on and if it’s not already maximized, maximize the Per Page/Post Editor at the bottom of said page or post.

The editor will show a list of your popups, and you can then check your desired popup to load on this particular page/post.

Note: If you’ve set the Load Type to Site Wide, then it will not be displayed in this list because it’s set to load on every page automatically.

Per Page/Post Editor - Pop Up Loaded

Checking a Pop Up and clicking the Update button on your Page/Post will cause the pop up to now load on that Page/Post.

Calling Your Popup

Using CSS (on-the-fly or copy/paste)

You can get any element to open any popup on click – just add a class of eModal-# to the element, where # is the unique ID # for your modal in the Modal Editor.

For example, to make a button popup a window when you click it is as simple as:

<button class="eModal-1">Open Modal</button>

Easy Modal Code Snippet Examples

Copy/Paste these Easy Modal Code Snippet Examples into your code to call your modal.

You can also copy/paste the code snippets found on the Examples Tab for your particular modal.

You’re All Done

Once you’ve loaded your pop up Per Page or Per Post, and added the appropriate eModal-# class to your element, there you have it, pop ups in minutes.

Using Short Codes to Load and Call Your Pop Ups Simultaneously

These are great for fast, on-the-fly work, and the EasyModal Short Code has many potential attributes (more below) – however, `id` is the only required field.

If you want to load many or several modals or popups on a single page, but all of them have different content, you should use Easy Modal Short Codes.

If you don’t do it this way, then you’ll have to create a different modal for every single instance that it will have different content, and depending on your situation and how you are using Easy Modal, this could be a large number! It could take a long time! This is not ideal and is very tedious.

For this reason, we’ve given you the ability to Load, Call, input custom content, set your modal theme, and set many other attributes, on-the-fly, straight into your Page Content Editor or page template!

As a result, you don’t have to go all the way to the Modal Content Editor, you can add custom content using short codes straight from your Page Content Editor or page template.

Using Short Codes, you can do all of this, and you only have to create one modal.

First, add your element and include the appropriate class (eModal-The-Pop-Up-Name) – this goes in your Page Content Editor or your page template.

<button class="eModal-The-Pop-Up-Name">Open Modal</button>

Note: Typically, you will use the e-Modal-# class format with your element for non-short code modals, but with short codes, you’ll want to use the eModal-The-Pop-Up-Name format.

Now, directly after that, add the pop up Short Code – it should wrap around the content of the pop up like so:

[modal id=The-Pop-Up-Name theme=2]
Put your content and other [shortcodes] here.
[/modal]

Placing this code directly after your e-Modal class element gives you the ability to Load and Call your popups simultaneously.

Note: While the id is the only required Modal Short Code Attribute, the theme attribute is very handy also!

The Result

Attributes

As mentioned above, there are many Short Code Attributes you can use while building modals with Short Codes:

  • id: A unique identifier for your modal, will be used to open this modal
  • title: Will show above content if not empty
  • theme: Theme ID# – default (1)
  • size: Either a predefined responsive size or custom – default (normal)
  • width: float representing the width
  • widthUnit: unit of measure for user defined width – default (px)
  • height: float representing the height
  • heightUnit: unit of measure for user defined height – default (px)
  • animation: – default (fade)
  • duration: – default (350)
  • direction: – default (down)
  • overlayClose: if true, clicking the overlay will close the modal – default (false)
  • overlayEscClose: – default (false)
  • closeDisabled: – default (false)
EasyModal Pro Add On Bundle

Unleash the Full Capabilities of EasyModal and Transform Your Website

Receive 6 Powerful Addons for $40! A $62 value!

Streamline your GUI, improve user experience, and market content on your website like you never could before – all in minutes!

Get it Now!

[edd_social_discount]