Cara Membuat Filterable Portofolio 3 COLOM (Default 4 KOLOM) PADA DIVI PAGE BUILDER

 Tulis ini pada CSS CLASS DI MODULE: three-column-portfolio class.

After that, go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:

/* 3 Column Portfolio */

@media (min-width: 981px) {

    .three-column-portfolio .et_pb_grid_item {

        width: 29.66%!important;

        margin-right: 5.5%!important;  

        margin-bottom: 5.5% !important;

    }

  

    .three-column-portfolio .et_pb_grid_item:nth-child(3n) {

        margin-right: 0!important;

    }

  

    .three-column-portfolio.et_pb_grid_item:nth-child(4n) {

        margin-right: 5.5%!important;

    }

  

    .three-column-portfolio .et_pb_grid_item.et_pb_portfolio_item:nth-child(4n+1) {

        clear: none!important;

    }

    .three-column-portfolio .et_pb_grid_item.first_in_row {

        clear: unset;

    }

}

/*move the text content to the center of the image*/

.three-column-portfolio .three-column-portfolio-inner {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: 99;

}

.three-column-portfolio .et_overlay:before {

display: none;

}

how about : and with the position TITLE TEXT & TEXT in the middle of the photo / image.

Please check. I added this code to the Divi > Theme options > Integration tab:

<script>

jQuery(document).ready(function(){

    function onImage(){

        jQuery(".three-column-portfolio .project").each(function(){

            if(jQuery(this).children().length == 3){

                jQuery(this).children().not(":first-child").wrapAll("<div class = 'three-column-portfolio-inner'></div>");

            }

        })

    }

    onImage();

    jQuery(document).ajaxComplete(function(){

        onImage();

    })

})

</script>