Cerrar video

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

por | May 26, 2021 | Tutorial gratuito | 9 Comentarios

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:

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

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…

Tutoriales Relacionados

9 Comentarios

  1. Alejandro

    Hola, una pregunta, ¿cómo hago para que, en los post de la derecha, la distancia entre los de arriba y los de abajo se disminuya? Gracias!!

    Responder
  2. Rafa Cantal

    Hola Óscar, veo que esta entrada es del año pasado, pero me interesaría mucho preguntarte una cosa:

    Me parece muy interesante esta composición para encabezar la página blog, pero me gustaría mucho saber si es posible añadir otro módulo blog que nos muestre el resto de entradas, es decir desde la entrada nº 6 hasta el final.

    En el código veo que la «primera» entrada tiene la referencia «.et_pb_blog_item_0_0» y que la «quinta» es la «.et_pb_blog_item_0_4» entonces ¿la «sexta» sería «.et_pb_blog_item_0_5»? y ¿cómo decirle que siga añadiendo el resto de entradas pero excluyendo las 5 primeras en otro módulo blog?

    Espero haber espoleado tu mente… 😉

    Responder
    • Oscar Viedma

      Hola Rafa, sí podría ser posible, podemos ocultar las primeras 6 entradas para el segundo módulo blog, por ejemplo le pones un nombre clase a ese segundo blog: ov-blog-2

      Y el código CSS sería así:

      .ov-blog-2 .et_pb_blog_item_1_0,
      .ov-blog-2 .et_pb_blog_item_1_1,
      .ov-blog-2 .et_pb_blog_item_1_2,
      .ov-blog-2 .et_pb_blog_item_1_3, 
      .ov-blog-2 .et_pb_blog_item_1_4,
      .ov-blog-2 .et_pb_blog_item_1_5 {
       display: none;
      }
      
      Responder
  3. Rafa Cantal

    Hola de nuevo Óscar.

    Ya no tienes que calentarte la cabeza con mi petición… Ha sido tan simple como usar las opciones de Divi: en la pestaña «Contenido» del segundo módulo blog que he insertado he ido a la opción «Número de desplazamiento» y he puesto 5, de esta manera los cincos primeros posts son omitidos en este segundo módulo y aparecen en el primero con tu maravilloso layout.

    Gracias de todas formas por tu aporte y tu tiempo.

    Saludos!!

    Responder
    • Oscar Viedma

      Wow! Excelente solución Rafa, ni a mi se me había ocurrido jaja. Te di otra solución pero con CSS, pero que genial que podamos hacerlo tal como comentas 🙂

      Muchas gracias Rafa.

      Un abrazo.

      Responder
  4. Rafa Cantal

    No… ¡¡GRACIAS A TI!!

    Un saludo DIVIno.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest