> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://ajuda.greatsoftwares.com.br/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Cómo instalar el EFECTO PULSE (pulsar) en un elemento

Para instalar el **efecto de pulsar** en algún elemento de tu página, sigue este paso a paso de abajo:

1. Accede a tu editor de páginas;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/botao-editar-design_t4g2h3.png =519xauto)

2. Haz clic en el **ícono de engranaje** ubicado en la esquina superior derecha de tu pantalla;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/clicar-engrenagem_1o07hf0.png =373xauto)

3. Enseguida, selecciona la opción **Javascript/Css**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/achar-js_19902tf.png)

4. Haz clic en **Adicionar código**;

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/adicionar-codigo_g0g6o6.png)

5. Dale un nombre al código, clasifícalo como **funcionamento** e instala el código de abajo:

![](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_x6dzeq.png)

```
<style>

  #e0000000 .c {

    --pulsar: 0 0 0 0 #7fff00;
    animation: pulsar 3s infinite;
    -webkit-animation: pulsar 3s infinite;
    -moz-animation: pulsar 3s infinite;
    -o-animation: pulsar 3s infinite;
  }

   @-webkit-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-o-keyframes pulse {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-ms-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @-moz-keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

  @keyframes pulsar {
    0% {
      -webkit-box-shadow: var(--pulsar)
    }

    70% {
      -webkit-box-shadow: 0 0 0 20px rgba(0, 200, 0, 0)
    }

    100% {
      -webkit-box-shadow: 0 0 0 0 rgba(0, 200, 0, 0)
    }
  }

</style>
```

6. Enseguida, necesitarás identificar el **ID del elemento **en el que se aplicará el efecto;

Si no sabes cómo identificar el ID de un elemento en GreatPages, [haz clic aquí y mira nuestro tutorial](https://ajuda.greatsoftwares.com.br/pt-br/article/como-identificar-a-id-de-um-elemento-no-greatpages-ed3509/).

7. Después de eso, informa en el campo destacado abajo el código del color que te gustaría aplicar con el efecto de pulsar ;

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/capturarpng2png_tzsikh.png)

Si no sabes cómo identificar el código de un determinado color, [haz clic aquí y mira un sitio que te ayuda en este paso](https://docs.microsoft.com/pt-br/power-apps/maker/canvas-apps/functions/function-colors).

8. Por último, haz clic en **"Salvar"**.

¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! Siempre estamos listos para ayudarte. :-D