A quién no le ha pasado. Crean las imágenes destacadas, para cada uno de 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?
O mejor aún. ¿No sería genial mostrar las imágenes en otras proprociones como cuadrados, rectángulos verticales o de la manera que nos guste?
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 deseas activar la licencia en un sitio web, puedes utilizar nuestro servicio de activación de licencias para que tu sitio cuente con una licencia lifetime, a un excelente precio.
Si eres miembro premium tienes, además, un descuento adicional.
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
¿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 CSS. Para ello, es necesario hacer unos cálculos que dependerán de las proporciones elegidas. Y luego aplicar éstos cáculos como valor a ciertos parámetros CSS.
Y 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 te genera el código listo para copiar y pegar. ¡Tan fácil como suena!.
Si te está gustando el artículo, éstos otros te van a encantar:
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.
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
¿Qué hacer con éste código?
El último paso será, simplemente agregar al diseño un módulo código. Y dentro pegar el código css dentro de las etiquetas <style></style> de la siguiente forma:
<style>
Reemplazar éste texto por el código generado por la herramienta
</style>
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í
Hola Victor, estoy suscripto a tu blog hace un tiempo pero cuando quiero ver el código me dice que no estoy suscrito, me suscribo, me dice que manda un email pero nunca llega, ni en la carpeta spam