Llama la atención de los visitantes agregando sorprendentes efectos visuales a los bloques de imagen.

Puedes agregar efectos a los bloques de imagen en tu sitio para darle a tus imágenes un aspecto más estilizado. Algunos efectos agregan una animación para que la imagen siempre se mueva, mientras que otros solo aparecen cuando quien visita el sitio se desplaza por esa sección del sitio. La forma en que aplicas estos efectos depende de si agregaste la imagen en un Editor dinámico o en una sección de editor clásico.

Antes de comenzar

• Los efectos de imagen agregan animaciones a imágenes individuales. Si estás en la versión 7.1, puedes aplicar animaciones a todo tu sitio con animaciones en todo el sitio.
• Las animaciones en bloques de imagen individuales anulan las animaciones de todo el sitio.
• Agregar efectos de imagen a un archivo .gif editado lo convierte en un archivo .jpg estático.
• Antes de agregar efectos visuales a tu sitio, es posible que quieras revisar nuestros recursos de accesibilidad. 

Aplica efectos a los bloques de imagen en el Editor dinámico

Después de agregar una imagen a un bloque de imágenes en una sección del Editor dinámico, haz doble clic en la imagen para abrir su editor. Luego:

1. Haz clic en Diseño y en Efecto de imagen.
2. Elige un efecto del menú. Cualquier cambio que realices en el efecto aparecerá en la vista previa de tu sitio web.
3. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego en Guardar para cerrar el editor.

Estilos de efectos de imagen

Puedes elegir entre estos efectos de imagen:

• Ninguno. Sin efecto, aparte del ajuste de opacidad de superposición.
• Líquido. Da a la imagen un efecto ondulante.
• Granularidad de película. Agrega una superposición estática animada a la imagen.
• Parallax: la imagen se mueve mientras los visitantes se desplazan
• Líneas refractadas. Refracta la imagen a través de un patrón de líneas rectas.
• Círculos refractados. Refracta la imagen a través de un patrón de círculos.

Personaliza tu efecto en el panel de detalles haciendo clic en un efecto de imagen y luego en el ícono de configuración.

Haz clic en cualquier categoría del panel de detalles para expandir el menú desplegable y revelar más opciones como:

• Personalización del tamaño y la forma del efecto
• Edición de la velocidad y la dirección de los efectos con movimiento, como Líquido

Según el tipo de efecto de imagen, aparecen diferentes configuraciones que puedes usar para cambiar los componentes principales del efecto. Para experimentar con una configuración aleatoria de ajustes, haz clic en el ícono de variar al elegir un efecto o haz clic en Aleatorio cuando estés en el panel de detalles del efecto.

Recomendamos probar cada efecto para tener una mejor idea de cómo se ve y cómo funciona para tu sitio.

Aplica efectos a los bloques de imagen en el editor clásico

Después de agregar una imagen a un bloque de imágenes en una sección de editor clásico, haz doble clic en la imagen para abrir su editor. Luego:

1. Haz clic en Diseño y en Animaciones.
2. Selecciona un efecto de la lista para aplicarlo a la imagen y a cualquier texto. Al seleccionar una opción, aparecerá una vista previa en la página.

Estilos de animación de bloques

Elige entre los siguientes ajustes para animar todo el bloque:

• Ninguno. No hay animación, incluso si hay ajustes de animación para todo el sitio.
• Predeterminado del sitio. El bloque coincide con la configuración de animación de todo el sitio.
• Difuminado de entrada: el bloque ingresa con un difuminado
• Deslizar hacia arriba: El bloque se desliza hacia arriba.
• Recorte horizontal. El bloque o la imagen se carga en capas horizontales.
• Recorte vertical. El bloque o la imagen se carga en capas verticales.
• Inclinación hacia arriba. El bloque se acerca con una inclinación hacia arriba.
• Inclinación hacia abajo. El bloque se acerca con una inclinación hacia abajo.
• Entrada fuera de foco: El bloque aparece borroso y luego se enfoca.
• Colisionar: La imagen y el texto se desplazan hacia dentro desde los lados.
• Revelar: la imagen y el texto se desplazan hacia fuera desde el centro
• Personalizado. Establece animaciones para imágenes y texto de forma independiente.

Haz clic en Personalizado para animar la imagen y el texto de forma independiente y elige entre los siguientes ajustes:

• Ninguna
• Meter con fundido
• Deslizar hacia arriba
• Deslizar hacia abajo
• Deslizar desde la izquierda
• Deslizar desde la derecha
• Enfocar

Este es un ejemplo de un bloque de imagen en collage con estas configuraciones:

• Animación: personalizada
• Animación de imagen: deslizar desde la derecha
• Animación de texto: deslizar desde la izquierda

Solución de problemas

Si los efectos de imagen no aparecen en tu sitio, ten en cuenta:

• ​​Si ninguno de tus contenidos tiene animación, asegúrate de que estás utilizando un navegador compatible.
• Los efectos de imagen solo aparecen en navegadores y dispositivos compatibles con WebGL, una herramienta que funciona con el procesador gráfico del dispositivo. Para comprobar si el navegador es compatible, visita get.webgl.org. Si el navegador no es compatible con WebGL, el fondo de la sección permanece estático.

Consejo: Si tu sitio está en la versión 7.1, los visitantes pueden desactivar algunas funciones animadas a través de la configuración de su dispositivo. De esta manera, encontrarán menos movimiento cuando visites tu sitio. Por ejemplo, si un usuario de Mac elige reducir el movimiento de la pantalla en su dispositivo, las animaciones que hayas habilitado para los efectos de bloques de imágenes o imagen de fondo no aparecerán animadas para ese visitante.

Otras animaciones y efectos

Según la versión de tu sitio y de dónde agregues efectos, es posible que quieras usar alternativa,s como imágenes de banner, videos de fondo o imágenes de fondo de sección para aplicar efectos y animaciones similares a tus imágenes.

Para obtener más información sobre cada tipo, visita las guías vinculadas.