DiviMenus On Media

An image link does not always come from the same place

You put photos on your Divi page and expect something consistent to happen on every click. In a gallery, the enlarged image opens. In a standalone image module, you have to type the link by hand. In a blog or a portfolio, each item already carries its own, the one for its post or project.

In Divi, each module decides on its own where a click on an image leads, and whoever designs the page inherits that choice.

DiviMenus On Media is an add-on for DiviMenus that places a DiviMenus menu over Divi images and videos. Each menu item can enlarge the image, open its link or download the file, so that decision becomes yours.

A menu over the image and three actions

• On Media link type: it is added to the menu items with three behaviors: open in lightbox, open the media link and download the file.
• Lightbox: it shows the image or video in a window and dims the rest of the page.
• Media link: it opens the item's address. In blog, portfolio or shop modules it opens the post, project or product address.
• Download: it downloads the image or video on click. External videos, such as YouTube or Vimeo, open in a new tab.
• Visibility: the menu is shown always or only on hover, and the field is responsive, so you can choose one behavior per device.
• Position: nine locations, top, middle or bottom, and left, center or right.

It works in the Blog, Blurb, Filterable Portfolio, Fullwidth Image, Fullwidth Portfolio, Fullwidth Post Slider, Fullwidth Slider, Gallery, Image, Portfolio, Post Slider, Shop, Slider, Video and Video Slider modules.

A gallery with actions on hover

Picture a gallery where each photo shows two icons in the center on hover: one that enlarges it and another that downloads the file. It is built with a single DiviMenus menu, saved in the Divi Library and assigned to the Gallery module, with visibility on hover and the position set to the center.

It is a combination you should test on your page before publishing it. Check the enlargement, the download and the behavior on a phone, where there is no cursor to hover with, and set there whether the menu is always shown.

Six details that change the setup

• It needs DiviMenus installed and active. On its own it does nothing.
• The menu must exist beforehand: it is created in DiviMenus and saved in the Divi Library so it appears in the module's selector.
• It cannot be previewed in the Visual Builder. Changes show once you leave the builder.
• The Image module needs a link set by hand if you want to use the open-link action; Blog and Portfolio use their own.
• This menu takes precedence over the module's other overlays.
• Some modules override global text styles. If the menu title shows a different color, adjust it under Design, Titles in the DiviMenus module.

How to put it over an image

You need Divi and DiviMenus active, plus this add-on.

1. Create a menu with DiviMenus and give each item the On Media link type with the action you want.
2. Save the menu in the Divi Library.
3. Open a compatible module, for example Image, and go to the Design tab.
4. Open the DiviMenus On Media section and choose the menu.
5. Define when it shows and in which position, save the page and view it outside the Visual Builder.

DiviMenus and DiviFlash in the catalog

The base product is in the catalog: DiviMenus, a module for building groups of interactive elements, including buttons placed over an image or a video.

If you want to extend the builder with many presentation elements rather than a single piece, DiviFlash is among the options.

Questions about DiviMenus On Media

Does it work without DiviMenus?

No. DiviMenus must be installed and active, and the menu must be saved in the Divi Library.

Can I download a YouTube video?

No. For external videos, such as YouTube or Vimeo, the click opens the video in a new tab.

Can I see the result in the Visual Builder?

No. Overlays show once you leave the builder.

Can I show the menu only on hover?

Yes. Choose between showing it always or only on hover, and the setting can differ on each device.