CodeCanyon Wiloke Categories List Avenue - Плагин WordPress

Руководство по настройке и применению CodeCanyon Wiloke Categories List Avenue

CodeCanyon Wiloke Categories List Avenue нужен не для очередного блока с последними записями, а для понятной навигации по рубрикам внутри страницы, собранной в Elementor. В этом руководстве разберём, как подойти к установке, где искать виджет после активации, какие данные подготовить в WordPress и как проверить, что посетитель действительно видит удобный вход в разделы сайта.

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

Ниже будет практический сценарий для блога или журнального сайта, где нужно вывести несколько рубрик как витрину: подготовка категорий, установка ZIP-архива, добавление виджета, выбор стиля карточек, проверка ссылок, диагностика проблем и осторожная доработка внешнего вида без правки файлов плагина.

Какую задачу решает виджет категорий в Elementor

Обычная страница рубрики WordPress автоматически собирает записи с одной категорией. Это полезно, но не всегда удобно как стартовая точка. Посетителю часто нужна не одна рубрика, а обзор нескольких направлений: новости, обзоры, инструкции, интервью, подборки, акции или разделы каталога. Именно здесь Wiloke Categories List Avenue закрывает задачу визуального входа в контент.

По данным карточки CodeCanyon и Envato Elements, плагин добавляет Elementor-виджет для вывода списка категорий, поддерживает карточки с названием, изображением и hover-эффектом, а также предлагает несколько стилей карточек. Это не полноценный конструктор архивов, не фильтр записей и не инструмент для сложных запросов. Его рабочая роль проще: дать читателю быстрый визуальный выбор категории и отправить его в нужный раздел.

Такой блок особенно полезен на страницах, где обычное меню слишком мелкое, а длинный список записей не помогает выбрать направление. Например, на главной странице блога можно показать 6-8 ключевых рубрик, на странице журнала - тематические каналы, на странице учебного проекта - уровни материалов, а на контентном сайте компании - направления экспертизы.

Что считается хорошим результатом

Правильно настроенный блок не должен быть просто красивой сеткой. Он должен отвечать на три вопроса посетителя: какие темы есть на сайте, куда нажать, чтобы перейти к нужной группе материалов, и почему именно эти рубрики вынесены на страницу. Если карточки не подписаны понятно, изображения случайные, а ссылки ведут в пустые архивы, виджет не решает свою задачу.

Для администратора хороший результат выглядит так: в Elementor есть редактируемый блок, количество карточек соответствует макету, изображения не расползаются на мобильных устройствах, hover-эффект не мешает чтению, а каждая карточка ведёт на рабочую страницу категории. Для редактора сайта результат проще: он добавляет новые записи в рубрику, и навигационная логика остаётся понятной без ручного обновления каждой страницы.

Где продукт может быть лишним

Если на сайте всего две рубрики или все страницы уже строятся через полноценные шаблоны архивов Elementor Pro, отдельный виджет категорий может оказаться избыточным. Он также не заменяет фильтр внутри списка записей: пользователь сначала выбирает категорию, а затем уже смотрит архив. Для сложных витрин с множеством пользовательских таксономий, сортировкой, фильтрами и метаданными лучше заранее проверить, хватает ли возможностей именно этого виджета.

Кому подойдёт CodeCanyon Wiloke Categories List Avenue, а кому лучше выбрать другой путь

CodeCanyon Wiloke Categories List Avenue хорошо вписывается в сайты, где контент уже аккуратно распределён по категориям и где Elementor используется как основной редактор посадочных страниц. На таких проектах виджет становится быстрым способом собрать визуальный каталог рубрик без разработки отдельного шаблона.

Основные пользователи - владелец сайта, контент-менеджер, вебмастер или дизайнер, который собирает страницу в Elementor и хочет управлять внешним видом через привычные вкладки виджета. Разработчику продукт может быть полезен как быстрый слой презентации, но не как замена кастомному коду, если нужны сложные запросы, нестандартные поля или особая логика доступа.

Другой путь лучше выбрать, если вам нужно выводить не категории, а сами записи с фильтрами, сортировкой, пагинацией и сложными условиями. В таком случае смотрите в сторону Post Grid, Loop Grid, Categories Widget с поддержкой пользовательских таксономий или отдельного решения для WooCommerce-категорий. Wiloke Categories List Avenue стоит рассматривать как визуальную навигацию по рубрикам, а не как универсальный движок каталога.

Есть и промежуточный вариант: оставить Wiloke Categories List Avenue как верхний навигационный слой, а ниже на той же странице поставить блок последних материалов из выбранных рубрик. Тогда карточки отвечают за выбор направления, а список записей показывает свежесть сайта. Главное - не смешивать роли в одном элементе и не ожидать от категорийного виджета того, что должен делать отдельный grid записей.

Что проверить перед установкой на WordPress-сайт

Перед установкой премиального ZIP-плагина важно не начинать с кнопки загрузки, а проверить окружение. Карточка CodeCanyon указывает совместимость с Elementor и Elementor Pro, а также старшие версии WordPress из периода публикации продукта. Это не значит, что плагин обязательно не работает на более свежих сборках, но означает, что проверку лучше проводить на тестовой копии сайта, особенно если у вас новая версия Elementor, сложная тема или включены агрессивные оптимизаторы.

Минимальная подготовка занимает меньше времени, чем восстановление сломанной страницы. Сначала убедитесь, что Elementor уже установлен и открывает редактор без ошибок. Затем проверьте, что категории WordPress существуют, не пустые и имеют человекочитаемые названия. Если карточки должны быть с изображениями, подготовьте изображения заранее: одинаковые пропорции, нормальное разрешение, понятные alt-тексты в медиатеке и отсутствие случайных стоковых картинок, которые не объясняют тему.

Проверка рубрик и контента

Зайдите в админ-панели WordPress в раздел Posts - Categories. Для каждой рубрики, которую планируете показывать на странице, проверьте название, ярлык, описание и наличие записей. Пустая рубрика может отображаться не так, как ожидается, особенно если виджет или тема скрывают элементы без контента.

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

Как выбрать рубрики для первого запуска

Не начинайте с полного списка. Возьмите 4-6 рубрик, которые чаще всего нужны посетителю, и проверьте их как отдельный набор. У каждой рубрики должен быть смысловой вес: она ведёт к группе материалов, а не просто существует в админ-панели. Если две рубрики отличаются только формулировкой, например "Советы" и "Полезное", лучше объединить их до настройки виджета. Карточки категорий быстро показывают слабые места структуры: непонятные названия, дубли и пустые архивы становятся заметными сразу.

Что делать с вложенными категориями

Если рубрики вложенные, заранее решите, показываете ли вы только верхний уровень или смешиваете родительские и дочерние категории. Смешанный список часто путает пользователя: рядом оказываются "WordPress", "Плагины", "SEO" и "Yoast", хотя это разные уровни навигации. Для стартового блока обычно лучше оставить родительские направления, а дочерние показывать уже внутри архивов или в отдельном блоке ниже.

Проверка Elementor и темы

Откройте любую черновую страницу через Edit with Elementor. Если панель виджетов долго крутится, не сохраняет изменения или показывает ошибки в консоли, сначала решите проблему с Elementor. Плагин Wiloke добавляет свой виджет в эту среду, поэтому неисправный редактор будет маскировать причину: будет непонятно, виноват новый виджет, тема, кеш или сам Elementor.

Безопасный порядок проверки: сначала Elementor на чистой странице, затем активация Wiloke Categories List Avenue, затем поиск виджета, затем добавление блока на тестовую страницу, и только после этого перенос на живую страницу.

Резервная копия и тестовая страница

Для коммерческого сайта используйте staging-копию или хотя бы черновую страницу без индексации. Виджет меняет только вывод на странице Elementor, но конфликт скриптов, CSS или кеша может повлиять на внешний вид. Если у вас включена минификация CSS/JS, отложенная загрузка или кеш элементов, временно держите их под контролем и очищайте после каждого теста.

Установка ZIP-архива и первичная проверка виджета

Wiloke Categories List Avenue распространяется как премиальный файл, поэтому типичный путь установки - загрузка ZIP-архива через админ-панель WordPress. Не распаковывайте архив перед загрузкой, если внутри уже находится установочный ZIP плагина. Если в полученном архиве лежит документация и отдельный файл плагина, сначала найдите именно установочный ZIP.

В админ-панели откройте Plugins - Add New Plugin - Upload Plugin, выберите архив и нажмите Install Now. После завершения установки активируйте плагин через Activate Plugin. Если WordPress сообщает, что в архиве не найден корректный плагин, почти всегда загружен не тот ZIP: например, общий пакет вместо внутреннего установочного файла.

Как понять, что установка прошла правильно

После активации создайте новую черновую страницу и откройте её в Elementor. В панели виджетов используйте поиск по словам Wiloke, Categories или List. У сторонних Elementor-дополнений виджеты могут попадать в отдельную категорию панели, потому что Elementor разрешает разработчикам группировать свои виджеты в собственных разделах.

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

Что делать, если виджет не найден

Проверьте, активирован ли сам Elementor. Затем откройте список плагинов и убедитесь, что Wiloke Categories List Avenue включён. Если редактор Elementor уже был открыт до активации, перезагрузите страницу редактора. При конфликте с другим дополнением к Elementor временно отключите похожие add-ons на тестовой копии и проверьте, появляется ли виджет в панели.

Не начинайте с переустановки WordPress и не меняйте тему без необходимости. Сначала сузьте проблему: виджет отсутствует только в одной странице или во всём редакторе, панель Elementor загружается полностью или зависает, есть ли ошибки JavaScript в консоли браузера, исчезают ли другие сторонние виджеты. Такой порядок экономит время и не ломает рабочий сайт.

Настройка карточек категорий после добавления на страницу

Главная настройка начинается не в списке плагинов, а внутри Elementor. Вы выбираете страницу, добавляете виджет, затем настраиваете источник категорий, количество карточек, стиль, визуальные параметры и адаптивность. Точные названия полей могут отличаться в зависимости от версии продукта, поэтому ориентируйтесь на логику вкладок Elementor: Content отвечает за данные, Style за внешний вид, Advanced за отступы, классы, адаптивность и дополнительные параметры.

Источник и состав карточек

Начните с выбора категорий. Если виджет предлагает импорт или выбор рубрик, добавляйте только те, которые помогают посетителю выбрать направление. Не выводите все категории подряд, если среди них есть служебные, временные или технические. Для главной страницы обычно лучше показать 4-8 сильных рубрик, а полный список оставить в меню, карте сайта или архиве.

У каждой карточки должны быть название, понятная ссылка и визуальный акцент. Карточка CodeCanyon описывает категорийную карточку как элемент с названием, featured image и hover-эффектом. На практике это означает, что изображение должно быть не просто фоном, а подсказкой. Для рубрики "Инструкции" подойдёт кадр с интерфейсом или рабочим процессом, для "Обзоры" - предметная иллюстрация, для "Новости" - редакционный визуал. Не используйте одно и то же изображение для разных рубрик.

Выбор одного из стилей карточек

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

Проверяйте стиль в трёх состояниях: обычный вид, наведение курсора и мобильная ширина. Если hover скрывает название, делает контраст слишком низким или требует точного движения мыши, для мобильных пользователей это будет слабым решением. В Elementor часть hover-настроек обычно можно смягчить через стиль, отступы, цвет наложения или типографику.

Количество карточек и сетка

Количество карточек должно совпадать с задачей страницы. Для первого экрана 3-4 карточки обычно читаются лучше, чем плотная сетка из 12 элементов. Для отдельной страницы "Все темы" можно вывести больше, но тогда важна группировка, равные изображения и понятная очередность. Если виджет позволяет менять число элементов в строке, настройте разные значения для desktop, tablet и mobile.

Практическое правило: карточки категорий должны помогать выбирать, а не заставлять посетителя сравнивать слишком много одинаковых плиток.

Настройка для главной страницы

На главной странице блок категорий обычно конкурирует с последними записями, подпиской, баннером и меню. Поэтому ему нужны ясные границы: короткий заголовок перед блоком, ограниченное число карточек и достаточный воздух между элементами. Если карточки стоят сразу после первого экрана, не делайте их слишком крупными. Пользователь должен увидеть выбор тем, но не потерять доступ к следующему смысловому блоку страницы.

Настройка для страницы раздела

На внутренней странице можно дать больше карточек и добавить поясняющий текст. Например, страница "База знаний" может показывать не только верхние рубрики, но и несколько прикладных направлений. В этом случае проверьте порядок чтения: сначала вводный абзац, затем карточки, затем объяснение, как искать материалы дальше. Если поставить сетку без контекста, посетитель может принять её за декоративную галерею.

Отступы, типографика и hover-эффект

После выбора стиля перейдите к типографике и расстояниям. Названия рубрик должны быть короче, чем заголовки статей, иначе карточки начнут прыгать по высоте. Если у вас длинные названия вроде "Подробные руководства для начинающих", лучше сократить их до "Руководства" и перенести пояснение в описание рубрики или текст рядом с блоком.

Hover-эффект должен подтверждать кликабельность, но не должен становиться главным событием страницы. Слишком яркий масштаб, резкое затемнение или медленная анимация могут мешать навигации. Умеренный эффект, лёгкое движение, контрастная подпись и стабильный размер изображения обычно дают более предсказуемый результат.

Как подготовить изображения рубрик и не сломать визуальную сетку

Изображения - самая частая причина, почему блок категорий выглядит хуже демо. В WordPress стандартные рубрики записей не всегда имеют собственное поле изображения. Сам продукт заявляет карточки с featured image, но открытая карточка не объясняет подробно, где именно виджет берёт изображение для категории в каждой конфигурации. Поэтому безопасный подход такой: сначала проверьте фактический интерфейс виджета и документацию из вашего пакета, затем выбирайте способ назначения изображений.

Если виджет сам даёт выбрать изображение для каждой карточки, используйте этот способ. Если он полагается на данные рубрики, проверьте, есть ли в вашей сборке поле изображения категории. Если такого поля нет, не ставьте случайный плагин без теста: некоторые решения для category featured image меняют изображения записей внутри категории, что может быть нежелательно. Сначала читайте описание и предупреждения конкретного дополнения.

Единые пропорции важнее максимального разрешения

Для сетки категорий лучше подготовить изображения одинаковой пропорции: например, 4:3 или 16:9. Если одна рубрика получает вертикальный портрет, другая горизонтальный баннер, а третья маленькую иконку, карточки начнут выглядеть разрозненно. Даже хороший стиль Wiloke Categories List Avenue не спасёт сетку, если исходные изображения не согласованы.

Перед загрузкой в медиатеку обрежьте изображения в графическом редакторе или используйте встроенный crop, если он доступен в вашем рабочем процессе. Важно не только качество, но и смысл: картинка должна объяснять тему рубрики. Для технического блога лучше использовать предметные изображения интерфейса, схемы, рабочего места или продукта, а не абстрактные фоны.

Alt-текст и SEO без искусственного переспама

Карточка категории - это навигационный элемент, поэтому alt-текст изображения должен быть понятным и коротким. Не нужно вставлять название продукта или ключевую фразу в каждый alt. Достаточно описать рубрику: "Раздел с инструкциями по WordPress", "Обзоры плагинов Elementor", "Новости сайта". Если изображение декоративное и текст рубрики уже рядом, можно оставить более нейтральное описание, но лучше избегать пустых или одинаковых alt на всех карточках.

С точки зрения SEO полезнее не набивать карточки ключами, а выстроить ясную архитектуру: рубрика имеет понятное название, архив открывается, URL стабилен, на странице есть вводный текст, а пользователь быстро доходит до нужного раздела. Виджет помогает поведенчески и навигационно, но сам по себе не гарантирует рост позиций.

Права редактора и ответственность за изображения

Если страницу редактирует не один администратор, заранее договоритесь, кто отвечает за карточки. Дизайнер может настроить сетку, но редактор будет менять рубрики, названия и изображения. Без правила легко получить ситуацию, где одна карточка ведёт в актуальный раздел, другая в архив с двумя старыми записями, а третья использует случайное изображение из медиатеки.

Для команды полезно зафиксировать простой стандарт: название рубрики до трёх слов, изображение в одной пропорции, архив не пустой, ссылка проверена после публикации. Это не бюрократия, а защита от постепенной деградации блока. Виджет категорий выглядит хорошо в день запуска, но его ценность сохраняется только если структура рубрик поддерживается редакционно.

Практический сценарий: витрина рубрик для блога или базы знаний

Разберём реалистичный пример. Есть WordPress-сайт с Elementor, на котором нужно создать блок "Выберите тему" на главной странице. В нём будут карточки рубрик: инструкции, обзоры, подборки, новости, вопросы и решения. Цель - не просто показать красивую сетку, а сократить путь посетителя от главной страницы до нужного архива.

Цель и подготовка

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

Шаги в Elementor

1. Откройте страницу в Elementor и добавьте отдельный контейнер или секцию для блока категорий.
2. Найдите виджет Wiloke Categories List Avenue через поиск панели виджетов.
3. Перетащите виджет в секцию и выберите нужные категории, если интерфейс даёт такой выбор.
4. Выберите стиль карточек, который не спорит с дизайном темы и не скрывает названия рубрик.
5. Настройте количество карточек в строке для desktop, tablet и mobile.
6. Проверьте отступы, цвет текста, контраст затемнения и состояние при наведении.
7. Сохраните страницу через Update и откройте её в режиме инкогнито.

После сохранения не ограничивайтесь предпросмотром Elementor. Предпросмотр может показывать страницу иначе, чем публичная часть сайта с кешем, минификацией и стилями темы. Откройте реальный URL, нажмите каждую карточку и проверьте, что переход ведёт не на пустую страницу, не на 404 и не на техническую рубрику.

Ожидаемый результат и нюанс

В хорошем результате блок выглядит как самостоятельная карта тем. Названия читаются без наведения, изображения одинаково обрезаны, карточки не расползаются, а на мобильной ширине остаётся один или два столбца с нормальными отступами. Если одна карточка выше остальных из-за длинного названия, сократите название рубрики или настройте типографику.

Главный нюанс - порядок категорий. Если виджет сортирует рубрики автоматически, порядок может не совпадать с редакционной логикой. Тогда используйте доступные настройки сортировки, если они есть в вашей версии, или показывайте только выбранные категории в нужной последовательности. Если такой настройки нет, не обещайте редактору ручной порядок без проверки.

Практичные идеи применения для разных типов страниц

Wiloke Categories List Avenue можно использовать шире, чем просто "вывести рубрики на главной". Но каждая идея должна опираться на реальную функцию продукта - карточки категорий в Elementor. Не стоит превращать виджет в фильтр, каталог товаров или навигацию по произвольным сущностям, если интерфейс вашей версии этого не подтверждает.

Навигационный блок на главной странице

Для блога или журнала это самый очевидный сценарий. Поставьте блок после вводного текста или после свежих материалов. Вынесите только стратегические рубрики, которые помогают понять структуру сайта. Результат проверяется просто: новый посетитель должен за несколько секунд понять, чем сайт полезен и куда нажать дальше.

Страница "Начните отсюда"

На обучающих сайтах рубрики можно превратить в дорожную карту: "Новичкам", "Настройка", "Ошибки", "Продвинутые приёмы", "Инструменты". В таком сценарии важно не количество записей, а логика движения. Карточки лучше сопровождать коротким абзацем до блока, чтобы объяснить, как выбирать раздел.

Внутренняя навигация в базе знаний

Если база знаний построена на обычных записях WordPress, категории могут играть роль разделов справки. Виджет помогает вывести их на отдельной странице без ручного списка ссылок. Проверяйте, чтобы архивы категорий были оформлены нормально: пользователь после клика должен увидеть не хаотичную ленту, а понятный список материалов.

Редакционная витрина для сезонных или тематических подборок

Если на сайте есть рубрики под кампании, направления или редакционные подборки, карточки можно использовать как временную витрину. Здесь важна дисциплина: после завершения кампании удалите или замените карточку, чтобы не вести посетителей в устаревший раздел. Сам виджет не решит задачу актуальности контента, это остаётся редакционной ответственностью.

Проверка результата на публичной части сайта

Проверка результата нужна не только после первой установки, но и после смены темы, обновления Elementor, включения кеша или изменения изображений рубрик. Виджет может выглядеть корректно в редакторе, но иначе на опубликованной странице. Это типичная ситуация для Elementor-сайтов, где участвуют стили темы, CSS-файлы Elementor, кеш плагина оптимизации и серверный кеш.

Чек проверки после сохранения

• Откройте опубликованную страницу в приватном окне браузера, чтобы не полагаться на админскую сессию.
• Проверьте, что каждая карточка кликабельна и ведёт на правильный архив категории.
• Сравните desktop, tablet и mobile режимы, а не только ширину монитора.
• Убедитесь, что названия рубрик читаются без наведения и не уходят за края карточек.
• Проверьте, что изображения не размыты, не сжаты неестественно и не меняют высоту сетки.
• После включения кеша очистите кеш сайта, кеш браузера и при необходимости regenerated CSS в Elementor.

Если блок находится на главной странице, добавьте ещё один тест: попросите человека, который не участвовал в настройке, объяснить, куда он нажал бы для поиска нужной темы. Если он не понимает разницу между рубриками, проблема не в плагине, а в структуре контента и названиях.

Проверка маршрута после клика

Самая частая недооценённая проверка - не внешний вид карточки, а то, что происходит после клика. Откройте каждую рубрику и посмотрите архив глазами посетителя. Есть ли заголовок, нормальная выдача записей, пагинация, изображение или хотя бы понятный список материалов? Если архив выглядит как сырая лента темы, карточка создаёт ожидание, которое страница после клика не выполняет.

Для важных рубрик стоит добавить вводный текст на архивной странице или настроить шаблон архива через тему/Elementor, если ваш рабочий процесс это предусматривает. Wiloke Categories List Avenue приводит пользователя к разделу, но качество следующего шага зависит от WordPress-архива и темы. Проверяйте весь маршрут, а не только первый экран с карточками.

Мини-проверка для редактора

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

Как оценить скорость и визуальную стабильность

Карточки с изображениями увеличивают вес страницы. Это нормально, если изображения оптимизированы и не загружаются в огромном исходном размере. Проверьте страницу через инструменты производительности браузера или привычный сервис анализа скорости. Смотрите не только общий балл, а конкретные признаки: большие изображения, скачки макета, блокирующие CSS/JS и задержка первого экрана.

Если виджет находится ниже первого экрана, не загружайте слишком тяжёлые изображения. Если он стоит в первом экране, убедитесь, что карточки не вызывают заметный скачок высоты при загрузке. Для этого нужны предсказуемые размеры изображений, стабильная сетка и умеренные hover-эффекты.

Безопасная доработка внешнего вида без правки файлов плагина

Узкие визуальные правки лучше делать через Elementor и тему, а не через изменение файлов Wiloke Categories List Avenue. Правка файлов плагина потеряется при обновлении и может сломать работу виджета. Безопасный путь - назначить собственный CSS-класс секции или виджету во вкладке Advanced и стилизовать только внешний контейнер.

Этот приём основан на обычной механике Elementor: во вкладке Advanced можно задавать CSS-классы, а CSS можно добавлять на уровне сайта, страницы или элемента, если ваша редакция Elementor и рабочий процесс это позволяют. Мы не используем внутренние классы Wiloke и не предполагаем скрытый API продукта.

Маленький CSS для стабильных изображений

Назначьте виджету или его внешней секции класс guide-category-gateway. Затем добавьте CSS в безопасное место: Appearance - Customize - Additional CSS, в style.css дочерней темы или в штатное поле Custom CSS Elementor Pro. Код ниже задаёт более предсказуемое поведение изображений внутри вашего блока, но не трогает файлы плагина.

.guide-category-gateway img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.guide-category-gateway a {
  text-decoration: none;
}

.guide-category-gateway a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

После добавления проверьте страницу на нескольких ширинах. Если изображения стали обрезаться слишком агрессивно, измените aspect-ratio на пропорцию ваших исходников или удалите правило. Откат простой: удалите CSS и очистите кеш. Не добавляйте более точные селекторы, пока не посмотрели HTML-разметку вашей версии виджета в инспекторе браузера.

Эта правка не исправляет пустые рубрики, неправильные ссылки или отсутствие изображений в данных категории. Она помогает только с визуальной стабильностью уже работающего блока.

Почему карточки категорий могут не работать и как искать причину

Проблемы с такими виджетами обычно возникают на стыке четырёх слоёв: данные WordPress, сам Elementor, стили темы и кеш. Не стоит начинать с переустановки плагина. Сначала определите симптом, затем отключайте гипотезы по одной.

Виджет не появляется в панели Elementor

Симптом: поиск по панели виджетов не находит Wiloke, Categories или похожее название. Возможная причина - плагин не активирован, Elementor не загружен корректно, сторонний add-on конфликтует с редактором или виджет зарегистрирован в отдельной группе, которую вы не раскрыли.

Проверьте список плагинов, перезагрузите редактор, откройте чистую страницу и временно отключите другие Elementor-дополнения на тестовой копии. Если Elementor сам рекомендует Safe Mode для диагностики редактора, используйте его осторожно и помните, что он помогает выявлять конфликты редактора, а не всегда объясняет проблему на публичной части сайта.

Карточки есть в редакторе, но не видны на сайте

Такой симптом часто связан с кешем, неактуальными CSS-файлами Elementor, оптимизацией CSS/JS или отличием между предпросмотром и опубликованной страницей. Сохраните страницу, очистите кеш сайта, откройте URL в приватном окне и при необходимости выполните очистку файлов Elementor через Elementor - Tools - Clear files & data.

Если проблема пропадает после отключения оптимизатора, возвращайте настройки по одной: минификация CSS, объединение JS, отложенная загрузка, удаление неиспользуемого CSS. Для виджета с hover-эффектами и изображениями слишком агрессивная оптимизация может нарушить стили или скрипты.

Изображения не отображаются или выглядят случайно

Причина может быть в источнике изображения. Проверьте, откуда ваша версия виджета берёт картинку: из настройки карточки, поля рубрики, featured image связанной записи или другого механизма. В открытой карточке продукта подтверждено наличие featured image в карточке, но не описан универсальный способ назначения изображения для всех сайтов. Поэтому фактическую логику нужно смотреть в интерфейсе вашей версии и документации из пакета.

Если используете отдельный плагин для изображений категорий, протестируйте его на копии сайта. Некоторые плагины работают только с метаданными рубрики, а некоторые могут массово менять изображения записей. Для существующего блога это критично.

Сетка ломается на мобильных устройствах

Проверьте настройки responsive в Elementor: количество колонок, отступы, размер шрифта, высоту изображения и поведение контейнера. Не пытайтесь решить всё CSS-хаками. Сначала настройте значения в интерфейсе виджета и секции, затем добавляйте небольшой CSS только там, где штатных настроек не хватает.

Что смотреть на мобильной ширине

На мобильной ширине проверьте не только число колонок. Название рубрики должно помещаться в две строки без наложения на изображение, расстояние между карточками должно быть достаточно большим для касания, а hover-зависимые элементы должны оставаться понятными без наведения. Если карточка раскрывает важный текст только при hover, мобильный пользователь может вообще не увидеть этот текст.

Hover-эффект мешает чтению

Если при наведении название исчезает, становится малоконтрастным или закрывается изображением, уменьшите интенсивность эффекта. Для мобильных устройств hover как взаимодействие не работает так же, как на desktop, поэтому важная информация должна быть видна в обычном состоянии карточки.

Карточка ведёт не туда или открывает пустой архив

Сначала проверьте саму рубрику в WordPress: ярлык, родительскую категорию, опубликованные записи и статус записей. Затем проверьте, не выбран ли в виджете старый элемент после переименования или удаления рубрики. Если архив пустой из-за того, что записи находятся в дочерних категориях, решите, должны ли записи получать также родительскую рубрику или структура категорий должна быть изменена.

Не исправляйте такую проблему через ручную ссылку на случайную страницу, если виджет предназначен для категорий. Это создаёт разрыв между данными WordPress и навигацией. Лучше привести структуру рубрик в порядок, чем маскировать проблему ссылками.

После обновления страницы блок выглядит иначе

Проверьте порядок изменений: обновлялся ли Elementor, тема, оптимизатор, сам виджет или WordPress. Если страница визуально изменилась после включения кеша, сначала очистите CSS-файлы и кеш. Если после обновления виджета изменилась разметка, проверьте свои пользовательские CSS-правила: возможно, они были слишком привязаны к внутренним классам.

Когда стоит использовать Wiloke Categories List Avenue на живом сайте

Wiloke Categories List Avenue будет удачным выбором, если вам нужен быстрый, визуально понятный вход в рубрики WordPress на странице Elementor. Он особенно полезен, когда сайт уже имеет нормальную категорийную структуру, а задача состоит в том, чтобы сделать её видимой для посетителя. Перед переносом на живую страницу проверьте совместимость, подготовьте изображения, настройте адаптивность и убедитесь, что каждая карточка ведёт в рабочий архив.

Не используйте продукт как замену полноценным фильтрам, шаблонам архивов или сложным запросам по пользовательским таксономиям, если ваша версия не подтверждает такие возможности. Сначала протестируйте на черновой странице, затем переносите в рабочий макет. Когда результат вас устраивает, можно перейти к скачиванию CodeCanyon Wiloke Categories List Avenue и проверить его на своём WordPress-сайте в безопасном сценарии.