Cambia el aspecto del módulo Blog

por | Feb 9, 2018 | Diseño, DIVI (Elegant Themes), Tutoriales

Uno de los puntos débiles a mi parecer y el de otras muchas personas es el módulo de blog de DIVI, mostrando una imagen demasiado grande de cabecera, con los metadatos y el texto justo abajo. La verdad es que la estética de este módulo a mi parecer deja mucho que desear.

En este post voy a explicar como darle un cambio a este módulo mediante CSS.

El aspecto que tiene el módulo en si es el siguiente:

Módulo Blog 1
Vamos a comenzar por cambiar el tamaño de la imagen, si esa imagen inmensa que se ve al principio de cada post.

El código CSS seria el siguiente:

#main-content img {width: 40%;}

Adicionalmente y a la misma clase le pondremos un float: left; y un margen derecho para separarlo del texto con lo cual el código quedaría de la siguiente manera:

#main-content img {width: 40%; float: left; margin-right: 40px;}

Ojo, porque este código abría que incluirlo no en CSS personalizado, sino aqui:

Módulo Blog 3
Módulo Blog 4
Una vez hecho estos cambios la cosa quedaría de la siguiente manera:
Módulo Blog 5
Como vemos la cosa ha cambiado bastante. Se podría seguir añadiendo CSS para darle más estilos, pero esa queda a gusto del consumidor.

Como siempre, espero que este truco os haya gustado y en tal caso compartáis el mismo.

Share This
A %d blogueros les gusta esto: