Cambiar tamaño de las imágenes de la rejilla del módulo Blog Divi

En nuestro artículo sobre cómo convertir un enlace en un botón Divi, comentábamos que los módulos de Divi son fáciles de agregar, personalizar y son muy vistosos, pero en algunas ocasiones no se adaptan a necesidades especiales que tenemos nosotros o nuestros clientes.

Un ejemplo de esto es el tema de este artículo, el módulo blog con disposición de rejilla de Divi. Este es muy bonito y minimalista, pero no permite personalizar la apariencia más allá de cambiar el color de fondo, el de las letras, los bordes y enlaces.

Si se quiere cambiar el tamaño de las imágenes destacadas de los artículos y agregar otra información en el módulo blog, desde el constructor no será posible pues no ofrece estas opciones.

También influye la resolución y relación aspecto, si las imágenes son más altas o anchas que el tamaño por detecto de Divi, entonces las imágenes puede quedar reescaladas, recortadas y hasta pixeladas, perdiendo su apariencia original.

Si se tienen imágenes de un tamaño especifico y diferente al tamaño por defecto de Divi, para que se vean completas hay que forzar para que ocupen el tamaño deseado.

El procedimiento es muy fácil, hay que añadir algunas funciones al archivo functions.php del tema o tema hijo del sitio web.

Este archivo se encuentra en la carpeta “Themes”, que a su vez se encuentra dentro de la carpeta “wp-content” de WordPress.

Se puede acceder a estos archivos a través de un FTP o con el explorador de archivos que suelen incluir los paneles de control de hosting web como Plesk o CPanel.

functions-php-módulo blog divi
Ubicación del archivo de functions.php de WordPress.

Antes de agregar las funciones al archivo functions.php hay que cambiar el tamaño de alto y ancho del siguiente código para que se adapte al tamaño de las imágenes que se usarán.

Para que funcione correctamente todas las imágenes deben ser del mismo tamaño, si no se mostrarán disparejas.

Código CSS

/* Cambiar tamaño de imágenes destacadas del módulo blog Divi cuadricula*/

function blog_ancho_minitura( $width ) {

return 840; //ancho de la imagen miniatura en píxeles

}

add_filter( ‘et_pb_blog_image_width’, ‘blog_ancho_minitura’);

function blog_alto_miniatura( $height ) {

return 360; //altura de la miniatura en píxeles

}

add_filter( ‘et_pb_blog_image_height’, ‘blog_alto_miniatura’);

Después de realizar este procedimiento y guardar los cambios todas las imágenes se mostraran exactamente como se desean.

Los comentarios están cerrados.