• 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 love creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create digital products at SimpleProThemes.com and 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

      • Davinder Singh Kainth on March 9, 2017 at 1:27 pm

        Add the page code to button module by selecting “HTML” option. Works ?

    Leave a Comment





  • Pro Stuff

    for  Beaver Builder

    Pro Styles for Beaver

    Customize Beaver Builder Modules beautifully with pre-made CSS packs

    Creative9

    A premium modern agency template for Beaver Builder users