Imagens hero do Elementor mais rápidas em 2 minutos!

Imagens hero do Elementor mais rápidas

O Elementor, um popular editor de páginas do WordPress, simplifica o design de páginas. Infelizmente, ele frequentemente deixa os sites lentos. Às vezes devido a erros do usuário e às vezes devido às escolhas de design do Elementor. Um exemplo que vejo quase diariamente é como o Elementor lida com imagens hero. Por padrão, o Elementor usa imagens de fundo para elas, o que atrasa o carregamento da página toda vez.

Última revisão por Arjen Karel em março de 2026

O fascínio das imagens de fundo do Elementor

O Elementor adiciona imagens hero como uma imagem de fundo por padrão. Ao editar a página com o Elementor, basta clicar no primeiro contêiner, navegar até estilo e adicionar sua imagem. É fácil, conveniente e à prova de idiotas. Se isso for bom o suficiente para você, pare de ler aqui, mas se você se importa com seus visitantes, continue lendo e aprenda como criar imagens hero do Elementor da maneira correta.

O problema com as imagens de fundo do Elementor

Agora, o que há de errado com imagens de fundo, você deve estar se perguntando? Imagens de fundo são conhecidas por este comportamento: elas abrangem todo o fundo de um elemento. Faz o que precisa fazer. Mas a um custo de desempenho:

• Descoberta tardia: De uma perspectiva técnica, as imagens de fundo estão longe de serem ideais. As imagens de fundo do Elementor não são descobertas imediatamente no HTML. Essas imagens de fundo são vinculadas em folhas de estilo. Como as folhas de estilo precisam ser baixadas e analisadas separadamente, isso significa que elas são descobertas muito mais tarde durante o processo de renderização. Isso atrasa o seu Largest Contentful Paint (LCP).
• Não otimizadas para velocidade: Imagens de fundo não são otimizadas para velocidade porque não possuem propriedades mais recentes, como native lazy loading, fetchpriority e async decoding.
• Não responsivas: Por último, mas não menos importante, as imagens de fundo do Elementor não são responsivas e sempre carregarão uma imagem completa do tamanho de um desktop, mesmo para pequenos dispositivos móveis.

Não entrarei em muitos detalhes (se você estiver interessado, leia sobre por que imagens de fundo são más), mas basta dizer que uma página com essa configuração provavelmente falhará nos Core Web Vitals.

A correção de 2 minutos para imagens de fundo lentas

Imagens de fundo lentas não precisam ser um problema. Com um simples ajuste de CSS, elas podem ser transformadas em imagens rápidas e responsivas. O segredo? Usar object-fit: cover para dimensionar a imagem e combiná-lo com position: relative no contêiner e position: absolute na imagem.

Curiosidade: Eu cronometrei a mim mesmo hoje enquanto convertia imagens de fundo do Elementor em imagens responsivas incrivelmente rápidas. Levei menos de 2 minutos!

Passo 1: adicione os estilos necessários

Para consertar imagens de fundo lentas, comece aplicando alguns estilos CSS essenciais. Esses estilos farão com que a imagem se comporte como uma imagem de cobertura de fundo adequada e garantirão que não haja conflito com as divs auxiliares do Elementor.

/* The relative parent container */
  .relative{
      position: relative;
  }

  /* Ensure Elementor helper divs are not relative */
  .relative .elementor-container,
  .relative .elementor-column,
  .relative .elementor-widget-wrap {
      position: initial;
  }

  /* The new and improved hero image */
  .heroimg, .heroimg img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }

O que isso faz:

• .relative: Torna o contêiner pai relativo para posicionar os elementos filhos dentro dele.
• .relative .elementor-*: Redefine as divs auxiliares do Elementor para evitar conflitos de layout.
• .heroimg: Garante que a imagem seja dimensionada para cobrir o contêiner enquanto fica atrás dele.

Como adicionar os estilos:

• Navegue até o Painel (Dashboard) do seu WordPress.
• Vá para Aparência > Personalizar.
• Clique em CSS Adicional.
• Cole o código CSS acima e salve suas alterações.

Isso estabelece a base para converter essas imagens de fundo lentas em imagens hero responsivas e otimizadas. A seguir, aplique as classes .relative e .heroimg à sua seção hero para concluir a conversão.

Passo 2: Prepare o contêiner

Agora que os estilos estão no lugar, é hora de preparar o contêiner para a nova imagem hero. Isso envolve remover a imagem de fundo existente e aplicar a classe .relative ao contêiner.

Passos:

• Edite o contêiner:
• Vá para o seu editor do Elementor e selecione o contêiner onde a imagem hero está aplicada no momento.
• Remova a imagem de fundo:
• Navegue até a aba Estilo.
• Localize a seção Fundo onde a imagem está aplicada.
• Clique no ícone da lixeira para remover a imagem de fundo.
• Aplique a classe .relative:
• Mude para a aba Avançado.
• Em Classes CSS, digite relative.

Passo 3: Adicione uma nova imagem e aplique as novas classes

Com o contêiner pronto, é hora de adicionar a imagem hero responsiva e otimizada usando o Elementor.

O que esperar: Durante o passo final, a imagem hero pode parecer desalinhada ou estranha antes de aplicar as classes. Isso é normal. A classe .heroimg transformará a imagem em uma imagem hero responsiva de largura total que se comporta como uma cobertura de fundo. Depois de concluída, sua imagem hero otimizada ficará atrás do contêiner, oferecendo o mesmo impacto visual com um desempenho significativamente melhorado.

Passos:

• Adicione um elemento de Imagem:
• No editor do Elementor, clique no ícone de adição no canto superior esquerdo para adicionar um novo elemento.
• Arraste e solte o widget de Imagem no contêiner superior (aquele com a classe .relative).
• Faça o upload e selecione sua imagem:
• Nas configurações da imagem no painel esquerdo, clique no espaço reservado da imagem.
• Faça o upload da imagem em tela cheia que você deseja usar ou selecione uma existente na galeria de mídia do seu WordPress.
• Aplique a classe .heroimg:
• Com a imagem ainda selecionada, navegue até a aba Avançado no menu do Elementor.
• No campo Classes CSS, digite heroimg.

O resultado: LCP 77% mais rápido

Neste ponto, sua imagem hero está totalmente otimizada. Depois de publicar a página, inspecione o elemento e você notará algo excelente: a imagem de fundo lenta foi substituída por uma imagem de primeiro plano responsiva e rápida. Esta imagem agora é carregada com um alto fetchpriority, garantindo que ela carregue mais rápido, melhorando tanto os Core Web Vitals quanto a user experience.

Neste exemplo, o LCP caiu de 2,6 segundos para 0,6 segundos. Isso é uma melhoria de 77% a partir de uma correção de 2 minutos.

Bônus: faça o preload da imagem hero

As imagens de fundo não podem realmente ter o preload feito automaticamente. As imagens de primeiro plano podem ter o preload feito por plugins como o WP Core Web Vitals. O Preloading dessas imagens responsivas irá enfileirá-las antes de todos os seus scripts e priorizar os aspectos visuais da sua página da web.

Para mais maneiras de otimizar suas imagens, confira o guia completo de otimização de imagens.

Assista ao passo a passo completo no YouTube

Assista-me consertar uma imagem de fundo do Elementor no YouTube!