Overview of Layout Types

In Divi Areas Pro you can choose between four Layout-Types, sometimes also called “Area Types”. Each Layout-Type has slightly different configuration options and distinct behavior.

This page gives you an overview of those types and explains important differences between them.

Popup

A popup is initially hidden and can be displayed in different events which are usually defined via Automatic Triggers.

When a Popup is displayed, it is usually centered on the screen and hides the content below it. It grabs the attention of the user and requires a user-interaction to close it.

Key Features for Popups

• Displays an overlay
• Is modal
• Covers the content beneath it
• Optionally can be closed via a close button, via the Escape key, or by clicking on the overlay
• Position is fixed inside the window, aligned to an edge or centered

Read more about Popups

Fly-In

A Fly-In is either a narrow section that slides in from the left/right side, or it can be displayed as a full-width bar that sits at the top or bottom of the screen.

The Fly-In is fixed on the screen and covers any text behind it. However, it is not modal, so the user can continue to use the page and might even ignore the Fly-In completely.

Key Features for Fly-Ins

• No overlay
• Not modal
• Covers the content beneath it
• Optionally can be closed via a close button
• Position is fixed inside the window, aligned to an edge

Read more about Fly-Ins

Hover

Hover Areas are initially hidden and are displayed when the user clicks on an element or hovers above it.

Every Hover Area is “attached” to another element on the page. While the Area is displayed, it is aligned to that element. This makes Hover Areas an ideal solution for mega menus or tooltips.

Key Features for Hover Areas

• No overlay
• Not modal
• Covers the content beneath it
• Can be closed on outside-click, mouse-leave or via a close button
• Positioned relative to the hover trigger and scrolls with that trigger

Read more about Hover Areas

Inline

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.

Key Features for Inline Areas

• No overlay
• Not modal
• Never covers content, but can replace content
• Can be closed via a close button, or set to be static (not closable)
• Positioned inline in the page and scrolls with the page

Read more about Inline Areas