Seleccionar página

Blog en modo lista en Divi: Convierte el layout en una lista de post horizontal

En este video tutorial gratuito te enseñaremos a convertir el layout de módulo de blog en modo lista de post horizontal en Divi.

Por Jefferson M.

Ago 10, 2020

En este video tutorial gratuito te enseñaremos a convertir el layout de módulo de blog en modo lista de post horizontal en Divi, lo lograremos añadiendo algunos cachos de código CSS adicionales que podrás encontrar en la parte inferior de este post. Este es otro tutorial de nuestra serie de contenidos de Blog Hub Design donde nos centramos en el mejoramiento y personalización del blog en Divi.

Tiempo de lectura estimado: 4 minutos

Seguramente tus posts muestran un trabajo que se debe destacar, así que hoy le daremos estilo al módulo de blog de Divi. Haremos que se vea como una lista con un procedimiento súper fácil y rápido.

Organizando el módulo de blog de Divi

Con este procedimiento haremos que la imagen esté a la derecha y el texto o detalles a la derecha.

Entra en las configuraciones del módulo de blog, luego en la pestaña de diseño y establece el layout en ancho completo. No se verá bien al principio, pero no te preocupes.

Con el siguiente snippet haremos que la imagen ocupe el 30% del ancho y el título, metadescripción y extracto ocupe el otro 70%. Si deseas cambiar estos valores solo debes asegurarte de que la sumatoria siempre sea de 100%. Con este CSS, todo el texto se mantendrá de un lado, sin distribuirse alrededor de la imagen.

Si estás usando un child theme o tema hijo, debes copiar este snippet y pegarlo en el archivo style.css. Si quieres copiarlo en tu tema padre, puedes ir a las opciones de tema de Divi y pegarlo en la caja de CSS personalizado.

Para invertir la posición y que la imagen quede del lado derecho solo debes editar el snippet en la línea que dice «float», en vez de «left» escribes «right».

/*Agregar media query para que aplique solo en table y desktop*/
@media (min-width: 767px) {

/*Cambiar el ancho de la imagen*/
.entry-featured-image-url  {
width: 30%;
float: left;
margin-bottom: 0!important;
}

/*Cambiar el ancho de los demas elementos*/
.entry-title,
.post-meta,
.post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}

Así quedaría:

modulo blog
Imagen: Nelson Miller.

Un poco más de estilo

Con el siguiente snippet le daremos unos toques de estilo al layout, como un poco de sombra a la caja, espacio entre cada bloque y redondear los bordes. Modifica los valores según el diseño que desees.

/*Estilo de caja y sombra a los post*/
.et_pb_post {
box-shadow: 0px 2px 80px 0px rgba(160,190,212,0.22);  
border-radius: 6px;
padding: 60px;
}
lista horizontal de post
Imagen: Nelson Miller.

Hacer las imágenes cuadradas

Tal vez quieras que el diseño muestre las imágenes cuadradas, incluso si no las subiste en ese formato. El fragmento que dice “padding-top: 30%” va a indicar que el ancho de la imagen sea el mismo que establecimos para la misma. Si en el snippet de arriba no estableciste que la relación fuera 30%-70%, asegúrate de que el valor asignado para la imagen en el mismo y luego en este sean iguales.

Recuerda que tenemos un tutorial donde te enseñamos a crear un blog fenomenal con Divi, y además te regalamos un plugin premium para que mejores la visualización de tus post del blog con el mismo.

Agrega el siguiente código en las opciones de tema de Divi.

/*Hacer la imagen del blog de aspecto cuadrado*/
.entry-featured-image-url {
  padding-top: 30%;
  display: block;
}

.entry-featured-image-url img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
}

¿Te gusta? ¡Muéstranos tu layout favorito!

Nos vemos en la próxima.

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web's fantásticas con Divi

5 Comentarios

  1. Avatar

    Hola Jefferson:
    ¿Que tamaño de imágenes es recomendable utilizar en el post?, lo he probado con una plantilla de prueba que tengo y me salen unas más grandes que otras.
    ¿Sabes en donde puedo ver que tamaño de imágenes se utilizan en divi tanto para páginas como blog?
    Excelente tutorial, por cierto.
    Saludos

    Responder
  2. Avatar

    Genial!, muchas gracias y tomo nota.

    Responder
  3. Avatar

    Hola que tal necesito ayuda, he utilizado este diseño solo para el modo escritorio, ya que solo en escritorio se ve bien, en movil se ve fatal, por eso he ocultado con la visibilidad todos los modulos, secciones etc para movil y tablet y justo debajo de este diseño he puesto otro que solo se vea en escritorio, sucede que por el código la opción de visibilidad no funciona y no me deja ocultar, podrias ayudarme?

    Responder
    • Jefferson M.

      Hola Leonardo, me parece curioso que te esté dando problemas en móvil, pues como ves en nuestra demo, se ve de manera normal en móvil. Pero para que no te afecte en móvil o table solo coloca la media query en 1024, copia esto: @media (min-width: 1024px) y reemplaza esa línea en el CSS

      Responder

Enviar un comentario

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

🖐 ¡RECIBE UN TIP NUEVO CADA DÍA ! 😎

Suscribiendote a esta lista de correo, recibirás cada día un tip / recurso / mini-tuto completamente gratuito sobre diseño web con WordPress y Divi. Además recibirás nuestras ofertas únicamente cuando las publiquemos.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros Tips Diarios