Divi Areas Pro 2.3.0
Editorial Note We may earn a commission when you visit links from this website.

Responsive Dimensions

Define custom width and height values based on the user’s device

We have prepared the responsive mode for quite a while now. Finally, it’s ready and available to all Divi Areas Pro owners! In the Layout > Dimensions tab, you can now find a toggler to enable responsive mode for any width or height field. Use that to define different values for every device.

You know the drill: When you enable responsive mode for a field, you can switch between the 3 device types Desktop, Tablet, and Phone. Of course, the Visual Builder will update in real-time to display the device you are currently editing.

Full-Size Areas

Quickly create full-width, full-height or even full-screen Areas

The new “Size” option in the Area Layout tab helps you to create Areas that span the entire screen width (or height). The full-size options are perfect for Fly-Ins.

An Area that is set to full-width is always span across the entire screen width, regardless of the device or Area content.

Push that Content!

Get creative with the new Fly-In layout option, that keeps your entire page visible instead of covering it with the Fly-In.

The “Push Content” feature is available for all Fly-Ins that use a full-width or full-height layout. When enabled, the Area will push the content away from the Area.

It’s super easy to create notification bars without overlapping the main menu. Or maybe you want to create a navigation sidebar with a Fly-In? All possible, with only two or three clicks! Give it a shot.

Other Cool Features

A new WPML integration adds language conditions in the Area “Settings” tab. Cool, huh? Make sure that your Popups and other Areas are displayed in the correct language.

We’ve greatly improved the reCaptcha integration and added compatibility for WPMU DEV’s Forminator plugin.

Until now, an Area was positioned relative to the browser edges. This update introduces a bounding-box which you can customize via JavaScript. Use it to define your own position limits for every Area. By default, the admin-toolbar is outside that bounding box. Your Fly-In Areas will not cover that toolbar anymore 🙂

We’ve greatly improved the plugin update process and much better integration to caching plugins. Also, there’s a new license server with a more tolerant firewall. Your license activation will now work on the first attempt!

Changes for Developers

New: applyFilters( "storage_method" )
Manually select the storage method for the Keep Closed flag and other local data. One of the following string values:

auto .. Use localStorage, if available. Otherwise, fall back to cookies.
local .. Use localStorage.
cookie .. Use Cookies.
none .. Do not store any local values.
New: applyFilters( "push_fixed_elements_{edge}" )
Filters the selectors of fixed elements on the page that need to be pushed inwards with the content.

The dynamic part of the filter name is the edge that’s pushed (top/right/bottom/left).

The default selector-list for the top/left/right edges contains the fixed header element, as that needs to be pushed down/left/right. The bottom edge has an empty selector array.
New: applyFilters( "position_boundary" )
Allows modification of the Area position boundaries.

The properties of the boundary can be adjusted by the action handler. When the admin-toolbar is visible, the minY value is changed to 32px before firing this action.

Also, make sure to check out our updated Codex. We have added 140+ JS API definitions to the documentation to support you in creating efficient and flexible solutions!

Try Divi Areas Pro today

Sounds interesting? Learn more about Divi Areas Pro and download your copy now!
Many pre-designed layouts. Automated triggers. No coding.

Click here for more details