WP Popup Builder Pro

Plugin Installation

WP Popup Builder Pro is specially designed for creating and adding Beautiful Light-box in your website. It has many Popup Layouts and Pre-built templates with Drag & Drop modules which can be customized easily. Just follow the below instructions and Design your own popup.

  • First download the Plugin from member’s area.
  • Now, Open your WP Dashboard and Upload the Plugin Zip file into Plugins and Activate it. Now you can See “WP Popup Builder Pro” panel in your dashboard.

How to Create a Popup ?

  • 1. To Create your Popup, go to WP Builder Popup Pro > Add new Popup > Enter Popup Name.

add-new-popup-wp-popup-builder-pro

  • 2. You can choose layout or go with any Pre-built Templates. In Pre-built Templates there are many ready made popups. Just select them, do the changes according to your need and place it on your website.

popup-layouts-wp-popup-builder

  • 3. There are Eight different layouts available in Pro version, choose the desired one and design a fresh Popup by your own.

popup-layout-wp-popup-builder-pro

  • 4. After doing this, now Click on the Next Button. Now you’ll see Real time editor panel.
  • 5. In the editor panel, you can easily drag & drop the given modules like Section, Text, Heading, Button, Upload image, Video, Icons and also insert Lead form or Contact form. You can also customize Popup effect, Global setting and Close button setting. Design any type of popup you want.

editor-panel-wp-popup-builder

  • 6. Using Real time editor panel, you can customize each and every element of popup.

How to Edit Popup ?

You can edit your Popup using Real time editor panel. Here you’ll get Drag & Drop Modules, Popup effect setting, Global setting and Close button setting.

  • Drag & Drop Modules – From Drag & Drop Module you can choose elements like Section, Text, Heading, Button, Upload image, Video, Icons and also insert Lead form or Contact form in your popup. You can easily Edit your Popup by dragging these elements and placing them in the Popup layout.
  • Popup effect setting – It allows you to add Open and Close effects in your popup.
  • Global Setting – You can edit and customize Popup name, Popup background, Dimension etc.
  • Close Button Setting – You can customize the Close button of popup.


Drag & Drop Modules

There are Nine different Drag & Drop Modules available. You can add and customize Section, Text, Heading, Button, Upload image, Video, Icons and also insert Lead form or Contact form in your popup.

1. Text

  • To add Text Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Text Module and Place it in the Popup Area.
  • All the Text setting are available. Add the Text content, link and Choose the alignment.
  • You can also change the styling of your text content. Adjust the Width, select Container Alignment, Pick background and text color, Font size and Font weight. You can also enable the Border.

test-wp-popup-builder-pro

2. Heading

  • To add Heading Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Heading Module and Place it in the Popup Area.
  • Add the Heading Content, link and choose the alignment.
  • You can also change the styling, Adjust the Width, select Container Alignment, Pick background and text color, Font size and Font weight. You can also enable the Border.

heading-wp-popup-builder-pro

3. Button

  • To add Button Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Button Module and Place it in the Popup Area.
  • Add the Button text, link and choose the button alignment.
  • You can also change the styling of your Button. Adjust the Width, select Container Alignment, Pick background and text color, Font size and Font weight. You can also enable the Border.

button-wp-popup-builder-pro

4. Image

  • To add Image Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Image Module and Place it in the Popup Area.
  • You can also change the styling of your Image. Adjust the Width, select Container Alignment and Enable border.

image-wp-popup-builder-pro

5. Form

  • To add Lead Form or Contact form, First install & activate Lead form builder plugin in your dashboard. To know how this plugin works, Follow this Doc.
  • To add Form Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Form Module and Place it in the Popup Area.
  • You can Customize the “Form”. All settings will be enable after selecting the form.
  • You can also change the styling of your Form. Adjust the form Width, select the form Alignment, Pick background color and Enable form border.
  • Form Content setting is also available. Individual option is given for each form field. Change the color, font according to your need.

form-wp-popup-builder-pro

6. Video

  • To add Video Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Video Module and Place it in the Popup Area.
  • Now upload a video and also choose a poster image.
  • You can enable the auto play, loop and mute.

video-wp-popup-builder-pro

7. Icon List

  • To add Icon list Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Icon list Module and Place it in the Popup Area.
  • Drag & drop the icon list module in your popup and select desired icon, icon color, icon background color, link and Border.
  • You can also add Title text. Pick Title and list background color .

icon-list-wp-popup-builder-pro

8. Icon

  • To add Icon Module in your popup, Select your Popup layout > Go to Edit Popup > Drag & Drop Module > Drag your Icon Module and Place it in the Popup Area.
  • You can pick the icon color, background color, adjust the font size and add link in your icon. Other advance setting is also given.

icon-wp-popup-builder-pro

Global Setting

  • Go to Edit Popup > Global Setting.
  • In Global setting panel, you can change or add the Popup builder name. You can Edit the Popup Background Setting like Upload bg image and pick bg color.
  • You can also edit the Popup Dimensions like Popup Width, Popup Height Auto/Custom, Popup Padding (in px), Enable Popup Box Shadow and border.

global-setting-wp-popup-builder-pro

Close Button Setting

  • Go to Edit Popup > Close Button Setting.
  • From here you can choose the Close Button icon and edit the close button settings.
  • You can choose whether you want to close the popup on clicking the icon, close the popup by clicking outside the popup or Close the icon by clicking on the icon and also clicking outside the popup.
  • You can choose the Icon Background color and Close icon color from the Style panel. You can also set the alignment.

close-button-setting-wp-popup-builder-pro