A quién no le ha pasado. Crean las imágenes destacadas para los artículos de su blog con un tamaño aproximado, y cuando las ven aparecer en el módulo blog de Divi, se han recortado al tamaño que maneja Divi.

Entonces, ¿Con qué proporciones debemos crear las imágenes?

Y aún así hallemos el tamaño limitante, ¿No sería genial mostrar las imágenes en otras proprociones como cuadrados o rectángulos verticales?

Hoy aprenderemos a “hackear” el módulo Blog para que las imágenes se recorten en la proporción y tamaño que se nos ocurra. Cuadrados, rectángulos horizontales, rectángulos verticales, pan comido.

Antes de empezar, ¿Ya tienes el tema Divi con licencia?

Divi es sin lugar a dudas el mejor tema para WordPress y la mejor inversión que puedes hacer para tu web. Si deseas adquirir licencias de Divi para sitios ilimitados y con el soporte de Elegant Themes, puedes obtenerlo desde la web oficial con un 20% de descuento desde aquí.

Por otro lado, si sólo necesitas una licencia para 1 sitio web, puedes adquirirla desde Rapihosting, la web de nuestro servicio de Hosting para WordPress, que también ofrece el servicio de activaciones del tema Divi para 1 sitio web con una licencia original de por vida, a un precio accesible para todos. Así que si deseas el tema Divi con actualizaciones automáticas de por vida, acceso a las plantillas Premium y todas las funciones desbloqueadas, sigue éste enlace.

¿Cuál es la proporción que queremos que tenga la imagen del Divi Blog?

Antes que nada, tenemos que tener claro qué proporción es la que queremos que tenga el nuevo recorte. La proporción se halla con el ancho y alto de la imagen de ésta forma ancho:alto.

Por ejemplo, si tenemos una imagen de 200 de ancho (puede ser píxeles, %, em, etc. No es relevante. Siempre y cuando el ancho y el alto estén en las mismas unidades) y 100 de alto. Su proporción de tamaño sería: 200:100 o lo que es lo mismo (simplificando) 2:1. Una proporción de 2 a 1.

Te puede interesar:

Módulo Blog Divi: Mejorando la paginación por defecto

Proporciones de tamaños de Imágenes más usadas en Divi

Las proporciones más usadas de imágenes en Divi, y en general son las siguientes:

• Cuadrado
  • 1:1
• Landscape (Horizontal)
  • 16:9
  • 4:3
  • 3:2
• Portrait (Vertical)
  • 9:16
  • 3:4
  • 2:3

¿Cómo agregamos una proporción personalizada para el recorte de la imagen del Divi Blog?

Aquí viene lo bueno. Esto se puede cambiar utilizando un poco de código. Para ello, es necesario hacer unos cálculos que dependerán de las proporciones elegidas. Luego, agregar esos datos a determinados anchos mediante css.

Bueno, la cuestión es que, personalmente, me aburría tener que realizar los cálculos cada vez que necesitara una proporción diferente. Así que creé una herramienta (que puedes ver más abajo) que hace los cálculos por ti y genera el código listo para copiar y pegar. Tan fácil como suena.

Herramienta Gratuita generadora de código

Lo único que deberán llenar es, primero, la clase CSS personalizada del módulo blog que queremos cambiar. Si no quieren ponerle una clase, dejen ese espacio en blanco. Al hacer eso, el código afectará a todos los módulos blog de ese diseño. Aunque yo prefiero utilizar clases para hacerlo más específico.

Luego, deberán colocar el ancho y luego el alto de la proporción deseada (Como es una proporción, NO deben poner las unidades).

Por último le hacen click al botón “Generar código” y vualá. Código listo para copiar y pegar.

Para que puedan visualizar la herramienta, solo dejen su correo en el formulario de abajo y hagan click al botón: “Ver códigos”.

Y automáticamente aparecerá…

Adicionalmente, se te enviará a tu bandeja de entrada un mail de confirmación para ser añadido a mi lista de correos. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones y sorteos de productos de mi Tienda de elementos y layouts para Divi. Además, que tenemos una comunicación más directa para compartir y resolver dudas.

¿Qué hacer con éste código?

El último paso será, simplemente, agregar al diseño donde tengas el módulo blog, un módulo código. Y dentro escribir agregar el código css dentro de las etiquetas <style></style> de la siguiente forma:

Guardas los cambios y listo. Tendrás un módulos Blog con nuevas proprociones de Imágenes.

Tambíen puedes cambiar los tamaños de las imágenes de los geniales estilos de nuestro pack Blog

En nuestra tienda tenemos un pack de asombrosos estilos para mostrar tus entradas con el módulo Blog. El pack incluye 22 estilos y viene en plantillas json listas para soltar directamente a nuestros diseños.

Los módulos Blog de nuestro pack muestran las imágenes con su tamaño original, sin recortar. Sin embargo, si deseas recortarlas a otros tamaños, éste método que hemos visto hoy, también funciona perfectamente con ellos. Cada Blog de cada estilo ya tiene una clase personalizada que van desde vic-blog-layout-01  hasta vic-blog-layout-22. Si deseas, puedes utilizar éstas clases en la herramienta.

Palabras Finales

Como vimos, es muy fácil cambiar las proporciones de las imágenes, de las miniaturas de las entradas que presenta el módulo Divi Blog. Más aún, utilizando la herramienta generadora de códigos.

Si te gusta éste tipo de contenido, no olvides confirmar tu suscripción desde el correo que te llegó a tu bandeja de entrada.

Además, dale una ojeada a nuestra tienda, seguramente hallarás elementos para Divi que te encantarán. Saludos y volverán a escuchar de mí en el próximo artículo.

Pdta. ¿Ya te suscribiste a mi canal de Youtube?, si no lo haz hecho aún, hazlo desde aquí

Te puede Interesar:

 VIDEO: Cómo Diseñar la página de Blog para mostrar las entradas, Paso a paso