> ## 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).

# (MEDIANTE CÓDIGO) Cómo aplicar un RETRASO A ELEMENTOS en GreatPages

Para agregar un **tiempo de retraso de apertura (delay) en un elemento específico** sigue el tutorial de abajo:

1. Accede al editor de páginas;

2. Haz clic en el **Ícono de engranaje** ubicado en la esquina superior derecha de tu pantalla, y luego haz clic en **"Javascript/CSS"**;

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

3. Luego, haz clic en **Adicionar código**;

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

4. Dale un nombre a tu código, clasifícalo como **"Funcionamento"** y luego inserta todo el código de abajo en el campo de texto;

```
<script>
/* Preencher abaixo com o(s) elemento(s) que deseja mostrar após 5s. */
var elementos =  ['e_0000001','e_0000002'];

for(i=0;i < elementos.length;i++){document.getElementById(elementos[i]).style.display = 'none';}

/* Tempo em 5 segundos */
var tempo_elementos_abrir = 5;

/** Variáveis de controle NÃO ALTERAR **/
var intervalo_elementos;
var tempo_elementos = 0;
intervalo_elementos = setInterval(MostrarElementos, 1000);

function MostrarElementos() {
    tempo_elementos++;
    console.log('Executou: ',tempo_elementos);
    if (tempo_elementos >= tempo_elementos_abrir) {
        for (var i = 0; i < elementos.length; i++) {
            $('#' + elementos[i]).removeClass('esconder_mobile esconder_desktop').css({
                'display': 'block'
            });
        }
        tempo_elementos = null;
        clearInterval(intervalo_elementos);
        GreatLoader('atualizar');
    }
}
</script>
```

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

5. Después de eso, tendrás que identificar y copiar el ID (identificador) del elemento que deseas que aparezca en la página después de un tiempo determinado. Para identificar el ID de un elemento, sigue los próximos pasos;

6. Haz clic en **"Pré-visualizar"** en la esquina superior derecha de tu pantalla;

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

7. Ahora, con el botón derecho del mouse tendrás que hacer clic en el elemento al que deseas aplicar el delay y seleccionar la opción **"Inspeccionar elemento"**;

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

8. Se abrirá en la esquina derecha de la pantalla una caja donde tendrás que identificar cuál es el ID del elemento, que en el formato de códigos de GreatPages quedará así: **"e\_000000"** o **"e\_000000\_0\_000000000000000000"**.

Después de eso, copia este identificador y guárdalo para el próximo paso;

![](https://storage.crisp.chat/users/helpdesk/website/a6ab90d8350d6000/screenshot-2023-03-04-103815_1xej30w.png)

9. Vuelve a la pestaña **"Javascript & CSS"**, dentro del editor de páginas, abre el código que agregaste y sustituye el ID de ejemplo por el ID de tu elemento. **No agregues ningún carácter de más**;

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

10. Cambia también el tiempo de apertura de este elemento en el campo indicado abajo. Recuerda que este tiempo se contabiliza en **Segundos**;

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

11. Hecho esto, guarda los cambios y publica tu página.

¿Te quedó alguna duda? Habla con nuestro soporte. ¡Siempre estamos a tu disposición para ayudarte! :)