Realza los contenidos de tu sitio con efectos especiales de estilo.

Para añadir efectos visuales impactantes al contenido de todo el sitio, habilita animaciones en todo el sitio que aparecen a medida que los visitantes se desplazan por las páginas. También puedes agregar animaciones y otros efectos de imagen a elementos específicos, como el fondo de una sección o un bloque de imagen.

Esta guía revisa la configuración de animaciones en todo el sitio y la búsqueda de otras áreas en las que puedes agregar efectos.

Las animaciones de todo el sitio están disponibles en la versión 7.1. En la versión 7.0, depende de tu plantilla. Algunas plantillas 7.0 tienen opciones de animación específicas de la plantilla, como las páginas de blog de la familia de plantillas Bedford. Para encontrar la plantilla de tu sitio, visita ¿Cuál es la versión y la plantilla de mi sitio?.

Antes de comenzar

• Las animaciones de bloques de imagen individuales, los bloques de citas y otras áreas anulan las animaciones de todo el sitio. 
• Algunas páginas de la colección, como las páginas de blog, las páginas de tienda y las páginas de portafolio, siempre tienen animaciones sutiles cuando se cargan, incluso cuando las animaciones de todo el sitio están deshabilitadas.
• Antes de agregar efectos gráficos a tu sitio, te recomendamos que revises nuestros recursos de accesibilidad.

Mira el video

Habilitar animaciones en todo el sitio

Las animaciones de todo el sitio se aplican a la mayoría de las áreas del sitio, con efectos más notables en algunas áreas que en otras. Estas animaciones afectan principalmente la forma en la que aparecen las imágenes, el texto y otros bloques a medida que te desplazas por una página. Algunas animaciones también aparecen cuando la persona que visita el sitio pasa el cursor sobre enlaces y botones.

Recomendamos habilitar un estilo de animación y luego probar cómo se ve en distintas páginas de tu sitio. Experimenta con cada estilo hasta encontrar el que mejor se adapte a tu contenido.

Para habilitar animaciones en todo el sitio:

1. Abre el panel de Animaciones. 
2. Haz clic en un estilo de animación.
3. Elige una velocidad de animación lenta, media o rápida.
4. 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 animación en todo el sitio

Elige alguno de estos estilos de animación:

• Ninguno: deshabilita animaciones de todo el sitio
• Fundir: El contenido aparece gradualmente a medida que aparece en la página
• Escala: el contenido se anima desde un tamaño más pequeño hasta su tamaño final, creando un efecto de zoom
• Deslizar: el contenido se desliza hacia arriba hasta llegar a su lugar, lo que acentúa el efecto de desplazamiento hacia abajo por la página
• Clip: el contenido se desliza línea por línea desde la izquierda
• Flexible: agrega animaciones únicas a los encabezados, el texto enlazado, los botones y las páginas de portafolio, y añade un subrayado a los enlaces de la navegación principal cuando posicionas el cursor

Eliminar animaciones de todo el sitio

Para deshabilitar animaciones en todo el sitio:

1. Abre el panel de Animaciones.
2. Elige Ninguno.
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.

Otras animaciones y efectos de imagen y texto

Hay otras animaciones y otros efectos de animación que puedes habilitar para elementos específicos de tu sitio. Para obtener más información sobre cada tipo, visita las guías enlazadas:

• Fondos personalizados de sección (solo versión 7.1)
• Efectos e imágenes de fondo de sección (solo versión 7.1)
• Videos de fondo
• Agregar efectos y animaciones a bloques de imagen
• Bloques de Cita
• Bloques de desplazamiento

Solución de problemas

Si las animaciones no aparecen en tu sitio web, ten en cuenta lo siguiente:

• Algunos contenidos solo admiten el estilo de animación Fundir. Si eliges otro estilo, el contenido que no lo admite se fundirá.
• Si ninguno de tus contenidos tiene animación, asegúrate de que estás utilizando un navegador compatible.
• Las animaciones de todo el sitio y los fondos de sección solo están disponibles en la versión 7.1.
• Descubre cómo otros profesionales usan la animación para mejorar sus sitios de clientes en nuestro blog de Circle.