How to add a play button over an image and use it to open a video lightbox in Divi Builder

Product:

Wonder Lightbox

Tutorial:

Divi Builder is a powerful yet easy-to-use visual editor. After installing the plugin Wonder Lightbox, by adding a class name wplightbox to the Divi Image module, you can easily open a video or image lightbox popup on clicking the image.

This tutorial will guide you how to add a play button over an image and use it to open an image or video lightbox.

Continue reading

How to open a popup lightbox gallery when clicking a button in Divi

Divi Page Builder is one of the most popular WordPress drag and drop page builders. This tutorial will guide you how to open a lightbox popup gallery when clicking a button in Divi page builder.

There are four steps in this tutorial:

  • Step 1 - Install Wonder Grid Gallery
  • Step 2 - Add a button module in Divi page builder
  • Step 3 - Create a lightbox gallery in Wonder Grid Gallery
  • Step 4 - Add the lightbox gallery to Divi page builder

Continue reading

How to add a WordPress logo carousel to Divi theme

Divi page builder of Elegant Themes is one of the best WordPress drag and drop page builder on the market. This tutorial will guide you how to add a WordPress logo carousel to the Divi visual builder.

There are 3 steps in this tutorial:

  • Step 1 - Install Wonder Carousel
  • Step 2 - Create a WordPress logo carousel
  • Step 3 - Add the logo carousel to Divi visual builder

Continue reading

How to open a PDF file in lightbox popup in Divi theme

Divi of Elegant Themes is a popular WordPress theme and features a powerful drag & drop WordPress page builder. This tutorial will guide you how to open a PDF file in a lightbox popup in Divi page builder.

There are 3 steps in this tutorial:

  • Step 1 - Install Wonder Lightbox and Wonder PDF Embed
  • Step 2 - Upload PDF file to WordPress Media Library and get the URL
  • Step 3 - Activate PDF lightbox popup on button, image or text:
    • Open PDF lightbox popup when clicking a button
    • Open PDF lightbox popup when clicking an image
    • Open PDF lightbox popup when clicking text

At the end of the tutorial, we will also discuss how to automatically open a PDF lightbox popup on page load.

  • Additional 1 - Automatically open PDF lightbox on page load
  • Additional 2 - Open the lightbox only once

Continue reading

How to automatically open a lightbox popup on page load

This tutorial will guide you how to automatically open a lightbox popup on page load. You can display image, webpage, PDF document, YouTube, Vimeo or HTML5 video in the lightbox popup.

There are three steps in the tutorial:

  • Step 1 - Install Wonder Lightbox
  • Step 2 - Get the URL of the image file, PDF document, HTML video file, YouTube or Vimeo embed URL
  • Step 3 - Add HTML code to the WordPress page to create an auto popup

In step three we will learn how to add the HTML code to WordPress classic editor, Gutenberg editor and Elegant Themes Divi page builder.

We will also discuss how to popup the lightbox only once and how to autoplay YouTube, Vimeo and HTML5 videos on lightbox popup and close the lightbox automatically when the video ends.

  • Additional 1 - Autoplay YouTube, Vimeo and HTML5 video and close the lightbox automatically when the video ends
  • Additional 2 - Popup the lightbox only once

Continue reading

How to open a YouTube video in lightbox in Divi button module

Divi Builder is a drag and drop page builder by Elegant Themes. This tutorial will show you how to open a YouTube video in a lightbox popup when clicking a Divi button.

There are 4 steps in this tutorial:

  • Step 1 - Install Wonder Lightbox
  • Step 2 - Add a button in Divi builder
  • Step 3 - Activate lightbox on the button
  • Step 4 - Specify the size of the lightbox popup

Continue reading