How to display DiviMenus on Media

Posted by JC

In this post I’m going to take DiviMenus one step further by display them on Divi Images and Videos.

By default, Divi allows you to use an overlay. That default overlay typically adds a hover background color and a play icon for videos, which is ok, but you’re too limited when it comes to add options to images and videos.

Displaying a DiviMenu as an image (or video) overlay would be really helpful here. What if we could use Menu Items to add some new options to the media? Sounds good, doesn’t it? Here is where DiviMenus On Media comes into play.

Getting started with DiviMenus On Media

First, you need a DiviMenu. For this post, we are going to add options to a Divi image other than open in ligthbox (default).

We are going to create a DiviMenu to open the image in ligthbox, but also to download the image, open the image media link and open a popup.

Let’s get started!

Creating the DiviMenu

DiviMenus Content tab:

Hide the Menu Button toggle: Yes.

Display Titles: Always.

First Menu Item Content tab:

Title: View. Link Type: On Media (Added by DiviMenus On Media). On Media: Open in Lightbox.

Second Menu Item Content tab:

Title: Open. Link Type: On Media (Added by DiviMenus On Media). On Media: Open Media Link.

Third Menu Item Content tab:

Title: Info. Link Type: Popup (Added by DiviMenus). Divi Layout: blurb that I saved previously in the Divi Library.

Adding to the Divi Library

In order to display this DiviMenu on an image, we need first to save it to the Divi Library. Once saved, the DiviMenu will appear in the select field that uses DiviMenus on Media to choose the Divimenu.

To save the DiviMenu go to the module settings and choose “Save to library” and give it a descriptive layout name. For this example I have saved the Divimenu as “DM on media example”.

Adding to the Image

 

Divimenus

Image Content tab:

Image: DiviMenus image.

Image Link Url: https://www.elegantthemes.com/marketplace/divimenus-on-media/ (this is the Image Media Link).

Image Design tab:

DiviMenu On Media: ON.

DiviMenu: DM on media example.

Display: Desktop – hover | Phone – always.

Overlay Color: Desktop – transparent | Hover – rgba(0,0,0,0.2)

Final thoughts

Displaying a DiviMenu on images and videos is quite easy with DiviMenus On Media.

In this article I have demonstrated how to display a DiviMenu on a Image. Likewise, you can add them to videos, as well as add more Menu Items to the DiviMenu.

An use case that users like the most is adding a custom play button to a video with some other button. Users also find very helpful to be able to open a popup from an image, or even to be able to buy a product!

Hope this article has been useful to you. DiviMenus and DiviMenus On Media are available in the Divi Marketplace.

Happy building!

DiviMenus On Media

Display DiviMenus on Images & Videos to add stunning Media options!

Learn more about this DiviMenus add-on:

DonDivi plugin page

DonDivi documentation

Divi Marketplace