1. Home
  2. Docs
  3. Brain Divi Addons Free
  4. Free Extensions
  5. Popups

Popups

It is incredibly versatile & flexible. Bend it to create any type of popup, modal, or content overlay for your website.

Follow this documentation for creating a new popup

Please follow these following steps:

Step 1. Find the Popup extensions

Go to your WordPress website dashboard then find and click the “BrainAddons” go to the Popups.

Dashboard > BrainAddons > Popups

Popup 1

Step 2. Add New popup

Click the “Add New Popup” Button

Click > Add New Popup

This page will appear!

Popup 2

Step 3. Add Title for the Popup

Then add the title name of your popup. In our case title name of our popup is TEMP

PopUp3

Step 4. Add new condition and where popup will be visible

From the add new condition, you can decide where your popup will be visible.

Include > Entire sites (Popup will visible on the Entire Website)

Pages

All ( If you choose “All”, this popup will be visible on all pages)

Or

You can select a Specific page name for showing the popup

PopUp5

Step 5. You Can Add Multiple Condition

You can add multiple display conditions for the popup

Click “Add New Condition” > Add condition

PopUp5

In our case, we Exclude a specific page “Blog” (Blog page title) on the “Blog” this Popup will not visible.

And our example case

  • Exclude (The popup will not visible)
  • Pages
  • Blog (Page name)

Step 6. Click the Publish Button

After complete all of those steps (step 1 to step 5) click the Publish button.

PopUp6

Then wait for few seconds.

Step 7. use Divi Builder

After completing those upper steps, click the “Use Divi Builder” button.

PopUp7

Step 8. Choose the Builder Page Option

Then this page will appear. Select the builder page option. In our case, we selected “Build From Scratch”

PopUp8

Step 9. Build and Design your Popup

Then this screen will appear.

PopUp10

PopUp11

Click the Page Settings

On the Page settings, you will find three Tabs.

  • Content
  • Design
  • Advanced

PopUp12A

You will find many toggle options. Select the options and settings that go with your Popup design.

PopUp13
PopUp14

Some of the animations support time delay settings.

PopUp15

Go to the design tab

Due to cache, the builder will not show you the live changes. For seeing the changes you have to click the Save button and reload the page.

PopUp16

Customize your popup width and you can customize the height also.

PopUp16

Select Popup Overly color

PopUp9

After complete the settings. Then add a new row

Remember due to cache, the builder will not show you the live changes. For seeing the changes you have to click the Save button and reload the page.

Add a new row

Add a module, go to the module settings. The way you work on a Divi page when you design a webpage, the same following procedure you can do the popup design.

Step 10. Final

After complete the popup design. Go to your webpage where you have given the display permission, and see your designed popup.

Popup Final 1

You can see how many popups you have made and you can edit the popup after the building

For seeing the Popup list go to the Dashboard > BrainAddons > Popups

For editing the popup

Pop Up BrainAddons Final

  • Edit: This will bring you from the beginning page. If you want to change the popup name, display condition then you should go there.

  • Edit With Divi: It will bring you the popup design page. If you want to change the popup design, you should go there.

If you find anything hard to understand, then please contact our support. Thank you.

Was this article helpful to you? Yes No 3