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 Tutoriales Free donde nos centramos en el mejoramiento y personalización del blog en Divi.

Tiempo de lectura estimado: 3 minutos

Índice

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;
}

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.

9 Comentarios

  1. Mariangeles Jiménez Martos

    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. Mariangeles Jiménez Martos

    Genial!, muchas gracias y tomo nota.

    Responder
  3. Leonardo

    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
  4. gonzalo

    Buenos días. No soy muy experto con Divi. Como se aplica el formato blog en una web. Si al empezar desde GENERADOR DE TEMAS, pongo ENTRADAS Y apliCar a una pagina especifica, esto redunda en la pagina llamada BLOG por ejemplo. Estoy usando un diseño predeterminado de los que vienen en DIVI. Gracias por los videos.

    Responder
    • Jefferson M.

      Hola Gonzalo. Son dos cosas diferentes. Puedes darle un diseño particular a las entradas con el generador de temas y luego, para presentar esas entradas, puedes crear una página llamada «blog» donde despliegues el módulo de blog para mostrar esas entradas (ya personalizadas).

      Responder

Enviar un comentario

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