How to show HTML content in a WordPress lightbox

Last updated on

This tutorial will guide you how to show HTML content in a WordPress lightbox by using the plugin Wonder Lightbox.

The tutorial will also discuss how to open the HTML content in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

There are two steps in this tutorial:

  • Step 1 - Add the HTML content to a div on the webpage
  • Step 2 - Open the div in a WordPress lightbox
  • Additional - Open the div in the lightbox of a gallery created with Wonder Grid Gallery or a carousel created with Wonder Carousel

Continue reading →

How to show shortcode content in a WordPress lightbox

Last updated on

This tutorial will show you how to show content created with a shortcode in a WordPress lightbox by using the plugin Wonder Lightbox.

There are two ways to show content created with a shortcode in a lightbox:

  • Method 1 - Add the shortcode to a div on the same page then show the div in a lightbox
  • Method 2 - Add the shortcode to a standalone WordPress page then open the page in a lightbox

Continue reading →

How to add a close lightbox link in the WordPress lightbox popup

Last updated on

Product:

Wonder Lightbox

Tutorial:

In the lightbox created with Wonder Lightbox, there is a close button on the top right corner of the popup.

But in some cases, if you use the lightbox to open a div, you may want to add an extra close lightbox link to the div content, or you may want to add the link to the title if you open an image lightbox or video lightbox.
Continue reading →

Including Wonder Lightbox PDF files in SEO Sitemap

Last updated on

To automatically include a PDF file in Sitemap, most SEO plugins, for example Yoast SEO, require the PDF file being uploaded to WordPress Media Library and being attached to a WordPress post or page.

In Wonder Lightbox or Wonder Carousel, PDF lightbox is rendered as a regular HTML link not an attachment. This tutorial will guide you how to attach PDF files to posts or pages so they can be found by the SEO plugin and automatically added to the sitemap file.
Continue reading →

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

Last updated on

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

Last updated on

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 →