JoomShaper Indigo - Шаблон Joomla

Руководство по настройке и применению JoomShaper Indigo для сайта на Joomla

JoomShaper Indigo - это не просто готовый внешний вид для Joomla, а набор связанных решений: шаблон на Helix Ultimate, страницы на SP Page Builder, демонстрационные варианты главной страницы, портфолио, блог, служебные страницы, навигация с Mega Menu и магазинный сценарий. В этом руководстве разберём, как подойти к нему как к рабочей основе сайта, а не как к красивому скриншоту из демо.

Материал рассчитан на владельца сайта, администратора Joomla или разработчика, которому нужно быстро понять, где у Indigo сильные стороны, какие настройки проверить после установки, как не сломать демо-структуру, как адаптировать главную страницу под реальную компанию и где искать причину, если меню, модули, SP Page Builder или стили ведут себя не так, как ожидалось.

Главная мысль простая: Indigo лучше раскрывается, когда вы разделяете три уровня работы. Первый уровень - шаблон и его стили в Joomla. Второй - макет, позиции и навигация Helix Ultimate. Третий - контентные страницы и блоки SP Page Builder. Если смешать эти уровни, легко начать править не то место: менять модуль, когда проблема в пункте меню, или искать CSS, когда секция скрыта в настройках адаптивности.

Где Indigo полезен и когда лучше выбрать другой шаблон

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

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

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

Кому шаблон подходит

Indigo уместен, если вы хотите быстро получить сайт с готовым визуальным языком и готовы заменить демо-контент на реальный. Он особенно удобен для команд, которые уже работают с Joomla, понимают пункты меню, модули, шаблонные стили и не боятся SP Page Builder. Шаблон также полезен разработчику, которому нужно передать клиенту сайт, где большинство текстовых и визуальных правок можно делать через интерфейс, а не через правку файлов.

• Бизнесу с услугами, где важны первый экран, доверие, кейсы, команда и форма связи.
• Агентствам и студиям, которым нужны портфолио, фильтры категорий и выразительные секции.
• Корпоративным сайтам, где нужна навигация с несколькими уровнями и аккуратный блог.
• Небольшим каталогам или витринам, если магазинный блок рассматривается как часть сайта, а не как сложная торговая система.

Кому может не подойти

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

Из чего состоит рабочая сборка Indigo

В карточке JoomShaper для Indigo указаны несколько важных опор: совместимость с актуальными ветками Joomla, использование Helix Ultimate, SP Page Builder Pro, набор домашних вариантов, портфолио на SP Simple Portfolio, Mega Menu, блоговый дизайн, eCommerce-сценарий и форма подписки через addon SP Page Builder. Эти факты помогают правильно распределить работу. Внешний вид главной страницы не живёт в одном месте: часть отвечает за шаблонный стиль, часть - за страницу SP Page Builder, часть - за модули и пункты меню, часть - за отдельные расширения.

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

Такая карта помогает не путать действия. Если на главной странице нужно заменить текст в секции "Services", обычно это задача SP Page Builder. Если нужно поменять расположение меню или включить Mega Menu, это зона Helix. Если нужно вывести отдельный блок над компонентом, нужно смотреть модульные позиции и назначение модулей. Если не появляется товар, нужно проверять EasyStore или другое магазинное расширение, а не только шаблон.

Визуальная логика демо: первый экран, услуги, портфолио и доверие

Скриншот верхней части демо показывает характер Indigo очень ясно. В шапке есть верхняя строка с контактом и языками, навигация с пунктами Home, Portfolio, Shop, Pages, Blog и Addons, центральный логотип, крупный первый экран с фоновым изображением команды и коротким призывом. Ниже идёт яркий акцентный блок, затем информационный блок "We are only Indigo", карточки услуг, портфолио с табами и последующие секции доверия.

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

Не оставляйте демо-порядок без проверки

Демо-страница строится как витрина возможностей шаблона, а не как готовая стратегия для любого бизнеса. В реальном проекте порядок секций может измениться. Консалтинговой фирме часто важнее сразу показать проблему и отрасли, а портфолио перенести ниже. Агентству полезно оставить портфолио в первом экране прокрутки. Магазинному проекту лучше раньше показать категории или преимущества доставки. Indigo даёт основу, но порядок блоков должен подчиняться цели страницы.

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

Цвет и типографика

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

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

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

Документация Helix Ultimate прямо разделяет QuickStart и обычную установку: QuickStart устанавливается как Joomla, не через Extension Manager. Это важное предупреждение для Indigo, потому что многие проблемы начинаются с попытки "поставить демо" на уже работающую Joomla. Если сайт рабочий, используйте тестовый поддомен, копию базы и файлов или отдельную локальную среду. На реальный сайт переносите только проверенные настройки, страницы и контент.

Минимальный чек-лист до старта

• Сделайте резервную копию файлов и базы данных, если работаете не с чистой установкой.
• Уточните, какой пакет у вас есть: QuickStart, обычный template package, SP Page Builder Pro, дополнительные расширения.
• Проверьте, что хостинг соответствует требованиям актуальной Joomla и используемых расширений.
• Подготовьте отдельную базу данных для QuickStart или новый префикс таблиц на тестовой среде.
• Проверьте доступ к админ-панели, файловому менеджеру или SFTP, потому что диагностика иногда требует очистки кеша или проверки файлов.
• Соберите реальные изображения, логотип, тексты услуг, контакты, юридические страницы и структуру меню до начала массового редактирования.

Безопасное правило: если вы не можете объяснить, чем QuickStart отличается от установки шаблона, не разворачивайте QuickStart на рабочем сайте. Сначала проверьте его на отдельной копии.

Что зависит от источника установки

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

Установка: QuickStart, шаблонный пакет и первая проверка

Установка Indigo должна начинаться с выбранного сценария. Для нового проекта самый быстрый путь - развернуть QuickStart на пустом окружении. Для существующего сайта обычно безопаснее поставить шаблонный пакет, убедиться, что сайт открывается, затем по одному переносить страницы и настройки. В обоих случаях после установки не переходите сразу к дизайну. Сначала проверьте базовую работоспособность: админ-панель открывается, публичная часть загружается, меню не ведут на 404, страницы SP Page Builder редактируются, кеш очищается, в консоли браузера нет явных критических ошибок.

QuickStart для нового сайта

QuickStart устанавливайте как обычный Joomla-сайт. Распакуйте архив, загрузите файлы в нужную директорию, создайте базу данных, откройте домен или тестовый поддомен в браузере и пройдите установщик. В процессе не используйте стандартный логин admin для суперпользователя. После успешной установки удалите установочные следы, проверьте файл .htaccess, включите понятные URL только после того, как убедились, что сайт открывается без ошибок сервера.

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

Обычный шаблонный пакет для существующего сайта

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

Если у вас уже есть SP Page Builder, проверьте, что версия и пакет соответствуют вашим задачам. Документация SP Page Builder отдельно описывает страницы, Addons Management, редактор, настройки секций и устранение проблем с кешем. Для Indigo это важно, потому что многие видимые блоки главной страницы - не "магия шаблона", а набор секций и addons, которые должны открываться в редакторе.

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

1. Откройте главную страницу в обычном окне и в режиме инкогнито.
2. Проверьте главное меню, выпадающие пункты, off-canvas меню и ссылки на внутренние страницы.
3. Откройте Components - SP Page Builder и убедитесь, что страницы доступны для редактирования.
4. Откройте параметры шаблона и проверьте Header, Layout, Menu, Typography и Custom Code.
5. Очистите Joomla cache и кеш браузера после первого изменения.
6. Проверьте страницу на ширине desktop, tablet и phone, потому что Helix и SP Page Builder имеют отдельные настройки адаптивности.

Template Styles и Helix Ultimate: где начинается настройка

Главная настройка Indigo начинается не с CSS, а с понимания шаблонного стиля. В Joomla один и тот же шаблон может иметь несколько стилей, назначенных на разные пункты меню. Это удобно для Indigo: можно сделать основной стиль для главной страницы, отдельный стиль для магазинной части, отдельный стиль для лендинга услуги или языковой версии. Но именно здесь часто возникают ошибки: администратор меняет один стиль, а страница использует другой.

Начните с инвентаризации. Откройте список шаблонных стилей, найдите стиль Indigo или Helix-based стиль, посмотрите, назначен ли он по умолчанию и к каким пунктам меню привязан. Затем откройте параметры. В Helix Ultimate важны вкладки Basic, Presets, Layout, Custom Header, Menu, Typography, Blog, Custom Code и Advanced. Не все параметры нужно менять сразу. Сначала настройте логотип, header, меню, базовую типографику, layout rows и custom CSS только для мелких правок.

Header и варианты шапки

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

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

Layout Builder и позиции модулей

Helix Ultimate Layout Builder работает с рядами и колонками, привязанными к позициям модулей. Документация описывает сетку на 12 колонок, строки, колонки, настройки responsive, sticky-колонки и возможность выбирать позиции модулей. Для Indigo это особенно полезно, если нужно добавить блок над компонентом, вывести баннер рядом с контентом, изменить поведение footer или создать служебную полосу для контактов.

Не создавайте позиции хаотично. Придерживайтесь понятных имён: hero-top, service-cta, footer-contact, shop-promo. Если позиция нужна только на одной странице, назначайте модуль на конкретный пункт меню. Если она должна быть глобальной, проверьте, не появится ли блок на страницах входа, регистрации, checkout или системных страницах.

Mega Menu и off-canvas

Indigo делает ставку на расширенную навигацию. В Helix Menu Builder можно управлять структурой пунктов, включать Mega Menu, добавлять строки и колонки, помещать модули в выпадающее меню, управлять иконками и badge. Это удобно для сайта агентства с большим количеством услуг или страниц отраслей, но требует дисциплины. Mega Menu не должен превращаться в карту всего сайта. Он должен помогать выбрать направление, а не заставлять читать двадцать пунктов.

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

Как редактировать страницы Indigo через SP Page Builder

Большая часть ценности Indigo раскрывается в SP Page Builder. Демо-страницы состоят из секций, колонок и addons: заголовки, кнопки, изображения, табы портфолио, testimonials, counters, opt-in form, gallery, blog-like cards и другие блоки. Документация Page Builder показывает, что страницы можно создавать, редактировать, дублировать, добавлять в меню, экспортировать, а настройки секций и addon-блоков разделены на General, Style и Advanced.

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

Секции и колонки

В настройках секции проверяйте четыре группы: Style, Title, Responsive и Animation. Style отвечает за фон, цвет, отступы, border и другие визуальные параметры. Title нужен, если секция имеет отдельный заголовок. Responsive позволяет скрывать секцию на разных устройствах. Animation отвечает за движение. Не включайте анимации везде подряд: на бизнес-сайте они должны помогать вниманию, а не тормозить восприятие.

Колонки имеют свои настройки Style, Responsive и Animation. Именно там часто решаются мобильные проблемы: порядок колонок, видимость и отступы. Если на desktop секция "изображение слева, текст справа" выглядит хорошо, на телефоне иногда нужно поменять порядок, скрыть второстепенный декоративный элемент или увеличить отступ между блоками. Проверяйте это в редакторе и на реальной публичной странице.

Addons и переиспользование стилей

SP Page Builder позволяет копировать, вставлять, дублировать, сохранять и переименовывать addons. Для Indigo это удобно, потому что многие секции повторяют визуальный стиль: кнопки, карточки услуг, блоки фактов, элементы портфолио. Если вы создаёте новые страницы услуг, не собирайте каждую секцию заново. Скопируйте проверенный блок, замените текст и изображение, затем адаптируйте только смысловые детали.

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

Форма подписки и внешние сервисы

В карточке Indigo указана подписка через Opt-in Form addon SP Page Builder с поддержкой нескольких почтовых платформ. Это не значит, что рассылка заработает сама. Нужно выбрать сервис, добавить ключи или параметры интеграции, проверить согласие пользователя, текст кнопки, сообщение об ошибке и письмо подтверждения, если оно используется. Для публичного сайта обязательно протестируйте форму в реальном браузере и посмотрите, что происходит при пустом email, неправильном email и успешной отправке.

Портфолио, услуги, блог и магазинный сценарий

Indigo интересен не только главной страницей. В продуктовой странице JoomShaper отдельно выделены портфолио, service showcasing, blog design, shop/eCommerce variation и built-in pages. Эти разделы важны, потому что реальный бизнес-сайт почти всегда ломается не на первом экране, а на вторичных страницах: кейсах, услугах, карточках товаров, блоге, контактах и 404.

Портфолио и категории

Портфолио в Indigo рассчитано на визуальную подачу работ и фильтрацию по категориям. Если используете SP Simple Portfolio или похожий компонент, сначала определите 4-6 категорий, которые действительно помогают посетителю выбрать. Не делайте категории "All", "Design", "Creative", "Branding" только потому, что так было в демо. Для агентства это могут быть "Корпоративные сайты", "Интернет-магазины", "Брендинг", "Поддержка". Для консалтинга - "Аудит", "Внедрение", "Обучение", "Сопровождение".

Каждый кейс должен иметь цель, результат, краткое описание и изображение. Если изображения разного размера и качества, карточки будут выглядеть небрежно даже при хорошем шаблоне. Подготовьте единый формат обложек заранее. После публикации проверьте фильтры, страницу детали, хлебные крошки, meta title, Open Graph изображение и возврат к списку работ.

Страницы услуг

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

Если услуг много, не выносите все в верхнее меню. Используйте Mega Menu или отдельную страницу "Services", где направления сгруппированы по смыслу. Важные услуги можно добавить в первый уровень меню, но второстепенные лучше оставить в категории. Это улучшает навигацию и снижает риск перегрузки header.

Блог и статьи

Блоговый дизайн Indigo полезен, если вы собираетесь регулярно публиковать экспертные материалы, новости или разборы. Но блог не должен быть складом случайных заметок. Настройте категории, автора, изображение статьи, intro text, meta description и структуру внутренних ссылок. Проверьте, как выглядят список материалов, одиночная статья, sidebar, пагинация и мобильная версия. Если блог не нужен, лучше скрыть его из меню, чем оставлять демо-посты.

Магазинный вариант

В карточке Indigo магазинный сценарий связан с eCommerce-функциями. На современных страницах JoomShaper также продвигает EasyStore как Joomla eCommerce решение, а документация EasyStore описывает товары, изображения, pricing, inventory, вариации, checkout, платежи, доставку и интеграцию с SP Page Builder. Для Indigo это означает: визуальный shop layout может быть готов, но работа магазина зависит от расширения, настроек товаров и проверок checkout.

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

Практический пример: собрать главную страницу для агентства

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

Цель

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

Подготовка

Создайте копию демо-главной страницы в SP Page Builder. Подготовьте логотип, hero-фото или изображение команды, 3-4 услуги, 4 кейса, короткое описание процесса, контактный email и ссылку на политику обработки данных. Проверьте, какой пункт меню открывает текущую главную страницу, и назначьте черновую копию на временный пункт меню, чтобы не ломать рабочую страницу.

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

1. Откройте черновую страницу в SP Page Builder и замените hero-заголовок на конкретное обещание: не "We are here for you", а смысл вроде "Запускаем и поддерживаем сайты на Joomla для B2B-команд".
2. Замените кнопку первого экрана на действие: заявка, консультация, портфолио или расчёт проекта. Убедитесь, что ссылка ведёт на реальную секцию или страницу.
3. В блоке purpose оставьте один сильный тезис и одну вторичную кнопку. Если две кнопки конкурируют, оставьте главную.
4. В секции услуг оставьте 3 карточки: разработка, поддержка, контент. Для каждой карточки напишите результат, а не общий набор слов.
5. В портфолио создайте категории, которые совпадают с реальными кейсами. Уберите вкладки, для которых нет работ.
6. В блоке фактов используйте проверяемые числа. Если чисел нет, замените секцию на процесс работы или короткий FAQ.
7. Настройте footer: контакты, ссылки, социальные профили, юридические страницы, повтор CTA.
8. Проверьте мобильный порядок секций и высоту первого экрана. На телефоне крупное фоновое изображение не должно съедать весь смысл.

Проверка результата

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

Мини-итог: успешная настройка Indigo - это не "заменить все картинки", а привести демо-структуру к реальному пути пользователя: обещание, услуги, доказательство, действие.

Как связать меню, модули и страницы в многостраничный сайт

После настройки главной страницы наступает этап, на котором Indigo чаще всего превращается либо в аккуратный сайт, либо в набор красивых, но разрозненных страниц. Нужно связать страницы SP Page Builder, пункты меню, модульные позиции, портфолио, блог и footer в одну навигационную систему. Это не декоративная работа: именно от неё зависит, сможет ли посетитель перейти от услуги к кейсу, от кейса к форме, от статьи к предложению и от мобильного меню к нужному разделу.

Начните с простой карты сайта. Для типового агентства хватит верхнего уровня: главная, услуги, портфолио, о компании, блог, контакты. Внутри услуг можно сделать отдельные страницы, но не обязательно выносить каждую в первый уровень. Для Indigo удобен гибридный вариант: в главном меню оставить 5-6 пунктов, а вложенные услуги показать через Mega Menu. В footer продублировать ключевые ссылки и добавить юридические страницы. В off-canvas меню оставить только самые нужные пункты, потому что на мобильном длинная навигация быстро становится неудобной.

Страница SP Page Builder должна иметь понятный пункт меню

В SP Page Builder есть действие Add to Menu, но в реальном проекте его лучше использовать осознанно. У страницы должен быть понятный menu title, alias, выбранное меню, родительский пункт и доступ. Если вы создали страницу услуги, но не добавили её в меню или внутренние ссылки, она будет существовать как черновой остров. Если добавили страницу в меню, но не назначили нужный шаблонный стиль, она может открыть другой header, другой footer или не тот набор модулей.

Проверяйте каждую важную страницу по цепочке: страница создана, опубликована, добавлена в меню, использует правильный template style, имеет нужные модули, открывается по ожидаемому URL, видна на мобильном, имеет title и meta description. Такая проверка занимает несколько минут, но предотвращает типичные ошибки вроде "страница есть, но меню ведёт на старую копию" или "форма есть в редакторе, но на публичной странице скрыта из-за access level".

Модульные позиции лучше проектировать заранее

Helix позволяет работать с module positions, но свобода не должна превращаться в хаос. Для Indigo полезно заранее решить, какие позиции глобальные, а какие контекстные. Глобальные: header, offcanvas, footer, maybe topbar. Контекстные: CTA после услуги, promo над портфолио, shop notice, sidebar в блоге. Если один и тот же модуль должен показываться только на страницах услуг, назначайте его на соответствующие пункты меню. Если он должен быть везде, проверьте системные страницы, чтобы не получить CTA на странице входа или ошибке 404.

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

Проверка после каждой крупной правки

После изменения меню, шаблонного стиля или модульной позиции делайте маленькую проверку результата. Не ждите конца проекта, чтобы обнаружить, что off-canvas меню на телефоне ведёт на старые страницы, а footer показывает демо-контакты. Откройте главную, одну страницу услуги, один кейс, одну статью и контактную страницу. На каждой проверьте header, активный пункт меню, breadcrumbs, главный контент, CTA, footer и мобильное меню.

Если что-то пошло не так, откатывайте последнее изменение, а не переписывайте всё сразу. Например, если после включения нового модуля пропал блок на странице услуги, снимите публикацию модуля или ограничьте его назначение. Если после изменения Layout Builder съехала шапка, верните сохранённую копию стиля или отключите custom header. Чем меньше шаг, тем проще найти причину.

Проверка адаптивности, скорости и SEO после настройки

После визуальных правок нужно проверить не только внешний вид, но и поведение сайта. Indigo использует адаптивную сетку, Helix Layout Builder и секции SP Page Builder, поэтому одна и та же проблема может находиться на разных уровнях. Например, блок может исчезать на телефоне из-за настройки Responsive в SP Page Builder, из-за Column Options в Helix Layout или из-за CSS, добавленного позже.

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

Проверьте ширины desktop, tablet и phone. На главной странице смотрите header, hero, карточки услуг, табы портфолио, формы, footer и off-canvas меню. Если секция слишком длинная на телефоне, не пытайтесь сразу писать CSS. Сначала откройте настройки секции, колонки и addon. Возможно, достаточно изменить порядок колонок, скрыть декоративное изображение или уменьшить отступ.

В Helix Layout Builder помните о сетке и breakpoints. Если в ряду сумма колонок превышает нормальную логику или скрытие настроено слишком агрессивно, результат будет неожиданным. Для блоков, важных для SEO и пользователя, лучше не скрывать текст полностью на мобильных устройствах. Документация Helix отмечает, что скрытие responsive работает через CSS, то есть контент может оставаться в HTML. Это нужно учитывать при проверке доступности и веса страницы.

Скорость

Большой визуальный шаблон легко перегрузить изображениями. Для Indigo особенно важны hero-фото, portfolio thumbnails, blog images и shop images. Сжимайте изображения до разумного размера, используйте понятные alt, не загружайте исходники в несколько мегабайт, если они показываются как карточка. Если после установки демо остались лишние изображения и страницы, удаляйте их только после резервной копии и проверки, что они не используются.

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

SEO и структура

У каждой важной страницы должны быть уникальные title, meta description, H1 на уровне страницы, понятный URL, хлебные крошки и внутренние ссылки. В этом руководстве первый заголовок начинается с H2, потому что страница продукта уже имеет H1, но на вашем сайте обычная страница услуги должна иметь один основной H1. Не переносите демо-заголовки без смысла. Текст "We solve your problem" красиво выглядит в шаблоне, но для SEO и доверия лучше заменить его конкретной формулировкой.

Проверьте schema, если используете функции SP Page Builder или Joomla для структурированных данных. Для блога важно, чтобы изображения, автор, дата и категория выводились корректно. Для магазина отдельно проверьте товарные страницы, canonical, наличие цены и статуса, если это поддерживает выбранное eCommerce-расширение.

Безопасные улучшения без правки ядра шаблона

Indigo можно аккуратно адаптировать без правки файлов ядра шаблона. JoomShaper в документации Helix рекомендует использовать Custom CSS field или отдельный custom.css/override.css для небольших правок, а не редактировать template.css. Для более серьёзных изменений существуют template overrides. Это правильный путь: обновления не должны затирать ваши изменения.

Небольшой CSS для контраста CTA

Если после замены фонового изображения кнопка на первом экране стала плохо читаться, можно добавить маленькое правило в Custom CSS или в файл custom.css. Сначала найдите класс кнопки через инспектор браузера на вашем сайте. Ниже пример с условным классом секции, который нужно заменить на реальный класс вашей hero-секции. Не вставляйте код вслепую.

/* Небольшая правка контраста для hero-кнопки Indigo.
   Замените .indigo-hero на реальный класс вашей секции. */
.indigo-hero .sppb-btn,
.indigo-hero .btn {
  border-color: #12c8b4;
  background-color: #12c8b4;
  color: #ffffff;
}

.indigo-hero .sppb-btn:hover,
.indigo-hero .btn:hover {
  background-color: #0fa898;
  border-color: #0fa898;
}

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

Template override для аккуратной правки вывода

Если нужно изменить разметку компонента или модуля, используйте override, а не правку исходного файла расширения. Документация Helix описывает создание override для компонентных и модульных view. Для Indigo это может понадобиться, например, если нужно аккуратно изменить вывод SP Simple Portfolio item или модульной карточки без вмешательства в core files. Но override стоит делать только после резервной копии и понимания, какой файл реально отвечает за вывод.

Не используйте PHP в поле Custom CSS и не вставляйте сложный JavaScript без необходимости. Если задача решается настройками SP Page Builder, Template Styles или Joomla menu assignment, выбирайте настройку. Код должен быть последним небольшим слоем, а не заменой нормальной конфигурации.

Языки и локализация

Для многоязычного сайта используйте штатные возможности Joomla и рекомендации Helix: языки должны быть установлены, страницы и модули назначены нужным языкам, off-canvas меню подготовлено для каждой языковой версии, а шрифты должны поддерживать нужные символы. Если часть строк остаётся на английском, сначала проверьте языковые файлы и overrides, затем содержимое SP Page Builder страниц. В демо много английского текста, и его нужно заменить вручную как контент, а не искать "перевод шаблона" для каждой фразы.

Частые проблемы Indigo и как их диагностировать

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

Правки в редакторе не видны на сайте

Симптом: в SP Page Builder текст или секция изменились, но публичная страница показывает старый вариант. Возможные причины: открыт не тот пункт меню, редактируется копия страницы, включён кеш Joomla, кеш браузера, CDN или серверный кеш.

Что проверить: откройте список страниц SP Page Builder, найдите фактическую страницу, привязанную к пункту меню, проверьте URL, очистите Joomla cache через админ-панель, затем откройте страницу в инкогнито. Если используется Cloudflare или серверный кеш, очистите и его. Документация SP Page Builder для похожих проблем с редактором также рекомендует проверять кеш браузера, Joomla cache и альтернативный браузер.

Главная страница выглядит не как демо

Симптом: после установки шаблона нет демо-секций, портфолио, меню или shop-страницы. Причина часто в том, что установлен только template package, а не QuickStart. Обычный шаблон не обязан развернуть весь демо-сайт на существующей Joomla.

Что делать: проверьте тип архива, который вы использовали. Если нужен демо-сайт, разворачивайте QuickStart на пустой тестовой среде. Если сайт уже рабочий, переносите структуру аккуратно: страницы, меню, модули, расширения, изображения и настройки. Не пытайтесь "доустановить QuickStart" через менеджер расширений на рабочую Joomla.

Mega Menu не показывает нужные колонки или модули

Симптом: в desktop меню нет ожидаемых колонок, баннера, иконок или вложенных пунктов. Возможные причины: Mega Menu не включён для нужного пункта, структура меню не собрана, модуль не опубликован, модуль назначен не на тот язык или доступ, изменения сохранены не в том шаблонном стиле.

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

Секция исчезла на телефоне

Симптом: блок есть на desktop, но не виден на мобильной ширине. Причина может быть в Responsive настройках SP Page Builder section/column/addon или в Helix Layout column options. Иногда блок скрыт намеренно в демо, чтобы упростить мобильную версию.

Откройте настройки секции, колонки и addon. Проверьте visibility, ordering и hide/show по устройствам. Затем проверьте Layout Builder, если блок является модулем в позиции. Не пишите CSS до проверки интерфейсных настроек. Если блок важен для смысла страницы, лучше адаптировать его, чем полностью скрывать.

После обновления или переноса редактор SP Page Builder работает нестабильно

Симптом: редактор не открывается, часть функций заблокирована, появляются ошибки JavaScript или старая версия интерфейса. Возможные причины: кеш, смешение Lite/Pro пакетов, устаревшие update sites, серверный кеш, конфликт override или стороннего расширения.

Начните с очистки Joomla cache и браузера, затем проверьте пакет SP Page Builder, права доступа и альтернативный браузер. Если проблема появилась после обновления, посмотрите, нет ли старого update site для free-пакета и не требуется ли переустановка Pro-пакета. Если ошибка связана с override, временно отключите кастомный override на тестовой копии и проверьте повторно.

Магазинная часть показывает товары, но заказ не проходит

Симптом: карточки товаров видны, но checkout, доставка, платежи или уведомления не работают. В таком случае проблема чаще относится к eCommerce-расширению и его настройкам, а не к Indigo. Шаблон влияет на внешний вид, но логика заказа живёт в компоненте магазина.

Проверьте настройки товаров, inventory, checkout, payment gateways, shipping, email notifications и права доступа. Создайте тестовый товар с понятной ценой и простым сценарием. Если используется EasyStore, опирайтесь на его документацию по products, checkout и SP Page Builder integration. Откат: временно отключите спорные платежные или shipping-настройки на тестовой среде, но не меняйте рабочие заказы без резервной копии.

Полезное видео по Indigo

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

Когда JoomShaper Indigo будет удачным выбором

JoomShaper Indigo стоит использовать, если вам нужен визуально насыщенный Joomla-шаблон для бизнес-сайта, агентства, портфолио или корпоративной витрины, и вы готовы работать с Helix Ultimate, SP Page Builder, меню, модулями и расширениями как с единой системой. Его сильная сторона - не один отдельный блок, а готовый ритм сайта: первый экран, услуги, портфолио, доверие, блог, контакты и потенциальный shop-сценарий.

Перед финальным внедрением проверьте QuickStart на тестовой среде, настройте шаблонные стили, разберите страницы SP Page Builder, удалите лишний демо-контент, проверьте меню, адаптивность, кеш, формы и SEO-данные. Если после этого структура совпадает с задачей проекта, можно получить файл JoomShaper Indigo и использовать шаблон как основу рабочего сайта.

Если же вам нужен узкий шаблон только для консультационного бизнеса, свежий digital agency стиль или портфолио без магазинной части, сравните Indigo с Unfold, Artolio, Stratos и Anobiz. Правильный выбор - тот, где меньше придётся удалять, переименовывать и перестраивать. Хороший шаблон ускоряет проект только тогда, когда его структура совпадает с реальным сценарием сайта.