Если на сайте нужно выводить карточки записей, товаров, кейсов или другого типа контента, необязательно создавать отдельный дизайн для каждого элемента. В 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: один шаблон отвечает за дизайн, а динамические поля — за конкретное содержимое каждой записи. Это уменьшает дублирование и упрощает дальнейшее редактирование сайта.
Чтобы решение работало стабильно, подготовьте контент, правильно настройте запрос, привяжите заголовки, изображения и ссылки к динамическим данным, а затем проверьте пустые поля, длинный текст, адаптивность и доступность на реальных примерах.