Show inline content in a light box

Inline content can be simple text, images or a contact or subscription form.

A. First go to your Settings > Media admin page and activate the Inline option under the FancyBox settings. After saving, the amin page will show a new section called Inline where you can tweak its parameters.

B. Next, open your page/post for editing and insert an HTML block. Paste this code to create the basic link that will serve to open the inline content:

<a href="#fancyboxID-1" class="button fancybox-inline">Subscribe</a>

Depending on theme support, you can use a class like button (for example) or a custom class (enter your custom CSS in Appearance > Customize > Custom CSS) to give the link a button appearance. The link can also get a unique ID like id="details" or id="fancybox-auto" (useful for automatic opening of the light box) but make sure it does not conflict with other IDs used on the same page!

C. Next, add an HTML block and paste this:

<div class="fancybox-hidden">
<div id="fancyboxID-1" class="hentry" style="width:460px;max-width:100%;">

The first wrapping div with class fancybox-hidden is there to hide the content on the public side, until it is opened in the light box.

The second wrapping div ID (in this exampe fancyboxID-1 but can be anything you like) must be unique and it must correspond with the links HREF but without the # in front of it. When using the above example for more FancyBox inline content combinations on one page, give the second one the ID fancyboxID-2 and so on…

D. Next, add the content that you wish to display in the light box. This can be text, images, a contact form or a newsletter subscription form or just about anything else. Be careful: if you insert a video (or sound embed) with autoplay activated, this might start playing in the background after page load while the light box is not (yet) opened. This can be confusing or very frustrating for visitors!

E. Finally, add another HTML block and paste this to close the inline content section:


If you forget this last step, your page will likely look very weird!

NOTE: If you find that the inline content shown in FancyBox is styled very different than the rests of the page content, then you might want to change the div tag attribute class="hentry" to something else that matches your theme. Find out what class name is used for the main content on your site and re-use that.