Modulo anuncio en divi. Aumentar tamaño de la imagen a la izquierda

por | 14 Ago, 2017 | css, Divi, Tutoriales, Wordpress

El problema

Para hoy tenemos un minitutorial sobre el módulo anuncio. Hay ocasiones en las que  cuando creamos un módulo de anuncio, queremos usar una imagen propia, y ubicarlo a la izquierda. Sin embargo, sin echar mano de un poco de CSS (muy poco, la verdad) no es posible controlar el tamaño de nuestra imagen. Sí que podemos usar el configurador del módulo para modificar el tamaño si elegimos icono en lugar de imagen. También si la orientación de la imagen es al centro.

Así es como queremos que quede nuestra práctica de hoy:

modulo anuncio de divi. aumentar imagen derecha

La solución

Pero si lo que deseamos es aumentar (o reducir) el tamaño de una imagen importada insertaremos una sola línea de código CSS cambiando la propiedad de anchura de la imagen.

El proceso

Elegimos 3 columnas en la estructura de fila.

captura-insertar-3-columnas

ajustes-generales-modulo-texto-2
Insertamos un módulo de anuncio y configuramos.

Ponemos un título al módulo y configura como quieras excepto lo que comentamos a continuación. No tengas miedo a probar.

Seleccionamos imagen en lugar de Usar icono e importamos nuestra imagen.  Recomiendo formato png transparente para no tener problema con el fondo.  Además, si usas una imagen mono color como yo, pesará muy poco.

En Ubicación de la imagen o el icono, seleccionamos izquierda. Vemos que tiene un tamaño por defecto. Aunque intentemos cambiar su tamaño en ajustes avanzados no surtirá efecto alguno. Lo dejamos así entonces para crear dos módulos más a partir de este donde aumentaremos el tamaño.

Abajo puedes ver la configuración básica (no se ven algunas opciones que no son relevantes para este ejercicio).

   configuracion-modulo-anuncio

Así que duplicamos el módulo que hemos creado, cambiamos el texto en titulo y contenido.

 

duplicar modulo divi

duplicar modulo divi

 

Copia el código CSS

Activamos ahora la pestaña CSS personalizado. Ahí, en el campo imagen de anuncio, añadimos el siguiente CSS:

width:45px;

Y eso es todo. Duplicamos este segundo modulo e incrementamos un poco los pixeles, por ejemplo a 80 pixeles.

Ten en cuenta que para que se represente el tamaño que le indiquemos debe haber el espacio necesario en el módulo. Si no es así, el tamaño se adaptará a las mayores dimensiones posibles para evitar desbordarse.

Como siempre, a continuación, el videotutorial.