Advanced Popup

Advanced Popup

Introduction

1. What is Advanced Popup?

Advanced Popup helps you to give your customers fast and attractive messages. With this component, your site will display popup with text/html content, images, forms, audio,....

Advanced Popup shows your products, news, notices, advertisement as well as event on any pages that you want and help you to increase the traffic of your site.

2. Features

  • Advanced Popup is writen by javascript, it means all files will be loaded faster
  • SEO Performance: The component is optimized superlatively for Search Engine due to Joomla full SEF/SEO compatibility and effective image performance.
  • Joomla MVC standard: Advanced Popup’s code is written based on Joomla 3.x standard, making it work greatly on Joomla 3.x website and support custom layout from templates.
  • Responsive design: Popup window is suitable for any mobile/ tablet devices.
  • Support multi-language.
  • Easy to customize.
  • Allow to add unlimited image layers, text layers as well as spider layers on popup.
  • Rich text editor.

3. System requirements

Your system needs to meet the following requirements before proceeding the extension’s installation.

  • Joomla version:
  • >>> Joomla 3.3+
  • Software:
  • >>> 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+
  • Web servers:
  • >>> Apche: 2.x+
  • >>> Microsolf IIS7
  • >>> Nginx 1.0 (1.1 recommended)

Installation

1. Upload extension

If you are new to Joomla, kindly find detail guide of how to install Joomla extensions Here.

2, Enable ExtStore Advanced Popup

The component  Advanced Popup includes component, module and spider plugin.

  • Enable component to create and design a excellent popup.
  • Enble module by setting Publishand position. Enabling module will help you show popup on frontend.
  • Enable spider plugin by setting Published. Spider plugin generate some options which allow to add and config as many spider layers as you want to popup.

Usage

1.From backend, choose Component => ExtStore Advanced Popup, click New button to create a new popup. You can see there are 2 main parts: Popup Builder and Configuration

1.intro popup

 

Click expand.png button to expand Popup Builder part with a full width of screen

icon 1 Title: the name of popup for a product, an event or an advertisement,... is required.

 icon 2 Popup Builder: This part allows to see the change of popup when you edit anything. You also can edit the position and size of layers by mouse here.

Configuration includes:

icon 3Popup Options: There are some options in this part, allow you to set images, colors as well as change the parameters of size and position of layers.

4Layer Odering: 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

icon 5Popup layer area: This is the main part which includes the main content of popup.

icon 6Overlay layer area: This is background which sets off the popup layer

2. How to create a design.

2,1. Overlay layer

Click on Overlay to set Overlay layer

Overlay Option

3.overlay opt

 

icon 1Background: There are two ways to display background of popup by image or color. You can set image background display by selecting image from folders or uploading from your computer or add image’s link

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

icon 3Overlay image position: Set the position of overlay image.

left top

4Color:This option allow you to set color background instead of image background for overlay. Choose color you want as well as adjust the opacity of color (the same as Popup Layer part)

icon 5Opacity: Allow adjusting opacity of overlay background by slider

Please note that you are allowed to display image background and color background at the same time.

4.overlay frt

2.3. Create an image layer.

From Popup Builder option, click Add Image to create an Image layer. A popup window will appear to choose image from library or upload from your computer.

There are 2 main parts here:: Popup Builder option and Image option. These two parts are compatible with each other, it means any change in a part will effect directly to the another. Here are the detail configuration of image.

5.image opt

icon 3 You are allowed to set funtions for image layers

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

Please note that each image layer allows you to choose a function.

function

  • >>> Link URL: URL you want to add to popup (it is available when you choose Open URL for Function option)
  • >>> 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).

 

Popup Builder you can see:

image builder

  • Set the position of image
    • >>> Move the position of image to anywhere on Popup as you want by clicking and dragging the image.
    • Set the image size and image slope:
    • >>> The width and height of image can be adjusted by mouse
    • >>> The slope of image also can be changed by clicking xoay button and then rotating the mouse .

You are allowed to add as many images as you want into popup and set their position.

image multi

2.4. Create a text layer.

From Popup Builder option, click Add Text to create Text Layer

6.text opt1

There are 2 main parts here:: Popup Builderoption and Text option. These two parts are compatible with each other, it means any change in a part will effect directly to the another

Popup Builder option

  • You can move the position of text layer to anywhere in Popup as you want by clicking and dragging the text.
  • You also can change the slope of text layer by clicking xoay button and then rotating the mouse

Doing such things will change the parameters of Left or Top or Angle option at Text Option at the same time.

2.5 Create Spider layer

This feature will help you add spiders as much as you want into popup.

Step1: To create Spider layer, you need to Enable Spider plugin first.

From backend, go to Extensions => Plugins, search for Advanced Popup Spider, and then click button close icon to enable this plugin.

plugin enable

After that Add Spider option will be appear on Popup Builder part.

Step 2: From Popup Builder option, click Add Spider to create Spider layer

8.spider 1

 

Here are the detail configuration of Spider layer

9.spider opt

You can change the position as well as the height of spider to anywhere you want into popup by mouse.

2.6. Layer ordeing 

10.reordering1

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.

11.reordering

2.7. Remove Layers

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

3. How to display your design in front - page.

To display Popup on the frontend, you need to enable ExtStore Advanced Popup first

From Administrator site. choose Extensions => Modules, search for ExtStore Advanced Popup.

Here are the detail configuration of Popup module.

12.popup module

Step1: 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

Finally, here we go

13.popup frntpage

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