OpenByt - A sua melhor fonte de conhecimento gratuito sobre WordPress

Melhore o seu site Elementor com animações personalizadas do pré-carregador

f Lin

Índice

Porque é que as animações do pré-carregador são importantes

Um pré-carregador pode transformar a primeira impressão do seu sítio Web Elementor em algo memorável. Em vez de uma página em branco ou do temido spinner de carregamento, um pré-carregador bem concebido acrescenta um toque de personalidade e mantém os seus visitantes envolvidos enquanto esperam que o seu conteúdo apareça. Neste artigo, vou guiá-lo através do processo de criação e personalização de animações de pré-carregador no Elementor, dividindo-o em passos simples que qualquer pessoa pode seguir.

Imagine que clicou numa hiperligação e ficou a olhar para um ecrã em branco. É frustrante, não é? As animações de pré-carregamento resolvem este problema fornecendo feedback visual de que a página está a carregar ativamente - mantendo os visitantes entretidos e seguros de que a sua experiência valerá a pena. Os pré-carregadores não só aumentam o envolvimento do utilizador, como também ajudam a transmitir a personalidade da sua marca através da criatividade visual.

Estilos de pré-carregador que pode utilizar

Antes de nos debruçarmos sobre a forma de adicionar pré-carregadores ao seu sítio Web Elementor, vamos explorar os diferentes estilos que pode utilizar:

  1. Animação do spinner: Uma escolha clássica. Simples mas eficaz, o spinner rotativo indica aos utilizadores que algo está a acontecer.
    • Caso de utilização: Adequado para sítios Web minimalistas ou orientados para a tecnologia. Este estilo é direto e não distrai, tornando-o ideal para websites onde a simplicidade é fundamental.
    • Dicas de personalização: Utilize as cores da sua marca para o spinner para manter a coerência.
  2. Barra de progresso: Ideal se pretender transmitir uma percentagem exacta de carregamento, dando aos visitantes uma ideia do tempo que têm de esperar.
    • Caso de utilização: Ideal para sítios com muito conteúdo, como comércio eletrónico ou blogues com muitas imagens. As barras de progresso dão aos utilizadores uma indicação clara do progresso do carregamento, reduzindo a frustração.
    • Dicas de personalização: Personalize a cor da barra de progresso para a alinhar com a paleta de cores principal do seu Web site e considere a possibilidade de adicionar uma etiqueta como "A carregar... Aguarde" para a tornar mais informativa.
  3. Animação do logótipo: Pode animar o seu logótipo para manter a marca e, ao mesmo tempo, mostrar algum talento criativo.
    • Caso de utilização: Perfeito para sítios Web centrados na marca, tais como agências, marcas de moda ou portefólios criativos. Este tipo de pré-carregador reforça a identidade da marca.
    • Dicas de personalização: Utilize ferramentas como Efeitos posteriores ou LottieFiles para criar animações SVG leves do seu logótipo. Certifique-se de que o loop de animação é suave e não dura mais do que alguns segundos.
  4. Fade-In/Out de texto: Palavras como "Loading..." que aparecem e desaparecem são uma opção simples mas impactante, dando-lhe um toque pessoal.
    • Caso de utilização: Ideal para blogues pessoais ou sítios Web comunitários. Cria uma sensação calorosa e amigável, fazendo com que os utilizadores se sintam mais ligados.
    • Dicas de personalização: Personalize o texto para se adequar à voz da sua marca - utilize algo único como "Aguente firme, o conteúdo incrível está a caminho!" para adicionar personalidade.

O objetivo é escolher um pré-carregador que se alinhe com a sua marca, corresponda ao estilo do seu sítio Web e mantenha os seus utilizadores envolvidos enquanto o conteúdo carrega.

Passo a passo: Adicionando um pré-carregador personalizado no Elementor

Agora, vamos entrar nos detalhes de como você pode adicionar uma animação de pré-carregador personalizada ao seu site Elementor. Não precisa de se preocupar se não for um perito em codificação - este método é fácil de utilizar para principiantes.

Passo 1: Instale um plug-in de pré-carregador

A forma mais fácil de adicionar uma animação de pré-carregador no Elementor é utilizando um plugin. Algumas das opções mais populares incluem:

Para este tutorial, vamos usar o Pré-carregador Plus como exemplo, uma vez que é de fácil utilização e oferece muitas possibilidades de personalização sem ter de tocar em qualquer código.

Passo 2: Instalar o Preloader Plus

  1. Navegue até ao painel de controlo do WordPress.
    • Inicie sessão no seu painel de administração do WordPress.
    • A partir do painel de controlo, terá acesso à instalação de plug-ins e à personalização das definições.
  2. Aceda a Plugins > Adicionar novo.
    • Clique no botão Plugins na barra lateral esquerda e, em seguida, clique em Adicionar novo.
  3. Procure por "Preloader Plus" na barra de pesquisa.
    • Escreva "Preloader Plus" na barra de pesquisa e prima Enter.
  4. Clique em Instale agora e depois Ativar.
    • Quando encontrar o plugin, clique em Instale agora.
    • Após a conclusão da instalação, clique em Ativar para ativar o plugin no seu sítio Web.

Uma vez ativado, verá as definições do Preloader Plus no seu painel de controlo do WordPress.

Passo 3: Configurar as definições do pré-carregador

  1. Abra as definições do Preloader Plus do painel de controlo.
    • Aceda a Definições > Pré-carregador Plus para aceder às opções de configuração.
  2. Navegue até ao Definições gerais tab.
    • Aqui, pode ativar ou desativar o pré-carregador e definir o seu comportamento básico.
  3. Ativar o pré-carregador ligando o interrutor.
    • Isto activará o pré-carregador no seu sítio Web com base nas definições que escolher.

Em seguida, é altura de decidir quando e onde pretende que o seu pré-carregador esteja ativo. Pode querer que esteja ativo apenas na sua página inicial ou talvez em todo o site.

Passo 4: Escolher a animação do seu pré-carregador

  1. Aceda ao Definições de estilo tab.
    • Neste separador, pode configurar o aspeto do seu pré-carregador.
    • Exemplo: Pode visitar https://example.com para ver como um pré-carregador de animação de logótipo pode melhorar a marca de um portefólio criativo.
  2. Selecione o tipo de pré-carregador: Escolha entre um spinner, uma barra de progresso ou uma animação personalizada.
    • Dependendo do estilo da sua marca, selecione o tipo de pré-carregador que melhor se adapta às suas necessidades.
    • Exemplo: Para um sítio Web de comércio eletrónico como https://shopdemo.comPara manter os utilizadores informados, uma barra de progresso funciona bem.
  3. Para Pré-carregador personalizadoCarregue um GIF ou SVG do seu logótipo se pretender uma animação com a sua marca.
    • Clique em Carregar para adicionar a sua animação personalizada do pré-carregador.

Um GIF personalizado do logótipo da sua marca pode ser uma excelente forma de deixar uma impressão nos seus visitantes. Pode utilizar ferramentas como Canva ou Figma para criar animações simples de logótipos.

Etapa 5: Ajustar a conceção e o calendário

Integrar o Preloader com o Elementor para um maior controlo

Se pretender um controlo mais granular sobre onde e quando o seu pré-carregador aparece, pode integrar o Preloader Plus no Elementor utilizando CSS personalizado do Elementor caraterística.

/* CSS personalizado para o pré-carregador */
.preloader-section {
  animação: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  0% { opacidade: 0; }
  100% { opacidade: 1; }
}

Testar e otimizar o seu pré-carregador

Agora que já configurou o seu pré-carregador, é importante testá-lo. Aqui tem algumas dicas:

Considerações finais: Fazer com que o seu site Elementor se destaque

Um pré-carregador bem concebido é mais do que apenas um ecrã de carregamento - é uma poderosa ferramenta de marca e um melhorador da experiência do utilizador. Para levar o seu sítio Web Elementor para o nível seguinte, não se limite a adicionar um pré-carregador. Optimize continuamente o desempenho do seu sítio e considere a forma como cada interação, desde os pré-carregadores às animações de página, contribui para a história da sua marca.

Com estes passos e dicas, tem agora tudo o que precisa para criar um pré-carregador personalizado que não só mantém os visitantes envolvidos, como também reforça a identidade da sua marca.

Sair da versão móvel