💡 Como configurar o scroll infinito no Elementor com o Ajax Load More

• Instale o plugin gratuito Ajax Load More a partir do repositório do WordPress.org e ative-o.
• Copie a estrutura HTML de um único artigo da grelha do Elementor usando as DevTools e construa um modelo de repetidor (Repeater Template).
• No construtor de shortcodes, selecione «Infinite Scroll» como estilo de carregamento e defina posts_per_page (4 a 6 para uma grelha de 2 a 3 colunas).
• Adicione scroll_container e transition_container_classes com as classes CSS da grelha do Elementor para que os artigos carregados herdem os estilos.
• Envolva o shortcode num contentor HTML com a classe única do widget elementor-element-* e coloque o bloco na página.
• Abra a página no frontend, faça scroll até ao fundo e verifique se os artigos carregam com o scroll sem atualizar a página.

O que vai precisar

Antes de começar, certifique-se de que duas coisas estão instaladas e ativadas no seu site:

• Elementor (versão gratuita ou Pro), o construtor onde a sua grelha de artigos é criada.
• Ajax Load More, um plugin gratuito para carregar conteúdo via AJAX. Descarregue do WordPress.org

Mantenha também a documentação oficial e a página de exemplos à mão. Existem dezenas de snippets prontos para diferentes cenários: desde artigos padrão a WooCommerce e ACF.

O widget de artigos integrado do Elementor oferece apenas paginação numerada; nem a versão gratuita nem a Pro conseguem carregar artigos com o scroll. O Ajax Load More preenche esta lacuna: adiciona scroll infinito, um botão «Carregar mais» e carregamento diferido (lazy load), preservando a aparência da grelha. A chave é um modelo de repetidor correto. Depois de o construir, os artigos carregados são visualmente indistinguíveis dos que já estão na página.

O pequeno vídeo acima mostra a integração em ação: os artigos do Elementor carregam de forma fluida, sem atualizações de página ou saltos de layout.

Passo 1: Construir um modelo de repetidor para a grelha do Elementor

A parte mais importante é transferir corretamente a estrutura HTML de um único artigo do Elementor para o modelo do Ajax Load More. Se o modelo não corresponder ao layout real, os artigos carregados vão «desmontar-se»: as margens mudam, os cartões desaparecem e a grelha parte-se.

Abra a página com a grelha no seu navegador, prima F12 (DevTools), vá ao separador Elements e encontre o nó DOM de um único artigo. Precisa do HTML COMPLETO de um elemento, desde a tag de abertura <article> ou <div class="elementor-post"> até à tag de fecho.

Um modelo básico para uma grelha do Elementor (duas colunas, skin Cards) tem este aspeto:

1
<article class="elementor-post elementor-grid-item post-<?php the_ID(); ?>">
2
  <div class="elementor-post__card">
3
    <a class="elementor-post__thumbnail__link" href="<?php the_permalink(); ?>">
4
      <div class="elementor-post__thumbnail">
5
        <?php if (has_post_thumbnail()) {
6
          the_post_thumbnail('alm-thumbnail');
7
        } ?>
8
      </div>
9
    </a>
10
    <div class="elementor-post__text">
11
      <h3 class="elementor-post__title">
12
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
13
      </h3>
14
      <div class="elementor-post__excerpt">
15
        <?php the_excerpt(); ?>
16
      </div>
17
      <a class="elementor-post__read-more" href="<?php the_permalink(); ?>">
18
        Read more »
19
      </a>
20
    </div>
21
    <div class="elementor-post__meta-data">
22
      <span class="elementor-post-date">
23
        <?php the_time('d.m.Y'); ?>
24
      </span>
25
    </div>
26
  </div>
27
</article>
28

Guarde o modelo no painel de administração: Ajax Load More → Repeater Templates, clique em «Add New». Atribua um nome significativo, por exemplo, «Elementor Grid 2 Columns».

Aspetos a ter em conta:

• As classes elementor-post, elementor-post__card e elementor-post__thumbnail são classes «nativas» do Elementor. Garantem que os posts carregados correspondem visualmente à grelha original.
• the_post_thumbnail('alm-thumbnail') utiliza o tamanho de miniatura registado pelo plugin Ajax Load More. Se o seu tema tiver um tamanho personalizado registado, substitua alm-thumbnail por esse.
• <?php the_ID(); ?> na classe <article> atribui a cada post um identificador único, útil para segmentação via CSS.

Importante: as classes podem diferir consoante a skin do widget Posts (Classic, Cards, Full Content). Retire as classes DO SEU PRÓPRIO markup em vez de copiar o código acima tal como está. Tudo deve corresponder, incluindo a ordem e o espaçamento.

Passo 2: Construir o shortcode do Ajax Load More

Aceda a Ajax Load More → Shortcode Builder. O construtor visual irá gerar um shortcode com base nos seus parâmetros:

• Post Type: post (ou o seu tipo de post personalizado).
• Posts per Page: quantos posts carregar por iteração. Para uma grelha de 2 a 3 colunas, utilize 4 a 6.
• Loading Style: Infinite Scroll (scroll infinito). Alternativas: botão «Load More», lazy load.
• Container Type: div.
• Transition: animação para novos posts: Fade, Slide ou None.

Um shortcode básico terá um aspeto semelhante a este:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  loading_style="infinite classic" 
3
  container_type="div" 
4
  scroll="true" 
5
  transition="fade"
6
  button_label="Loading..."]

Para integração com o Elementor, dois parâmetros adicionais são críticos: scroll_container e transition_container_classes. Eles «vinculam» o output do Ajax Load More à grelha CSS do Elementor:

1
[ajax_load_more post_type="post" posts_per_page="4" 
2
  scroll_container="elementor-grid-2" 
3
  transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
4
  loading_style="infinite classic"
5
  images_loaded="true"
6
  offset="2"]

Parâmetros-chave explicados:

• scroll_container="elementor-grid-2" é o contentor da grelha de duas colunas. Para três colunas, altere para elementor-grid-3; para quatro, utilize elementor-grid-4.
• transition_container_classes="..." inclui TODAS as classes CSS do contentor da grelha copiadas das DevTools. Sem elas, os posts carregados não herdarão os estilos do Elementor e serão exibidos como uma lista simples.
• images_loaded="true" aguarda que as imagens sejam totalmente carregadas antes de exibir um novo bloco. Isto elimina os saltos de layout durante o carregamento.
• offset="2" ignora os primeiros N posts. Isto é necessário se alguns posts já forem exibidos pelo widget padrão do Elementor (ver passo 4).

Passo 3: Wrapper HTML para o shortcode

O Ajax Load More requer que o shortcode esteja dentro de um contentor HTML que replique a estrutura da grelha do Elementor. Sem o wrapper, os estilos da grelha não serão aplicados e a magia não funcionará.

1
<div class="elementor-element-6ba59dc elementor-posts--skin-cards">
2
  <div class="elementor-posts-container elementor-posts elementor-grid elementor-has-item-ratio">
3
    [ajax_load_more post_type="post" posts_per_page="4" 
4
      scroll_container="elementor-grid-2"
5
      transition_container_classes="elementor-posts-container elementor-posts elementor-grid elementor-posts--skin-cards elementor-has-item-ratio"
6
      loading_style="infinite classic"
7
      images_loaded="true"
8
      offset="2"]
9
  </div>
10
</div>

A classe elementor-element-6ba59dc é o identificador único do SEU widget Posts. Encontre-a nas DevTools (começa sempre por elementor-element- e termina com um hash). Esta classe transporta todos os estilos aplicados ao widget no editor do Elementor: margens, sombras, raios de borda e cores dos cards.

Passo 4: Preservar os estilos CSS da grelha

Se simplesmente eliminar o widget Posts e deixar apenas o shortcode do Ajax Load More, todos os estilos gerados pelo Elementor desaparecerão do <head> da página. A grelha quebrar-se-á instantaneamente.

Uma abordagem funcional: deixe o widget Posts na página com um número mínimo de posts (2 a 3) e defina offset="2" no shortcode do Ajax Load More. Desta forma:

• O Elementor gera CSS para os dois primeiros posts, pelo que os estilos permanecem no corpo da página.
• O Ajax Load More carrega os restantes posts a partir do terceiro, com as mesmas classes e estilos.

Esta abordagem tem uma desvantagem: sempre que alterar QUALQUER definição no widget Posts no editor do Elementor, a classe única elementor-element-* é regenerada. Terá de a atualizar no wrapper HTML. Demora 30 segundos através das DevTools, mas não se pode esquecer de o fazer.

Passo 5: Colocar na página

Adicione o wrapper HTML com o shortcode utilizando o widget «Shortcode» ou «Text Editor» no Elementor; ambos aceitam HTML. Coloque o bloco onde o widget Posts estava ou estaria localizado.

Guarde a página e abra-a no frontend. Faça scroll até ao fundo. Os posts devem começar a carregar automaticamente assim que o scroll atingir o contentor.

Se não funcionar, aqui ficam três verificações rápidas:

• Consola do browser (F12 → Consola): erros vermelhos de JavaScript indicarão conflitos de plugins ou sintaxe de shortcode incorreta.
• Classe scroll_container: compare-a com a classe CSS real do contentor na página. Um único erro de carácter (por exemplo, um espaço em vez de um hífen) quebra o acionador de scroll.
• Ajax Load More → Settings: certifique-se de que o plugin está ativo e não é bloqueado por um plugin de caching (WP Rocket, W3 Total Cache). Os pedidos Ajax por vezes são armazenados em cache, pelo que deve adicionar /wp-admin/admin-ajax.php às exclusões.

⁉️🤔 Perguntas frequentes

Isto funciona com a versão gratuita do Elementor?

Sim. O Ajax Load More não depende do Elementor Pro. Apenas precisa da estrutura HTML da grelha, que a versão gratuita fornece. Copie as classes através das DevTools e construa o modelo; não são necessárias funcionalidades Pro.

É possível carregar tipos de conteúdo personalizados em vez de apenas artigos?

Sim. No shortcode, especifique post_type="your_cpt". O Ajax Load More funciona com qualquer tipo de conteúdo público: artigos padrão, páginas, produtos WooCommerce, itens de portefólio, entre outros. Cada tipo precisa do seu próprio Modelo de Repetidor.

Os artigos carregados têm um aspeto diferente da grelha original. O que está errado?

O problema está quase sempre em transition_container_classes: copiou classes incompletas ou cometeu um erro numa delas. Abra as DevTools, encontre o contentor da grelha original, copie a string completa da classe e cole-a no shortcode. O segundo problema mais comum: scroll_container aponta para o elemento errado.

Os add-ons Premium do Ajax Load More são necessários para uma configuração básica?

Para scroll infinito em artigos, não. A versão gratuita é suficiente. Os add-ons Premium (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) ampliam os cenários: scroll infinito dentro de artigos individuais, integração de filtros, paginação SEO com URLs únicos. Se o seu projeto crescer e precisar destas funcionalidades, explore o Pro Bundle.

Porque é que os estilos da grelha «desaparecem» dos artigos carregados após edições no Elementor?

Sempre que guarda o widget de Artigos, o Elementor regenera a classe única elementor-element-*. Encontre a nova classe nas DevTools e substitua-a no wrapper HTML do shortcode. Não há forma de automatizar isto de raiz; tem de o fazer manualmente. No entanto, demora apenas cerca de 30 segundos.

Deve esperar por scroll infinito nativo do Elementor?

Nos seis anos desde que os primeiros guias sobre este tópico foram publicados, o widget de Artigos integrado no Elementor ainda não recebeu scroll infinito, nem na versão gratuita nem na Pro. A paginação numerada continua a ser a única opção para arquivos e grelhas de artigos.

O Ajax Load More preenche esta lacuna por completo e vai além disso. O plugin é ativamente desenvolvido: tem mais de 200.000 instalações ativas no WordPress.org, atualizações regulares (a última há menos de um mês, à data em que escrevo) e mais de uma dúzia de add-ons para diferentes cenários. A versão gratuita trata do scroll infinito, de um botão «Carregar Mais», carregamento lazy e Modelos de Repetidor personalizados. Isto cobre a maioria dos projetos Elementor.

Se o Elementor gere a grelha de artigos no seu site e os seus visitantes precisam de scroll infinito, construa o Modelo de Repetidor seguindo as instruções acima. Meia hora para a configuração inicial e os artigos serão carregados sem atualizar a página.

🔗 Ajax Load More no WordPress.org