JoomLead Gantry 5 Particles Pro - Плагин WordPress

Руководство по настройке и применению JoomLead Gantry 5 Particles Pro в WordPress

JoomLead Gantry 5 Particles Pro стоит воспринимать не как обычный плагин, который добавляет один блок в редактор WordPress, а как набор готовых частиц и атомов для сайтов на Gantry 5. В этом руководстве разберём, как безопасно подготовить сайт, подключить пакет к Gantry-теме, включить нужные зависимости, вывести частицы через Layout Manager или виджеты, проверить результат на странице и быстро найти причину, если блок не появился или выглядит не так, как ожидалось.

Материал рассчитан на владельца сайта, вебмастера или разработчика, который уже использует Gantry 5 Framework и хочет расширить WordPress-сайт готовыми секциями: карточками преимуществ, аккордеонами, галереями, слайдерами, кнопками, навигационными блоками, списками записей, информационными панелями и похожими элементами. Если вы только выбираете стек для нового сайта, отдельные разделы помогут понять, когда этот подход удобен, а когда проще взять визуальный конструктор или нативные блоки WordPress.

Главный акцент - практический: где находятся настройки, почему важен Uikit 3 atom, как не потерять изменения при обновлении темы, как работать с коллекциями внутри частиц, как связать настройку с реальным результатом на сайте и какие проверки делать после каждого изменения.

Что это за пакет и почему он зависит от Gantry 5

В официальных материалах JoomLead частицы описаны как элементы для Gantry 5, доступные для WordPress, Joomla и Grav. Для WordPress это означает важное ограничение: пакет не работает сам по себе в любой теме. Ему нужен установленный и активированный Gantry 5 Framework, а также тема, построенная на Gantry. Именно тема даёт административный интерфейс Gantry, Layout Manager, outlines, позиции виджетов и механизм компиляции стилей.

Частица в Gantry - это настраиваемый блок, который выводится в макете темы. В стандартной логике WordPress похожую роль могут играть виджеты, блоки или секции конструктора, но у Gantry своя модель: пользователь открывает админ-интерфейс темы, выбирает outline, размещает частицу в нужной секции и задаёт параметры через форму. JoomLead Gantry 5 Particles Pro расширяет именно эту модель: добавляет набор готовых частиц и атомов, а не заменяет редактор записей WordPress.

Три типа элементов, которые важно различать

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

• Standard Particle - видимый блок на странице: карточка, список, галерея, слайдер, аккордеон, кнопка, таблица, блок контактов или похожий элемент.
• Position Particle - контейнер для контента WordPress, например область виджетов. В Gantry для WordPress это связано с Widget Position.
• Atom - невидимый элемент, который подключает скрипты, стили или служебную логику. Для JoomLead особенно важен Uikit 3 atom, потому что многие частицы используют UIkit-компоненты.

Эта схема влияет на порядок настройки. Если вы добавили красивую частицу, но не включили нужный atom, разметка может появиться без ожидаемой интерактивности или стилей. Если вы вывели позицию, но не назначили в неё виджет, место в макете будет пустым. Если изменили Particle Defaults вместо конкретного экземпляра в Layout Manager, результат может примениться не там, где вы ждёте.

Кому пакет подходит, а кому лучше выбрать другой путь

JoomLead Gantry 5 Particles Pro хорошо подходит сайтам, где уже есть Gantry-тема и нужно быстро собирать повторяемые секции без ручного HTML: блоки услуг, преимущества, карточки команды, слайдеры, подборки записей, галереи, навигационные элементы, контактные блоки и страницы с несколькими секциями. Он также удобен агентствам, которые поддерживают несколько Gantry-сайтов и хотят хранить дизайн-логику внутри темы.

Пакет может не подойти, если сайт построен на классической теме без Gantry, если вся работа ведётся в Site Editor или Gutenberg-блоках, если нужен визуальный редактор с живым редактированием прямо на странице, или если команда не хочет поддерживать Twig, YAML, SCSS и структуру папки темы. В таком случае внедрение Gantry только ради одного набора частиц может оказаться слишком тяжёлым решением.

Практическое правило: если ваш сайт уже управляется через Gantry Layout Manager, JoomLead Particles расширяет текущий рабочий процесс. Если сайт живёт в обычной блочной теме WordPress, сначала оцените цену перехода на Gantry-тему.

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

Подготовка нужна не для формальности. Частицы JoomLead затрагивают тему, папку custom, стили, скрипты и иногда demo-пакеты. Неправильная установка может не удалить данные WordPress, но легко создать ситуацию, где блоки не видны, стили не компилируются, а изменения исчезают после обновления темы.

Gantry Framework и активная Gantry-тема

На WordPress-сайте должен быть установлен Gantry 5 Framework plugin. Официальная страница WordPress.org описывает Gantry как фреймворк, который работает в фоне и предоставляет функциональность Gantry-темам. Это важная формулировка: настройки находятся не в отдельной странице плагина JoomLead, а в интерфейсе Gantry-темы. Поэтому перед копированием частиц проверьте две вещи:

• В Plugins установлен и активен Gantry 5 Framework.
• В Appearance активна тема, построенная на Gantry 5, например Hydrogen или коммерческая Gantry-тема.
• В админ-панели доступен интерфейс темы с Layout Manager, Page Settings, Particle Defaults и outlines.

Если Gantry-тема не активна, частицы JoomLead некуда выводить. Если активна обычная тема, WordPress не получит Layout Manager и не начнёт автоматически понимать YAML/Twig-файлы частиц.

Резервная копия папки custom

Официальная документация JoomLead перед обновлением советует копировать папку THEMENAME/custom. Этот совет стоит применять и перед первой установкой частиц в существующую тему. В этой папке обычно лежат переопределения, пользовательские частицы, SCSS, CSS, JavaScript и другие изменения, которые не должны перезаписываться обновлениями темы.

Для рабочего сайта лучше делать установку сначала на копии или staging-окружении. Минимальный безопасный набор перед началом: свежий бэкап базы данных, копия wp-content/themes/THEMENAME/custom, понимание, какой outline отвечает за страницу, и доступ к журналу ошибок хостинга. Staging здесь не модное слово, а способ не проверять новые скрипты и стили на живой аудитории.

Выбор способа установки

У JoomLead описано несколько вариантов: готовая тема Hydrogen с уже добавленными частицами, demo/quickstart-пакет и копирование частиц в существующую тему. Для WordPress-сайта с уже настроенным контентом обычно безопаснее третий путь - копировать только нужные файлы в папку custom, а не ставить demo-пакет поверх сайта.

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

Установка и первый запуск без потери изменений

В общих чертах установка сводится к тому, чтобы распаковать пакет JoomLead, перенести файлы частиц в пользовательскую область темы и затем включить нужные стили и атомы. Не нужно править ядро WordPress, не нужно менять файлы Gantry Framework и не нужно записывать изменения в папки, которые перезатираются при обновлении темы.

Куда копировать файлы частиц

Документация JoomLead и Gantry объясняет структуру частицы одинаково: у неё есть YAML-файл с описанием полей, Twig-шаблон для вывода, SCSS/CSS для внешнего вида и иногда JavaScript. Для существующей Gantry-темы рабочая логика такая:

1. Распакуйте пакет с частицами на локальном компьютере.
2. Найдите нужную частицу в папке particles и проверьте, какие сопутствующие CSS, JS или SCSS-файлы ей требуются.
3. Скопируйте particle_name.html.twig и particle_name.yaml в THEMENAME/custom/particles.
4. Скопируйте нужные JS-файлы в THEMENAME/custom/js, а CSS-файлы в THEMENAME/custom/css, если они указаны в документации конкретной частицы.
5. Скопируйте общий SCSS-файл JoomLead в THEMENAME/custom/scss, если он требуется выбранной частице.
6. Проверьте custom.scss и добавьте импорт нужного SCSS, если документация частицы требует отдельного импорта.

Не переносите всё подряд, если вам нужен один блок. С версии, где JoomLead добавил описание структуры файлов для частиц, удобнее смотреть документацию конкретного элемента и копировать только нужный набор. Это снижает риск конфликтов и упрощает обновление.

Почему папка custom важнее прямого редактирования темы

Gantry использует папку custom как место для пользовательских переопределений. Если положить частицу туда, обновление основной темы с меньшей вероятностью уничтожит вашу работу. Если править исходные файлы темы напрямую, при следующем обновлении вы рискуете потерять Twig, YAML, стили или локальные изменения.

Этот же принцип касается CSS. Официальная документация Gantry рекомендует размещать пользовательские стили в THEME_DIR/custom/scss/custom.scss, а не редактировать скомпилированные файлы custom.css или css-compiled/custom.css. Скомпилированные файлы могут быть пересобраны автоматически, и ручные правки в них исчезнут.

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

После переноса файлов откройте админ-панель Gantry-темы и нужный outline. Если частица появилась в левом списке Layout Manager, базовая структура распознана. Если её нет, сначала проверяйте путь и имена файлов, а не публичную часть сайта. Gantry не сможет вывести блок, который ещё не видит в библиотеке частиц.

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

Uikit 3 atom, SCSS и общая цепочка ресурсов

Большая часть практических проблем с JoomLead Particles возникает не из-за самой формы настроек, а из-за ресурсов, от которых зависит визуальный результат. В документации JoomLead прямо указано, что частицы и атомы построены на UIkit 3, а после установки или копирования частиц нужно проверить и включить Uikit 3 for Gantry 5 atom. Для WordPress-сайта это означает: красивый интерфейсный блок может не выглядеть правильно, если нужный atom отключён или стили не скомпилированы.

Что проверить в Page Settings

Для атомов Gantry используется Page Settings. В типовом сценарии вы открываете нужный outline, переходите в Page Settings и ищете область atoms. Там нужно включить Uikit 3 for Gantry 5, если частица требует UIkit-компоненты. В RU-руководстве лучше не переводить точные названия таких пунктов, потому что они совпадают с интерфейсом продукта и документацией.

После включения atom сохраните настройки и обновите страницу с частицей. Если до этого блок был размечен, но интерактивность не работала, например аккордеон не раскрывался или слайдер не двигался, это первая проверка. Если ничего не изменилось, переходите к проверке путей JS/CSS и консоли браузера.

SCSS, Production Mode и Recompile CSS

Gantry может автоматически компилировать SCSS или требовать ручной пересборки в зависимости от Production Mode. В режиме разработки изменения могут подхватываться быстрее, а в production-сценарии часто нужно открыть Gantry Administrator, перейти к стилям и нажать Recompile CSS для нужных outlines. Если вы добавили custom.scss или импорт JoomLead SCSS, но публичная часть не поменялась, пересборка CSS - один из первых пунктов диагностики.

Не пытайтесь решить проблему правкой скомпилированного custom.css. Это быстрый путь к путанице: сегодня исправление видно, завтра Gantry пересобрал стили и оно исчезло. Правильный источник пользовательского CSS - custom.scss в папке custom/scss.

Когда не нужно включать всё сразу

Если пакет содержит много частиц, не обязательно включать все эффекты, анимации, параллакс и скрипты на каждой странице. Чем больше интерактивных элементов вы добавляете, тем важнее проверять вес страницы, конфликт с кешированием и поведение на мобильных устройствах. Включайте только то, что нужно конкретному разделу: аккордеон для FAQ, галерею для портфолио, Feature Box для преимуществ, Post List для подборки записей.

Мини-итог: после установки JoomLead Gantry 5 Particles Pro проверьте три слоя: файлы частицы в custom, включённый Uikit 3 atom, пересобранные стили. Только после этого имеет смысл искать конфликт с темой, кешем или сторонними плагинами.

Layout Manager и коллекции: как собрать секцию без ручного HTML

Главный рабочий экран для большинства задач - Layout Manager. Именно там вы выбираете outline, находите частицу в левом списке, перетаскиваете её в секцию и задаёте параметры. Это отличается от привычного редактирования записи в WordPress: вы работаете не с контентом поста, а с макетом темы и блоками, которые могут применяться к одной странице, группе страниц или базовому outline.

Размещение частицы в макете

В Layout Manager частицы отображаются в панели слева. Документация Gantry указывает, что список можно фильтровать через поле поиска, а выбранный элемент перетаскивается в нужное место layout. Для аккуратной настройки используйте такой порядок:

1. Откройте outline, который реально отвечает за нужную страницу.
2. Найдите частицу через фильтр, чтобы не перепутать похожие элементы.
3. Перетащите частицу в конкретную секцию, например над контентом, после hero-блока или в footer.
4. Откройте настройки экземпляра частицы и заполните только минимально нужные поля.
5. Сохраните layout через Save Layout и проверьте публичную страницу.

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

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

Многие частицы JoomLead используют коллекции. Коллекция - это набор повторяемых элементов внутри одной частицы: карточки Feature Box, пункты аккордеона, элементы слайдера, социальные ссылки, строки списка. В админ-панели Gantry коллекция обычно выглядит как список элементов, где можно добавлять, удалять, дублировать, переименовывать и редактировать каждый пункт.

Польза коллекций в том, что контент не превращается в длинный HTML-фрагмент. Редактор заполняет поля: заголовок, текст, изображение, ссылку, иконку, alt, ARIA label или другой параметр, если он есть у конкретной частицы. Для поддерживаемого сайта это безопаснее, чем хранить всю секцию в одном Custom HTML-блоке, потому что отдельные элементы проще менять и проверять.

Как не сломать порядок элементов

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

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

Практический пример: секция услуг с Feature Box, FAQ и позицией виджета

Для предметного сценария возьмём страницу услуг на WordPress-сайте с Gantry-темой. Цель - собрать блок преимуществ через Feature Box, добавить ниже аккордеон с частыми вопросами и оставить справа или ниже позицию для виджета обратной связи. Такой пример показывает три важные части Gantry: стандартную частицу, коллекцию элементов и Widget Position.

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

Мы хотим получить на странице услуг три карточки преимуществ, аккуратный FAQ-блок и область, куда можно назначить обычный WordPress-виджет. Перед началом должны быть выполнены условия: активна Gantry-тема, частицы JoomLead скопированы в custom, Uikit 3 atom включён, а страница назначена на нужный outline или наследует layout, который можно безопасно менять.

Шаги настройки

1. Откройте Gantry admin для активной темы и выберите outline страницы услуг.
2. Перейдите в Layout и добавьте новую строку в секцию, где должен появиться блок преимуществ.
3. Найдите Feature Box или близкую частицу JoomLead через фильтр и перетащите её в строку.
4. Откройте настройки частицы и заполните коллекцию: три элемента с коротким заголовком, описанием, иконкой или изображением, ссылкой при необходимости.
5. Ниже добавьте Accordion или FAQ-частицу, если она доступна в вашем пакете, и создайте 4-5 вопросов через коллекцию.
6. Добавьте Widget Position, задайте понятный ключ позиции и сохраните layout.
7. Перейдите в Appearance -> Widgets и назначьте в новую позицию нужный виджет, например форму обратной связи или HTML-блок с контактами.
8. Откройте публичную страницу и проверьте порядок блоков, сетку, раскрытие FAQ и отображение виджета.

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

Нюанс: контент внутри частицы или обычные записи WordPress

Не всё нужно хранить в частицах. Если блок должен регулярно обновляться редактором как обычная запись, лучше использовать частицы, которые выводят WordPress-контент, например Post List или Post Gallery, если они есть в вашем наборе. Если секция статичная и меняется редко, коллекция внутри частицы удобнее. Это решение влияет на поддержку: контент-менеджеру проще редактировать запись WordPress, а вебмастеру проще поддерживать статичную секцию в Layout Manager.

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

Проверка результата на сайте: внешний вид, адаптивность и кеш

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

Визуальная проверка

Сначала проверьте страницу как обычный посетитель. Важны не только наличие блока, но и контекст: совпадает ли ширина секции с соседними блоками, не слишком ли длинные заголовки, не обрезаются ли изображения, не появились ли лишние отступы сверху или снизу. Если частица использует изображения, заполните alt-поля там, где они есть в настройках. JoomLead прямо упоминает Image ALT среди полей частиц, а это полезно для доступности и SEO.

Адаптивность и видимость

Проверьте desktop, планшетную ширину и мобильную ширину. Особенно внимательно смотрите настройки Text Alignment Breakpoint, Max Width, Visibility и сетку коллекций. Если на мобильном карточки становятся слишком узкими, лучше изменить количество колонок, убрать сложную анимацию или сократить текст в карточках, чем скрывать важный контент целиком.

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

Кеш, минификация и порядок скриптов

Интерактивные частицы чувствительны к порядку подключения JavaScript и CSS. Если после включения кеширующего плагина аккордеон, слайдер или галерея перестали работать, временно отключите минификацию и объединение JavaScript, очистите кеш Gantry и кеш плагина, затем проверьте страницу снова. Не делайте вывод по одной загрузке: сначала воспроизведите симптом без кеша, затем включайте оптимизации по одной.

Для статичных частиц Gantry поддерживает идею particle-level caching через YAML, но документация Gantry предупреждает, что статическое кеширование подходит только для элементов без меняющегося содержимого. Не включайте подобную оптимизацию для частиц, которые выводят записи, даты, пользовательские данные или динамические значения. Если содержимое должно обновляться, оно должно оставаться динамическим.

Безопасная доработка внешнего вида через custom.scss

Иногда настройки частицы почти подходят, но нужно немного выровнять отступы, размер заголовка или сетку. Безопасный способ для Gantry-темы - добавить маленький CSS/SCSS-фрагмент в THEME_DIR/custom/scss/custom.scss, затем пересобрать стили, если включён Production Mode. Такой подход основан на официальной логике Gantry: пользовательские стили живут в custom.scss и переживают пересборку лучше, чем правки скомпилированных CSS-файлов.

Пример ниже не привязан к выдуманному внутреннему классу конкретной частицы. Он предполагает, что вы добавили собственный CSS-класс секции или блока в настройках Gantry, например services-particles. Это безопаснее, чем цепляться за случайные классы, которые могут измениться после обновления.

.services-particles .g-content {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.services-particles .jl-card,
.services-particles .uk-card {
  border-radius: 10px;
}

@media (max-width: 767px) {
  .services-particles .g-content {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

Перед вставкой задайте секции или частице класс services-particles, если ваша тема позволяет добавлять CSS Classes в настройках блока. После вставки сохраните custom.scss, выполните Recompile CSS при необходимости и проверьте страницу на desktop и мобильной ширине.

Откат простой: удалите фрагмент из custom.scss, пересоберите CSS и очистите кеш. Не правьте файлы плагина, тему внутри системных папок или Twig-шаблон, если задача решается парой безопасных CSS-правил.

Почему частицы не отображаются или работают неправильно

Диагностику лучше вести от простого к сложному. Не начинайте с переустановки всего пакета. В большинстве случаев достаточно понять, на каком слое произошёл сбой: Gantry не видит файл, layout не сохранён, outline не назначен, atom отключён, стили не пересобраны, кеш отдаёт старую версию или конкретная частица требует дополнительный JS/CSS-файл.

Частица не появилась в списке Layout Manager

Симптом: файл скопирован, но в панели частиц его нет. Возможные причины - неправильная папка, ошибка в имени YAML/Twig, копирование только части файлов или отсутствие нужного файла в custom/particles. Проверьте, что YAML и Twig лежат в правильной папке активной темы, а не в старой или неактивной копии.

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

Блок есть в layout, но не виден на странице

Симптом: в админке частица размещена, но посетитель её не видит. Проверьте, сохранён ли layout через Save Layout, тот ли outline назначен странице, нет ли наследования, которое перекрывает секцию, и не отключена ли частица в Particle Defaults. Также проверьте настройки видимости для устройств.

Когда откатывать: если блок нужен только для одной страницы, а появился или исчез на нескольких страницах, не продолжайте настройку. Сначала разберитесь с assignments и inheritance, иначе последующие правки будут попадать не в тот scope.

Стили не применились после изменения custom.scss

Симптом: CSS добавлен, но внешний вид не изменился. Возможные причины - файл лежит не в custom/scss, не выполнена пересборка CSS, Production Mode требует ручного Recompile CSS, правило перебито более специфичным селектором или кеш отдаёт старый файл.

Как исправить: проверьте путь, пересоберите CSS, очистите кеш Gantry и кеширующего плагина. Если правило всё ещё не работает, добавьте собственный класс к секции и пишите селектор через него. Не повышайте специфичность хаотично через длинные цепочки классов.

Аккордеон, слайдер или галерея не интерактивны

Симптом: HTML виден, но раскрытие, прокрутка, lightbox или слайдер не работают. Сначала проверьте Uikit 3 atom в Page Settings. Затем откройте консоль браузера и посмотрите, нет ли ошибок JavaScript. После этого временно отключите объединение и отложенную загрузку JS в кеширующем плагине.

Как исправить: включите нужный atom, проверьте, скопированы ли JS/CSS-файлы частицы, очистите кеш. Если конфликт появляется только после минификации, создайте исключение для скриптов Gantry/JoomLead или оставьте этот тип оптимизации выключенным для проблемной страницы.

Сетка ломается на мобильном экране

Симптом: карточки слишком узкие, изображения обрезаются, текст налезает на соседние элементы. Проверьте настройки колонок, max width, alignment breakpoint, длину заголовков и изображения внутри коллекции. Часто проблема не в плагине, а в контенте: одна карточка получила длинный заголовок, другая - изображение другой пропорции.

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

Когда JoomLead Gantry 5 Particles Pro будет удачным выбором

JoomLead Gantry 5 Particles Pro стоит использовать, если ваш WordPress-сайт уже построен на Gantry 5 или вы сознательно выбираете Gantry-тему как основу. В этом случае пакет даёт понятную пользу: готовые секции, коллекции, UIkit-зависимые интерактивные блоки, работу через Layout Manager и возможность хранить изменения в папке custom, не превращая каждую секцию в ручной HTML.

Перед внедрением проверьте базовые условия: Gantry Framework активен, тема действительно Gantry-powered, есть резервная копия custom, понятен нужный outline, Uikit 3 atom включён там, где он требуется, а изменения CSS идут через custom.scss. После этого можно загрузить JoomLead Gantry 5 Particles Pro и тестировать пакет сначала на копии сайта или отдельной странице.

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

Видео по настройке JoomLead Gantry 5 Particles Pro

Это видео дополняет руководство: видео по продукту. Откройте его после базовой настройки, чтобы сверить интерфейс и последовательность действий.