Skip to main content

Mega Popup For WordPress

The Best Choice for Your Marketing Campaigns

Introduction

Mega Popup is an outstanding WordPress plugin developed by ExtStore team, which will help you create a great and functional popup for your site. The popup has an attractive look, neat/ useful content and awesome animation. You are easy to add image, text. Html, snowfall as well as hanging decoration into your popup. In addition, you can browse our beautiful design templates for all your popup needs.

Mega Popup helps you to increase the effectiveness of your marketing campaign and the traffic of your site.

Features

  • Powerful Builder: Creating a popup was never so easy!
    • Visual builder allows you see how popup looks like on frontend.
    • Selectable, draggable, and rotatable layers in visual builder make it fun to decorate the popup’s content.
    • Editing tools with shortcuts: Duplicate Layer (Ctrl + D), Remove Layer (Delete), Undo (Ctrl + Z), Redo (Ctrl + Y).
  • Smart Layers System
    • There are 5 built-in layer types: Image, Text, HTML, SnowFall and Hanging Decor. 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.
    • Hanging Decor Layer: Decorate your popup by hanging image, you also can make a twinkling effect to your popup.
    • Plugin support: If you are a developer, you can write your own plugin to define more layer types. It’s easy!
  • Attractive 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 your new popup.
    • Popup Music: The popup can play music while appearing.
    • Responsive Design: The user experiences are the same for any screen: PC, tablet or mobile.
    • Set opacity of layers.
    • Show different popups for different pages of one website.
    • Support hover effect.

Click here to view demo.

System Requirement

System requirement for Mega Popup is the same as WordPress. Mega Popup requires WordPress version 4.4 or greater , PHP 5.6 or greater and jQuery 1.7 or greater. We recommend you always update your system to the latest version of WordPress.

Install plugin via WordPress

  • Step 1: Download plugin to your local machine as a zip file package.
  • Step 2: From WordPress Admin area => go to Plugins => click on Add New button.

  • Step 3: Click on Upload button => Choose File button and select the plugin package on your local machine => click on Install Now button to install the plugin.

  • Step 4: Please wait for some seconds, WordPress will extract and install plugin automatically. Click on Activate Plugin link to activate plugin.

Install plugin via FTP

In some cases, you can’t install plugins at WordPress Admin area, therefore, the best solution for you is to install plugins via FTP.
  • Step 1: Download plugin to your local machine as a zip file package.
  • Step 2: Extract the zip file on your computer.
  • Step 3: Upload the extracted plugin folder into wp-content => Plugins folder.
  • Step 4: Activate the newly installed plugin by going to Dashboard => Plugins and click on Activate link to activate the plugin.

Import/ Export Template

A powerful feature from Mega Popup lets you import/ export popup files. It helps you be easy to build up popups totally like the same as our demos and to back up your own popups. You can use an exporting file for any WordPress site.

Import Template

ExtStore offers you unlimited popup demo files, and you can import them to your site easily. This importing feature will make your popup is totally the same as the demo about design and animation.

To import popup files, please follow 2 easy steps below:

  • Step 1: From WordPress admin site => Mega Popup => click on Import button.

  • Step 2: A popup window appears, click on Choose File to choose popup file => Tick on the box of Import as Templates field => Press on Process button.

  • Step 3: Please wait a moment, the popup will be imported and you can find them at Template part.

Export Template

Mega Popup supports you the exporting feature to back up and store your popup easily. Then you can import that popup to any WP site as you want. You can export single popup or multiple popups at once.

To export single popup.

  • Step 1: From WordPress admin site => Mega Popup.
  • Step 2: Hover on the popup you want to export, a control bar will appear to allow you to edit, export or delete that popup.
  • Step 3: Click on Export link and wait for some seconds, a popup file will be exported.

To export multiple popups.

  • Step 1: From WordPress admin site => Mega Popup => Tick on the box of popup you want to export.
  • Step 2: Click on Bulk Action to see the drop-down list => choose Export => click on Apply to start exporting process.
  • Step 3: Wait for some seconds, your popup file will be exported and you can store it on your local computer.

Popup Type/ Template Type

Difference between Popup type and Template type

  • Popup type: If your popup is saved as Popup type, it will be added at the available list to display on frontend.
  • Template Type: If your popup is saved as Template type, it will be stored at Template part. You need to transfer your popup from Template type to Popup type to show on front page.

You can save your popup as Popup type to be available to show on frontend

  • Step 1: From Dashboard => Mega Popup => Click on Popup link => Add New Popup button.

  • Step 2: A popup window will appear, click on Blank Template to add totally new popup or click on the available template to edit.

  • Step 3: Build up a popup: Enter Title of Popup => choose Popup Type is Popup => Create and config layers => click on Save/ Save & Close button.

How to create a new template

  • Step 1: From Dashboard => Mega Popup => Click on Popup link => Add New Template button.

  • Step 2: Build up a template: Enter Title of Popup => choose Popup Type is Popup => Create and config layers => click on Save/ Save & Close button.

Layer Settings

General Introduction

Enter title of the popup. It’s required.

Select Popup Type: By clicking on the arrow-down icon, you can save the popup as a popup or a template.

Popup Builder

3.1. Popup Builder bar: contains a powerful control bar which allows you to create new layers, remove layers, undo, redo and expand Popup Builder.

  • Image/ Text/ HTML/ Snow Fall/ Hanging Decor button: Click on each button to add new layer into popup.
  • Duplicate Layer: Click on the layer you want to duplicate, then click on button, another layer with the same design and the same effect will appear.
  • Remove Layer: Click on the layer you want to remove => click on button.
  • Remove All Layer: Click on button to remove all layers of popup.
  • Undo/ Redo: Allow you to reverse the most recent editing command.
  • Expand button: Click on button to expand Popup Builder to be full of the screen. Click this button again to shrink.

3.2. Visual Builder: Popup Builder is a powerful and visual builder. It allows you to see how popup looks like on frontend and even you can directly change the position/ size/ rotate angle of layers by mouse.

  • Change position: Press and hold the mouse on the layer and move it to anywhere you want.
  • Change size of layers: You are easy to change the size of layers by mouse, It is the same as changing the size of table at Microsoft Office software.
  • Change rotate angle: Click on the layer you want to change the rotate angle, you will see icon. Press on this icon, hold the mouse and rotate.

Layer option This part is maybe Overlay Option/ Popup Option/ Image Option/ Text Option/ HTML Option/ Snow Fall Option/ Hanging Decor Option. It’s based on the layer you set up.

You can upload image, set layer position, layer size, layer effect there by entering exact numbers. It’s different from Popup Builder part which allows you to change position/ size of layers visually.

Note that: Everything you change at Layer Option will be displayed at Popup Builder part immediately.

Overlay layer/ Popup layer

  • Overlay layer: This is the popup background which sets off the popup layer. Click on Overlay to build up a nice overlay.
  • Popup layer: This is the main part which includes the main content of popup. Click on Popup to config a popup.

Layer Ordering

All of the layers will be ordered at Layer Ordering part (except Overlay layer and Popup layer)

  • Symbol meaning
    • Eye icon has the same meaning as in photoshop software. Turning on/ off this icon is to show/ hide layers.
    • Lock icon allows you to make layers be fixed.
    • Denotes for Image layer.
    • Denotes for Text layer.
    • Denotes for HTML layer.
    • Denotes for Snow Fall layer.
    • Denotes for Hanging Decor layer.
  • Override feature

    A layer can overwrite the others depending on the order of them in Layer Ordering part. And you are easy to arrange layers by dragging & dropping function.

Save your popup

  • Click on Save/ Save & Close button to save popup.
  • Click on Cancel button to cancel your change.

Overlay Layer

From Dashboard => Mega Popup => Click on Overlay to config Overlay layer. The Overlay can have image background or color background.

Overlay Option

Set Image Background

  • Click on Select Image button to upload an image from your local computer or from your library.
  • Repeat: If the image for the background is small, you can make its duplicate by choosing Repeat, Repeat Horizontal, Repeat Vertical or No Repeat.
  • Top Left: This option allows you to choose image position at Overlay layout.

Set Color Background

  • Color: Click on the box to choose a color you want and you can set color opacity.
  • Opacity: This option allows you to change Overlay opacity.

Close Popup on Click: This option allows users to close popup when clicking everywhere on overlay field

At Popup Builder part you can see:

You can set color, position and add audio for Popup layer

Popup Option

Set background color for Popup layer

  • Click on the box and choose a color as you want. You also can change color opacity.

Set position and size for Popup layer

  • Position: You can choose popup position on the top/ bottom/ right/ left… of the screen by choosing a square.
  • Offset X: This option allows you to move layer position based on X-axis (by pixel).
  • Offset Y: This option allows you to move of layer position based on Y-axis (by pixel).
  • Size: Enter the value for Width & Height options (by pixel) to decide the size of popup layer, or you can directly edit the size of popup on Popup Builder part.

Set function for Popup layer

  • Audio: You can add file mp3 or mp4 to popup so that your popup will be more lively.
  • Show Delay: Set delay time for Popup to appear in seconds (by default 1 second = 1000).
  • Show: You can decide numbers of popup’s appearance on your site by choosing Once/ Always/ Once per session.

At Popup Builder part you can see:

Create an Image Layer

From Dashboard => Mega Popup => Popup Builder part => click on Image button to create an Image layer. A popup window will appear allows you to upload images from your local computer or select an image from the library.

Image Option

Upload an Image Layer

  • Image: Click on Select Image button to upload an image from your local computer or select an image from the library.
  • Image Hover: Choose another image appearing when users hover over image layer.
  • Alternative Text: This option allows you to enter the image name which appears at Layer Ordering part so that you will be easy to control your layers.

Set Color Background

  • Related to: You can decide the image layer related to Popup or Screen.
  • Opacity: This option allows you to change the opacity of image layer. It will be easy for you to design your popup.

Set Image layer position

  • Audio: You can add file mp3 or mp4 to the popup, so that your popup will be more lively.
  • Position: Choose image layer position on the top/ bottom/ right/ left… of the screen or popup by choosing a square.
  • Offset X: This option allows you to move layer position based on X-axis (by pixel).
  • Offset y: This option allows you to move layer position based on Y-axis (by pixel).

Set image size and image rotation

  • Size: Enter the value for Width & Height options (by pixel) to decide the size of image layer, or you can directly edit the size of image on Popup Builder part.
  • Angle: Enter the value of rotate angle of Image layer.

Set function for Image layer

  • Function: Select on Arrow-down button to choose one function from the list. They are Close Popup, On/ Off Music, Open URL. If you choose Open URL, there are two other options (Link URL, Open Link In) will appear
  • Link URL: You will paste the link into the box. On the frontend, click that Image layer to open the link.
  • Open Link In: Choose Same Tab to open link in the same tab. Choose New Tab to open link in a new tab.

Start Transition: This part allows you to set time/ animation for Image layer to appear.

  • Time: Enter a time value for Start option to set the Delay time for Image layer to appear (by default 1s = 1000)
  • Duration: Enter a time value for Duration option to set time for Image layer to appear.
  • Effect: Click on arrow-down icon to choose the direction of Image layer when appearing (Fade, Short From Top. Short From Bottom,...)
  • Easing: Click on arrow-down icon to set animation for Image Layer to appear.

End Transition: This part allows you to set time/ animation for Image layer to disappear.

  • Time: Enter the time value for End option. Note that: The exiting time of Image Layer = End Time - Start Time (If End time’s less than Start time, the Image layer is always shown).
  • Duration: Enter a time value for Duration option to set time for Image layer to disappear.
  • Effect: Click on arrow-down icon to choose the direction of Image layer when disappearing (Fade, Short From Top. Short From Bottom,...)
  • Easing: Click on arrow-down icon to set animation for Image Layer to disappear.

Important: You are able to add unlimited Image layers as you want and be easy to set their position by dragging function at Popup Builder part.

    At Popup Builder part you can see:

    Create a Text Layer

    From Dashboard => Mega Popup => Popup Builder part => click on Text button to create a Text layer.

    Text Option

    Visit the documentation of Image Layer part to get detail information for each option. In addition, you can add as many Text Layer as you want.

    At Popup Builder part you can see:

    Create an HTML Layer

    If Image and Text layer are not enough for you, HTML layer is the thing you need. You can add form or special HTML tag into your popup’s content.

    From Dashboard => Mega Popup => Popup Builder part => click on HTML button to create an HTML layer.

    HTML Option

    Visit the documentation of Image Layer part to get detail information for each option. In addition, you can add as many HTML Layer as you want.

    At Popup Builder part you can see:

    Create Snow Fall

    From Dashboard => Mega Popup => Popup Builder part => click on Snow Fall button to create snow falling effect.

    Once clicking on Snow Fall button, snow falling effect will appear by default, however, there are some options at Snow Fall Option allow you to config other snow falling effect.

    Snow Fall Option

    • Flake Count: Enter the number of Flake existing on the screen.
    • Flake Image: Click Select Image button to upload flake image from your local computer or library.
    • Flake Color: You can decide flake color and it’s opacity.
    • Flake size: Enter value of minimum/ maximum flake size.
    • Fall Speed: Enter value of minimum/ maximum falling speed of flakes.

    At Popup Builder part you can see:

    Hanging Decoration

    From Dashboard => Mega Popup => Popup Builder part => click on Hanging Decor button.

    Hanging Decor Option

    Set position and width of Hanging layer

    • Left: Set hanging image position from the left of the screen or popup (by pixel).
    • Top/ Related to: Set hanging image position related to the top of the screen or popup (by pixel).
    • Bottom/ Related to: Set hanging image position related to the bottom of the screen or popup (by pixel).
    • Width: Set width of hanging image (by pixel).

    Note that: You can easily change the position/ width of hanging image at Popup Builder part by mouse.

    String Settings: You can decide the width of string as well as its color/ opacity.

    • Width: This option allows you to set the width of string.
    • Color: Click on the box to choose a color for string and change its opacity.

    Create Twinkling Effect: Choose an image will change when Hanging layer goes down or up. It will make the twinkling effect.

    • Image Down Left: Click on Select Image button to select an image showing when Hanging layer goes down and be on the left.
    • Image Down Right:: Click on Select Image button to select an image showing when Hanging layer goes down and be on the right.
    • Image Up Left:: Click on Select Image button to select an image showing when Hanging layer goes up and be on the left.
    • Image Up Right: Click on Select Image button to select an image showing when Hanging layer goes up and be on the right.

    Set up/down function of Hanging layer

    • Slide Up/ Down: Choose Yes, Hanging layer will go down and up.

    Set delay time and speed for Hanging layer to be blinking.

    • Start Delay: Set delay time for Hanging layer to start (1s = 1000).
    • Speed: Set the value of minimum/ maximum blinking speed (1s =1000).

    On the frontend you can see:

    How to Display Your Popup at the Front Page

    • Step 1: If the popup you want to display on the frontend is Popup type, you will move to Step 2 immediately. If the popup you want to show on the fronted is Template type, you need to transfer to Popup type.

      From Dashboard => Mega Popup => click on Template link.

      Open the popup you want to edit => Choose Popup for Popup type option. Click on Save to save any your changes.

    • Step 2: From Dashboard => Pages => Open a page from the list, at the bottom of the page, you will see Mega Popup field.

    • Step 3: At Show Popup option, click on arrow-down icon to select a popup from the list. A list of popup appearing when you click on arrow-down icon is Popup type, not Template type
    • Step 4: Click on Update button to update any your change.

    At Popup Builder part you can see:

    Support

    If you have questions regarding specific details or need any help with the product, feel free to contact us, Submit a ticket or join Extstore forum.