Якщо на сайті потрібно показувати картки записів, товарів, кейсів або іншого типу контенту, не обов’язково створювати окремий дизайн для кожного елемента. У Elementor для цього можна використати Loop Grid і один шаблон Loop Item, який автоматично підставляє дані поточного запису.
Такий підхід допомагає підтримувати єдиний стиль, швидше вносити зміни й не дублювати однакову структуру в різних шаблонах. Водночас універсальна картка потребує правильної підготовки контенту: однакової логіки полів, коректних зображень, зрозумілих посилань і запасного варіанта для порожніх значень.
Що таке Loop Grid і коли він потрібен
Loop Grid — це віджет Elementor для виведення повторюваних елементів у вигляді сітки. Він використовує окремий шаблон Loop Item: ви один раз створюєте дизайн картки, а потім Elementor застосовує його до всіх записів, які повернув запит.
У картці можна показати заголовок, зображення, уривок, автора, категорію, ціну, дату та інші динамічні дані. Вміст змінюється залежно від поточного запису, але структура й візуальний стиль залишаються спільними.
Loop Grid особливо корисний для блогів, каталогів WooCommerce, портфоліо, сторінок кейсів, вакансій, нерухомості та власних типів записів. Якщо різні типи контенту мають повністю різні поля й логіку взаємодії, один шаблон може бути недоцільним. У такому випадку краще створити кілька Loop Item або окремі шаблони.
- один дизайн для всіх карток;
- редагування структури в одному місці;
- менше дублювання елементів і стилів;
- зручніше налаштовувати адаптивність;
- можливість використовувати картки для різних запитів.
Підготовка контенту перед створенням картки
Перед налаштуванням Loop Grid визначте, які дані повинна показувати картка. Наприклад, для запису блогу це можуть бути зображення, заголовок, дата, категорія та короткий опис. Для товару — фото, назва, ціна, рейтинг і кнопка переходу. Для кейсу — обкладинка, клієнт, галузь і посилання на детальну сторінку.
Важливо, щоб потрібні поля були заповнені в усіх або більшості записів. Якщо в одному товарі є підзаголовок, а в іншому це поле порожнє, заздалегідь вирішіть, що має відбуватися: елемент приховується, підставляється стандартний текст або залишається порожній простір.
Для WooCommerce перевірте, чи товари мають зображення, ціну, статус публікації та доступну сторінку товару. Для власного типу записів переконайтеся, що поля зареєстровані й доступні для динамічного виведення в Elementor або через сумісне розширення.
- визначте мінімальний набір полів картки;
- використовуйте однаковий формат зображень і заголовків;
- перевірте, чи всі записи мають URL;
- заздалегідь продумайте поведінку порожніх полів;
- не додавайте в картку поля, які не потрібні користувачу для вибору або переходу.
Як створити шаблон Loop Item
Спочатку створіть шаблон елемента циклу в Elementor і побудуйте в ньому структуру однієї картки. Зазвичай зручно почати з контейнера, який відповідає за фон, внутрішні відступи, межі та заокруглення. Усередині розмістіть зображення, текстовий блок і кнопку.
Для заголовка використайте віджет Heading і підключіть динамічний тег заголовка запису. Тоді кожна картка автоматично отримає назву поточного поста, товару або кейсу. Не вписуйте заголовок вручну, інакше всі елементи сітки матимуть однаковий текст.
Зображення підключіть через Featured Image. Для товарів це зазвичай головне зображення продукту, для записів — мініатюра, а для кейсів — обкладинка. Встановіть зрозумілий розмір і співвідношення сторін, щоб довгі та короткі зображення не ламали висоту карток.
Опис, автора, категорію, дату або інше поле також підключайте через Dynamic Tags. Для стандартних полів Elementor зазвичай пропонує відповідні динамічні джерела. Дані з додаткових полів можуть потребувати сумісного плагіна або окремого віджета.
- Heading — для динамічного заголовка;
- Featured Image — для головного зображення;
- Post Excerpt або інше динамічне поле — для короткого опису;
- ціна, категорія чи автор — через відповідне динамічне джерело;
- Post URL або Product URL — для посилання на кнопку.
Як налаштувати кнопку
Кнопка повинна вести на сторінку поточного елемента, а не на одну статичну адресу. Для записів використовуйте URL поточного поста, а для товарів — URL товару. Так кожна картка матиме власне коректне посилання.
Перевірте також доступність посилання для всієї картки. Якщо клікабельною є лише кнопка, її текст має бути зрозумілим: «Переглянути кейс», «Детальніше» або «До товару». Не варто дублювати кілька однакових посилань без потреби, особливо якщо це погіршує навігацію з клавіатури.
- не залишайте тестову або статичну URL-адресу;
- перевірте посилання на опублікованих і чернеткових записах;
- для зовнішніх посилань окремо визначте поведінку відкриття сторінки.
Налаштування Loop Grid і запиту
Після створення Loop Item додайте Loop Grid на потрібну сторінку й виберіть створений шаблон картки. Далі налаштуйте запит, який визначає, які записи мають відображатися. Залежно від структури сайту це можуть бути записи блогу, товари WooCommerce або власний тип записів.
Для блогу можна обмежити вибір категорією, тегом, автором або іншими доступними параметрами запиту. Для каталогу товарів важливо врахувати категорії, статус публікації, видимість і порядок сортування. Для власного типу записів перевірте, що потрібний тип доступний у виборі джерела.
Не змішуйте в одному запиті контент із різними правилами відображення без необхідності. Наприклад, картка товару може містити ціну, а звичайний запис її не має. Якщо один шаблон використовується для різних типів контенту, кожне поле повинно мати зрозумілий запасний варіант або умову відображення.
- виберіть правильний тип контенту;
- за потреби додайте фільтри за категоріями або таксономіями;
- визначте кількість колонок для великих і малих екранів;
- налаштуйте порядок сортування та пагінацію, якщо сітка довга;
- перевірте, що в результат потрапляють лише опубліковані записи.
Порожні поля, fallback і різна довжина контенту
Найчастіша проблема універсальних карток — порожні динамічні поля. Якщо в частини записів немає ціни, підзаголовка або категорії, картка може мати зайві відступи, незрозумілий текст або нерівну висоту.
Для необов’язкових даних використовуйте fallback, якщо відповідний динамічний тег це підтримує. Наприклад, замість порожнього підзаголовка можна показати нейтральний текст або приховати весь рядок. Для ціни краще не виводити вигадане значення: якщо товар безкоштовний, ціна формується за спеціальним правилом, а якщо її ще не встановлено — користувач має це зрозуміти.
Також протестуйте довгі заголовки й описи. Обмежте кількість рядків лише тоді, коли це не приховує важливу інформацію, і переконайтеся, що кнопки в картках вирівняні передбачувано.
- не залишайте підписи без значення, наприклад «Ціна:» без ціни;
- для відсутнього зображення використовуйте коректне запасне зображення;
- перевірте картку з коротким і дуже довгим заголовком;
- переконайтеся, що відсутність поля не створює порожнього великого блоку;
- не використовуйте fallback, який може ввести користувача в оману.
Адаптивність, доступність і продуктивність
Loop Grid спрощує адаптивність, але не налаштовує її повністю автоматично. Перевірте кількість колонок, проміжки, розмір зображень, заголовків і кнопок на широкому екрані, планшеті та смартфоні. Картки не повинні ставати надто вузькими або змушувати користувача горизонтально прокручувати сторінку.
Для зображень задайте зрозумілий альтернативний текст. Якщо він береться з медіафайлу, перевірте його в бібліотеці WordPress. Декоративні зображення не повинні дублювати текст заголовка в альтернативному описі.
Не завантажуйте в сітку значно більше елементів, ніж потрібно на першому екрані. Використовуйте пагінацію або інший підхід, якщо сторінка містить великий каталог. Оптимізуйте зображення та не додавайте до кожної картки надмірну кількість важких віджетів і ефектів.
- перевірте сітку на реальних мобільних пристроях;
- забезпечте достатній контраст тексту та кнопок;
- збережіть логічний порядок заголовка, опису й посилання;
- не покладайтеся лише на колір для позначення категорії або статусу;
- перевірте швидкість завантаження сторінки після додавання великої кількості зображень.
Типові помилки під час роботи з Loop Grid
Помилка зі статичними даними трапляється, коли в шаблоні випадково залишається вручну введена назва, ціна або URL. У результаті всі картки показують однакове значення. Перевірте кожен текстовий елемент і переконайтеся, що там використовується динамічне джерело.
Інша поширена проблема — неправильний тип запиту. Якщо сітка порожня, перевірте, чи є опубліковані записи, чи вибрано правильний тип контенту, чи не встановлено надто вузькі фільтри. Також варто перевірити права доступу та видимість товарів.
Після редагування Loop Item перегляньте кілька різних записів, а не лише першу картку. Це допоможе виявити проблеми з довгими заголовками, відсутніми зображеннями, різними форматами цін і нестандартними значеннями полів.
- усі картки мають однаковий статичний заголовок;
- кнопки ведуть на одну й ту саму сторінку;
- ціна або категорія не виводиться через неправильне поле;
- картки мають різну висоту через необмежений текст;
- після зміни шаблону не перевірено мобільну версію.
Поширені запитання
Чи можна використовувати один Loop Item для товарів і записів блогу?
Технічно це можливо, якщо обидва типи контенту мають сумісні поля та однакову логіку картки. Якщо ціна, рейтинг або інші поля є лише в товарах, краще використати умовне відображення, fallback або окремі шаблони.
Чому Loop Grid не показує записи?
Перевірте вибраний тип запиту, статус публікації, фільтри, категорії та кількість доступних записів. Якщо використовується власний тип записів, він має бути доступним для вибору й містити опубліковані елементи.
Як вивести ціну товару в картці?
Для WooCommerce використовуйте динамічне джерело або віджет, сумісний із ціною товару. Перевірте відображення звичайної, розпродажної та відсутньої ціни, оскільки ці сценарії можуть мати різний вигляд.
Чи потрібно створювати окрему картку для кожної категорії?
Зазвичай ні. Один Loop Item можна використовувати для різних категорій, а самі записи відбирати через налаштування запиту. Окремі шаблони потрібні лише тоді, коли категорії мають істотно різну структуру або набір полів.
Висновок
Loop Grid дає змогу побудувати масштабовану систему карток у Elementor: один шаблон відповідає за дизайн, а динамічні поля — за конкретний вміст кожного запису. Це зменшує дублювання та спрощує подальше редагування сайту.
Щоб рішення працювало стабільно, підготуйте контент, правильно налаштуйте запит, прив’яжіть заголовки, зображення й посилання до динамічних даних, а потім перевірте порожні поля, довгі тексти, адаптивність і доступність на реальних прикладах.