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

Imagens hero do Elementor mais rápidas

O Elementor, um editor de páginas popular 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 a escolhas de design do Elementor. Um exemplo que vejo quase diariamente é como o Elementor lida com as imagens hero. Por padrão, o Elementor usa imagens de fundo para elas, o que atrasa o carregamento da página todas as vezes.

Revisado pela última vez 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. Enquanto edita 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 certa.

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. Ele faz o que precisa fazer. Mas a um custo de desempenho:

• Descoberta tardia: De uma perspectiva técnica, imagens de fundo estão longe do ideal. Imagens de fundo do Elementor não são descobertas imediatamente no HTML. Essas imagens de fundo estão vinculadas a 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 otimizado para velocidade: Imagens de fundo não são otimizadas para velocidade porque estão perdendo propriedades mais novas como native lazy loading, fetchpriority e async decoding.
• Não responsivo: Por último, mas não menos importante, imagens de fundo do Elementor não são responsivas e sempre carregarão uma imagem completa do tamanho de 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á-la com position: relative no contêiner e position: absolute na imagem.

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

Passo 1: adicionar os estilos necessários

Para corrigir imagens de fundo lentas, comece aplicando alguns estilos CSS essenciais. Esses estilos farão a imagem se comportar como uma imagem de capa de fundo adequada e garantirão que ela não entre em 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 elementos filhos dentro dele.
• .relative .elementor-*: Redefine as divs auxiliares do Elementor para evitar conflitos de layout.
• .heroimg: Garante que a imagem seja redimensionada para cobrir o contêiner enquanto fica atrás dele.

Como adicionar os estilos:

• Navegue até o Painel do seu WordPress.
• Vá em 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 otimizadas e responsivas. Em seguida, aplique as classes .relative e .heroimg à sua seção hero para concluir a conversão.

Passo 2: Preparar o contêiner

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

Passos:

• Editar o contêiner:
• Vá para o seu editor do Elementor e selecione o contêiner onde a imagem hero está aplicada no momento.
• Remover a imagem de fundo:
• Navegue até a guia Estilo (Style).
• Localize a seção Fundo (Background) onde a imagem é aplicada.
• Clique no ícone de lixeira para remover a imagem de fundo.
• Aplicar a classe .relative:
• Mude para a guia Avançado (Advanced).
• Em Classes CSS, digite relative.

Passo 3: Adicionar uma nova imagem e aplicar as novas classes

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

O que esperar: Durante a etapa 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 de largura total e responsiva que se comporta como uma capa 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:

• Adicionar um elemento de imagem:
• No editor do Elementor, clique no ícone de mais 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).
• Fazer upload e selecionar sua imagem:
• Nas configurações de 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 sua galeria de mídia do WordPress.
• Aplicar a classe .heroimg:
• Com a imagem ainda selecionada, navegue até a guia Avançado (Advanced) 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 ótimo: a imagem de fundo lenta foi substituída por uma imagem de primeiro plano rápida e responsiva. 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% com uma correção de 2 minutos.

Bônus: preload na imagem hero

Imagens de fundo não podem ser realmente pré-carregadas automaticamente. Imagens de primeiro plano podem ser pré-carregadas por plugins como WP Core Web Vitals. Fazer o preload 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 corrigir uma imagem de fundo do Elementor no YouTube!