Tutorial Divi: Aplicando estilos a las imágenes

Los módulos de Divi son geniales pero siempre tienen carencias a la hora de dar a nuestros textos o imágenes estilos personales, algo que con un poco de CSS se puede solucionar. Solo hay que perderle el miedo a usar un poquito de código ¿nos animamos?

Añade la clase CSS

Hoy vamos a aplicar estilos chulos a las imágenes. Para ello, por ejemplo, añade un módulo de texto e inserta una imagen a tu elección.

A continuación pásate por la pestaña Avanzado y añade una Clase CSS, que llamaremos imagen-personalizada. Guarda los cambios, sal y publica.

Lo que obtenemos es esto…

Añadiendo borde redondeado a la imagen

Para empezar a perderle el yuyu le pondremos un borde redondeado.

Abre el Personalizador de temas, ve a la sección CSS Adicional y añade lo siguiente:

En el código lo que hemos hecho es definir un ancho máximo (max-width) de 250 píxeles, un borde de 5 píxeles en color azul. Y lo que conseguimos es esto:

Bastante chulo ¿eh?

Poniendo la imagen en escala de grises

Otro efecto chulo que puedes aplicar es cambiar la imagen a escala de grises, para lo que modificaríamos nuestro código para dejarlo así:

Y lo que conseguimos es esto:

Añadiendo efecto al pasar el cursor

Ahora que hemos visto cómo ponerle un borde y cómo hacer que la imagen se vea en escala de grises ¿qué te parecería hacer que la imagen se vea en escala de grises y al pasar el cursor cambiase a verse en color?

Pues fácil, solo hay que combinar ambos estilos antes aplicados y definirle qué estilos aplicar al pasar el cursor (hover), así:

Y lo que conseguimos es este bonito efecto:

Ya solo queda acordarte de publicar los cambios en el CSS adicional, que no se te olvide.

¿Quieres aplicar estos estilos a más módulos con imágenes, solo tienes que volver al principio de esta guía y especificar la Clase CSS al módulo para que la utilice también.

A partir de aquí ya tienes el modo de hacerlo, en tus manos está personalizar el truco a tu gusto.

 

¿Te gustó este artículo? ¡No sabes lo que te estás perdiendo en YouTube!
VALORA ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
FlojitoNo está malEstá bienMe ha servidoFantástico (5 votos, promedio: 5,00 de 5)
Cargando…

Al dejar una valoración se recopila la IP para evitar fraudes

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Mi último libro es WordPress - La guía completa. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera. Sigue a @fernandot en Twitter

Comparte esta entrada en
468 ad

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Ir al contenido