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;

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

3. Click "Add code";

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.
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;

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

8. Once this is done, save the changes and return to the page editor;
9. 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;

13. Finally, publish your page.

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

Updated on: 08/12/2026