Ao construir um sítio Web com o Elementor, é fundamental criar uma experiência visual harmoniosa para os seus utilizadores.pré-carregadorÉ possível mostrar animações de carregamento antes de o conteúdo da página estar totalmente carregado. Abaixo, damos-lhe um guia passo-a-passo sobre como o Elementor Pro Crie um pré-carregador no

O que é um pré-carregador?

Um pré-carregador é normalmente uma imagem ou animação que um sítio Web apresenta antes de o conteúdo ser totalmente carregado. Com os pré-carregadores, podem ser apresentados logótipos de marcas ou animações específicas para proporcionar aos utilizadores uma experiência de navegação mais profissional e suave.

Passo 1: Crie um modelo de título

Em primeiro lugar, é necessárioCrie um modelo de títulopara aplicar o pré-carregador a todas as páginas do sítio.
Procedimento de funcionamento:

1. Navegue até ao painel de controlo do Elementor no modelo > Gerador de temas.

2. bater (no teclado) legenda e, em seguida, clique na secção + para criar um novo modelo de título.

3. Depois de terminar a configuração do modelo, clique em posto e aplique as condições de visualização.

O sistema abre-se Condições de visualização Janela. Aqui, selecione o intervalo de páginas ao qual pretende aplicar este modelo de cabeçalho. Selecione o botão Todo o sítio Web irá garantir que este título é apresentado em todas as páginas. Confirme a seleção e clique em Guardar e fechar para completar a libertação.

Passo 2: Adicione o contentor e defina o ID CSS

No modelo de título, adicione um contentor para guardar a animação pré-carregada.
Procedimento de funcionamento:

1. Na página de edição do modelo de título, adicione umcontentor de uma coluna.

2. Clique no ícone do contentornível elevadodefina o ID CSS para der_preload.

Passo 3: Adicione um ícone ou imagem de widget

Adicione efeitos visuais ao pré-carregador, tais como ícones ou logótipos de marcas.
Procedimento de funcionamento:

1. No contentor, adicione o ícone (informática) talvez imagens Widget.

2. Na secçãonível elevadodefina o ID CSS para der_loader.

3. entrar emtiporedimensione o ícone (a definição recomendada é 1) para se adaptar às suas necessidades de design.

Passo 4: Adicione um widget HTML para executar scripts

Em seguida, adicione o widget HTML e insira o código JavaScript para controlar a exibição e a ocultação do pré-carregador.
Procedimento de funcionamento:

1. Adicione abaixo do ícone ou widget de imagem HTML Widget.

2. Insira o seguinte código:

<script> document.addEventListener('DOMContentLoaded', function () { setTimeout(function () { document.getElementById('der_preload').style.display = 'none'; document.getElementById('content').classList.add('visible'); }, 2000); }); </script>

3. Na secçãonível elevadodefina a ID CSS como der_preloader_addspara ocultar o widget e evitar espaços em branco desnecessários.

Passo 5: Adicione CSS personalizado

Para que o pré-carregador funcione, adicione algum código CSS para melhorar o efeito de pré-carregamento.

1. Clique no ícone de configuração da página para abrir a janelanível elevadoMenu.

2. Cole o seguinte código no campo CSS personalizado:

#der_preload { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; display: flex; align-items. centre; justify-content: centre; z-index: 1000; } #der_loader { border: 8px solid #363636; border-top: 8px solid #3498db; border- radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #der_preloader_adds { display: none; }

Passo 6: Publique e teste o pré-carregador

Publique o seu modelo eDefinição das condições de visualizaçãopara garantir que o pré-carregador é apresentado corretamente na página especificada.
Procedimento de funcionamento:

1. bater (no teclado) postoNa janela pop-up da condição de visualização, selecione Todo o sítio Web.

2. Guarde as definições e visite a página do seu sítio Web para verificar se o pré-carregador está a funcionar como esperado.

resumos

Com os passos acima, criou com êxito um pré-carregador personalizado do Elementor Pro. O pré-carregador pode ser ainda mais personalizado, ajustando o código CSS e JavaScript para o alinhar com o estilo da sua marca.