The Popup Link Type gives you full control over modal behavior in Divi. Use it to display newsletters, image galleries, forms, or any other Divi layout as a pop-up, fully styled and triggered by your custom menu.
Available In
DiviMenus module
DiviMenus Flex module
Overview
The Popup Link Type allows a Menu Item to open a Divi Layout as a popup. This is ideal for creating custom modals with any content built in the Divi Builder.
Unlike standard browser pop-ups, these are rendered as part of the page HTML, so ad blockers or pop-up blockers don't block them.
Popups can be dismissed by:
Pressing ESC
Clicking outside the pop-up
Clicking a close icon (if added)
Focus returns to the triggering Menu Item after closing the Popup.
How to Use
Go to the Menu Item's Link Type setting.
Select Popup from the dropdown.
Choose a Divi Layout to use as the pop-up content.
Note:
Due to Divi's module nesting limitations, only layouts that do not contain a DiviMenus module can be selected.
Content Tab → Link
Divi Layout: Select a saved layout from the Divi Library.
Show On Hover: Enable this to open the Popup when hovering over the Menu Item.
Show Close Icon: Adds a close button inside the Popup. Recommended for large or full-screen popups.
Disable Page Scroll: Locks page scrolling while the Popup is open.
Design Tab → Popup
When Popup is selected as the Link Type, a new Popup toggle appears in the Design tab. These fields allow full control over the pop-up's appearance and behavior.
Popup → Location
Sets the Popup's position on the screen. Example positions include:
Center Center (default)
Center Left
Center Right
Top Left, Bottom Right, etc.
Popup → Popup Max Width
Set the maximum width of the Popup. The default value is 80% of the screen.
You can use:
% for relative sizing
px for fixed sizing
100% for fullwidth
Tip:
To make the pop-up truly fullwidth on large screens, disable Limit Width on Large Screens.
Popup → Limit Width on Large Screens
When enabled, it restricts the pop-up's width to 1080px max, even if a higher width is set. Disable this for fullwidth popups.
Popup → Popup Max Height
Set the maximum height of the pop-up. The default value is 80%.
Popup → Overlay Color
Change the background color that appears behind the pop-up.
You can match it to your brand colors or create contrast with your pop-up content.
Popup → Close Icon Color and Size
If the Show Close Icon is enabled, use these fields to style the icon's color and font size.
Animation (Design Tab → Link)
You can animate how the pop-up appears and disappears:
Enter Effect: Fade, Slide, Zoom, etc.
Exit Effect: Same options available
Custom Effects: Controlled with intensity and timing.
Learn more about: DiviMenus Custom Effects
Closing Popups
Users can close the Popup by:
Clicking outside the pop-up
Pressing ESC
Clicking the close icon, if enabled
After closing, focus returns to the triggering Menu Item for accessibility and usability.
Examples & Resources
Check out these live examples of the Popup Link Type in action: