Mega Popup

Mega Popup

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

file4

 

  • 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

import1

 

icon 1 when you click on Choose File, a popup will appear, please be careful to choose file to import (see the image below)

import file

After the templates are imported successfully, you can manage and find them in Search Tool option

import searchtool

 

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

export1

 

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

new popup

 

  • 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

new1

icon 1Title: the name of popup for a product, an event or an advertisement,... is required.
icon 2Popup 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 
icon 3Layer 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
4Popup layer area: This is the main part which includes the main content of popup.

icon 5Overlay 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 expandbutton and if you want to shrink the demo, you click on this button again.

When you click expand button, you can see 

new expand

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

overlay option3 

icon 1 Set image background:

- Click Select Image button to select image from folders or uploading from your computer or add image’s link

- Repeat:

 

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:

left top

 icon 2 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.

overlay display

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

image option2

icon 1Set 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.
      • icon 2Function
      • 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
      • function
      • 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)

icon 3Start 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.
4End 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:

image popup

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.

image multiple

 

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

text option

 

Popup Builder you can see:

 

text builder 2

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

html option1

 

Popup Builder you can see:

 

html builder1

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 button close icon to enable this plugin

plugin enable

 

  • The second way: click on Mega Popup - Snow Fall and then choose Enabled for Status option
  • plugin enable

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.

snow falling

 

Popup Builder you can see:

 

Snow builder

You will have clearer look about snow falling at demo

 

2.7. Layer ordering

The meaning of symbol

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.

layer odering

2.8 Duplicate and remove layers

Duplicate: Choose layer you want to duplicate and then click on duplicate buttonbutton 
Remove layer: Delete layer you want by clicking on it and then clicking on button 1 button.
Remove All Layers: Click on button 2 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

 

  • 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.

 

popup ID

 

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.

menu assignment

Frontend Appearance

frontend

 

Still have questions

If you have any specific request, or feedbacks as well as suggestions, feel free to contact us.

Don't have an account yet? Register Now!

Sign in to your account