By combining Divi animations and DiviMenus custom effects, you can control how elements appear and disappear, bringing smooth transitions and polished UX to your menus, popups, and dynamic content.
Available In
DiviMenus module
DiviMenus Flex module
Overview
You can animate DiviMenus, popups, dropdowns, and shown elements using either Divi’s built-in animations or DiviMenus' custom effects.
Divi Animations: Available in all Divi modules, triggered when an element enters the viewport.
Custom Effects: Introduced by DiviMenus, with full control over both enter and exit transitions.
Divi Animations
These are native Divi animations (fade, slide, zoom, etc.) that can be applied in the Design Tab → Animation of any Divi section, row, column, or module.
DiviMenus supports these by default. For example:
Animate the DiviMenu itself when it enters the screen.
Animate a shown element via the Show Link Type (by editing that element's settings).
Animate the contents of a pop-up or sub-dropdown by applying animations directly in the Divi Layout used.
Divi animations only trigger when content appears on screen. They do not support exit animations or non-Divi content (e.g. WordPress Menus).
Custom Effects by DiviMenus
To overcome Divi animation limitations, DiviMenus introduces custom effects.
These are available when using:
Popup Link Type
Show Link Type
Sub Link Type
When one of these is selected, a new Link toggle appears in the Design Tab, with the following fields:
Design Tab → Link → Enter Effect
Choose how the element appears. Options include:
None (default)
Fade
Slide Down
Slide Up
Slide Lef
Slide Right
Zoom
If you use this field, it will override any Divi animations previously set for that element.
Design Tab → Link → Exit Effect
Choose how the element disappears. This is useful for:
Dismissing popups
Hiding dropdown menus
Hiding shown elements (from Show Link Type)
Same options as Enter Effect: Fade, Slide, Zoom, etc.
Design Tab → Link → Duration (ms)
Set how long the animation lasts, in milliseconds.
Default: 1000ms (1 second)
Increase the value for slower transitions
Decrease it for faster ones