Characteristics
An Inline Area is displayed anywhere inside the page content. It does not float above other content and behaves just like a regular Divi section.
When creating an Inline Area, you have the choice to make the Area either static or dynamic.
Static Inline Areas
They have no close button and cannot be triggered. A static Area is either always visible or always hidden.
Divi Areas Pro tries to inject static Areas at the right place in the HTML code, instead of using JavaScript. When a static Area is set to “replace” content, that content is completely removed from the document upon page load (or earlier, on the server).
Some use cases for static Areas could include a members area where internal content is replaced with an Inline Area for logged-out users.
Dynamic Inline Areas
A dynamic Area is just like any other Area type: It has to be triggered and might have a close button.
When a dynamic Area is set to “replace” any content, the replaced content is restored when the Area is closed.
A use case for dynamic Areas might be a contact form that is replaced with a consent Area. Only when the Area is confirmed and closed, the contact form becomes available.
Inline Locations
As Inline Areas are displayed inside the page content, you need to specify the exact place where the Inline Area should show up. You have the choice of defining a custom CSS selector to precisely tailor the injection point, or use one of the predefined theme-locations:
- Page Header
- Main Menu (no matter if it’s a full-page menu, slide-in menu or a regular menu)
- Post Content
- Comment Form
- Page Footer
The plugin works well with the default layout provided by Divi as well with layouts designed in the theme builder. When your webpage uses a child theme that uses customized HTML code, some of the Theme-Location filters might not work. In that case, you can always resort to the custom CSS selector to inject your Inline Area.
Usage examples
Footer-replacements make it easy for you to design different page footers for each user-role. Or to define a custom footer that you use on multiple landing pages.
Shops might use an Inline Area to drive traffic to current sales promotions by injecting a banner into the sidebar of certain pages (via a custom CSS selector).
Notes
Inline areas are more subtle than Popups or Fly-ins and are less often perceived as an advertisement.