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.
Once you create a modal or select one from the Modals Menu, you’ll be directed to the General Settings Tab
Enter a unique name for your pop up, as you can see, this is required. This is only used to identify your modals easily.
This setting gives you two options:
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.
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
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.
Think of this as your header of the popup – leaving this blank causes nothing to appear, which can be useful in some situations.
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.
There are 3 categories of size:
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.
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.
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.
Select from 6 options: None, Slide, Fade, Fade and Slide, Grow, and Grow and Slide.
Use a slider to select the fastest animation possible (0 ms) or the slowest animation possible (1000 ms).
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.
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.
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.
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.
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.
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.
The Examples Tab has everything to do with Calling Your Popups – more information on this below.
If you haven’t named your Theme, you’ll be required to do so.
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.
As mentioned above, there are 2 ways to load your popup (Load Type):
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.
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.
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>
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.
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.
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!
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)