Cómo crear una composición OV GRID para las entradas recientes con el módulo blog de divi

En este tutorial gratuito aprenderás a crear una composición a dos columnas para mostrar las 5 entradas más recientes de tus artículos del blog. Le he denominado OV GRID.

Esta composición consiste en tener dos columnas; en la primer columna (izquierda) mostrar la entrada más reciente abarcando todo el ancho de la primer columna, y en la segunda columna (derecha) mostrar las cuatro entradas restantes pero dividas en dos columnas dentro de la segunda columna (derecha). Lo sé suena enredado y confuso pero no encontré otra forma de explicarlo jaja. Así que mejor a continuación te dejo la imagen de la composición que vamos a lograr en este tutorial:

Cabe mencionar que esta composición es completamente dinámica, es decir, al ir agregando nuevas entradas desde WordPress estas van ir apareciendo en la sección OV GRID de forma automática, cada entrada se adaptará correctamente a esta composición, así que una ves realices la composición no hará falta hacer nada. ¿Suena genial verdad?

Para lograr dicha composición vamos a requerir de algunos fragmentos de código que te dejo a continuación…
 
Fragmento de código jQuery para crear el grid del módulo blog y agrupar el título, meta y contenido en un div:

<script>
jQuery(document).ready(function($){
  // Crear el grid del módulo blog
  $( ".ov-blog-grid .et_pb_blog_item_0_0" ).wrapAll( "<div class='ov-columna-izq' />");
  
  $(".ov-blog-grid").each(function() {
    $(this).find(".et_pb_blog_item_0_1, .et_pb_blog_item_0_2, .et_pb_blog_item_0_3, .et_pb_blog_item_0_4").wrapAll('<div class="ov-columna-derecha"></div>');
  });
  
  // Agrupar el título, meta y contenido en un div 
  $(".ov-blog-grid .et_pb_post").each(function() {
    $(this).find(".entry-title, .post-meta, .post-content ").wrapAll('<div class="ov-meta-content"></div>');
  });
  
});
</script>

Fragmento de código CSS para los estilos del blog OV GRID:

/* Estilos ov blog grid */
.ov-blog-grid article {
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, .12);
  transition: box-shadow .3s ease 0ms;
  animation-duration: .2s;
}
.ov-blog-grid article:hover {
  box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, .24);
}

.ov-blog-grid .et_pb_post .entry-featured-image-url {
  margin-bottom: 20px;
}

.ov-blog-grid .et_pb_post .entry-featured-image-url img {
  border-radius: 6px 6px 0 0;
}

.ov-blog-grid .ov-meta-content {
  padding: 0px 20px 20px;
}

@media only screen and (min-width: 769px) {
  .ov-blog-grid .et_pb_ajax_pagination_container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
  }
  
  .ov-blog-grid .ov-columna-izq, 
  .ov-blog-grid .ov-columna-derecha {
   width: 100%; 
  }
  
  .ov-blog-grid .ov-columna-izq article {
    padding-bottom: 1px;
  }
  
  .ov-blog-grid .ov-columna-izq article .entry-title a {
    font-size: 24px !important;
  }
  
  .ov-blog-grid .ov-columna-izq article .ov-meta-content {
    padding: 10px 30px 30px;
  }
  
  .ov-blog-grid .ov-columna-derecha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .ov-blog-grid .ov-columna-derecha article {
    width: 48%;
  }

  .ov-blog-grid .ov-columna-derecha .entry-featured-image-url img {
    height: 210px!important;
    object-fit: cover;
  }
}

@media only screen and (min-width: 981px) {
  .ov-blog-grid .et_pb_ajax_pagination_container {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
  }
  .ov-blog-grid .ov-columna-izq,
  .ov-blog-grid .ov-columna-derecha {
     width: 48%;
  }
  .ov-blog-grid .ov-columna-derecha article {
    width: 46%;
  }
}

/* Estilos boton leer más */
.ov-blog-grid a.more-link {
  color: #ffffff;
  background-color: #4741D7;
  padding: 6px 16px;
  margin-top: 10px;
  border-radius: 50px;
  text-transform: capitalize;
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.ov-blog-grid a.more-link:hover {
  color: #fff;
  background-color: #292589;
  transition: all 0.3s ease-in-out;
}

¡Ahora sí! No esperes más y dale play al video…