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

# (VIA CODE) How to apply a delay to elements in GreatPages

To add an **opening delay to a specific element**, follow the tutorial below:

1. Access the page editor;

2. Click the **gear icon** located in the top right corner of your screen, and then click on **"Javascript/CSS"**;

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

3. Then, click on **Add code**;

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

4. Give your code a name, classify it as **"Functionality"** and then insert the entire code below into the text field;

```
<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>
```

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

5. After that, you will need to identify and copy the ID (identifier) of the element you want to appear on the page after a certain time. To identify the ID of an element, follow the next steps;

6. Click on **"Preview"** in the top right corner of your screen;

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

7. Now, with the right mouse button you will need to click on the element you want to apply the delay to and select the **"Inspect element"** option;

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

8. A box will open on the right side of the screen where you will have to identify which is the ID of the element, which in the GreatPages code pattern will look like this: **"e\_000000"** or **"e\_000000\_0\_000000000000000000"**.

After that, copy this identifier and save it for the next step;

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

9. Go back to the **"Javascript & CSS"** tab, inside the page editor, open the code you added and replace the sample ID with the ID of your element. **Do not add any extra characters**;

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

10. Also change the opening time of this element in the field indicated below. Keep in mind that this time is counted in **Seconds**;

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

11. Once that's done, save the changes and publish your page.

Still have questions? Reach out to our support team. We're always here to help! :)