+41 78 955 3005

A medida que intentas personalizar tu sitio web, encuentras muchas posibilidades de aplicar un estilo específico a ciertos módulos, es por ello que te mostraremos cómo aplicar un efecto muy utilizado actualmente para las imágenes de tu pagina web, asi podras hacer destacar tu modulo de anuncio utilizando el efecto de zoom y efecto hover.

Si cuentas con un Tema Hijo Divi al cual quieres mejorar cada vez más, entonces este es un recurso que te ayudará. Así que procederemos a aplicar el efecto hover a tu modulo de anuncio siguiendo los pasos cortesía de Quiroz

Paso 1: Módulo de Anuncio

  • Crea una nueva sección y agrega un módulo de anuncio.
  • Carga la imagen que deseas utilizar por medio de la configuración general del módulo.
  • Dirígete a la pestaña personalizar CSS, y en Clase CSS asigna lo siguiente: gq-blurb-hover
  • Selecciona Guardar y salir y procede a actualizar la página.
barra de promocion Divi

Paso 2 : Tiempo del CSS

  • En tu Tema hijo Divi, dirígete a Apariencia > Editor, y seguidamente abre tu hoja de estilo para colocar el código. ( En caso de que no estés trabajando con un Tema Hijo, puedes dirigirte a Apariencia>Opciones del Tema DIVI>epanel>CSS personalizado.)
  • Ahora, añade este código CSS
Nota: Si deseas hacer que el efecto pueda funcionar en dispositivos más pequeño puedes hacerlo, cambiando el tamaño en el código, pero por lo general este código está diseñado para funcionar en pantallas más grandes que 767px pues los usuarios móviles no pueden desplazarse sobre imágenes sin tocar a diferencia de los que se encuentra en un ordenador.

¿Deseas alejar el zoom en vez de que se acerque? Cambia los siguientes números

barra de promocion Divi

Para eliminar la rotación elimine los siguiente:

barra de promocion Divi

Y terminado!. Ahora podrás disfrutar de un estilo diferente para tus imágenes y destacar visualmente.

barra de promocion Divi

Si deseas conocer más acerca de divi puedes encontrar información que te interese en nuestra sección Documentación de Divi en español

 

Tema hijo Divi y Plugins para mejorar el Diseño tu Pagina Divi

Suscríbete a nuestra Newsletter

Para recibir Actualizaciones, Promociones y Tutoriales

Felicitaciones! Te has suscrito a nuestra Newsletter correctamente.

Pin It on Pinterest

Share This