Divi masonry video gallery with lightbox navigation

Apr 5, 2021 | Divi Multimedia Grid, Tutorials | 0 comments

Divi Multimedia Grid Video Lightbox Navigation

In this tutorial, we will showcase one of the new features of Divi Multimedia Grid added on version 1.1.0. Now is possible to have lightbox gallery navigation via the click action button or the also new overlay option. The lightbox gallery new action will allow you to present the media include on the grid on a lightbox and also navigate back and forward between the media items without leaving the lightbox. The action can be trigger by the action button and/or to the new overlay option, the overlay will display an overlay color and icon when the user navigates over the media item container. For the use case of this tutorial we will only use video media types.

  1. First, you will need to add the Divi Multimedia Grid module to the page.
  2. Open the module settings and under the Content Tab -> Content Toggle, click on the Select Media Items button and select the videos you want to display.
  3. Also on the Content Tab -> Elements Toggle, deactivate Show Media Meta since we want to show only the videos on the masonry gallery.
  4. On the same toggle activate Show Item Overlay option. Once active it will show another field called Overlay Click, select the option Opens Gallery Lightbox. You also have style options for the overlay on the Design Tab -> Overlay Toggle.
  5. Now navigate to the Design Tab -> Lightbox Toggle, where you can select if you want to show any info related to the video once it is inside the lightbox, so far you can select the video title, caption, and/or description. It is also possible to activate/deactivate the autoplay of the video inside the lightbox.

And that’s it. Now you have a masonry video gallery that can be open inside a lightbox. Send us a message if you have any issue with the module settings or have any feature requests, we are more than happy to help you.

See the live demo here.

Divi Multimedia Grid Video Lightbox Navigation

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Share This