Introduction
1. What is Mega Popup
Mega Popup is a outstanding Joomla 3 extension developed by ExtStore team, which will help you create a great and functional popup for your site. The popup have a attractive look, neat/ useful content and awesome animation.
Mega Popup helps you to increase the effect of your marketing campaign and the traffic of your site.
2. Features
Powerful Builder: Creating a popup was never so easy!
- Visual builder allows you see how popup look like on frontend.
- Selectable, draggable, and rotatable layers in visual builder makes it fun to decorate the popup’s content.
- Editting tools with shortcuts: Duplicate Layer (Ctrl + D), Remove Layer (Delete), Undo (Ctrl + Z), Redo (Ctrl + Y).
Layers System
- There are 4 built-in layer types: Image, Text,HTML, and SnowFall. More types will be added in the future for sure.
- Image Layer: Allows you add image, hover image into your popup. Furthermore, it allows you click to close popup on/off music, or open a link
- Text Layer: You can add popup’s content with Google Font support and all typography options.
- HTML layer: If image and text layer is not enough for you, HTML layer is the thing you need. You can add form or special html tag into your popup’s content.
- SnowFall Layer: Add snow fall effect for your popup.
- Plugin support: If you are a developer, you can write your own plugin to define more layer types. It’s easy!
Layer Animation: Don’t make your popup boring, make it interesting.
- You can set when a layer show, or when it hide with many options of effect and easing
- There are some effects that make your users feel your popup is not boring: fade, move from/to left, move from/to right, move from/to top, move from/to bottom.
Tons of other features
- Import/Export Popup: Allows you to backup or share your popup easily.
- Template Support: Allows you apply a predefined popup template to you new popup.
- Popup Music: The popup can play a music while appearing.
- Responsive Design: The user experiences are the same for any screen: PC, tablet or mobile.
3. System Requirement
Your system needs to meet the following requirements before proceeding the extension’s installation.
Joomla version:
- Joomla 3.3+
Solfware:
- PHP: (Magic Quotes GPC off): 5.3.1+ (5.4+ recommended)
- MySQL: (InnoDB support required): 5.1+
- MSSQL: 10.50.1600.1+
- PostgreSQL: 8.3.18+
Webservers:
- Apche: 2.x+
- Microsolf IIS7
- Nginx 1.0 (1.1 recommended)
Installation
1. Download
From frontend, go to extstore.com => My download to download 2 files: com_megapopup and Xmas_template
- com_megapopup is used for installing
- Xmas_template is a file including free Xmas and New Year templates which is a gift from ExtStore team. It is used to import after you install com_megapopup successfully
2. Upload extension
If you are new to Joomla, kindly find detail guide of how to install Joomla extensions Here
3, Import/ Export templates
3.1. Import templates:
We offer you some Xmas and New Year templates used for Mega Popup, You can download file Xmas Template within file com_megapopup.
To import templates, from backend, click on Import button, a popup window will appear, please follow the step below
when you click on Choose File, a popup will appear, please be careful to choose file to import (see the image below)
After the templates are imported successfully, you can manage and find them in Search Tool option
3.2. Export a popup:
After a popup is completely created (please follow all the steps below to know how to create a popup). you can export that popup into a file zip by following the simple steps on image below. You will receive the file megapopup-export-....zip. It allows you backup and save your popup easily
4. Enable ExtStore Mega Popup
The component Mega Popup includes component, module and Snow Fall plugin
- Enable component to create and design a excellent popup.
- Enable module by setting Published and choosing position. Enabling module will help you show popup on frontend.
- Enable Snow Fall plugin by setting Published. This plugin make your popup lively with the effect of snow falling.
Usage
1, Create new popup/ Edit Templates
From backend, choose Component => ExtStore Mega Popup, click New button to create a new popup. You can see there are 2 main parts: Popup Builder and Configuration
After you imported templates, when you click on New button, a popup will appear (see the image below). Click on Blank Popup to create a new one. Click on current templale to edit
- If you want to use current template, click on it and enter title, edit something as your needs and then save normally
- If you want to create a new popup, click on Blank Popup. And the instruction which helps you create a new popup is below
Create a new popup: You can see there are 2 main parts: Popup Builder and Configuration
Title: the name of popup for a product, an event or an advertisement,... is required.
Popup Builder: This part allows to see demo for the change of popup when you edit anything. You also can edit the position and size of layers by mouse here.
Configuration: This part allows you to config a popup 
Layer Ordering: like a dashboard to manage and edit layers by click on the layer. It also helps to change order of layers by dragging and dropping a layer to the position you want in Layer Ordering part
Popup layer area: This is the main part which includes the main content of popup.
Overlay layer area: This is background which sets off the popup layer.
Note that if you want to see the demo at the backend with larger screen, you can click on 
button and if you want to shrink the demo, you click on this button again.
When you click expand button, you can see
2. How to create a design.
2,1. Overlay layer
Click on Overlay to config Overlay layer
Overlay Option
There are two ways to display background of popup by image or color
Set image background:
- Click Select Image button to select image from folders or uploading from your computer or add image’s link
- Repeat:
Please note that this option is valid for small image only.
- Repeat: image will be repeated to cover overlay background.
- Repeat Horizontally: image will be repeated horizontally on overlay.
- Repeat Vertically: image will be repeated vertically on overlay
- Set position of image background:
Set color background: You are allowed to set color and its opacity for overlay instead of images.
Please note that image background and overlay background can be set at the same time.
2.2. Popup Layer
Set color for popup layer
Click Color option to select color and you can change the opacity of color by slider.
Set position and size of popup
You can choose the position for popup layer on top, bottom, right, left,... of the screen by clicking one of these squares
Offset X: Move the position of layer in regard to X axis.
Offset Y: Move the position of layer in regards to Y axis.
Width and Height options allow you to set size for popup as you want.Set function for popup layer
- Audio: You can add link audio (.mp3 and .mp4) into popup
- Show Delay: Delay time for Popup to appear in seconds (by default 1s = 1000)
- Show: This option allows you to set the times to show popup on your site: once/ always/ once per session.
2.3. Create an image layer.
In Popup Builder part, click on Image option to create a Image layer. A popup window will appear to choose image from library or upload from your computer.
There are two parts will appear: Popup Builder and Image Option. And please note that what you change in Image Option is what you get in Popup Builder
Image option
Set position/ size/ slope for image layer
You can choose the position for image layer on top, bottom, right, left,... of the screen or popup layer by clicking one of the squares
- Choosing Popup for Relative to option means the position of image layer will relate to Popup Layer.
- Choosing Screen for Relative to option means the position of image layer will relate to the screen
- Please note that the layers which are at the corner of the screen, you should set relative to Screen, and the others will be set relative to Popup
- You can set size of image by Width, Height and Angle option.
- Function
- Allow to choose close popup (user can click to image to close popup), on/off music (users can click to turn on/turn off music). open URL (link to another page when users click on image).
- If you select Open URL, there are two other option will appear: Link URL and Open Link in
- Link URL: URL you want to add to popup
- Open Link in: Same Tab (the link will be opened in the same tab), New Tab (the link will be opened in the other tab)
Start Transition
This part allows you to set time/ animation for image layer to appear.
Time: Set delay time for this image layer appears, in seconds
Duration: Set speed of image layer to appear, in seconds
By default: 1000 = 1s
Effect and Easing option: Make animation for image layer to appear.End Transition
This part allows you to set time/ animation for image layer to disappear.
Time: Set time to show this image layer, in seconds.
Duration: Set speed of image layer to disappear, in seconds.
By default: 1000 = 1s
Effect and Easing option: Make animation for image layer to appear.
Please note that the time at End Transition part need to be greater than time at Start Transition part so that image layer can disappear.
If you set the value of time in both two part are 0 or time at End Transition part is less than time at Start part, this image layer will appear normally and doesn’t disappear.
Popup Builder you can see:
In Popup Builder part, you can move the position/ size or slope of image by mouse.
You are allowed to add as many images as you want into popup and set their position.
2.4. Create a text layer.
In Popup Builder part, click Text to create a Text layer
There are two parts will appear: Popup Builder and Text Option. And please note that what you change in Text Option is what you get in Popup Builder
Text option
Mega Popup allows you to add popup’s content with Google Font support and all typography options like at Microsoft Office Word. Sure that all of them are familier with you
Popup Builder you can see:
In Popup Builder part, you can move the position/ size and slope of Text layer by mouse.
You are allowed to add as many text layers as you want into popup and set their position.
2.5 Create HTML layer
In Popup Builder part, click HTML to create a HTML layer.
There are two parts will appear: Popup Builder and HTML Option. And please note that what you change in HTML Option is what you get in Popup Builder
HTML option
Popup Builder you can see:
In Popup Builder part, you can move the position/ size and slope of HTML layer by mouse.
You are allowed to add as many HTML layers as you want into popup and set their position.
2.6. Snow Fall
This feature will help you add snow falling into popup. It will make your popup lively
Step 1: Enable Mega Popup - Snow Falling plugin
From backend, go to Extensions => Plugins, search for Mega Popup - Snow Fall,
There are two ways to enable plugin
- The first way: click
icon to enable this plugin
- The second way: click on Mega Popup - Snow Fall and then choose Enabled for Status option
After that Snow Fall option will appear at Popup Builder part.
Step 2: Create Snow Falling
From Popup Builder, click Snow Fall to create Snow Fall layer.
Popup Builder you can see:
You will have clearer look about snow falling at demo
2.7. Layer ordering
The meaning of symbol
Layer ordering include two functions:
- It is like a dashboard to manage and edit layers by click on the layer.
- It helps to change order of layers by dragging and dropping a layer to the position you want in Layer Ordering part
A layer can overwritten the others depending on the order of them in this part.
2.8 Duplicate and remove layers
Duplicate: Choose layer you want to duplicate and then click on 
button
Remove layer: Delete layer you want by clicking on it and then clicking on 
button.
Remove All Layers: Click on 
button you will delete all layers created before.
2.9 Popup Type
You can manage popups easily by assign type for them: Popup type or Template type
- Popup type will appear at the main screen and at Search Tool
- Template type will appear at the popup windown when you click on New buttons and at Search Tool
3. How to display your design in front - page.
To display Popup on the frontend, you need to enable ExtStore Mega Popup module first
From Administrator site. choose Extensions => Modules, search for ExtStore Mega Popup.
Here are the detail configuration of Popup module.
Step 1: Select Popup ID and enable module
Click on Select a popup to choose the popup you want to display
Step 2: Module Assignment
You can choose one of On all pages, No pages, Only on the pages selected, On all pages except those selected from the list. To assign to some but not all pages choose the third option and select the menu links that you want the module associated with.
Frontend Appearance
Still have questions
If you have any specific request, or feedbacks as well as suggestions, feel free to contact us.