How to Display Content Using Divi Areas Pro
Editorial Note We may earn a commission when you visit links from this website.

How to Display Content Using Divi Areas Pro

Martin TolovskiTutorialsContent CreationDivi Areas Pro

Are you seeking to amplify the dynamism of your Divi website’s content, leading to heightened sales and improved lead generation results?

The expedited delivery of valuable offerings often necessitates swift and efficient deployment. If expeditious content publication aligns with your objectives, you’ve arrived at the ideal destination.

The Divi Areas Pro plugin can help you improve your website immediately by creating effective modal boxes that upgrade how you present content on your website.  

In fact, recently, we’ve even made significant updates in the plugin’s features, which makes for an even better overall Divi tool for website owners seeking to boost their content and overall digital presence.

Table of Contents

Divi Areas Pro: A Quick Features Overview

As an all-encompassing Divi extension, Divi Areas Pro can help you enhance your conversion rate via trigger-based content, from growing your email list and pool of qualified leads, to increasing sales.

Using Divi Areas Pro

Since we joined the Elegant Themes premium plugin market, we have differentiated ourselves from the rest by providing impeccable UI and a selection of potent popup and trigger types options.

With Divi Areas Pro, you can build and customize your campaigns with dynamic content such as Popups, Fly-ins, Hovers, Mega menus, and Conditional inline content.

Some of the main benefits of using Divi Areas Pro, which make the plugin stand out from the rest in the marketplace, are:

  • Content Interactivity:  With Popups, Tooltips, Fly-ins, and Dynamic Inline Areas, you can create truly interactive content, as never before!
  • Content Conditionality: Whether you want to display a Popup on specific pages or show a contact form only to logged-in users: Display Conditions are part of every Divi Area.
  • Custom Triggers: You can fine-tune the trigger of every Area, whether you like to show it after a few seconds, when scrolling down, on exit-intent or when hovering a particular element, or even create complete custom triggers in JavaScript. It’s your choice.
  • Top-Notch Compatibility: Divi Areas Pro supports every Module available in Divi. It works well with the Divi Builder plugin, WooCommerce, the Extra theme, and more.
  • Robust API: At the foundation of the plugin is a battle-tested, highly flexible API that you can integrate into your theme to take your website to the next level.
  • Divi Integrations: The UI looks so familiar to Divi, and there’s no learning curve, no CSS classes to remember, and no quirky, technical mumbo-jumbo.
  • Help and Support: Every feature in the plugin has an inline help section, and for any question, you can get in touch with us 24/7.  
  • Frequent Updates: We listen to what our clients want, and we deliver! You can count on fast bug fixes, stable code, and regular improvements.

Moreover, the Divi Areas Pro plugin integrates with a great number of powerful plugins and service providers:

Triggering an Area

Divi Areas Pro provides multiple ways to trigger a Popup or an Divi Area, without any edits on your page or inserting a code snippet whatsoever:

You can define a trigger by setting any Module Link to an Area ID #sample-area, which works brilliantly for every Divi Module, especially Sections and Rows.

Using Divi Areas Pro Triggers

Exit Intent Trigger

For an on-page Popup, you can use the Enable Exit Intent flag to make the Popup appear when an intent to exit from the user is detected. When you edit a Divi Area, you can use the automatic Exit Intent trigger to do the same.

Automatic Triggers

The Divi Areas meta box allows you to use any of the built-in automatic triggers: On Click, On Hover, After Delay, On Scroll to element or position, Exit Intent, On Inactivity, On Browser Focus.

URL Hash Trigger

With Divi Areas Pro, you can trigger your Areas on a specific page by adding the Area ID to the URL, ideally for triggering a Popup after completing a specific contact form.

Hover Triggers

A hover trigger can display the Divi Area whenever a trigger event happens, such as clicking a button or hovering on a menu item.

Creating a Popup Area Content

When you install and activate the Divi Areas Pro plugin, locate the Divimode menu item in your wp-admin dashboard.

Using Divi Areas Pro Popup Area

Open the menu item and click on Add Divi Area, which will take you to the Area builder, where you can start by setting up the Area Title, and the Area Type.

Scroll down to the Area Settings > Page Rules, and enable ‘Page Limitation’, and choose the specific pages where you want this to be applied.

Using Divi Areas Pro Page Rules

Then, open the ‘Trigger’ tab to configure the timed trigger for your popup, and choose the ‘After Delay’ option. Set your preferred popup delay trigger.

Open the ‘Behavior’ tab next, and open the ‘Keep Closed’ section, where you can enable the ‘Keep Area Closed’ flag and enter a close delay.

Using Divi Areas Pro Behavior Settings

Now, all you have to do is add some content to your Popup Area. Test the Popup by visiting the page where you’ve configured your popup on.

Using Divi Areas Pro Popups

Creating a Popup Inside a Divi Page

Generating a popup inside a Divi page is possible with both the Popups for Divi and the Divi Areas Pro plugin.

First, open your page in the Visual Builder and create a new Section or edit the Section you want to transform into a Popup.

Afterwards, open the Section Settings where you can locate the Popup-Tab, where you’ll need to enable the Popup Mode and designate a Popup ID.

Next up, you will have to set up the click trigger within the page to make the popup appear.

Pay attention to the Popup ID, right above the Popup Section, where you will have to create the popup trigger.

And that would be all that you need to create a popup section within a page. It’s super easy.

Creating Opt-In Forms

Start by generating a Fly-In area, and within the Fly-In, insert an email opt-in where you can customize the title, text, colors, as well as the design that would match with the specific page.

Then, in the Divi Area settings, you can choose the ‘Fly-In’ option to proceed further. Click on ‘Save’ afterwards.

Next, head over to the page where you want to use the fly-in and insert a ‘Button’ at the bottom of the page.

Inside the button settings, go to the ‘Link’ option, choose ‘Divi Area trigger’ as the trigger, and then choose the name of the Area that you’ve created previously. Make sure to save your page afterward.

Preview the changes and make sure that the fly-in area works after clicking the button on both desktop and mobile devices.

Wrapping Up

Divi Areas Pro is a feature-rich plugin for growing Divi websites that integrates brilliantly with the theme and is pretty straightforward to use for creating interactive content. Each feature can take your lead generation efforts to a new level.

To learn more about Divi Areas Pro and its features, visit the Official Divi Areas Pro page. To use the complete palette of premium features, the lowest-priced tier is our $67-per-year plan that includes all the features above and much more. Don’t miss out!

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

More Articles You Will Like