In this article you'll learn how to create a similar effect that you can see in the screencast below:

By default only a few modules allow opening the content in a lightbox, such as the Gallery module and the Image Module. If you want to open other modules you can apply the solution posted below. 

First of all, add a separate section for the content that you want to open in a lightbox. This section will be hidden by default and will appear only when you click a button, though the section will be always visible under the Divi Builder so you can modify it the way you need.

Next, assign et-lb-content CSS Class name to the section.

You can apply a semi-transparent background to the section and other styles, like you normally do when you modify any other Divi modules. In my case I defined gray semi-transparent color for the section. The section will expand fullscreen when opened. 

Now, you need to add a button, so when you click it will open the section as a lightbox window. 

The important thing is that the button should not be located in the same section where you added the content for the lightbox. Let's add a new section for the button module, define et-lb-btn class and # placeholder link as you can see below:

The last thing we need to do is adding the necessary CSS and JS under the theme options. Add the following code to the Custom CSS field under WP admin / Theme Options / General Settings:

body:not(.et-fb-root-ancestor) .et-lb-content {
    position: fixed;
    visibility: hidden;
    top: 0px;
    z-index: 999999;
    min-height: 100%;
    transition: all .2s 0s;
}

body:not(.et-fb-root-ancestor) .et-lb-content .et_pb_row {
    position: relative;
    top: 50px;
}

.et-lb-open {
  visibility: visible !important;
  width: 100%;
}

span.et-lb-close {
    font-size: 46px;
    right: -1vw;
    margin-top: -51px;
    display: block;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    font-family: etmodules;
    z-index: 99999999999999;
    position: absolute;
}

body:not(.et-fb-root-ancestor) .et-lb-content:not(.et-lb-open) {
    transform: scale(.3);
    opacity: 0;
}

body:not(.et-fb-root-ancestor) .et-lb-btn {
    cursor: pointer;
}


Also, add the following JS code under the WP admin / Theme Options / General Settings / Integration tab / Head section:

<script>
jQuery( document ).ready(function() {
jQuery('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) .et-lb-content > .et_pb_row:first-child');
jQuery('body:not(.et-fb-root-ancestor) .et-lb-content').appendTo('#et-main-area');
jQuery('.et-lb-btn, .et-lb-close').click(function(e){
        e.preventDefault();
jQuery('.et-lb-content').toggleClass('et-lb-open');
});
});
</script>


That's it. Feel free to leave a comment if there is anything you think can be improved. 

Did this answer your question?