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.

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».

/*add media query so changes only affect tablet and desktop*/

@media (min-width: 767px) {

/*set the image width*/

.entry-featured-image-url  {
width: 30%;
float: left;
margin-bottom: 0!important;
}

/*set the details width*/

.entry-title,
.post-meta,
.post-content {
width: 70%;
float: left;
padding-left: 30px;
}
}

Así quedaría:

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.

/*style the individual posts*/

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

/*blog image aspect ratio square 1:1*/

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