Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Animaciones y efectos de imagen

Puedes agregar animaciones a un área pequeña del sitio, como un fondo de sección o un Bloque de imagen, o puedes habilitar animaciones de todo el sitio que aparecen a medida que quienes visitan el sitio se desplazan por él.

Esta guía revisa cómo habilitar diferentes efectos de animación en diferentes áreas de tu sitio.

Consejo: Para añadir efectos de desplazamiento a tu sitio, como títulos de imágenes y leyendas, visita Cómo crear efectos de desplazamiento para tus imágenes.

Antes de comenzar

  • Las animaciones de bloques de imagen individuales, bloques de citas y otras áreas anulan las animaciones de todo el sitio.
  • Algunas páginas de la colección, como páginas de blog y páginas de portafolio, siempre tienen animaciones sutiles cuando se cargan, incluso cuando las animaciones de todo el sitio están deshabilitadas. 
  • Cuando desactivas las animaciones de bloque y página, esas áreas siguen los estilos de todo el sitio.

Animaciones globales del sitio

Las animaciones de todo el sitio solo están disponibles en la versión 7.1.

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 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 un visitante pasa el cursor sobre enlaces y botones. 

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

Para animar el contenido del sitio:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en Animaciones.
  2. Haz clic en un estilo de animación.
  3. Elige una velocidad de animación lenta, media o rápida.
  4. Posiciona el cursor sobre Listo y haz clic en Guardar.

Estilos de animación

Elige alguno de estos estilos de animación:

  • Ninguno: deshabilita animaciones de todo el sitio.
  • Difuminado: el contenido se desvanece a medida que se ve 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.
  • Diapositiva: el contenido se desliza hacia arriba en su lugar, lo que acentúa el efecto de desplazarse hacia abajo por la página.
  • Clip: el contenido se desliza línea por línea desde la izquierda.
  • Flex: añade animaciones únicas a encabezados, texto vinculado, botones y páginas de portafolio.

Eliminar animaciones de todo el sitio

Para deshabilitar animaciones en todo el sitio:

  1. Mientras editas una página, haz clic en el ícono del pincel y, a continuación, en Animaciones.
  2. Elige Ninguno.
  3. Posiciona el cursor sobre Listo y haz clic en Guardar.

Mira el video

Efectos de imagen de fondo

Los efectos de imagen de fondo solo están disponibles en la versión 7.1.

Si la sección de tu página utiliza una imagen de fondo, puedes agregar efectos de imagen para darle al fondo 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.

Para añadir un efecto a una imagen:

  1. Después de agregar un fondo de sección, en el editor de secciones, haz clic en Fondo.
  2. Desplázate hacia abajo hasta Efecto de imagen y elige un efecto en el menú desplegable. El efecto aparecerá en la vista previa del sitio.
  3. Posiciona el cursor sobre Listo y haz clic en Guardar.

Ten en cuenta lo siguiente:

  • 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 permanecerá estático.
  • Los efectos de imagen no aparecen sobre los videos de fondo.

Videos de fondo

Puedes agregar videos de fondo a secciones de páginas, banners y otras áreas, dependiendo de la versión de tu sitio.

Ten en cuenta lo siguiente:

Fondos personalizados

Los fondos personalizados solo están disponibles en la versión 7.1.

Puedes agregar fondos personalizados únicos a las secciones de página en lugar de una imagen o video. Elige un patrón animado para un aspecto dinámico o bien, opta por un degradado de color más sutil. Puedes utilizar un patrón preestablecido o personalizarlo eligiendo formas, tamaños y movimientos específicos. 

Para agregar fondos personalizados:

  1. En el editor de secciones, haz clic en Fondos y, a continuación, en Personalizados.
  2. Haz clic en un mosaico para obtener una vista previa de los fondos de sección. Los colores se extraen de las opciones Brillante de la paleta de colores
  3. Para definir mejor el diseño, haz clic en uno de los círculos pequeños que aparecen sobre el mosaico.
  4. Para personalizarlos aún más, haz clic en el ícono de configuración para abrir el panel de detalles. Consulta los pasos que se indican a continuación para obtener más información.
  5. Cuando encuentres el diseño que te guste, coloca el cursor sobre Listo en la esquina superior izquierda del editor de páginas y haz clic en Guardar.

Personalizar los detalles de fondo

Puedes personalizar aún más los fondos en el panel de detalles. Para abrir los detalles de un fondo, haz clic en una miniatura y en el ícono de configuración

settings_icon.png

Desplázate por las opciones y los ajustes hasta que encuentres un patrón que te guste. Según el tipo de fondos personalizados con los que empieces, verás distintas categorías. Haz clic en cualquier categoría para expandir el menú desplegable y ver más opciones.

Por ejemplo:

  • En el panel de detalles de la mayoría de los fondos, puedes hacer clic en Invertir colores para cambiar los colores asignados. 
  • En el panel de detalles de cualquier fondo, puedes hacer clic en Aleatorizar para probar con una configuración aleatoria.

Otros ajustes son exclusivos de cada estilo de fondos personalizados e incluyen controles deslizantes y botones de alternar que cambian los componentes principales de los fondos. Te recomendamos experimentar con las diferentes opciones de cada panel de detalles hasta que crees una combinación que te guste.  

Ten en cuenta lo siguiente:

  • Si tu sección incluye texto u otro contenido, asegúrate de que siga siendo visible y legible delante de los fondos personalizados. Para cambiar el color del texto, usa los ajustes de fuente en el tema de color de esa sección. 
  • Los fondos personalizados solo aparecen en navegadores y dispositivos compatibles con WebGL, una herramienta que funciona con el procesador gráfico de tu dispositivo. Para comprobar si tu navegador es compatible con esto, visita get.webgl.org. Si un navegador no admite WebGL, el fondo de la sección permanecerá estático.
  • Si el fondo de la sección es animado, la sección incluye un botón de pausa en la esquina inferior derecha. Esto mantiene tu sitio accesible para los visitantes que pueden desorientarse con los fondos en movimiento. No es posible desactivar este botón.

Animaciones en bloques

Puedes agregar animaciones a bloques de imagen y bloques de citas que los visitantes vean cuando cargan o actualizan la página.

Bloques de imágenes

Para animar un bloque de imagen:

  1. En el editor Bloque de imagen, haz clic en Diseño y, a continuación, en Animaciones.
  2. Selecciona un efecto de la lista para aplicarlo a la imagen y a cualquier texto. Al seleccionar una opción, verás una vista previa de esta en la página.
  3. Para animar la imagen y el texto por separado, selecciona Personalizado y, a continuación, las opciones Imagen y Texto.

Elige entre estas opciones de animación para tu imagen, texto o para ambos:

  • Fundido de entrada: El bloque, la imagen o el texto ingresa difuminado.
  • Deslizar hacia arriba: El bloque, la imagen o el texto se desliza hacia arriba.
  • Deslizar hacia abajo: La imagen o el texto se deslizan hacia abajo
  • Recorte horizontal: El bloque o la imagen se carga en capas horizontales.
  • Recorte vertical: El bloque o la imagen se carga en capas verticales.
  • Inclinado hacia arriba: El bloque o la imagen ingresa con una ampliación y una inclinación hacia arriba.
  • Inclinado hacia abajo: El bloque o la imagen ingresa con una ampliación y una inclinación hacia abajo.
  • Foco de ingreso: el bloque, la imagen o el texto aparece borroso y, luego, enfocado
  • Colisionar: La imagen y el texto se desplazan hacia dentro desde los laterales
  • Revelar: la imagen y el texto se desplazan hacia fuera desde el centro
  • Deslizar desde la izquierda: La imagen o el texto se deslizan desde la izquierda
  • Deslizar desde la derecha: La imagen o el texto se deslizan desde la derecha

Bloques de Cita

Para animar un bloque de citas:

  1. Haz clic en la pestaña Diseño del editor de bloques.
  2. Selecciona un efecto en el menú desplegable. A medida que exploras las opciones, verás previsualizaciones de cómo se cargan.

Elige entre lo siguiente:

  • Difuminado de entrada: El texto ingresa con un difuminado.
  • Deslizar hacia arriba: El texto se desliza desde abajo.
  • Entrada fuera de foco: El texto aparece borroso y, luego, se hace foco.
  • Revelar: El texto se desplaza hacia afuera desde el centro.

Solución de problemas

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

  • Las animaciones de todo el sitio y los fondos de sección solo están disponibles en la versión 7.1.
  • Algunos contenidos solo admiten el estilo de animación Difuminado. Si eliges un estilo diferente, el contenido que no lo admite se difuminará.
  • Si ninguno de tus contenidos tiene animación, asegúrate de que estás utilizando un navegador compatible.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 33 de 75