Ir para o conteúdo principal

Como otimizar o layout do seu site com o Elementor

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Quer saber como otimizar o layout do seu site com o Elementor?

Otimizar o desempenho do site é um dos aspectos mais importantes de seu experiência do usuário. Um site de carregamento lento pode frustrar qualquer usuário, muitas vezes resultando em um taxa de rejeição alta, o que pode afetar adversamente o sucesso de nossos negócios.

O desempenho do site pode ser afetado por vários fatores, por exemplo: grandes tamanhos de imagem, configurações de servidor, muitos plugins, entre outros fatores.

O desempenho do site é um dos nossos valores mais fortes como criadores da web. É por isso que criamos este curso em 5 partes.

Agora você pode aprender a criar layouts e postagens usando técnicas otimizadas. Esse conhecimento garantirá que seus sites não incluirão seções, colunas ou widgets redundantes que simplesmente não são necessários. Também exploraremos alguns recursos de widget integrados para melhorar o tempo de carregamento.

Ao final deste tutorial, você estará totalmente pronto para otimizar o desempenho de cada site Elementor que construir e colher imediatamente as recompensas.

Lição 1: Melhores práticas de otimização de layout

inspetor de desempenho do site

Em nossa primeira lição, cobriremos a maneira mais eficiente de construir suas páginas e postagens no editor Elementor. Freqüentemente, vemos o uso de muitas seções, colunas, seções internas e widgets, quando o mesmo layout poderia ser obtido usando muito menos elementos.

O uso de quantidades excessivas de elementos retarda o desempenho do seu site, então vamos mergulhar e aprender como construir sites com o Elementor da maneira mais eficiente.

Cobriremos os seguintes tópicos:

  • Uma análise mais detalhada da estrutura de uma página correta
  • Visualizando e testando o desempenho do seu site
  • Otimizando seu cabeçalho, rodapé e conteúdo da página
  • Exemplos de boas e más práticas de layout de sites
  • Uso correto de widgets, posicionamento e estilos globais
  • Dicas para evitar o atraso de carregamento, melhorar o SEO e aumentar o tempo de carregamento
  • Otimização de acessibilidade
  • Reduzindo a quantidade de elementos DOM
  • E muito mais !

Para entender melhor os layouts ideais no Elementor, vamos explorar um template Elementor que mostra abusos comuns de seções, colunas e widgets. Ao final desta lição, teremos reconstruído completamente esta página inteira reduzindo o número de colunas e widgets. Nossa página inicial consiste em nove seções, 31 colunas, cinco seções internas e 44 widgets.

No final do tutorial, nossa página otimizada será reduzida a seis seções, sete colunas e 16 widgets.

Usaremos o gratuito, leve Olá tema e iremos recriar cada seção do modelo e melhorar o desempenho geral do site usando as melhores práticas.

otimize o layout do seu site com Elementor

Teste de más práticas

Antes de mergulharmos na otimização do layout do site, faremos um teste em nossa página para entender completamente o que acontece quando alguém visita nosso site. Assim que todas as nossas otimizações tiverem sido feitas, vamos repetir o teste e comparar os resultados.

Etapa 1: verifique seu site em uma janela anônima

  • Abra uma nova janela no "modo de navegação anônima" e digite o URL da página da web que você está testando.

Etapa 2: verifique se você está usando o caminho de URL direto

Se não tiver certeza sobre o link da sua página, você pode encontrá-lo facilmente acessando o painel do WP:

  • Clique em "Páginas" para ver todas as páginas do seu site.
  • Passe o cursor sobre a sua página e clique na opção "Visualizar". Isso o levará diretamente para sua página.
  • Copie e cole este URL na janela anônima e assim que o site carregar, você está pronto para testá-lo!
Testando e visualizando resultados de desempenho

Etapa 1: teste os resultados de desempenho

inspetor de desempenho de teste elementor

Você pode ter usado as Ferramentas do desenvolvedor do Chrome no passado.

Caso contrário, para inspecionar e exibir o conteúdo HTML e CSS da sua página:

  • Clique com o botão direito em qualquer lugar da página e selecione “Inspecionar”. Você verá várias guias onde poderá ler seu HTML e CSS, encontrar erros, obter resultados de SEO e executar vários testes.
  • Selecione a guia Rede e pressione os botões cmd ou ctrl + R para carregar os resultados.

Como você pode ver, nosso layout atual leva 2,88 segundos para carregar e executa 81 solicitações.

Etapa 2: ver os resultados de desempenho

resultados insatisfatórios de otimização do inspetor
  • Mude para a guia Lighthouse, onde podemos executar um relatório de auditoria em nossa página.

Isso nos dará mais informações sobre o desempenho atual da página.

  • Selecione “Gerar relatório”. Depois de alguns momentos, seu relatório aparecerá.

No momento, estamos recebendo uma classificação de desempenho de 73/100, na qual certamente podemos trabalhar.

Idealmente, gostaríamos que todos esses números fossem verdes. Agora, vamos otimizar nossa página e melhorar nossas estatísticas.

Lembre-se de que, após cada etapa de otimização que fizermos, podemos pegar algumas práticas recomendadas das alterações e mantê-las em mente para futuros sites que criarmos.

Otimizando os elementos da página

Etapa 1: otimize o cabeçalho

Vamos começar com o cabeçalho.

Como você pode ver neste design, o cabeçalho foi feito com três colunas.

Na primeira coluna, nosso logotipo consiste em dois widgets:

  1. Un Widget de imagem que exibe um arquivo de imagem .png de nosso logotipo
  2. Um widget de título.

Na segunda coluna, o menu de cabeçalho consiste em nosso widget do menu de navegação.

A terceira coluna contém:

  1. Um widget de seção interno (que controla a posição do widget de ícone).
  2. Nossos detalhes de contato para o cabeçalho

Vamos ver como podemos minimizar o número de seções, widgets e seções aqui.

Etapa 2: crie o novo cabeçalho

herói da casa de design

Coluna 1:

Práticas recomendadas para imagens:
  • Dê a cada arquivo de imagem em seu site um título relevante e um texto alternativo na biblioteca de mídia.

Isso melhorará a acessibilidade da página e a classificação do mecanismo de pesquisa. No logotipo que usamos originalmente, o título é irrelevante para a imagem real e não há texto alternativo.

  • Defina as dimensões da imagem dentro do widget.

Isso permite que a página seja organizada com o espaço adequado antes do carregamento das imagens, evitando o atraso do layout (um fator medido pelos navegadores).

No exemplo em que estamos trabalhando juntos, resolva esse problema acessando a guia Estilo e definindo a largura da imagem como 200px.

Coluna 2

Retorne ao painel de widgets:

  • Arraste e solte o widget do menu de navegação sob o logotipo
  • Defina o ponteiro para "Nenhum"
  • Vá para a guia "Estilo" e adicione a fonte de sua preferência (para que corresponda ao nosso design anterior)

Práticas recomendadas para estilo geral:

  • Evite usar mais de 2 fontes diferentes que incluam vários pesos (Fontes globais).
  • Evite selecionar cores diferentes para cada item com o seletor de cores (Cores globais).
  • Melhore a velocidade de carregamento do seu site, gerando menos consultas (fontes gerais).
  • Repita o código desnecessário duas vezes (cores globais).
  • Mantenha a consistência e o controle de seu modelo (estilo geral).

Fontes globais:

Isso pode ser feito usando a função Global Fonts:

  • Vá para a guia "Estilo" e adicione sua fonte preferida (para que corresponda ao nosso design anterior) selecionando uma, faça uma pequena alteração e passe o mouse sobre o ícone de adição.
  • Clique no ícone de adição e selecione a família de fontes que você precisa
  • Salve os estilos que você usará no modelo como fontes globais

Você pode então usar esse estilo em cada widget que criar.

Cores globais:

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

O mesmo método pode ser usado para suas cores gerais:

  • Clique em "Global"
  • Passe o mouse sobre o seletor de cores e clique nele
  • Selecione uma cor e aponte para o ícone de mais
  • Clique em "Global" >> selecione "Principal"

Depois de fazer isso, a cor será salva na paleta de cores do seu modelo, para que você possa selecioná-la na lista Cores globais sempre que precisar para um item ou widget.

Antes de continuarmos com nosso cabeçalho, vamos definir o preenchimento vertical para zero.

Etapa 3: edite o cabeçalho

Coluna 3

  • Vá para o painel "Widgets"
  • Arraste o widget Lista de ícones no menu de navegação.
  • Remover itens adicionais da lista
  • Adicione o seu texto
  • Escolha o ícone de sua preferência
  • Vá para a guia "Estilo"
  • Defina as cores e fontes gerais de sua escolha

Agora precisamos consertar mais uma coisa - os três elementos do cabeçalho estão empilhados e não alinhados entre si. Podemos resolver esse problema alterando a largura de cada elemento para seu tamanho real, de modo que não ocupe todo o espaço da coluna.

Para resolver este problema:

  • Selecione o widget do logotipo do site >> guia 'Avançado'
  • Selecione "Posicionamento" e defina sua largura como "Inline"

Repita esta etapa exata para o widget Menu de navegação e para o widget Lista de ícones.

Agora que todos os elementos do cabeçalho estão alinhados, tudo o que resta é posicioná-los corretamente.

Definindo o posicionamento da coluna com elementos embutidos

  • Selecione sua coluna >> vá para a guia "Layout"
  • Em "Alinhamento vertical", escolha "Inferior"
  • "No alinhamento horizontal" escolha "Espaço entre"

Escolher o alinhamento “Espaço entre” posiciona o primeiro e o último widget em ambas as extremidades, dando espaçamento igual entre todos os outros widgets.

No entanto, o primeiro e o último widgets têm larguras diferentes, então o espaço igual nem sempre pode centralizar nosso widget interno.

Podemos resolver esse problema ajustando as margens:

  • Selecione o widget do menu de navegação >> guia "Avançado"
  • Desagrupe a margem e remova o espaçamento com um valor negativo

Etapa 4: tornar o cabeçalho responsivo

Agora vamos ver como é a versão atual do nosso site em dispositivos móveis.

Práticas recomendadas para capacidade de resposta móvel:

  • Simplifique seu design e pense em maneiras de tornar as mesmas seções responsivas, para evitar o uso de duas vezes a quantidade de código que afetará a velocidade de sua página.

Como você pode ver neste cabeçalho - é comum ver a mesma seção redesenhada especificamente para tablets e dispositivos móveis. Isso é o que vemos aqui: duas versões do design foram criadas: uma versão para desktop e outra para celular.

Em vez disso, quando o design e o código são responsivos, a velocidade da página aumenta porque usará menos código.

Vamos ver como podemos conseguir isso, usando a configuração “Custom Width” para nossos widgets e elementos.

Configurando uma largura personalizada para tablet

  • Clique em 'Menu Nav' >> guia 'Avançado'
  • Selecione "Posicionamento" >> defina a largura para "Personalizado".
  • Selecione "%" >> dê ao widget a mesma largura (em porcentagem) do espaço vazio ao seu redor.
  • Clique na guia “Conteúdo” >> “Toggle Align” >> selecione “Right”.

Isso permite que você alinhe o menu de alternância em qualquer lugar dentro da largura do widget.

Agora vamos terminar de personalizar o menu de alternância.

  • "Conteúdo" >> Clique em alternar "Largura total" e defina como "Sim".
  • "Estilo" >> Remova o fundo arrastando a barra "Seletor de cores" totalmente para a esquerda.

Agora vamos ver como são as coisas em uma tela de celular.

Definindo uma largura personalizada para celular

Neste cenário, manteremos os três widgets de cabeçalho dentro da janela de visualização. Mas lembre-se de que, para alguns sites, pode fazer mais sentido omitir certos elementos do cabeçalho quando visualizados em um celular ou tablet.

Nesse caso, o que acontece com nosso cabeçalho quando exibido no celular é que os widgets Menu de Navegação e Logotipo não podem caber em uma única linha.

Para resolver este problema:

Posicionamento do Menu Nav

  • Clique em "Menu Nav" >> guia "Avançado"
  • Selecione "Posicionamento" >> defina a largura para "Personalizado"
  • Selecione "%" >> Dê ao widget uma largura de 30%, para que ele caiba próximo ao nosso logotipo

Posicionamento da lista de ícones

  • Clique em "Lista de ícones" >> guia '' Avançado '
  • Selecione "Preencher" >> Desagrupar valores
  • Adicione padding de 12 px a "TOP"

Você acredita nisso?

Originalmente, nosso cabeçalho era usado 2 seções, 12 widgets e 10 colunas. Agora nosso cabeçalho usa 1 seção, 3 widgets e 1 coluna.

E o resultado é o mesmo!

Etapa 5: Otimize a seção Hero

Vamos passar para a próxima seção do nosso site: a seção do herói

Práticas recomendadas para seções Hero:

  • Certifique-se de que o texto da seção do herói seja facilmente visível, especialmente quando tem uma imagem de fundo.

Controlando a posição do widget em uma coluna

Um erro comum que vemos cometido no editor Elementor é usar colunas e espaços extras para controlar o posicionamento de um widget.

Em nosso modelo de exemplo, nosso imagem de herói consiste em uma seção com uma imagem de fundo. O título e o texto são posicionados horizontalmente, usando duas colunas. Há também um espaçador dentro da seção para espaçar os elementos verticalmente.

Vamos ver como podemos criar o mesmo design com apenas uma seção:

  • Exclua a coluna extra à direita do texto.
  • Remova o espaçador.

Em vez disso, para posicionar nosso texto principal onde o queremos, usaremos as opções de alinhamento de coluna:

  • Selecione a coluna.
  • Defina o "Alinhamento vertical" para "Meio".
  • Vá para a guia "Avançado".
  • Selecione "Preencher" >> Desagrupar valores
  • Defina o preenchimento direito para 50%.
  • Selecione a seção.
  • Selecione "Altura mínima" >> defina-o para 80.

Contraste fixo entre textos e fundos

É importante que cada site tenha um bom contraste entre o texto e o fundo. Informações ilegíveis afetam as pontuações do seu site e também podem afastar os visitantes. De qualquer forma, o texto deve ser sempre claramente legível.

Existem várias maneiras de melhorar a clareza de uma seção cujo fundo é uma imagem colorida (como vemos neste modelo):

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

  • Clique no seu cabeçalho.
  • Vá para a guia "Estilo" >> Selecione "Sombra do texto".

Isso melhorará a legibilidade do texto, destacando-o da imagem de fundo.

Outra maneira de tornar o texto mais claro é usar sobreposições.

  • Selecione a seção >> guia 'Estilo' >> 'Sobreposição de plano de fundo'
  • Selecione uma de suas cores gerais e brinque com a opacidade até obter o resultado que deseja

Etapa 6: otimize a seção com caixas de ícones

projetar caixas de ícone de casa

Agora, vamos prosseguir para a próxima seção, onde atualmente temos uma seção interna com quatro colunas. Atualmente, cada coluna inclui três widgets: Widget de imagem, Widget de título e Widget de editor de texto.

Vamos ver como podemos simplificar esta seção para melhorar seu desempenho.

Conteúdo da área do ícone

  • Selecione o botão »Icon Box Widget« no menu do widget e arraste-o para a coluna
  • Selecione a "caixa de ícones"
  • Aponte para a imagem do ícone
  • Selecione "Baixar SVG" **
  • Insira seu ícone personalizado

** Observação: os emblemas são arquivos SVG. Se você não tiver feito isso, vá para o painel do WordPress e vá para Elementor >> Configurações. Você precisará habilitar Habilitar downloads de arquivos não filtrados.

  • Digite o seu "título"
  • Digite sua "Descrição"
  • Selecione "Estilo" >> Escolha uma cor geral
  • Selecione "Tamanho" e arraste a barra para o tamanho de sua escolha
  • Selecione "Preenchimento" e arraste a barra até o número de sua escolha

Etapa 8: otimize a seção "Serviços"

serviços de design house

Agora vamos reconstruir a seção “Serviços”, que atualmente usa duas colunas, duas imagens, o widget de título e o widget do editor de texto.

Vamos criar o mesmo design em uma nova seção, mas com apenas uma coluna.

  • Crie uma nova seção com uma coluna
  • Em "Layout" >> defina "Largura do conteúdo" para "Largura total"
  • Selecione a "Caixa de imagem do widget" no painel do widget e arraste-o para a coluna

(Seremos capazes de integrar todos os ativos da seção neste widget)

  • Digite o Título
  • Digite a descrição

Para a imagem, vamos manter o design atual que usamos para nossas imagens.

  • Insira a mesma imagem da biblioteca de mídia
  • Vá para a guia "Conteúdo" >> Defina "Posição da imagem" como "Direita"
  • Vá para a guia "Estilo"
  • Aumente o espaçamento entre os elementos
  • Aumente a "largura" da imagem
  • Expanda a seção "Conteúdo"
  • Escolha o alinhamento "central"
  • Defina "Alinhamento vertical" para "Meio"
  • Defina as cores e fontes gerais de sua escolha
  • Vá para a guia "Avançado"
  • Adicione 10% de preenchimento ao widget

Agora, a seção de serviços tem o mesmo design, mas com menos recursos.

Etapa 9: otimize a seção de apelo à ação

Práticas recomendadas para links de CTA:

  • Verifique se todos os seus links de mídia social estão funcionando corretamente e se o botão contém o link.
  • Ao adicionar um link para outro site, inclua este atributo: "rel | noopener"

(Você pode fazer isso clicando no ícone de engrenagem e digitando o atributo em "Atributos personalizados"). Isso abrirá o link em uma nova guia do navegador e aumentará sua pontuação de desempenho.

A seção a seguir apresenta uma chamada à ação para nossos serviços.

A seção atualmente possui duas colunas, que contêm:

  1. Uma imagem de fundo com um espaçador
  2. Dois cabeçalhos, uma seção interna, um editor de texto e um botão

Vamos criar o mesmo design em uma nova seção, mas com apenas uma coluna.

  • Vá para a guia "Layout" >> defina "Largura do conteúdo" para "Largura total"
  • Vá para a guia "Avançado" >> Remova qualquer enchimento adicional
  • Selecione o "Widget de apelo à ação" no painel do widget e arraste-o para a coluna
  • Defina "Posição da imagem" para "Esquerda"
  • Selecione sua imagem na biblioteca de mídia
  • Expanda a seção "Conteúdo"
  • Digite o cabeçalho
  • Digite a descrição
  • Digite o texto do botão
  • Vá para a guia "Estilo"
  • Adicione "Preenchimento" entre os elementos
  • Ajustar a largura da imagem
  • Expanda a seção "Conteúdo"
  • Selecione a fonte global para o seu título
  • Aumente o espaço entre a descrição e o botão
  • Escolha as cores globais adequadas para cada recurso
  • Expanda a seção "Botão"
  • Defina seu tamanho para "Grande"
  • Personalize-o de acordo com suas necessidades, como cor de fundo e raio da borda

Até agora, tem sido uma seção de 2 colunas com 6 widgets. Agora é uma seção de 1 coluna com apenas 1 widget!

Etapa 10: otimize o carrossel de imagens

otimização de carrossel de imagens

O design atual de nossa seção Carrossel de imagens tem um erro comum com a maneira como exibe várias imagens.

Este design consiste em 5 colunas, uma prática que muitos usuários tendem a fazer para controlar o tamanho de suas imagens.

Vamos explorar uma forma mais simples que também otimizará o desempenho do seu site.

  • Crie uma nova seção com 1 coluna
  • Vá para a guia "Layout" >> defina "Largura do conteúdo" para "Largura total"
  • Selecione o botão »Widget de carrossel de imagens« no painel do widget e arraste-o para a coluna
  • Adicione as imagens desejadas da biblioteca de mídia
  • Vá para a guia "Conteúdo"
  • Defina o "Tamanho da imagem" como "Médio - 300 x 300"
  • Ajuste "Slides para exibir", "Slides para rolar" e "Navegação" de acordo com suas preferências
  • Vá para a guia "Estilo"
  • Defina "Alinhamento vertical" para "Centro"
  • Personalize o "Espaçamento"
  • Vá para a guia "Avançado"
  • Adicione o recheio necessário

O que antes era uma seção de 5 colunas agora é apenas 1 coluna.

Vamos passar para a próxima seção, onde podemos otimizar os vídeos em nosso site.

Etapa 11: otimize a seção de vídeo

Práticas recomendadas para conteúdo de vídeo:

  • Use Lazy Load sempre que possível, a fim de melhorar o tempo de carregamento de seus sites.

O que acontece quando aplicamos a opção “Lazy Load”?

Tecnicamente falando, o código de incorporação do vídeo é substituído por uma imagem estática. Dessa forma, o vídeo só carrega quando o usuário clica na imagem - o que realmente ajuda com o tempo de carregamento da nossa página.

O que vamos fazer agora é mudar a maneira como usamos o widget de vídeo, para que não atrase a velocidade da página ou o desempenho do site.

  • Selecione o "Widget de Vídeo"
  • Vá para a guia "Estilo"
  • Selecione "Lazy Load"

Etapa 12: otimize o rodapé e mantenha-o atualizado

otimização elementor footer

Um erro comum visto em muitos sites é que o rodapé usa vários cabeçalhos para a data e a descrição, bem como um ícone para o símbolo de copyright.

Vamos ver como otimizar o rodapé e garantir que ele esteja sempre atualizado.

Vamos configurar este processo de atualização contínua usando Tags dinâmicas. Dessa forma, não precisaremos alterar o conteúdo do cabeçalho a cada ano, pois as tags dinâmicas serão atualizadas automaticamente para o ano atual.

Para fazer isso, procederemos da seguinte forma:

  • Remova os widgets extras, deixando apenas o widget de título
  • Selecione o widget Título
  • Clique no símbolo "Tags dinâmicas" à direita do campo "Título" (também conhecido como "botão Pai"
  • No menu suspenso, selecione o item de menu "Data e hora atuais"
  • Clique no ícone pai da chave
  • Clique na guia "Formato de data" e selecione o item de menu "Personalizar"
  • Exclua o que está atualmente no campo "Formato personalizado", exceto o "Y"
  • Selecione a guia "Avançado"
  • Destaque o campo "Avançar" e segure as teclas "opção" e "G" simultaneamente (ou "controle", alt "e" C "simultaneamente) para digitar o símbolo" © ".
  • Adicione um espaço após o "©"
  • Selecione o campo "Depois"
  • Digite um espaço e escreva o texto que deseja que apareça após o ano, como "Todos os direitos reservados"

Você pode notar que no site de exemplo neste tutorial, cada widget tem sua própria seção. Fizemos isso para tornar o tutorial mais claro e fácil de seguir.

Idealmente, quanto menos seções você tiver, menos CÓDIGO HTML adicional terá.

Você pode mesclar alguns widgets na mesma seção arrastando e soltando-os na seção acima e, em seguida, excluindo a seção vazia.

E pronto, seu layout está otimizado!

Avaliação de desempenho do novo site

Verificaremos os resultados na janela DevTools (Inspetor):

  • Selecione a guia "Rede":

Existem algumas mudanças boas e positivas aqui:

  • O site agora leva 568 milissegundos para carregar
  • Passamos de 81 solicitações para 46
  • Selecione a guia “Farol”, onde você verá que nossa pontuação de desempenho aumentou de 73 para 98

Lembre-se de que otimizamos nosso desempenho sem usar plug-ins de terceiros. Bastou ajustes simples e práticas recomendadas.

Etapa 13: teste os resultados com efeitos de movimento

Queremos tornar nosso site mais interativo e divertido, mas como isso afetará nossas pontuações de desempenho? Vamos ver o que podemos fazer.

Torne o cabeçalho um elemento "fixo":

  • Selecione o cabeçalho
  • Vá para a guia "Avançado"
  • Expanda a guia "Efeitos de movimento"
  • Defina a opção "Sticky" para "Top"

Faça da seção do herói um elemento "fixo":

  • Selecione a seção de herói
  • Vá para a guia "Estilo"
  • Selecione a lista suspensa "Anexo" e selecione "Fixo"

use um Animação de entrada para o texto do herói (cabeçalho):

  • Selecione o widget de cabeçalho
  • Vá para a guia "Avançado"
  • Expanda a guia "Efeitos de movimento"
  • Selecione Input Animation e defina-o para “Fade In”

Use uma animação de entrada para a descrição de texto do herói (widget Editor de Texto):

  • Selecione o widget Editor de Texto
  • Vá para a guia "Avançado"
  • Expanda a guia "Efeitos de movimento"
  • Selecione a "animação de entrada" e defina-a como "Fade In"

Faça o mesmo com os widgets que vêm depois, para obter efeitos sutis quando a página for carregada.

Agora vamos executar o teste de desempenho novamente, para ver como os efeitos do movimento afetaram nossa pontuação:

  • Voltar para a janela "Inspetor"
  • Selecione a guia "Farol"
  • Clique em "Gerar um relatório"

Agora vemos que nossa pontuação de desempenho foi reduzida para 97 - isso definitivamente não é uma grande diferença e torna o site mais interessante e divertido.

Você pode acreditar em nossa nova pontuação de desempenho?

Estamos muito satisfeitos por você agora estar totalmente equipado para aumentar sua pontuação de desempenho em cada site Elementor que você criar. Isso fará uma grande diferença para os objetivos de construção de seu site e para o sucesso do seu negócio.

Sugerimos que você marque este tutorial para referência futura, para que possa examinar o desempenho das páginas do seu site e aplicar as práticas recomendadas para otimizar seu layout.

E isso é apenas o começo - a próxima parte deste curso cobreotimização de imagem.

No tutorial, examinaremos cada imagem no site de amostra e aprenderemos como melhorá-las para tempos de carregamento ainda mais eficientes.

Obtenha o Elementor Pro agora!

Conclusão

Aqui ! É isso neste artigo que mostra como otimizar o layout do seu site com o Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
0 ações
ação
chilrear
Enregistrer