Introducing

Divi Areas Pro

Advanced Divi layouting!

  • Define custom Divi areas to inject into any page
  • Handcrafted UI to blend seamlessly into Divi
  • Advanced triggers to customize your popups
  • The perfect marketing extension for your website
  • Create custom headersfooters, mega menus and much more
k

Brand new content types

Go beyond sections and rows. With Popups, Tooltips, Fly-ins and conditional sections you can create content as never before!

f

Tons of options

Collect newsletter subscriptions via a Popup, pitch a sale via a Fly-in, display contact details to logged in users only or pimp up your boring menu. The possibilities are endless!

R

Clean and Lightweight

No junk in your admin-dashboard, clean and documented code. This plugin keeps it simple and direct. We focus on your website, not about our plugin!

Seamlessly blends in with Divi

The UI looks so familiar to Divi, you (or your client) will not even notice that you installed a new plugin!

w

Great documentation

The plugin and all features are well documented – right inside the plugin!

Besides, you can also  get direct support from the plugin developers.

Frequent Updates

There’s a lot on our roadmap and we also listen to our customers!

We keep the plugin up to date and test it with every new release of Divi and WordPress.

Batteries included:

This plugin already includes all features of our popular marketing plugin Popups for Divi! And so much more… keep reading to find out!

Popups

Based on our popular free WordPress plugin “Popups for Divi“. But even better! Define popups once and re-use them on multiple pages, create triggers without writing code, customize the popup behavior, use the powerful JS API, …  

Inline Areas

Ever wanted to replace the default footer with a custom section on all your blog pages? Or display the contact form only to logged in users?

Well, now you can! Divi Areas Pro lets you place an area anywhere inside any page – without editing that page!

Fly-ins

You have seen those info-bars at the top or bottom of the window, that promote a sale. Yes, and of course to notify you about their cookies.

Also, you have seen these small slide-ins that appear in the bottom corner with a newsletter form.

This is, what Fly-ins will do for you!

Hover Areas

Hover Areas are similar to Popups but are always connected to a visible element: A module, a link, a menu item, or anything else.

They are positioned above, below or next to a visible element. Use them to create Mega-Menus, to display help text, product details, etc.

Advanced conditions and triggers

Exactly configure, who can see your areas and in what moment it is displayed *)

Area Display Conditions

  • On Page/Post
  • On Device
  • For User-Role 

Automatic triggers

  • On Click
  • On Hover
  • On Scroll
  • On Exit
  • After delay

Manual triggers

  • Connect areas to links
  • Show or hide areas via JS

Behavior options

Customize the behavior of each area with a few simple clicks *)

Close button

  • Hide the built-in close button
  • Create custom close buttons
  • Make a popup modal

Keep Closed

  • Display an area only once per day
  • Uses localStorage for best performance (with fallback to Cookies)

Customizable

  • Includes the Popups for Divi API
  • Additionally a new DiviArea API
  • Online documentation of all API functions

Inline Area Locations

Choose where you want to display your Inline Area

Theme Locations

  • Header
  • Main Menu
  • Page Footer
  • Post Content
  • Comments Form

Powerful positioning

  • Position it before a Location
  • Position it after the Location
  • Or even replace the default content with your Area

Content Locations

  • Display the area based on any Divi section that is on the target page
  • Select the target via CSS class/ID or by specifying the section number (e.g. “after 3rd section“)

Customize Area Layout

Control the visuals of your Divi Area Pro contents!

Area Box Layout

  • Define a custom width
  • Width can be any unit (px, em, …)
  • Add a default box-shadow to the Area

Close Button

  • Enable the “Dark Mode” to create Areas with dark backgrounds.

Use Divi

  • Use Divi to create round corners, custom box-shadows etc.
  • Width automatically adjusts to the first section inside the Area!

We’re not done yet…!

The plugin is actively developed, so prepare to get even more new features and a growing documentation.

*) Some options, conditions or triggers are only available for certain areas. For example, the “Modal Popup” behavior only makes sense for popup areas.

Get Divi Areas Pro!

You are protected by a 90 Day Money Back Guarantee

Divi Areas Pro is a premium WordPress plugin which enhances the Divi theme. The plugin provides often requested features, such as pop-ups or conditional sections!

It is written with focus on ease of use, performance, and flexibility.

Frequently Asked Questions

Do I need to renew my license?

In order to continue receiving support and updates, your license needs to be renewed yearly. For your convenience, all purchases will auto-renew. You can cancel at any time.

What happens when my license expires?

Even when you do not renew your license, you can continue to use the plugin on all your websites for the rest of your life!

Can I upgrade my license later?

You can easily upgrade your license at any time from within your account. You will automatically be pro-rated the new amount.

Do you offer refunds?

Yes! You are fully protected by a 90 Day Money Back Guarantee. See refund policy.

Have other questions?

Check out the Divi Areas Pro Documentation for more details or contact us for details.

Bring your Divi Experience to the next level, now!

Developed by one of the worlds leading WordPress developers, with over a decade of experience in plugin development and a passion for creating superior user experiences.

* You are protected by a 90 Day Money Back Guarantee

Documentation

JS API

DiviArea.addFilter()DiviArea.addAFilter(hook, callback, priority, context) The JS API uses an action/filter system that is very similar to the WordPress actions/filters. The… Read more
DiviArea.addAction()DiviArea.addAction(hook, callback, priority, context) The JS API uses an action/filter system that is very similar to the WordPress actions/filters. The… Read more
DiviArea.hideOverlay()Removes the background overlay and makes the window scrollable again. It simply undos all changes from DiviArea.showOverlay(). Read more
DiviArea.register()DiviArea.register(id, options, type) Turns a plain element into a Divi Area. Both, Divi Areas Pro and Popups for Divi will… Read more
DiviArea.config()DiviArea.config(id, attrib, value) DiviArea.config(id, attrib) // attrib is an object with {attrib: value} pairs. Configure the specified Area. Params id… Read more
DiviArea.showOverlay()Darkens the background and prevents scrolling of the window. After all the user should focus on the popup and nothing… Read more
DiviArea.hide()Closes the specified popup; when the specified popup is not open, nothing happens. When you do not specify any ID,… Read more
DiviArea.show()Opens the popup with the given ID. This function also darkens the background by calling DiviArea.showOverlay(). Tip: When the popup… Read more

Changelog

1.1.0 / 10 December 2019
  • Improve admin UI in WordPress 5.3
  • Improve developer integrations by providing new filters/actions
  • Improve and refactor the admin UI as preparation for future updates
  • Fix scroll bars in Popups that are taller than the screen height
  • Fix position of full-height popups that were displayed too far up on the screen
  • Fix a JS error in the options panel “Display: On Posts/Pages”
  • Fix the JS trigger description to display the correct snippets
  • Fix some typos in the admin UI and help
1.0.0 / 2 November 2019
  • Add support for Hover Areas! 🥳
  • Add support to save any Divi Area to the Divi Template Library
  • Add full editing support to the Divi Template Library: Edit all Area settings in the template.
  • Add close-button-support for Inline Areas
  • Add two custom close-conditions with an optional close-delay for Hover Areas
  • Add four positioning options and a new z-index field for Hover Areas
  • Add a new “Max-Height” option for all Areas
  • Add a new option on the Settings page to enable the script-debug mode for un-minified JS
  • Improve the admin UI stability (e.g., the number input fields had a rare rounding bug)
  • Improve the outputted JS code further
  • Improve developer integration by adding more WP action hooks/filters and API functions
  • Fix a bug where the Popup overlay was hidden too early when displaying more than one Popup at once
  • Fix wrong zIndex values when displaying multiple Areas at the same time
0.5.0 / 18 October 2019
  • Add support for the brand new Fly-in Areas
  • Add a new “Area Position” meta box for Popups and Fly-ins
  • Add a new tab on the Settings page to enable the JS debug-mode
  • Add support for SCRIPT_DEBUG to output un-minified JS code in the page footer
  • Improve the JS API. We rewrote the API from ground up with tons of features and enhancements: Detailed debug logging, an all-new DiviArea base object with support for WordPress-like hooks, and much more!
  • Improve the positioning and display of meta boxes in the Divi Area editor
  • Improve the display order of Divi Areas in the front end
  • Fix some glitches in the JS script that triggers Divi Areas
  • Fix the User-Role conditions
0.4.2 / 9 September 2019
  • Fix an issue that prevented advanced Popup triggers from firing (timed, on scroll)
  • Fix animation glitch in Safari/iPhone that displayed the Popup too small when using Divis “Zoom” open animation.
  • Fix logic that did not recognize Popups with upper-case letters in the Popup IDs.
  • Fix issue with transparent Popup background.
  • Fix the CSS rule that allows custom box-shadow styles.
0.4.1 / 5 September 2019
  • Fix a JS error that prevented Popups from opening in Firefox, Safari, Edge
0.4.0 / 27 August 2019
  • Change Popup behavior: The size now matches the width of your Divi section! 🤩
  • Change the default layout of Popups to have no box-shadow. If you want a shadow, either add the class `with-shadow` to your section or use Divi to apply a box-shadow to the section. Style it your way!
  • Add full support for the Inline-Area type!
  • Add new metabox to configure the Inline-Areas location
  • Add option to inject Inline-Areas into Theme Locations: Header, Main-Menu, Post-Content, Comment-Form, Footer
  • Add option to inject Inline-Areas before/after certain Divi sections inside the post/page content – via class or ID selector
  • Add new meta box to customize the Divi Area layout
  • Add option to customize the Area width, enable the box-shadow and dark-mode (Close Button)
  • Add support for URL triggers via the Blurb “Content Link”
  • Add the Popup behavior “Close other Popups”
  • Add two new settings to customize the Divi Area editor
  • Add new WP filter options to customize dark-mode and box-shadow style
  • Fix select list behavior in Firefox
  • Fix Popup width on iPhone 6 and earlier
  • Improve the description and inline-help for some options
  • Minor improvements of the Admin UI
0.3.0 / 18 August 2019
  • Add option to hide the close button and make the popup modal
  • Add option to keep a popup closed for s certain period
  • Add inline help for all Area options and settings
  • Add an option to use the Area slug as an alternate trigger ID
  • Improved popup triggers, esp the scroll and exit-intent
  • Many small improvements and fixes behind the scenes
0.2.0 / 9 August 2019
  • Add a settings page to the plugin
  • Add automatic plugin updates via the WordPress plugin updater
  • Add the Popups for Divi JS library to the plugin to use it independently
  • Add a new Behavior meta box to control the Close Button
  • Improve the admin UI to feel more like Divi
0.1.0 / 14 July 2019
  • Add a new admin section to create Divi Areas
  • Add UI to customize Area display conditions and triggers
  • Add display conditions to target page/posts
  • Add display conditions to target devices (mobile, tablet, desktop)
  • Add display conditions to target user roles
  • Add triggers to show popups on click, hover, scroll, exit-intent and time delay