YOOtheme Balou - Шаблон Joomla

Руководство по настройке и практическому использованию YOOtheme Balou в Joomla

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

Материал рассчитан на владельца сайта, администратора Joomla или вебмастера, который уже получил архив шаблона и хочет безопасно внедрить его на тестовой копии. Здесь нет инструкции по покупке, активации лицензии или обходу ограничений. Речь идёт о работе с уже доступным продуктом, YOOtheme Pro и стандартными механизмами Joomla.

Главная идея проста: сначала отделить дизайн Balou от контентной структуры, затем проверить настройки YOOtheme Pro, а уже потом переносить реальные товары, разделы и изображения. Такой порядок снижает риск ситуации, когда сайт выглядит красиво в демо, но на рабочем домене ломаются меню, позиции модулей, карточки товаров или адаптивность.

Что именно делает Balou и где он раскрывается лучше всего

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

Если проекту нужна строгая B2B-страница, технический каталог с плотными таблицами или корпоративный портал с большим количеством служебных разделов, Balou придётся сильно переделывать. А вот для магазина детской одежды, handmade-игрушек, аксессуаров, семейного сервиса, небольшой студии или бренда с мягкой визуальной подачей он даёт хороший старт. Его сильная сторона - не один красивый блок, а готовая композиция страниц: главная, страницы товаров, услуги, история, FAQ, контакт и публикации.

Официальная страница Balou подчёркивает готовые макеты, вариации стиля, curated images и набор полей для Product и Post. Это означает, что шаблон не ограничивается рамкой вокруг статей. Он предлагает контентную модель: у товара есть изображения, цена, описание, размер, материал, цвет, ссылка на магазин и вопросы. У публикаций есть excerpt и связанные товары. Именно такие детали превращают шаблон в рабочую основу для каталога.

Главная проверка перед внедрением - понять, совпадает ли структура демо с вашей реальной структурой сайта. Если у вас есть товары, мини-коллекции, рассказы о бренде, кастомные заказы и вопросы покупателей, Balou будет удобен. Если же нужен только лендинг из трёх блоков, можно использовать более простой шаблон или один макет YOOtheme Pro без всего demo package.

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

Balou подходит тем, кто хочет быстро получить визуально цельный сайт и затем постепенно заменить демо-контент на собственный. Он особенно полезен, когда у администратора есть базовое понимание Joomla, но нет времени заново проектировать каждую страницу в конструкторе. Внутри YOOtheme Pro можно менять стили, страницы, шаблоны, меню, модули и медиа без перехода в десятки отдельных экранов.

Хороший кандидат для Balou - небольшой магазин или каталог, где важны фотография, мягкая презентация товара, история бренда и аккуратные карточки. Также шаблон подходит для сайта услуг: например, индивидуальный пошив, детская фотостудия, мастерская подарков или семейный образовательный проект. В этих сценариях готовые страницы Products, Services, Our Story, FAQ и Contact легко превращаются в понятную структуру.

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

Ещё один случай, когда стоит подумать дважды, - сайт с жёсткими требованиями к минимальному коду и без визуального конструктора. YOOtheme Pro даёт удобную сборку страниц, но это всё равно framework с собственными настройками, медиа-кешем, динамическим контентом и шаблонами. Для проекта, где нужен почти чистый стандартный шаблон Joomla и минимум зависимостей, логичнее рассмотреть нативный шаблон или лёгкий framework.

Практический критерий выбора: если вы готовы вести сайт через YOOtheme Pro customizer, работать с Joomla-меню, модулями и template styles, Balou сэкономит время. Если нужно редактировать только статьи в стандартном редакторе и почти не трогать визуальный слой, шаблон может оказаться сложнее, чем требуется.

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

Перед установкой важно понять, какой именно архив у вас на руках. В документации YOOtheme Pro для Joomla разделяются два сценария: установка темы в существующий сайт и запуск Joomla demo package. Это разные вещи. Архив темы устанавливается как шаблон в уже существующую Joomla, а demo package является полной установкой Joomla с YOOtheme Pro и демо-контентом. Его нельзя просто загрузить в Extension Manager поверх рабочего сайта.

Для существующего сайта обычно безопаснее начинать с тестовой копии. Сделайте резервную копию файлов и базы, проверьте текущие шаблоны, активные расширения, версии PHP, наличие расширения GD для обработки изображений и доступ пользователя к настройкам шаблона. Официальная документация YOOtheme Pro указывает, что доступ к customizer зависит от права Edit Templates. Если редакторы не должны менять дизайн сайта, это право лучше ограничить.

Demo package полезен в другой ситуации: вы хотите изучить, как Balou собран из макетов, полей, модулей, изображений и страниц. Тогда его удобнее поставить в отдельный каталог или на поддомен, посмотреть структуру, перенести идеи и только после этого решать, что копировать в рабочий сайт. Такой подход особенно полезен, если вы впервые работаете с YOOtheme Pro.

Мини-чеклист перед стартом

• Проверьте, что архив соответствует Joomla, а не WordPress-версии темы.
• Уточните, это template zip или полный demo package для новой установки.
• Сделайте резервную копию сайта и отдельную тестовую среду.
• Проверьте права администратора, особенно доступ к template settings и customizer.
• Посмотрите, какие сторонние расширения нужны демо-пакету, например Articles Field для связанных товаров.
• Решите, будете ли вы переносить demo content или собирать страницы вручную на основе макетов.

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

Установка, первый вход в YOOtheme Pro и контрольная проверка

В существующей Joomla установка шаблона обычно проходит через загрузку ZIP-пакета. После успешной установки не спешите сразу делать Balou шаблоном по умолчанию для всех страниц. Сначала откройте список template styles, найдите стиль YOOtheme, сделайте копию и работайте с копией. Это даст возможность откатиться к исходному варианту, если эксперимент со стилем, цветами или назначением меню окажется неудачным.

После установки откройте YOOtheme Pro через соответствующий пункт в админ-панели Joomla. Документация описывает customizer как интерфейс с боковой панелью слева и live preview справа. В боковой панели находятся крупные области: Layout, Style, Pages, Templates, Menu, Modules и Settings. Важно привыкнуть к этой логике: часть изменений относится к макету страницы, часть - к стилю всего сайта, часть - к Joomla-модулям и меню.

Первый контрольный проход после установки должен быть коротким. Не нужно сразу менять все цвета, шрифты и блоки. Ваша задача - проверить, что customizer открывается, preview обновляется, кнопки Save и Cancel появляются при изменениях, а выбранный template style реально применяется к тестовой странице.

Порядок безопасной первичной проверки

1. Откройте тестовый пункт меню, на котором можно проверять шаблон без риска для главной страницы.
2. Назначьте ему копию template style через Joomla или через панель YOOtheme Pro.
3. Откройте customizer и внесите одно небольшое изменение, например временно измените цвет кнопки или логотип.
4. Сохраните изменение и обновите публичную часть сайта в другом окне.
5. Если результат виден, верните настройку обратно или продолжайте работу уже осознанно.

Не проверяйте установку только по сообщению Joomla об успешной загрузке архива. Успешная установка означает, что пакет принят системой. Рабочее внедрение начинается только после проверки template style, preview, меню, модулей и публичной страницы.

Настройка после установки: от стиля до системных параметров

Подробная настройка Balou начинается с общей визуальной системы. В YOOtheme Pro за неё отвечает Style и style customizer. Официальные материалы Balou говорят о нескольких вариациях стиля, пастельной палитре, uppercase-типографике и слегка скруглённых элементах. Ваша задача - не разрушить эту систему случайными цветами. Лучше сначала выбрать ближайшую style variation, затем точечно менять логотип, акцентный цвет, размеры заголовков и изображения.

Следующий уровень - Layout. Здесь настраиваются site & logo, header & navbar, mobile header, top, bottom, sidebar, footer и blog/post. Для Balou это критично, потому что его визуальная идентичность держится на чистом первом экране, аккуратной навигации и больших изображениях. Если вы меняете высоту шапки, ширину контейнера или поведение мобильного меню, проверяйте не только главную страницу, но и карточку товара, FAQ, страницу услуги и контакт.

Что проверять в первую очередь

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

• Логотип и навигация: убедитесь, что меню не ломает шапку и не переносит короткие пункты в две строки без необходимости.
• Цвета и контраст: проверьте читаемость текста поверх фотографий и пастельных фонов.
• Шрифты и размеры заголовков: Balou использует выразительную типографику, но реальные русские названия товаров могут быть длиннее демо-текста.
• Кнопки и ссылки: проверьте, что основной призыв, ссылка на магазин или запрос услуги заметны, но не выглядят чужеродно.
• Мобильный header: откройте device preview и проверьте, что логотип, меню, корзина или ссылка магазина не конфликтуют.

Какие параметры лучше не трогать без причины

В Settings есть настройки CSS, scripts, consent manager, external services, advanced, system check и cache. Они полезны, но их нельзя менять как декоративные переключатели. Например, custom scripts требуют аккуратности, consent manager влияет на загрузку внешних сервисов, next-gen images зависят от поддержки сервера, а очистка кеша нужна для регенерации, но не исправляет неверное назначение меню.

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

Как откатывать спорную настройку

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

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

Template Styles, меню и разные версии страниц

Один из самых важных механизмов Joomla для Balou - template styles. В официальной документации YOOtheme Pro предлагается дублировать стиль yootheme - Default, открыть его через Open Website Builder и назначить на пункты меню. Документация Joomla также описывает template style как способ дать отдельным пунктам меню другой внешний вид. Для Balou это удобно, потому что главная, каталог, услуги и блог могут требовать разных визуальных акцентов.

Например, главная страница может использовать светлую пастельную вариацию с крупным hero и иллюстрациями, каталог - более нейтральную сетку с карточками товаров, а блог или журнал - спокойный текстовый шаблон. Не обязательно делать это сразу, но полезно понимать, что в Joomla визуальная логика часто привязана к пункту меню. Если страница открывается без нужного меню item, она может получить default style, а не тот, который вы ожидали.

Как не потеряться в назначениях

Рабочий метод - давать копиям template styles понятные имена. Не оставляйте пять вариантов с почти одинаковым названием. Используйте названия вроде Balou - Home, Balou - Catalog, Balou - Journal, Balou - Landing. Затем в Menu Assignment назначайте стиль только тем пунктам, которым он действительно нужен.

Если стиль не применился, проверьте три уровня: открыт ли правильный пункт меню, назначен ли style именно этому пункту, не перекрывает ли страницу другой site-wide template в Templates. У YOOtheme Pro templates есть собственная логика assignment и loading priority. Если несколько шаблонов подходят к одной странице, применяется тот, который выше в списке. Это особенно важно для страниц товаров, категорий и постов.

Меню, подзаголовки и mega menu

Balou визуально выигрывает от аккуратного меню. В YOOtheme Pro можно работать с menu items прямо из панели Menus, добавлять изображение или icon, subtitle, управлять dropdown width и создавать mega menu через builder для first-level menu items. Для небольшого магазина не стоит сразу строить сложный mega menu. Начните с простой структуры: Products, Services, Our Story, FAQ, Contact. Затем добавьте дочерние пункты только там, где они помогают покупателю.

Типичная ошибка - пытаться исправить меню через CSS, когда проблема в структуре пунктов или назначении модуля. Если меню не там, где ожидалось, сначала проверьте Joomla menu item, module position и YOOtheme Menu panel. CSS нужен только после того, как логика вывода уже правильная.

Каталог, карточки товаров и поля Product

Самый продуктовый слой Balou - поля Product. Официальная страница шаблона перечисляет поля для изображений, цены, описания, размера и посадки, доставки, материала, цвета, размера, ссылки на магазин и FAQ. Эти поля задают способ, которым контент превращается в карточку товара и страницу продукта. Поэтому при переносе реального ассортимента нельзя ограничиться заменой фотографий в hero-блоке.

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

Как заполнять Product-поля без хаоса

Удобно разбить поля на смысловые группы:

• Поля для обложек: landscape, square, hover image и варианты text color для фоновых изображений.
• Поля карточки: product images, price, short description, fabric, color и size.
• Поля доверия: delivery, size & fit, FAQ.
• Переход к покупке: shop link или другой подтверждённый путь, который ведёт пользователя дальше.

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

Что оставить пустым на первом тесте

Не заполняйте сразу все дополнительные поля, если вы ещё не понимаете, где они выводятся. Сначала проверьте один товар с базовыми данными, затем добавляйте delivery, size & fit, FAQ и связанные товары. Если после добавления поля меняется не тот блок, откройте элемент builder и проверьте источник данных.

Что проверить на публичной странице

Откройте страницу товара как обычный посетитель. Проверьте, что изображения не обрезают важную часть, цена или призыв не теряются, FAQ раскрывается корректно, а ссылка магазина ведёт туда, куда нужно. В YOOtheme Pro media settings есть focal point, width/height, responsive images и lazy loading. Если в карточке используется портретное фото ребёнка, игрушки или одежды, focal point особенно важен, иначе обрезка может убрать лицо, изделие или ключевую деталь.

Модули, позиции и меню в реальном сайте

В Joomla внешний вид страницы часто зависит не только от макета, но и от модулей. Документация YOOtheme Pro описывает панель Modules, где можно видеть позиции, назначенные модули и их присутствие в live preview. Для Balou это особенно важно: шапка, toolbar, top, bottom, sidebar, footer, builder module и мобильные позиции могут участвовать в разных страницах.

YOOtheme Pro использует позиции вроде toolbar-left, toolbar-right, logo, navbar, header, dialog, мобильные аналоги, top, bottom, sidebar и builder-1 - builder-6. Не нужно запоминать все позиции сразу. Важно понимать логику: модуль публикуется в позицию, позиция имеет настройки layout, а видимость модуля зависит от Joomla menu assignment или расширенных условий, если вы используете дополнительный менеджер модулей.

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

Builder Module как способ собрать сложный блок

YOOtheme Pro позволяет использовать builder module для сложных макетов в позициях. Это полезно, когда нужно вывести над каталогом промо-блок, подборку товаров, дополнительные ссылки или визуальную полосу с преимуществами. Документация предупреждает, что layout settings для Top и Bottom игнорируются builder module, опубликованным в этих позициях, потому что сам builder module может содержать несколько секций со своими настройками.

На практике это означает: если вы строите сложный блок через builder module, не ищите его расстояния и фон только в глобальной настройке позиции. Откройте сам module layout и настройте секции внутри него. После сохранения проверьте страницу, где модуль опубликован, а не только страницу, которая была открыта в preview в момент редактирования.

Мультиязычные сайты

Для мультиязычного проекта Balou требует дополнительной дисциплины. YOOtheme Pro поддерживает язык через Joomla-подход: отдельные статьи, меню, модули и назначение языка. В документации отдельно сказано, что menu positions не используются для multilingual sites как основной путь, вместо этого лучше работать с Menu modules и публиковать их в нужных позициях. Если у вас две языковые версии, создавайте отдельные меню и модули, а не пытайтесь спрятать всю логику в одном пункте меню.

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

Разберём сценарий, который хорошо подходит Balou: небольшому бренду нужно показать коллекцию детских вещей, объяснить возможность custom order, вывести FAQ и дать переход к внешней странице магазина или форме связи. Цель - получить главную страницу, где посетитель быстро понимает, что продаётся, чем бренд отличается и куда нажать дальше.

Цель

Собрать главную страницу с hero-блоком, 3-4 карточками товаров, блоком custom order, короткой историей бренда, FAQ-ссылкой и контактным действием. Не нужно сразу наполнять весь каталог. Сначала создаём один работающий маршрут покупателя.

Подготовка

• Установлен YOOtheme Pro и доступен Balou style или demo layout.
• Есть тестовый пункт меню для главной страницы.
• Созданы 3-4 товарных материала с заполненными основными Product-полями.
• Подготовлены изображения достаточного размера без критичной обрезки.
• Известно, куда ведёт основная ссылка действия: на форму, контакт, внешний магазин или отдельную страницу товара.

Шаги

1. Откройте страницу в Pages и загрузите подходящий layout из Balou или layout library.
2. Замените hero-текст на конкретное предложение, но сохраните общий ритм: крупный заголовок, короткая подпись, одна основная кнопка.
3. Подключите товары к сетке через подтверждённый источник данных или вручную замените элементы, если работаете без динамического каталога.
4. Проверьте Product-поля: изображение, цена или статус, short description, shop link, fabric/color/size, если они выводятся в вашем макете.
5. В блоке custom order дайте понятный сценарий: что можно заказать, как отправить запрос, сколько деталей нужно указать.
6. Добавьте FAQ-ссылку или короткий аккордеон, если вопросы повторяются: размер, уход, доставка, индивидуальный заказ.
7. Сохраните layout, затем проверьте публичную страницу как посетитель.

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

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

Нюанс, который часто мешает

Если вы заменили демо-товары, но блок на главной всё ещё показывает старые элементы, проверьте источник данных. В YOOtheme Pro макет может брать контент из динамических источников, связанных статей, custom fields или конкретной ручной структуры. Иногда пользователь меняет статью, но layout читает другое поле или другой набор материалов. В такой ситуации полезнее открыть сам элемент builder и посмотреть, откуда он берёт контент.

Практичные идеи применения Balou без выдумывания лишних функций

Balou даёт больше пользы, если использовать его не только как главную страницу, а как набор связанных сценариев. Ниже идеи, которые опираются на подтверждённые особенности шаблона и YOOtheme Pro: готовые layout, Product-поля, Post-поля, FAQ, страницы услуг, медиа и модули.

Мини-каталог с внешним переходом к покупке

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

Custom order как отдельная услуга

В демо-логике Balou есть направление услуг и custom order. Для мастерской это можно превратить в страницу с примерами работ, условиями заказа, FAQ и формой связи. Здесь важен не только красивый блок, но и последовательность: что можно заказать, какие параметры нужны, как отправить запрос, где посмотреть ответы.

Журнал бренда со связанными товарами

Post-поля Balou включают excerpt и related products. Это удобно для контентного сценария: статья рассказывает, как выбрать размер, ухаживать за материалом или собрать комплект, а рядом показываются связанные товары. Так блог перестаёт быть отдельной лентой и начинает поддерживать каталог.

FAQ как часть карточки и отдельная справка

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

Стиль, изображения и скорость: как сохранить мягкий визуал без тяжёлой страницы

Balou держится на изображениях и иллюстрациях. Это создаёт настроение, но требует аккуратной медиа-настройки. В документации YOOtheme Pro есть media manager, responsive images, lazy loading, focal point, width/height и кеш изображений. Для сайта с большим количеством фотографий эти параметры важны не меньше, чем цвет кнопок.

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

Focal point и обрезка

Если фотография обрезается в карточке, проверьте focal point. YOOtheme Pro позволяет управлять тем, какая часть изображения останется важной при crop. Для товаров это может быть лицо модели, фактура ткани, игрушка или деталь аксессуара. Заполните alt-тексты в полях изображений, если они доступны в вашем workflow: это помогает доступности и поисковому пониманию, но не заменяет нормальную структуру страницы.

Lazy loading и первый экран

По умолчанию YOOtheme Pro использует lazy loading для изображений и видео, но для картинок в первом экране может понадобиться eager loading. Не включайте это везде. Логика такая: hero-изображение, которое видно сразу, должно появляться быстро; изображения ниже по странице могут загружаться позже. После изменения проверьте page speed инструментом, который вы обычно используете, и сравните не только баллы, но и фактическое появление hero-блока.

Маленькая безопасная CSS-правка

Если после замены контента русские названия товаров выглядят слишком плотно, можно добавить собственный класс к секции или карточке в builder и вставить CSS в панель Settings - CSS. Это безопаснее, чем править файлы шаблона, потому что изменение легко удалить. Пример ниже не использует скрытые API Balou и не меняет ядро Joomla или YOOtheme Pro:

.balou-product-list .uk-card-title {
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.balou-product-list .uk-button {
  border-radius: 8px;
  letter-spacing: 0;
}

.balou-product-list .uk-card {
  overflow: hidden;
}

Задача этого фрагмента - чуть улучшить читаемость карточек, если вы сами назначили классу секции имя balou-product-list. После вставки проверьте карточки товаров, hover-состояния и мобильный вид. Откат простой: удалите CSS из Settings - CSS или снимите пользовательский класс с секции.

Если нужна глубокая переработка HTML, используйте child theme или Joomla output overrides, а не прямую правку файлов YOOtheme Pro. Документация YOOtheme Pro описывает child themes и template files, а документация Joomla - overrides. Это правильный путь для изменений, которые должны пережить обновления.

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

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

Маршрут посетителя

1. Откройте главную страницу и убедитесь, что сразу понятны бренд, товар или услуга и следующий шаг.
2. Перейдите в каталог или раздел товаров и проверьте сетку карточек.
3. Откройте карточку товара, проверьте изображения, описание, размер, материал, FAQ и ссылку действия.
4. Вернитесь через меню и проверьте, что навигация не теряет активное состояние.
5. Откройте страницу услуг или custom order и убедитесь, что пользователь понимает процесс заказа.
6. Проверьте FAQ и контактную страницу.

Маршрут администратора

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

Маршрут технической проверки

Откройте System Check в YOOtheme Pro, посмотрите предупреждения, проверьте права на папки, работу медиа-кеша и отсутствие ошибок в консоли браузера. Если включали consent manager, проверьте видео, карты и внешние скрипты в состоянии до согласия и после согласия. Если сайт мультиязычный, проверьте каждую языковую версию как отдельный маршрут.

Когда проверку считать завершённой

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

Рабочий результат для Balou - это не совпадение пиксель в пиксель с демо, а предсказуемая цепочка: настройка в админ-панели - сохранённый layout - правильный template style - видимый результат на нужном пункте меню.

Почему внешний вид не совпадает с демо и как найти причину

У шаблонов на базе YOOtheme Pro типичные проблемы почти всегда лежат в одной из пяти зон: установлен не тот пакет, страница открыта через другой template style, модуль не назначен на нужный пункт меню, динамический контент не заполнен или кеш показывает старое состояние. Ниже диагностическая карта для Balou и похожих Joomla-шаблонов.

Поставили demo package поверх существующего сайта

Симптом: Joomla не принимает архив через установщик или после загрузки ничего не похоже на демо. Возможная причина - вы пытаетесь установить полный demo package как обычный template zip. Документация YOOtheme Pro разделяет эти сценарии: demo package является полной установкой Joomla, а не расширением для существующего сайта.

Что проверить: имя архива, описание загрузки, наличие файлов полной установки, инструкции разработчика. Как исправить: установить template zip в существующую Joomla или развернуть demo package отдельно как новый сайт. Если ошибочный пакет уже загружался, проверьте состояние расширений и восстановите тестовую копию.

Template style не применился к странице

Симптом: на одной странице стиль правильный, на другой - default или старый вид. Возможная причина - пункт меню использует другой template style или страница открывается без ожидаемого menu item. Проверьте Extensions - Templates - Styles, затем Menu Assignment. Также проверьте Details у самого menu item, где можно выбрать template style.

Исправление: назначьте нужный style конкретному пункту меню, очистите кеш и откройте страницу по URL этого menu item. Если страница относится к типу, для которого есть YOOtheme template, проверьте loading priority в панели Templates.

Модуль не отображается в header, top или bottom

Симптом: блок есть в админке, но не виден на публичной странице. Возможная причина - неправильная позиция, unpublished status, menu assignment, язык, права доступа или builder module в другой позиции. В YOOtheme Pro Modules panel смотрите не только имя модуля, но и серую точку видимости для текущей preview-страницы.

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

Карточка товара пустая или показывает не те данные

Симптом: в каталоге нет изображения, цены, FAQ или связанных товаров. Возможная причина - Product-поле не заполнено, поле не подключено в layout, используется другой source, не установлен нужный field extension или текущая страница открывает не тот материал. Для связанных товаров проверьте Articles Field, если он используется в вашей сборке.

Исправление: заполните один тестовый товар всеми основными полями и откройте элемент builder, который выводит данные. Сравните источник элемента с фактической статьёй. Если поле отсутствует в Joomla, проверьте, был ли импортирован demo content и нужные custom fields.

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

Симптом: в карточках обрезается важная часть фото, а первый экран появляется с задержкой. Возможная причина - неверные width/height, focal point, lazy loading для hero-изображения или серверная обработка медиа. Проверьте настройки изображения в YOOtheme Pro и поддержку GD на сервере.

Исправление: задайте focal point для проблемного фото, проверьте eager loading только для первого экрана, очистите кеш YOOtheme Pro и откройте страницу в режиме без кеша браузера. Если после включения next-gen images появились проблемы, временно отключите настройку и сравните результат.

Customizer не сохраняет изменения или показывает ошибки

Симптом: изменения видны в preview, но не сохраняются, либо интерфейс сообщает о системной проблеме. Возможная причина - права доступа, файловые права, ошибка CSS/Less, кеш или ограничение пользователя. Сначала откройте System Check, затем проверьте роль пользователя и право Edit Templates.

Исправление: удалите последний custom CSS/Less, если ошибка появилась после него, проверьте права на запись в нужные папки, очистите кеш и повторите сохранение на тестовой странице. Если ошибка связана с сервером, не маскируйте её декоративными правками - сначала устраните системную причину.

Ограничения, о которых лучше знать заранее

Первое ограничение - зависимость от YOOtheme Pro. Balou построен как theme package для этой системы, поэтому перенос на другой builder или чистый шаблон Joomla не будет простым копированием HTML. Если в будущем команда планирует уйти от YOOtheme Pro, лучше заранее отделять контент от декоративной логики: хранить товары и статьи в понятной структуре, не превращать каждое поле в уникальный визуальный трюк и документировать, какие layouts используются.

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

Третье ограничение - мультиязычность и редакторские роли. Joomla поддерживает языки, а YOOtheme Pro даёт language switcher и workflow для страниц, но контент всё равно нужно переводить и назначать. Если редакторов несколько, ограничьте доступ к template settings и договоритесь, кто меняет style, кто отвечает за Product-поля, кто обновляет медиа, а кто проверяет публичный результат.

Наконец, не обещайте поисковый рост только из-за шаблона. Хорошая структура, responsive images, lazy loading, корректные заголовки и чистая навигация помогают создать техническую основу, но SEO зависит от контента, скорости, индексации, внутренних ссылок, метаданных и качества страниц. Balou даёт красивую и управляемую оболочку, а не автоматическую стратегию продвижения.

Когда YOOtheme Balou будет удачным выбором

Balou будет удачным выбором, если вы строите визуальный сайт для небольшого магазина, детского или fashion-проекта, handmade-мастерской, услуги с мягкой подачей или бренда, которому нужны каталог, история, FAQ, контакт и публикации. Он особенно полезен, когда вы готовы работать в YOOtheme Pro и использовать Joomla-механизмы: template styles, menu assignment, module positions, custom fields, media manager и safe overrides.

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

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