> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scanova.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Efectos animados

> Efectos de animación de fondo, tarjeta y botón.

Los efectos animados agregan capas de movimiento a su página de destino — partículas que flotan por el fondo, un haz de luz que recorre el borde de una tarjeta, o un resplandor que pulsa alrededor de un botón. Los efectos son puramente visuales: se renderizan con `pointer-events: none`, por lo que nunca bloquean toques ni clics sobre el contenido debajo de ellos.

## Dónde aparecen los efectos

| Objetivo       | Qué cubre                                          | Se configura desde                                                                                                        |
| -------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| **Background** | Toda la página, detrás de todos los bloques        | Encabezado **Theme** → **Customise** → **Effects**                                                                        |
| **Card**       | La superficie de un bloque de contenido individual | **Customise** → **Effects** (todas las tarjetas) O la pestaña **Design** propia del bloque → **Effects** (un solo bloque) |
| **Button**     | Un bloque de botón individual                      | **Customise** → **Effects** (todos los botones) O la pestaña **Design** propia del botón → **Effects**                    |

## Configurar un efecto global

Un efecto global se aplica a todas las tarjetas o botones de la página a la vez (los efectos de fondo son siempre globales — solo hay un fondo).

<Steps>
  <Step title="Abrir el panel Theme">
    Con su página abierta en el builder, haga clic en **Theme** en el encabezado.
  </Step>

  <Step title="Elegir Customise en su tema activo">
    En la tarjeta del tema aplicado actualmente, haga clic en **Customise**. Esto abre el panel **Customise · Global** en la barra lateral derecha.
  </Step>

  <Step title="Expandir la sección Effects">
    Desplácese hacia abajo y haga clic en **Effects** para expandirla. Verá tres menús desplegables: **Background effect**, **Card effect** y **Button effect**.
  </Step>

  <Step title="Elegir un efecto">
    Abra un menú desplegable y elija un efecto con nombre. La vista previa del lienzo se actualiza de inmediato, a plena intensidad visual — exactamente como lo verán los visitantes.

    <Frame caption="El panel global Effects, con Meteor Shower aplicado como efecto de fondo">
      <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/animated-effects/background-effect-meteor-applied.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=d112388d875937f978a766d3c69a6fe5" alt="Sección Effects del panel Customise mostrando Background effect configurado en Meteor Shower, con estelas diagonales visibles en la vista previa del lienzo detrás del bloque de título de la página" width="1440" height="900" data-path="images/v2/page-builder/animated-effects/background-effect-meteor-applied.png" />
    </Frame>
  </Step>

  <Step title="Publicar para hacerlo visible">
    Los efectos se renderizan de forma idéntica en el lienzo y en la página publicada, así que no hay nada más que configurar — solo publique cuando esté listo.
  </Step>
</Steps>

Para eliminar un efecto global, abra el mismo menú desplegable y elija **None (disabled)**.

<Frame caption="El menú desplegable Background effect, mostrando los tres efectos de fondo con nombre además de Preset default y None (disabled)">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/animated-effects/background-effect-dropdown-open.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=402c8836ae178fc72f5e72d1313ed2c8" alt="Menú desplegable Background effect abierto, listando Preset default, None (disabled), Meteor Shower, Particles y Animated Gradient" width="1440" height="900" data-path="images/v2/page-builder/animated-effects/background-effect-dropdown-open.png" />
</Frame>

## Anular el efecto en un solo bloque

Cualquier bloque de tarjeta o botón individual puede usar un efecto distinto al de la configuración global, o desactivar los efectos por completo, sin cambiar la configuración global para el resto de los bloques.

<Steps>
  <Step title="Seleccionar el bloque">
    Haga clic en el bloque en el lienzo, o selecciónelo desde la lista **Blocks** a la izquierda.
  </Step>

  <Step title="Abrir la pestaña Design del bloque">
    En el inspector de la derecha, haga clic en **Design**.
  </Step>

  <Step title="Expandir Effects y elegir una opción">
    Bajo el encabezado **Effects**, abra el menú desplegable de efecto (etiquetado **Card Effect** o **Button Effect** según el tipo de bloque) y elija:

    * **Theme default** — hereda lo que sea el valor global actual. Este es el predeterminado para todos los bloques.
    * **None (disabled)** — desactiva los efectos solo para este bloque, incluso si la configuración global tiene uno aplicado.
    * Cualquier efecto con nombre — anula la configuración global y usa este efecto solo para este bloque.

    <Frame caption="La pestaña Design propia de un bloque, con su menú desplegable Card Effect abierto">
      <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/animated-effects/block-effects-dropdown-open.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=830e70e231d863f1248a8f7594125b6c" alt="Sección Effects de la pestaña Design del bloque mostrando el menú desplegable Card Effect abierto con las opciones Theme default, None (disabled), Border Beam, Shine Border y Neon Glow" width="1440" height="900" data-path="images/v2/page-builder/animated-effects/block-effects-dropdown-open.png" />
    </Frame>
  </Step>
</Steps>

<Tip>
  Esto es útil cuando la mayoría de las tarjetas de una página deben tener un efecto, pero una — un formulario o un aviso legal, por ejemplo — debe permanecer estática y fácil de leer.
</Tip>

## Efectos disponibles

### Efectos de fondo

| Efecto            | Descripción                                                         |
| ----------------- | ------------------------------------------------------------------- |
| Meteor Shower     | Estelas diagonales que atraviesan la página                         |
| Particles         | Puntos flotantes que se desplazan lentamente por el fondo           |
| Animated Gradient | Un degradado que cambia suavemente, mezclando colores con el tiempo |

### Efectos de tarjeta

| Efecto       | Descripción                                                         |
| ------------ | ------------------------------------------------------------------- |
| Border Beam  | Un haz de luz que recorre continuamente el borde de la tarjeta      |
| Shine Border | Un destello suave que se desliza a lo largo del borde de la tarjeta |
| Neon Glow    | Un contorno luminoso que pulsa alrededor de la tarjeta              |

<Frame caption="El menú desplegable Card effect">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/animated-effects/card-effect-dropdown-open.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=a36dbfaf05381ac13f1974e181f5b925" alt="Menú desplegable Card effect abierto, listando Preset default, None (disabled), Border Beam, Shine Border y Neon Glow" width="1440" height="900" data-path="images/v2/page-builder/animated-effects/card-effect-dropdown-open.png" />
</Frame>

### Efectos de botón

| Efecto       | Descripción                                                     |
| ------------ | --------------------------------------------------------------- |
| Border Beam  | Un haz de luz que recorre continuamente el borde del botón      |
| Shine Border | Un destello suave que se desliza a lo largo del borde del botón |
| Neon Glow    | Un contorno luminoso que pulsa alrededor del botón              |

<Frame caption="El menú desplegable Button effect">
  <img src="https://mintcdn.com/scanova-api/q8t3kzcRTgAP7jV0/images/v2/page-builder/animated-effects/button-effect-dropdown-open.png?fit=max&auto=format&n=q8t3kzcRTgAP7jV0&q=85&s=db8f1500be5847d2870f1f8f0978b02f" alt="Menú desplegable Button effect abierto, listando Preset default, None (disabled), Border Beam, Shine Border y Neon Glow" width="1440" height="900" data-path="images/v2/page-builder/animated-effects/button-effect-dropdown-open.png" />
</Frame>

<Note>
  En el panel global Customise, los menús desplegables tienen como predeterminado **Preset default** (el efecto con el que viene su tema activo) en lugar de **Theme default** — esa etiqueta se reserva para las anulaciones por bloque, donde significa "heredar la configuración global". Funcionalmente, elegir **None (disabled)** siempre desactiva los efectos para su alcance correspondiente.
</Note>

## Vista previa en el lienzo frente a la página publicada

Los efectos se renderizan a plena intensidad visual tanto en el lienzo del builder como en la página de destino publicada — lo que ve mientras edita es lo que verán los visitantes. No se necesita un "modo de vista previa" separado para comprobar cómo se ve un efecto.

## Notas de rendimiento

Los efectos son livianos y se renderizan en el cliente, y no llaman a ningún servicio externo. Se ejecutan enteramente en el navegador y tienen un impacto mínimo en el tiempo de carga de la página.

## Relacionado

* [Temas](/es/page-builder/themes) — configurar efectos predeterminados a nivel de tema desde la sección Effects del panel Customise.
* [Opciones de diseño](/es/page-builder/design-options) — el grupo Effects por bloque que anula la configuración global.
* [Referencia de bloques](/es/page-builder/blocks-reference) — los bloques que admiten un efecto de tarjeta o de botón.