💡 Как настроить infinite scroll в Elementor через Ajax Load More

• Установите бесплатный плагин Ajax Load More из репозитория WordPress.org и активируйте его.
• Скопируйте HTML-структуру одного поста из сетки Elementor через DevTools и соберите Repeater Template.
• В Shortcode Builder выберите Loading Style «Infinite Scroll» и укажите posts_per_page (4-6 для сетки в 2-3 колонки).
• Пропишите scroll_container и transition_container_classes с CSS-классами сетки Elementor, чтобы подгруженные посты унаследовали стили.
• Оберните шорткод в HTML-контейнер с уникальным классом виджета elementor-element-* и разместите блок на странице.
• Откройте страницу во фронтенде, пролистайте до низа и проверьте, что записи подгружаются при скролле без перезагрузки.

Что понадобится

Перед началом убедитесь, что на сайте установлены и активированы две вещи:

• Elementor (бесплатная версия или Pro), конструктор, в котором собрана сетка постов.
• Ajax Load More, бесплатный плагин для подгрузки контента через AJAX. Скачать с WordPress.org

Также держите под рукой официальную документацию и страницу с примерами вывода, там десятки готовых сниппетов под разные сценарии: от стандартных постов до WooCommerce и ACF.

Штатный виджет «Записи» в Elementor даёт только постраничную пагинацию, ни бесплатная, ни Pro-версия не умеют подгружать посты при скролле. Ajax Load More закрывает этот пробел: он добавляет infinite scroll, кнопку «Загрузить ещё» и lazy load, сохраняя при этом внешний вид сетки. Весь фокус в правильном Repeater Template, один раз собрали, и подгруженные посты визуально неотличимы от тех, что уже на странице.

Короткое видео выше, результат интеграции в действии: посты Elementor подгружаются бесшовно, без перезагрузки страницы и скачков вёрстки.

Шаг 1: Сборка Repeater Template под сетку Elementor

Самое важное, правильно перенести HTML-структуру одного поста из Elementor в шаблон Ajax Load More. Если шаблон не совпадает с реальной вёрсткой, подгруженные посты «рассыплются»: съедут отступы, пропадут карточки, сломается грид.

Откройте страницу с сеткой в браузере, нажмите F12 (DevTools), перейдите во вкладку Elements и найдите DOM-узел одного поста. Нужен ПОЛНЫЙ HTML одного элемента, от открывающего <article> или <div class="elementor-post"> до закрывающего тега.

Базовый шаблон для сетки Elementor (две колонки, скин Cards) выглядит так:

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
        Читать далее »
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

Сохраните шаблон в админке: Ajax Load More → Repeater Templates, кнопка «Add New». Назовите осмысленно, например, «Сетка Elementor 2 колонки».

На что обратить внимание:

• Классы elementor-post, elementor-post__card и elementor-post__thumbnail: это «родные» классы Elementor, они отвечают за визуальное совпадение подгруженных постов с исходной сеткой.
• the_post_thumbnail('alm-thumbnail') использует размер миниатюры, зарегистрированный плагином Ajax Load More. Если в вашей теме зарегистрирован кастомный размер, замените alm-thumbnail на него.
• <?php the_ID(); ?> в классе <article> даёт уникальный идентификатор каждому посту, пригодится для CSS-таргетинга.

Важно: классы могут отличаться в зависимости от скина виджета «Записи» (Classic, Cards, Full Content). Берите классы ИЗ СВОЕЙ вёрстки, а не копируйте приведённый код как есть. Совпадать должно всё, включая порядок и пробелы.

Шаг 2: Сборка шорткода Ajax Load More

Перейдите в Ajax Load More → Shortcode Builder. Визуальный конструктор соберёт шорткод под ваши параметры:

• Post Type, post (или ваш кастомный тип записей).
• Posts per Page, сколько постов подгружать за одну итерацию. Для сетки в 2-3 колонки ставьте 4-6.
• Loading Style, Infinite Scroll (бесконечная прокрутка). Альтернативы: кнопка «Load More», lazy load.
• Container Type, div.
• Transition, анимация появления новых постов: Fade, Slide или None.

Базовый шорткод будет выглядеть примерно так:

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="Загрузка..."]

Для интеграции с Elementor критичны два дополнительных параметра, scroll_container и transition_container_classes. Они «привязывают» вывод Ajax Load More к CSS-сетке 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"]

Разбор ключевых параметров:

• scroll_container="elementor-grid-2", контейнер сетки в две колонки. Для трёх колонок замените на elementor-grid-3, для четырёх, на elementor-grid-4.
• transition_container_classes="...", ВСЕ CSS-классы контейнера сетки, скопированные из DevTools. Без них подгруженные посты не унаследуют стили Elementor и отобразятся голым списком.
• images_loaded="true", ждёт полной загрузки изображений перед показом нового блока. Убирает скачки вёрстки при подгрузке.
• offset="2", пропускает первые N постов. Нужно, если часть постов уже выведена штатным виджетом Elementor (см. шаг 4).

Шаг 3: HTML-обёртка шорткода

Ajax Load More требует, чтобы шорткод находился внутри HTML-контейнера, повторяющего структуру сетки Elementor. Без обёртки стили сетки не подхватятся и магия не сработает.

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>

Класс elementor-element-6ba59dc, уникальный идентификатор ВАШЕГО виджета «Записи». Найдите его в DevTools (он всегда начинается с elementor-element- и заканчивается хешем). Именно этот класс «тащит» за собой все стили, применённые к виджету в редакторе Elementor: отступы, тени, радиусы, цвета карточек.

Шаг 4: Сохранение CSS-стилей сетки

Если просто удалить виджет «Записи» и оставить только шорткод Ajax Load More, все стили, сгенерированные Elementor, исчезнут из <head> страницы. Сетка сломается моментально.

Рабочий приём: оставьте виджет «Записи» на странице с минимальным количеством постов (2-3 штуки), а в шорткоде Ajax Load More укажите offset="2". Тогда:

• Elementor генерирует CSS для первых двух постов, стили остаются в теле страницы.
• Ajax Load More подхватывает оставшиеся посты, начиная с третьего, с теми же классами и стилями.

У этого подхода один минус: при ЛЮБОМ изменении настроек виджета «Записи» в редакторе Elementor уникальный класс elementor-element-* перегенерируется заново. Его нужно обновить в HTML-обёртке, 30 секунд через DevTools, но забывать об этом нельзя.

Шаг 5: Размещение на странице

Добавьте HTML-обёртку с шорткодом через виджет «Shortcode» или «Текст» (Text Editor) в Elementor, оба принимают HTML. Разместите блок там же, где был или мог бы быть виджет «Записи».

Сохраните страницу и откройте её во фронтенде. Пролистайте до низа, посты должны начать подгружаться автоматически, как только скролл достигнет контейнера.

Если не работает, три быстрые проверки:

• Консоль браузера (F12 → Console): красные ошибки JavaScript укажут на конфликт плагинов или битый синтаксис шорткода.
• Класс scroll_container: сверьте его с реальным CSS-классом контейнера на странице. Ошибка даже в одном символе (например, пробел вместо дефиса) ломает триггер скролла.
• Ajax Load More → Settings: убедитесь, что плагин активен и не заблокирован кеширующим плагином (WP Rocket, W3 Total Cache). Ajax-запросы иногда попадают в кеш, добавьте /wp-admin/admin-ajax.php в исключения.

⁉️🤔 Частые вопросы

Работает ли это с бесплатной версией Elementor?

Да. Ajax Load More не зависит от Elementor Pro. Ему нужна только HTML-структура сетки, которую отдаёт и бесплатная версия. Копируете классы через DevTools и собираете шаблон, Pro-функции не требуются.

Можно ли подгружать кастомные типы записей, а не только посты?

Можно. В шорткоде укажите post_type="your_cpt". Ajax Load More работает с любыми публичными типами записей: стандартными постами, страницами, товарами WooCommerce, элементами портфолио и так далее. Для каждого типа собирается свой Repeater Template.

Подгруженные посты выглядят иначе, чем исходная сетка. Где ошибка?

Проблема почти всегда в transition_container_classes: вы скопировали не все классы или ошиблись в одном из них. Откройте DevTools, найдите контейнер оригинальной сетки, скопируйте строку классов полностью и вставьте в шорткод. Второй по частоте источник: scroll_container указывает на неверный элемент.

Нужны ли Premium-аддоны Ajax Load More для базового сценария?

Для infinite scroll на постах, нет, бесплатной версии достаточно. Premium-аддоны (Elementor Widget Connector, Single Posts, WooCommerce, SEO, Filters) расширяют сценарии: бесконечная прокрутка внутри одиночных записей, интеграция с фильтрами, SEO-пагинация с уникальными URL. Если проект растёт и нужны эти возможности, посмотрите в сторону Pro Bundle.

Почему после правок в Elementor стили сетки «слетают» с подгруженных постов?

При каждом сохранении виджета «Записи» Elementor перегенерирует уникальный класс elementor-element-*. Найдите новый класс в DevTools и замените его в HTML-обёртке шорткода. Автоматизировать это «из коробки» нельзя, только руками, но это полминуты работы.

Стоит ли ждать нативный infinite scroll от Elementor?

Штатный виджет «Записи» в Elementor за шесть лет с момента выхода первых руководств по этой теме так и не получил бесконечную прокрутку, ни в бесплатной, ни в Pro-версии. Постраничная пагинация остаётся единственным вариантом для архивов и сеток постов.

Ajax Load More закрывает этот пробел полностью и с запасом. Плагин активно развивается: на WordPress.org у него 200 000+ активных установок, регулярные обновления (последнее, меньше месяца назад на момент написания) и полтора десятка аддонов под разные сценарии. Бесплатная версия тянет infinite scroll, кнопку «Загрузить ещё», lazy load и кастомные Repeater Templates, этого хватает для большинства проектов на Elementor.

Если на вашем сайте Elementor формирует сетку постов, а посетителям нужна бесконечная прокрутка, собирайте Repeater Template по инструкции выше. Полчаса на первую настройку, и посты подгружаются без перезагрузки страницы.

🔗 Ajax Load More на WordPress.org