Popups for Divi

Beskrivning

After the plugin is activated, the Visual Builder displays a new tab called ”Popup” in the Section Settings modal. In the ”Popup” tab, you can turn a regular Section into a Popup!

It’s super simple, as you can see on the plugins Demo Page: divimode.com/divi-popup/demo

ℹ️ How it works

First, activate the plugin (no configuration needed!)

  1. Open up your Visual Builder and edit a Section – you’ll see a new ”Popup” tab in the Section Settings.
  2. Toggle the option ”This is a Popup” and set the ”Popup ID” to something (e.g., ”newsletter-optin”). Close the Section Settings.
  3. Add a Button Module somewhere else on the page and set the ”Link URL” to your Popup ID, with a leading ”#” hash (e.g. ”#newsletter-optin”)
  4. That’s all. Save the page and exit the Visual Builder! Click on the button, and you’ll see your Popup. Congratulations!

⭐️ Additional details

Check out the Plugin website for more details. You’ll find:

  • Examples
  • CSS class options
  • JS API documentation
  • WP filter documentation

Tested in all major browsers on Windows and Mac: Chrome, Firefox, Safari, IE 11, Edge!

🎂 Popups for Divi turns 2

Wow, it’s already two years since the beginning of Popups for Divi!

It has been a great time and we’ve learned a lot. During that time we added a ton of features and have created a stable and powerful marketing plugin.

To celebrate the anniversary, we have created a six-day course that teaches you everything about the plugin. It walks you through the basics of creating your first Popup, shows possible ways to customize your Popup layouts and goes into advanced techniques and usages of the plugin.

”The instruction emails really helped me to understand how to use the plugin correctly!”

The course is available in your wp-admin Dashboard right after you install and activate the plugin. Check out the screenshots to see the form. Also, have a look in the FAQ section, if you want to disable this feature.

🥳 Want more?

If you want to get the most out of Divi, you need to have a look at Divi Areas Pro to get additional features:

  • An admin UI to create and configure your popups
  • Choose between 4 Area Types: Popup, Inline, Fly-in, Hover
  • A beautiful UI that blends in perfectly with Divi
  • Add advanced triggers to your Areas:
    • On click
    • On hover
    • On scroll
    • After delay
    • On Exit
  • Customize the Area Display
    • Show on certain pages
    • Show on certain devices
    • Show for certain user roles or guests
  • Customize Area Behavior
    • Show/Hide the Close button
    • Display the Area once per hour, day, week, …
  • Flexible position for Inline Areas
    • Replace/extend the page header
    • or Footer
    • or Comment section
    • or actually any Divi section inside the page content
  • It comes with an extended version of the JS API
  • Great documentation built into the plugin and an online knowledge base
  • and much more…

👉 Learn more about Divi Areas Pro (with screenshots!)

Skärmdumpar

  • Step 1: Prepare your Popup inside a normal Divi Section, right on your page.
  • Step 2: Open the Section Settings, enable the "This is a Popup" flag and define a unique Popup ID.
  • Step 3: That's how the final Popup is dispayed to a visitor.
  • Check out the extensive API documentation and popup samples on divimode.com
  • Our free email course walks you through every aspect of the plugin - from the basics to advanced use-cases and techniques.

Installation

Install the plugin from the WordPress admin page ”Plugins > Install”

or

  1. Upload popups-for-divi directory to the /wp-content/plugins/ directory
  2. Activate the plugin through the ’Plugins’ menu in WordPress

Vanliga frågor

How much performance does Popups for Divi need?

Actually none! We designed it with maximum page performance in mind. Our tests did show literally no change in page loading speed.

The plugin will add a single line of CSS to the page output and load two files that currently are only about 31 kb in size (9kb gzipped). Both files are cached by the browser and used on all other pages of your website.

Those two files are the JS API and the popup CSS rules that center the popup, dim the background, etc.

Is Popups for Divi compatible with Caching plugins?

Yes, absolutely! There is no dynamic logic in the PHP code like other popup plugins have. Popups for Divi is a little bit of PHP but the main logic sits inside the small javascript library it provides. It works on the client-side and therefore is not restricted by caching plugins.

Is this plugin compatible with every Divi version?

This plugin is kept compatible with the latest Divi release.

We did test it with all releases since the initial Divi 3.0 release. Possibly it will also work with older versions

Does this plugin also work with other themes/site builders?

Yes, actually it will! But out of the box it is optimized to work with Divi 3.0 and later. If you use any other theme or site builder then you need to change the default options of the plugin via the evr_divi_popup-js_data filter.

For more details visit divimode.com/divi-popup

Does this plugin display any ads?

No. This plugin is free and does not display any ads. In fact, the plugin does not have a UI at all.

Popups for Divi is just that – a plain popup plugin, not our marketing strategy!

Since version 1.6.0 we now offer a six-day email course that shows you how the plugin works. You will see a notification in your wp-admin dashboard right after activating the plugin.

Do you collect any details from my website?

No, we do not collect or transmit any data from your website.

Since version 1.6.0 there is one exception: We now offer an email course that shows you how the plugin works. You will see a notification in your wp-admin dashboard right after activating the plugin. When you opt-in to receive the onboarding emails we will transmit the details you entered (your name and email address) to the plugin website to add you to our onboarding email-list.

Is there a way to hide the onboarding notice?

Yes, there is!

Since 1.6.0 the plugin offers an onboarding course that consists of 6 emails. We offer this course right after plugin activation in your wp-admin ”Dashboard” page (nowhere else).

This onboarding notice is displayed to administrator users only. Once the user clicks on the ”Dismiss” button, the message is never displayed again for them.

You can also globally disable the onboarding notice by defining the constant DISABLE_NAG_NOTICES in your wp-config.php or themes function.php

I need to revert to an older version

When you experience any problems with the plugin, I would love you to first head over to the support forum and briefly share your issue with me.

Here’s how you can revert to an older version of the plugin:

  1. Go to the Advanced View Page and scroll down to the bottom.
  2. Pick your version and click ”Download” (you can choose any version since 1.5.1)
  3. Now go to your wp-admin Panel and open the Plugins list
  4. Deactivate and Delete the Popups for Divi plugin! Note: You will not lose any data, but while the plugin is deactivated/missing your Popups might be visible like normal page content.
  5. On the Plugins page click ”Add New” button in the top and then click on ”Upload Plugin”
  6. Select the .zip file which you downloaded in Step 2 and upload it. Activate and you’re done!

Alternatively you can replace the popups-for-divi folder via FTP: Extract the .zip file which you downloaded in Step 2 and upload it to your /wp-content/plugins folder.

I have more questions or need help

Please first visit the plugin website, as it includes examples and documentation that could answer your questions.

If that does not help, then head over to the support forum to see if someone else had the same problem and found a solution to it. Also, feel free to ask for help there.

You can also send us a private support request via the support form on divimode.com. Please note, that might need a while to answer your private support requests.

When you need additional features, then please have a look at our the Premium plugin Divi Areas Pro which comes with a lot of cool options!

Recensioner

25 september, 2020
This is a great contribution to the divine community, a thousand and a thousand thanks, it works perfect
18 september, 2020
First I just want to say thank you Philipp, Syed and whomever else for making this amazing plugin for Divi! I don't write reviews very often, but after downloading your plugin and trying it I had to say something. Honestly I don't see how this isn't part of divi's core code, regardless you have made it feel like it is built right in. I was even able to create pop-ups inside pop-ups! Again Thank you for your time and effort in creating this, WordPress Divi and the open-source community are better because of people like you.
26 augusti, 2020
Amazing plugin, simply indispensable for divi users. Congratulations for the developer for this great contribution to wordpress community.
11 augusti, 2020
Hands down a MUST use for any Divi site. This is one of the most straightforward, easy-to-use plugins. Outstanding!
Läs alla 55 betyg

Bidragsgivare och utvecklare

”Popups for Divi” är programvara med öppen källkod. Följande personer har bidragit till detta tillägg.

Bidragande personer

”Popups for Divi” har översatts till 6 språk. Tack till översättarna för deras bidrag.

Översätt ”Popups for Divi” till ditt språk.

Intresserad av programutveckling?

Läs programkoden, kika på SVN-filförvaret eller prenumerera på utvecklarloggen via RSS.

Ändringslogg

2.2.1

  • Fix: The close button does not trigger any scrollbars when hovered
  • Fix: Popups are now always hidden when the page loads – in some cases, Popups inside Headers/Footers were visible right when the page loaded
  • Fix: Click inside an open Popup does not try to re-open that Popup – i.e., fixed the ”flickering issue.”
  • Fix: Accordions and other interactive elements inside Areas are working again
  • Fix: Plugin is compatible with Gravity Forms 2.4.18+
  • Fix: Bullet lists now display bullets inside Popups
  • Improve: Plugin now plays nice with SG Optimizer and WP Rocket
  • Improve: The close button is now outside the Popup container and can be positioned anywhere, via CSS
  • Improve: Minor performance optimizations in the JS code

Plugin tested with WordPress 5.4.2 and Divi 4.4.8

2.2.0

  • Change: Fully refactored JS API that is documented on https://divimode.com/knowledge-base/
  • Change: Some CSS class names have changed, e.g. ”evr_fb_popup_modal” is now ”da-overlay”
  • Change: The JS configuration object changed its name to DiviAreaConfig (formerly DiviPopupData)
  • Change: Split the JS API into two files – a minimal loader that is enqueued in the header, and the rest of the API which is enqueued in the footer
  • Change: The DiviAreaConfig object is output in the page header so that values can be overwritten via JS in the page body
  • Change: Default z-index of Popups now is ”1000000” (that’s one ”0” more than before) to display Popups above a Full-Page menu
  • New: Click triggers can be added to a Row or Section. The plugin now supports virtually any Divi ”Link” field!
  • New: JS class DiviAreaItem that represents a single Popup
  • New: JS API function: DiviArea.getArea()
  • New: JS API hooks: area_wrap, area_close_button, refresh_area, init_overlay, reorder_areas
  • Improve: Popup content always expands downwards when a scrollbar is visible – for example when using Accordions inside a Popup
  • Improve: When a popup is triggered inside a Full-Page menu, the menu is closed while the Popup is opened
  • Improve: Now we support Popup triggers on any page (like shop pages or blog archive) and any element (like menus or footers)
  • Improve: When a Popup is opened, the scroll bars of the page are not removed anymore
  • Improve: Support for the Divi Builder Plugin is even better, cases of missing CSS styles are fixed
  • Improve: Lots of comments added and typos fixed throughout the plugin
  • Fix: We found and fixed a problem with the Visual Builder when inserting Popups into blog posts
  • Fix: Some script debugging options were incompatible with WordPress’ new block editor

Here is a full list of all API changes in this update: https://divimode.com/api-1-2-0-changes/

2.1.1

  • Change JS API does not include deprecated function observe()! Use addAction() or addFilter() instead
  • Improve the JS API further and expose additional functions
  • Improve triggers on Modules: Links inside modules are treated as normal links, not as popup triggers
  • Fix bugs on some WooCommerce and Divi Builder archive pages
  • Fix some JS API issues for Divi Areas Pro integration

2.1.0

  • Add correct Area layout on WooCommerce pages
  • Add compatibility with the Divi Builder plugin
  • Improve Exit-Intent logic so that multiple exit-intent popups are displayed one by one instead of all at once
  • Improve JS API: The DiviArea object exposes additional functions
  • Improve the minification of CSS files to generate ~16% smaller files
  • Improve the background overlay in modern browsers (sorry, does not work in Firefox yet)
  • Fix console error that said could not load style.css.map
  • Fix the ”Close other Popups” behavior, so now it will really close other popups
  • Fix some minor bugs in the popup behavior

2.0.5

  • Add new JS API: DiviArea.addActionOnce()
  • Fix a bug that happened for logged in users when WordPress runs on a Windows Server

2.0.4

  • Add the new option ”Show Loader” to the Popup Tab to better support iframes inside the Popup
  • Improve input of Popup ID in Visual Builder to prevent invalid characters
  • Improve code structure for better unit testing and quality assurance
  • Improve JavaScript error reporting in the dev console
  • Fix some more JS errors that happened with specific versions of PHP/WordPress
  • Fix display of Popups when using the Avada theme
  • Fix a JS error that was caused by wrong load-order of JS libraries

2.0.3

  • Improve code style: Apply the WordPress Coding Standards 2.0

2.0.2

  • Improve code style: Apply the WordPress Coding Standards 2.0
  • Improved security check in the onboarding form
  • Improve the copy and some JS logic of the onboarding form
  • Fix some typos

2.0.1

  • Fix an urgent problem where the plugin would remove the contents of the page while saving the page in Divi! 😳

2.0.0

  • Add a brand new Tab to the Visual Builder that allows you to configure all popup details using Divi! No more class names 🥳
  • Fix JS API integration for IE 11

(Older entries are in the file changelog.txt in the plugin directory)