💡 Як налаштувати 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», ліниве завантаження.
• 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