> ## 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 BLOCKS in GreatPages

To add an opening delay to one or more blocks, follow the tutorial below:

1. Access the page editor;

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

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

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

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

3. Click "**Add code**";

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

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

__For a single element:__
EXAMPLE: var elementos = ['e\_0000000'];

__For several elements:__
EXAMPLE: var elementos = ['e\_000001', 'e\_000002', 'e\_000003'];
(Keep in mind that the last one has NO COMMA.).

```
<script>
/* Preencher abaixo com o(s) bloco(s) que deseja mostrar após 5s. */
var blocos = ['b_000001', 'b_000002', 'b_000003'];

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

/* Váriaveis de controle NÃO ALTERAR */
var intervalo_blocos;
var tempo_blocos = 0;
intervalo_blocos = setInterval(MostrarBlocos, 1000);

function MostrarBlocos() {
    tempo_blocos++;
    if (tempo_blocos >= tempo_blocos_abrir) {
        for (var i = 0; i < blocos.length; i++) {
            $('#' + blocos[i]).removeClass('esconder_mobile esconder_desktop').css({
                'display': 'block'
            });
        }
        tempo_blocos = null;
        clearInterval(intervalo_blocos);
    }
}
</script>
```

5. Next, you will need to identify and copy the ID of the block you want to appear on the page after a certain amount of time. To identify a block's ID, [click here to access our tutorial.](https://ajuda.greatsoftwares.com.br/en-us/article/how-to-apply-a-delay-to-blocks-in-greatpages-r8ltf0/)

6. After identifying the block IDs, return to the "**Javascript & CSS**" tab within the page editor, open the code you added to trigger the page delay, and replace the example ID with your block's ID. **Do not add any extra characters**;

![block id ](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_17lp6o7.png =650x412)

7. Also change the opening time for this block in the field indicated below. Remember that this time is measured in **Seconds**;

![delay in seconds](https://storage.crisp.chat/users/helpdesk/website/-/a/6/a/b/a6ab90d8350d6000/image_1dkrm5z.png =650x412)

8. Once this is done, save the changes and return to the page editor;

12. Click on the block where you want to apply the delay, then click "**Edit**" to hide it on both desktop and mobile. **This step is essential for the code to display these elements again after the time you specified**;

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

13. Finally, publish your page.

Do you have any remaining questions? Contact our support team. We are always here to help!:)