Aplicar un botón de cargar o mostrar más (load more) a cualquier grupo de módulos en divi sin plugins

En este tutorial gratuito aprenderás a aplicar una funcionalidad increíble para tus sitios en divi, la funcionalidad consiste en aplicar un botón de cargar o mostrar más (load more) a cualquier grupo de módulos en divi sin plugins.

Esta funcionalidad yo mismo la aplico en este sitio web, si entras a la home de esta página y te desplazas a la sección «Alumnos felices» podrás ver que tengo 4 testimonios más un botón de «cargar más», al hacer click en el botón de cargar más se nos muestran otros dos testimonios y si volvemos a hacer click se nos muestran otros dos.

Este efecto no solo puede ser aplicado a módulos de recomendación o testimonios, sino que puedes aplicarlo a cualquier grupo de módulos de divi (anuncios, personas, textos, imágenes, etc.), el proceso es el mismo y todo funcionará correctamente.

La funcionalidad la vamos a lograr con unas pequeñas líneas de código que te dejo a continuación:

1. Fragmento CSS para la columna que contiene los módulos:

display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;

2. Código jQuery para agregar la funcionalidad de «cargar más»…

<script>
// Cargar más módulos
jQuery(function($){
    $(".modulo-mas").slice(0, 4).show(); // seleccione los primeros cuatro módulos
    $("#cargarMasModulo").click(function(e){ // click en el evento para cargar más
        e.preventDefault();
        $(".modulo-mas:hidden").slice(0, 2).slideDown(); // seleccione los siguientes 2 módulos ocultos y muéstrelos
        if($(".modulo-mas:hidden").length == 0){ // comprobar si todavía existen módulos ocultos
            $("#cargarMasModulo").attr("style", "display:none;"); // eliminar botón si ya no hay módulos
        }
    });
});
</script>

3. Código CSS para ocultar los módulos:

.modulo-mas {
  display: none;
}