Gallery is an important page in any website. Default gallery popup in WordPress is frankly speaking not a presentable one. Divi has introduced a basic lightbox popup facility to the WordPress gallery. Unfortunately it is also a crude looking one. It takes a little CSS to make the popups better. Let us see how it is done and it’s outcome.

Resource:

You need Divi and a little CSS.

Procedure:

  • Activate Enable Divi Gallery option in Divi Theme Options (Image 1).
  • Create a page with a Gallery module in it. Make the layout as Grid and turn off Show Title and Caption (Image 2).
  • Put following CSS in e-panel.
button.mfp-close {
    color: #ec1b24 !important;
    font-weight: bold !important;
    padding-top: 20px;
    padding-right: 20px !important;
}
.mfp-title {
    color: black;
    font-weight: bold;
    background: rgba(255,255,255,.3);
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: -24px;
    margin-left: 3px;
    margin-right: 3px;
}
.mfp-counter {
    color: black;
    padding-right: 20px;
}
img.mfp-img {
    padding: 0;
    border-radius: 5px;
    border: 3px solid #ec1b24;
}
.mfp-arrow:after {
    color: #ec1b24;
    font-size: 60px !important;
}

Reference Images: