ProBeaver Weekly
Weekly for all things Beaver

How to open Pop up box on click of button in Beaver Builder

Want to open a pop-up lightbox on click of a button? You can easily do this out of the box using Beaver Builder plugin. Pop window can display any content including: normal text, video and even your Beaver layout template. Besides text button, you can also make click on a photo to trigger lightbox pop-up.

Setup Pop-up lightbox opening in Beaver Builder

1. Open a page in Beaver Builder mode.
2. Click “Add Content” button and drag the “Button” module into your layout.
3. Look for “Click Action” section in “Button Settings” and select the “Lightbox” option.

Beaver Lightbox pop-up

4. Then select “HTML” or “Video” option depending on type of content you want to display.
5. Click “Save” button and your button which opens pop-up box on click is ready. Popup window will adjust automatically on smaller devices.

Beaver Builder lightbox popup example

More options for this ligthbox feature

Besides displaying HTML or video content in the popup box, you can also show contents of any Beaver template. Just select “HTML” option and add the template shortcode.

Beaver lightbox shortcode

You can also make photo click to trigger a popup lightbox in the similar manner. However, in this case bigger version of image will appear in the lightbox pop-up by default.

Open lightbox clicking an image

If you want to make an image to trigger lightbox showing video or HTML content, then you can try this work-around: add “button” module and in the “text” field instead of adding text, add manual image link code. Of course, some button styling would be needed to make it look little neater!

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)

2 Comments

  1. Angela on March 2, 2017 at 7:28 am

    Hey Davinder,

    How can I make Optimize Press built optin page open in lightbox with click of button?

    Thx,
    Angela

Leave a Comment





showcase-websites-front-1

Submit Beaver Builder built websites to feature in the "showcase" section on ProBeaver