YOOtheme Makai - Шаблон Joomla

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

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

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

Главный фокус - практическая настройка после установки. В статье есть рабочий сценарий главной страницы, карта позиций модулей, настройка menu assignment, логотипа, стилей, медиа, проверки скорости, диагностика типичных проблем и похожие решения. Там, где точные функции зависят от вашей версии YOOtheme Pro или Joomla, рекомендации сформулированы осторожно: сначала проверка в админ-панели и документации, потом изменение на сайте.

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

Какую задачу решает Makai и где он раскрывается лучше всего

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

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

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

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

YOOtheme Makai будет уместен, если у проекта есть яркая визуальная тема, фотографии, понятные услуги и несколько сценариев для посетителя. Например, школа спорта, прокат инвентаря, outdoor-лагерь, йога-студия у воды, тур с активностями, локальный клуб, инструкторский сайт или небольшой сервис с расписанием.

• Нужна выразительная главная страница с крупным hero-блоком и несколькими сервисными секциями.
• Есть услуги, которые можно разделить на уроки, лагеря, прокат, консультации или пакеты.
• Важны фотографии, атмосфера места, доверие к команде и быстрый контакт.
• Редактор сайта готов работать в YOOtheme Pro Builder, а не только в стандартном редакторе Joomla.
• Нужно быстро получить стартовую структуру, но оставить возможность кастомизации через стили и модули.

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

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

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

Что входит в пакет и как читать демо-страницы

Официальная страница Makai описывает пакет как YOOtheme Pro theme package для Joomla: в нём есть готовые страницы, стилевые вариации и curated images. Для практической работы это важно перевести на язык задач. Готовые страницы не обязаны становиться страницами вашего сайта один к одному. Их правильнее читать как библиотеку решений: как оформлена услуга, как выглядит прайс, как устроен контакт, какие секции можно повторить на странице лагеря или проката.

В демо видны страницы Home, Lessons, Camps, Rentals, About Us, Journal и Contact. Для реального сайта эти названия лучше заменить на вашу структуру. Если вы делаете школу, оставьте уроки, лагеря и прокат. Если это фитнес-студия, переименуйте их в тренировки, абонементы, расписание и команду. Если это туристический проект, используйте маршруты, проживание, бронирование и вопросы.

Сильная сторона Makai - не конкретное слово Surf, а готовая композиционная логика. Она помогает показать услугу через последовательность: эмоциональный первый экран, краткий выбор направлений, доказательства места и команды, подробные блоки услуг, контакты и навигация к действию.

Макеты страниц

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

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

Стилевые вариации

У Makai есть несколько готовых стилевых вариантов. На официальной странице перечислены white-вариации и тёмный бирюзовый стиль. Это не просто смена цвета кнопки. В YOOtheme Pro стили связаны с UIkit-компонентами, переменными, шрифтами, карточками, фоном и состояниями элементов. Поэтому менять стиль нужно после того, как вы проверили, как выглядят hero, меню, карточки услуг, формы, footer, mobile header и контентные страницы.

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

Изображения и атмосфера

Пакет Makai опирается на большой набор тематических изображений. Используйте их как стартовый визуальный язык, но не оставляйте демо-фото там, где они вводят в заблуждение. Если школа находится не у океана, не стоит строить hero вокруг волны, если фактическая услуга - сапборды на озере или фитнес на пляже. Лучше сохранить структуру и ритм секций, но заменить кадры на честные фотографии места, команды и инвентаря.

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

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

Перед установкой важно понять, что именно у вас на руках: обычный ZIP темы YOOtheme Pro для существующего сайта или demo package с полной установкой Joomla и демо-контентом. Это разные сценарии. Официальная документация YOOtheme прямо разделяет установку темы на существующий сайт и развёртывание демо-пакета как полной Joomla-инсталляции.

Если сайт уже работает, не пытайтесь установить demo package поверх него как обычное расширение. Такой пакет предназначен для новой установки. Для существующего сайта ставьте YOOtheme Pro template, а затем загружайте нужные layouts/styles через инструменты YOOtheme Pro, если они доступны в вашей установке. Так вы не рискуете перезаписать структуру сайта и не смешиваете демо-данные с боевым контентом.

Техническая готовность сайта

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

• Убедитесь, что администратор имеет права на установку расширений, редактирование шаблонов и управление модулями.
• Сделайте резервную копию файлов и базы данных перед установкой или импортом демо-структуры.
• Проверьте, что сайт может загружать ZIP-архивы нужного размера через стандартный установщик Joomla.
• Проверьте, что папка изображений доступна для записи, потому что YOOtheme Pro может сохранять загруженные и обработанные медиа.
• На тестовом домене отключите агрессивную минификацию и кеш до завершения первичной настройки.

Контентная готовность

Шаблон будет выглядеть убедительно только при нормальной структуре контента. До установки соберите короткий список страниц: главная, услуги, цены, о команде, вопросы, контакты, блог или журнал. Затем подготовьте реальные данные: названия услуг, 2-3 абзаца о каждой, фотографии, адрес, часы работы, телефоны, социальные ссылки, условия бронирования, ответы на частые вопросы.

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

Рабочая среда для изменений

Даже если сайт небольшой, настройку лучше делать на копии. В YOOtheme Pro много глобальных параметров: стиль, шапка, меню, модули, изображения, custom CSS, consent scripts, media folder. Одно изменение может затронуть несколько страниц. Тестовая среда даёт возможность проверить результат и только потом переносить изменения на основной сайт.

Установка: тема, demo package и первый запуск Website Builder

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

Сценарий для существующего сайта

1. Сделайте резервную копию сайта и базы данных.
2. Откройте админ-панель Joomla и установите архив YOOtheme Pro через стандартный установщик расширений.
3. Перейдите к шаблонам сайта и назначьте YOOtheme Pro стилем по умолчанию или отдельным стилем для нужных пунктов меню.
4. Откройте новый template style и нажмите Open Website Builder.
5. Проверьте, что preview показывает нужную страницу, а не случайный пункт меню или старый шаблон.
6. Загрузите нужный layout или соберите страницу на основе секций Makai.

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

Сценарий для нового сайта

Для нового сайта demo package удобно разворачивать как полноценную Joomla-инсталляцию. Вы получаете готовый пример, где видно, какие страницы, модули, меню и изображения создают исходный demo. После установки откройте админ-панель и не удаляйте демо-данные сразу. Сначала изучите, где находится главная, как построено меню, какие модули опубликованы в header, toolbar, bottom или dialog, и какие страницы собраны в builder.

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

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

Проверка должна быть короткой, но последовательной. Откройте публичную часть сайта, админ-панель, Website Builder и список template styles. Посмотрите, совпадает ли активный стиль с ожидаемым, отображается ли шапка, открываются ли пункты меню, загружается ли builder-preview, сохраняются ли изменения.

Минимальная проверка после установки YOOtheme Makai

Что проверить	Где смотреть	Что считается нормальным результатом
Активный template style	Joomla template styles и пункт меню главной страницы	Нужный стиль назначен на все страницы или на выбранные пункты меню.
Website Builder	Кнопка Open Website Builder	Preview открывается, элементы выделяются, изменения можно сохранить.
Меню и mobile header	Публичная часть сайта и panel Menus	Главная навигация отображается на desktop и на малой ширине.
Изображения	Главная страница, media manager, папка изображений	Большие изображения не ломают пропорции, lazy loading не скрывает важный контент.
Модули	Panel Modules и Joomla Module Manager	Модули видны на нужных страницах и не появляются в неожиданных позициях.

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

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

Template Styles и назначение на пункты меню

Joomla позволяет иметь несколько template styles и назначать их разным пунктам меню. Документация YOOtheme Pro рекомендует дублировать базовый стиль, открыть его в Website Builder и назначить нужным menu items. Это полезно для Makai, если главная страница должна быть максимально визуальной, а внутренние страницы - спокойнее и легче.

Практический пример: создайте отдельный стиль для главной страницы с крупным hero и насыщенным фоном, а для страниц с расписанием или условиями сделайте стиль с более простой шапкой и меньшим визуальным шумом. Главное - не плодить стили без причины. Если два стиля отличаются только одним цветом кнопки, лучше решить это через style library или класс секции.

Style Library и визуальные вариации Makai

Официальная страница Makai подтверждает несколько style variations. Это значит, что вы можете быстро сменить общий характер сайта, но не стоит выбирать стиль только по вкусу. Сначала проверьте контраст текста на hero, читаемость навигации, цвет кнопок, вид карточек услуг и фоновых секций. Стиль, который красиво смотрится на демо-фотографиях океана, может стать слабее на ваших снимках помещения или тренеров.

Используйте Style Library как контролируемый эксперимент:

1. Сохраните текущий стиль в My Styles, чтобы было куда вернуться.
2. Выберите новую вариацию и проверьте главную, страницу услуг, контакты и мобильное меню.
3. Оцените контраст кнопок, ссылок, заголовков и текста на фото.
4. Если стиль подходит, сохраните его под понятным именем.
5. Если стиль ломает читаемость, вернитесь к сохранённому варианту.

Лучшие настройки YOOtheme Makai начинаются с проверки читаемости, а не с выбора самого эффектного цвета. Особенно это важно для hero, где текст лежит поверх фотографии воды.

Settings, изображения и системные параметры

В панели Settings проверьте favicon, пользовательский CSS, API key для обновлений и библиотеки макетов, media folder, next-gen images, image URLs, system assets, cache и system check. Не включайте всё подряд. Например, загрузка Bootstrap, Font Awesome или jQuery нужна только в конкретных случаях, когда это требуется стандартным Joomla-выводом или вашим кодом. Если сайт работает без них, лишние системные ассеты могут только увеличить вес страницы.

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

Права доступа к конструктору

Если сайт редактирует несколько человек, ограничьте доступ к YOOtheme Pro customizer. Редактору, который меняет расписание или текст услуги, не всегда нужен доступ к глобальному стилю, шапке и футеру. Внутри YOOtheme Pro есть защита от одновременной перезаписи layout разными авторами, но она не заменяет понятные роли и правила работы.

Template styles и меню: как управлять разными страницами Makai

Для Joomla-шаблона особенно важны template styles. В YOOtheme Pro можно дублировать стиль, изменить его и назначить на отдельные пункты меню. Это помогает сделать, например, яркую главную страницу, спокойную страницу статей и отдельный стиль для лендинга лагеря. Но у этой гибкости есть цена: если назначение пунктов меню сделано неаккуратно, пользователь увидит не тот header, не тот цветовой стиль или не тот набор модулей.

Когда нужен один стиль

Один style лучше выбрать для небольшого сайта, где все страницы должны выглядеть единообразно: главная, услуги, цены, контакты и журнал. В этом случае меньше риск, что редактор изменит цвет или шапку в одном style и забудет повторить настройку в другом. Такой вариант проще поддерживать и легче объяснить команде.

Начните с официальной variation, которая ближе к вашему контенту. Для морской или outdoor-темы подойдёт насыщенная бирюзовая основа; для студии или wellness-проекта чаще уместнее светлая variation с мягкими акцентами. После выбора проверьте контраст текста на больших изображениях и состояния кнопок.

Когда нужно несколько стилей

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

Не создавайте новый style под каждую мелкую правку. Лучше держать 2-3 осмысленных стиля: основной, landing, контентный. Для каждого style запишите, на какие пункты меню он назначен, какой header используется, какие модули должны быть видны и какой цветовой вариант лежит в основе.

Меню как основа маршрута пользователя

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

YOOtheme Pro интегрирует Joomla Menu Manager в panel Menus, но не отменяет правила Joomla. Пункт меню определяет URL, тип страницы, назначение template style и часто влияет на то, какие модули отображаются. Поэтому не удаляйте и не переименовывайте пункты меню вслепую. Сначала проверьте, не назначен ли на них отдельный стиль или модуль.

Практический порядок настройки меню

1. Создайте или очистите основное меню Joomla.
2. Назначьте главную страницу на нужный пункт меню.
3. В panel Menus выберите позицию Navbar для основного меню.
4. Для мобильной навигации проверьте Mobile Navbar или Mobile Dialog.
5. Если нужен mega menu, используйте builder только для первого уровня, где это действительно помогает.
6. После сохранения проверьте desktop, tablet и mobile preview.

Мини-итог: template styles отвечают за визуальное поведение страниц, а меню - за маршруты и назначения. Если эти два слоя понятны, настройка Makai становится предсказуемой.

Меню, позиции модулей и навигация под реальную школу

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

Главное меню и мобильная навигация

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

Проверьте, что мобильные пункты ведут туда же, куда десктопные. В YOOtheme Pro есть отдельные позиции для мобильной шапки и диалога. Для мультиязычного сайта документация рекомендует использовать menu modules в позициях вроде navbar, dialog, navbar-mobile и dialog-mobile, потому что обычные menu positions не подходят для мультиязычной схемы.

Позиции модулей

YOOtheme Pro интегрирует Joomla Module Manager и показывает модули по позициям. Серые индикаторы помогают понять, опубликован ли модуль на странице предпросмотра, а наведение подсвечивает представление модуля в live preview. Для Makai это удобно при настройке футера, контактных блоков, языкового переключателя, меню услуг, баннеров и дополнительных блоков в top или bottom.

Если модуль не нужен на странице, не скрывайте его CSS-ом. Правильнее проверить публикацию, позицию и menu assignment. Для более сложных правил видимости YOOtheme рекомендует Advanced Module Manager от Regular Labs. Это не значит, что расширение нужно всем, но для сайта с разными услугами, языками или сезонными кампаниями оно может упростить условия показа.

Builder Module

Builder Module позволяет использовать YOOtheme Pro builder внутри Joomla-модуля и выводить сложные блоки в позициях. Для Makai это хороший способ сделать промо-блок над основным контентом, секцию сезонного лагеря, предупреждение о расписании или небольшой блок бронирования. Но не стоит превращать каждый модуль в мини-страницу: чем больше сложных builder modules, тем внимательнее нужно проверять скорость и понятность администрирования.

Настройка внешнего вида: шапка, логотип, стили, изображения и consent

После установки самое полезное место - YOOtheme Pro customizer. В нём настраиваются site-level параметры: логотипы, header, toolbar, breadcrumbs, media, scripts, consent manager, custom CSS и advanced options. Для Makai этот этап особенно важен, потому что шаблон узнаётся по шапке, рамкам навигации, крупной типографике и фотографиям. Если заменить только текст, но не настроить логотип, меню, контраст и изображения, сайт останется похожим на демо.

Логотип и шапка

В Makai header занимает заметную роль: тонкие линии, крупная навигация, контактные детали и социальные элементы работают как часть дизайна. Замените logo text или logo image до редактирования секций. Если логотип сложный, подготовьте упрощённую версию для mobile header. Для тёмных и фото-фоновых секций держите inverse logo, чтобы шапка не терялась на изображении.

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

Стиль, шрифты и цвета

YOOtheme Pro Style Customizer работает через UIkit и Less-переменные. Это значит, что изменение глобального цвета или типографики влияет не только на один блок, а на кнопки, карточки, заголовки, навигацию и другие компоненты. Для Makai это удобно: можно сохранить исходный ритм, но адаптировать акценты под бренд.

Действуйте от общего к частному:

1. Выберите ближайшую готовую style variation.
2. Проверьте шрифты заголовков и базовый текст на кириллице, если сайт русскоязычный.
3. Настройте основные цвета кнопок, ссылок и карточек.
4. Проверьте состояние hover, contrast на изображениях и видимость текста в inverse-секциях.
5. Сохраните изменения и очистите кеш YOOtheme Pro, если стиль не обновился на публичной части.

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

Изображения и медиа

YOOtheme Pro умеет работать с media fields, автоматическим изменением размеров, responsive images и lazy loading. Но качество результата зависит от исходников. Загружайте крупные фотографии с понятным объектом в кадре. Для hero оставляйте запас по краям, потому что crop меняется на разных экранах.

Для Makai лучше заранее создать небольшой media guide:

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

Consent manager и внешние сервисы

Если на сайте используются карты, видео, аналитика или маркетинговые скрипты, настройте consent manager в YOOtheme Pro до публикации. В документации YOOtheme Pro описаны категории consent и placeholders для внешнего контента, если согласие не дано. Для сайта школы или проката это особенно заметно на контактах: карта и видео не должны грузиться неожиданно, если политика сайта требует согласия.

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

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

Если после замены фото карточки услуг стали хуже читаться, не правьте ядро шаблона. В YOOtheme Pro можно добавить custom CSS в panel Settings. Сначала в builder задайте нужному элементу или section дополнительный класс, например makai-service-note в advanced-настройках элемента. Затем добавьте небольшой CSS:

.makai-service-note {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 91, 116, 0.18);
}

.makai-service-note .uk-heading-small,
.makai-service-note h3 {
  color: #073f52;
}

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

Модули и позиции Joomla в шаблоне Makai

Модули - одна из причин, почему Joomla-шаблон нельзя настраивать как обычную статичную страницу. YOOtheme Pro интегрирует Joomla Module Manager и показывает позиции прямо в Modules panel. Для Makai это важно в header, toolbar, dialog, bottom, footer-сценариях, контактах и повторяемых блоках. Если не понимать позиции, можно столкнуться с типичной ситуацией: модуль опубликован, но на странице его не видно.

Какие позиции использовать чаще всего

В YOOtheme Pro есть позиции для toolbar, logo, navbar, header, dialog, mobile-вариантов, sidebar, top, bottom и builder-позиций. Для Makai чаще всего нужны:

• toolbar-left и toolbar-right - для адреса, телефона, социальных ссылок или короткой строки над шапкой.
• navbar и navbar-mobile - для главного меню.
• dialog и dialog-mobile - для offcanvas-меню, контактов или дополнительной навигации.
• bottom - для footer-блоков, контактов, расписания или повторяемых ссылок.
• builder-1 - builder-6 - для вывода модулей внутри page builder через Position element.

Важный нюанс: sidebar может не отображаться на страницах, собранных полностью в YOOtheme Pro page builder. Документация объясняет это тем, что full-width builder-секции требуют размещать sidebar внутри самой builder-структуры, например через Position element. Поэтому, если модуль нужен на builder-странице, думайте не только о стандартной позиции Joomla, но и о месте внутри макета.

Как не потерять модуль при настройке

Когда модуль не виден, не начинайте сразу менять CSS. Сначала проверьте четыре слоя: опубликован ли модуль, назначен ли он на нужные menu items, находится ли он в позиции, которая реально рендерится на этой странице, и не скрыт ли он настройкой visibility. В YOOtheme Pro Modules panel помогает синий highlight в preview, но он работает только если модуль опубликован и относится к текущей странице.

Диагностический порядок

1. Откройте Joomla Module Manager и проверьте статус публикации.
2. Проверьте Menu Assignment: модуль должен быть назначен на текущий пункт меню или на все страницы, где он нужен.
3. Откройте Website Builder и panel Modules, найдите позицию и модуль.
4. Проверьте visibility по устройствам, если модуль исчезает только на мобильной ширине.
5. Если страница builder-only, используйте Position element или builder module вместо обычного sidebar.

Модули в Makai лучше использовать для повторяемой информации, а не для каждого визуального блока. Hero, карточки услуг и галерея обычно удобнее редактируются в builder; контакты, расписание, языковой переключатель, footer-меню и повторяющиеся CTA часто лучше держать модулем.

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

YOOtheme Pro поддерживает dynamic content: элементы builder могут загружать данные из Joomla, например заголовок статьи, featured image, пользовательские поля, категории и связанные материалы. Для Makai это особенно полезно, если сайт быстро выходит за рамки одной статичной главной страницы. Уроки, лагеря, прокат, FAQ, статьи журнала и карточки команды можно поддерживать через Joomla-данные, а не через копирование блоков.

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

Когда достаточно статичного builder-макета

Статичный макет нормален для небольшой страницы, которую редко меняют: главная, лендинг сезонной программы, разовая страница акции. В этом случае builder даёт контроль над композицией и позволяет сохранить визуальную атмосферу Makai. Главное - не копировать один и тот же блок в десять мест. Если блок повторяется, лучше сделать layout/preset или модуль.

Когда нужен template builder

Template builder нужен, когда одна структура должна применяться к разным материалам. Например, у вас есть несколько статей-услуг: beginner lesson, kids lesson, corporate lesson, rentals. Вместо ручного копирования макета можно создать шаблон для single article или category blog и подключать поля Joomla к элементам: заголовок, изображение, краткое описание, уровень, длительность, цена, CTA.

Документация YOOtheme Pro подчёркивает, что templates можно назначать на page types вроде single article, category blog, featured articles, contacts, search и другие. Для Makai это даёт рабочий путь: главную оставить как дизайнерскую страницу, а повторяемые услуги и записи журнала постепенно перевести на шаблоны.

Что делать с invalid sources

При переносе layout из demo package на ваш сайт dynamic content может ссылаться на источники или поля, которых нет в текущей Joomla-инсталляции. В документации описаны invalid sources and fields: выбранный source не существует, поле удалено, страница не даёт нужного source, либо source выбран, но поля не mapped. В builder такие случаи подсвечиваются как проблема.

Если после импорта блок пустой или показывает предупреждение, не считайте это ошибкой Makai. Часто проблема в том, что demo использует данные, которых нет на вашем сайте. Создайте нужные Joomla-поля, замените source на существующий или переведите блок в статичный режим, если динамика вам не нужна.

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

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

Разберём реалистичный сценарий, потому что именно на нём видно, как YOOtheme Makai работает как система. Допустим, нужно подготовить главную страницу небольшой школы серфинга: первый экран, выбор направлений, блок о клубном доме, карточки уроков, партнёры, контакты и быстрый путь к записи. Мы не описываем покупку или активацию продукта, а работаем с уже доступным шаблоном и YOOtheme Pro.

Цель

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

Подготовка

• Создайте пункт меню Home или русскоязычный аналог и назначьте его главной страницей.
• Убедитесь, что на пункт меню назначен нужный template style Makai.
• Подготовьте логотип, hero-фото, 4 фотографии услуг, 1 фото локации и контактные данные.
• Решите, какие страницы будут дочерними: уроки, лагеря, прокат, цены, контакты.
• Откройте страницу в Website Builder и сохраните исходный layout как backup, если такая возможность доступна в вашей установке.

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

1. Замените hero-заголовок на конкретное обещание: не общий слоган, а понятное предложение для вашей школы.
2. В верхней строке или toolbar укажите город, email и телефон. Если контакты будут повторяться, вынесите их в модуль.
3. В секции услуг оставьте 3-4 направления. Для каждого добавьте фото, короткое описание и ссылку на подробную страницу.
4. В блоке club house или аналогичном блоке объясните, что есть на месте: раздевалки, зона отдыха, прокат, безопасность, инструкторы.
5. В блоке выбора доски или оборудования используйте не рекламный текст, а практический совет: кому подходит soft top, кому нужен advanced board, где уточнить наличие.
6. В нижней части добавьте партнёров, расписание, контакты и CTA к странице записи или контактной форме.
7. Настройте mobile header и проверьте, что главный CTA не пропадает на малой ширине.

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

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

На мобильной ширине hero не должен занимать весь экран так, что пользователь не видит следующего действия. Если текст слишком длинный, сократите заголовок или перенесите второстепенную фразу ниже. Если фото обрезает важный объект, выберите другой crop. Если меню слишком длинное, используйте dialog/mobile menu.

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

Главная страница может выглядеть правильно в builder-preview и иначе в публичной части сайта из-за кеша, другого template style, старого CSS-файла стиля или назначения меню. Поэтому после сохранения очистите кеш YOOtheme Pro, кеш Joomla и кеш внешнего оптимизатора, если он включён. Затем проверьте публичный URL без авторизации.

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

Makai можно оставить в surf school-логике, но чаще его адаптируют под смежные проекты. Ниже - не абстрактные “сферы применения”, а рабочие сценарии, где понятно, какую часть шаблона использовать и как проверить результат.

Школа активного спорта

Для школы серфинга, SUP, кайтсерфинга, скалолазания или outdoor-тренировок оставьте структуру уроков, лагерей и проката. Используйте карточки услуг как вход в подробные страницы, а journal - как базу знаний: безопасность, подготовка, экипировка, погодные условия. Результат проверяется просто: пользователь должен найти занятие по уровню подготовки и увидеть способ записаться.

Клуб или фитнес-студия

Для студии замените surf house на пространство клуба, lessons - на направления занятий, camps - на интенсивы, rentals - на абонементы или оборудование. Header и hero лучше сделать менее экстремальными, а в карточках добавить уровень нагрузки и формат занятий. Проверьте, что mobile header не скрывает расписание и контакты.

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

Если сайт строится вокруг проката, используйте страницы Rentals и Price List как основу. Разделите оборудование по категориям, добавьте условия, депозит, ограничения, время возврата и контакт для бронирования. Не обещайте онлайн-бронирование, если его нет в Joomla-компоненте или форме. Визуально проверьте, что карточки оборудования не выглядят как пустая галерея без условий.

Контентный проект о месте и команде

Если задача - продвигать локацию, тур или клубное сообщество, сильнее используйте About, Journal и Contact. Для статей можно подключить dynamic content и шаблоны single article, чтобы посты выглядели как часть Makai, а не как стандартная страница Joomla без дизайна. Проверка результата - статья должна иметь читаемый заголовок, изображение, meta-информацию и навигацию назад к услугам.

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

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

Изображения и PageSpeed

Большие фотографии - главный риск для Makai. YOOtheme Pro умеет генерировать responsive images и lazy loading, но не спасает плохой исходник. Проверьте вес hero-фото, изображения карточек и галереи. Не загружайте десятки мегабайт ради одного блока. Для изображений с текстом избегайте встроенного текста на фото: он хуже адаптируется и часто становится нечитаемым на мобильной ширине.

Если включаете next-gen images, проверьте поддержку на хостинге. В документации YOOtheme указано, что некоторые оптимизированные форматы зависят от PHP и GD. Если после включения изображения перестали генерироваться или появились пустые места, верните настройку назад и проверьте системные требования.

SEO-структура страниц

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

Используйте Joomla menu item metadata и поля статей там, где это уместно. Не делайте одинаковые мета-описания на всех страницах. Для страниц услуг добавьте внутренние ссылки между уровнем подготовки, прокатом и контактной формой. Для журнала используйте категории и теги, если они помогают навигации, а не только “для SEO”.

Права доступа и редакторы

YOOtheme Pro customizer доступен пользователям с правом редактирования шаблонов. Документация рекомендует осторожно относиться к этому праву, особенно если редакторы могут открывать YOOtheme Pro через фронтальное редактирование. На практике лучше разделить роли: контент-редактор меняет статьи, изображения и модули, а вебмастер меняет builder-макеты, styles и custom CSS.

Если дать всем доступ ко всему, сайт быстро теряет стабильность. Один редактор меняет module assignment, другой меняет style, третий правит header, и через месяц уже непонятно, почему разные страницы выглядят по-разному. Для Makai дисциплина ролей важнее, чем количество настроек.

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

Готовый шаблон почти всегда хочется адаптировать: изменить подпись, усилить контраст, добавить другой footer, скрыть лишний блок, вывести языковой переключатель. Делайте это через настройки YOOtheme Pro, Joomla-модули, language overrides, template styles, child theme или аккуратный custom CSS. Не правьте файлы ядра YOOtheme Pro ради маленькой визуальной задачи.

Language overrides для интерфейсных строк

Если на русскоязычном сайте осталась строка вроде Continue Reading, безопаснее использовать Joomla language overrides. Документация Joomla описывает штатный механизм переопределения строк без изменения языковых файлов. Такой подход переживает обновления лучше, чем ручное редактирование `.ini`-файлов.

1. Найдите строку в публичной части сайта.
2. Откройте языковые переопределения Joomla для нужного языка и клиента.
3. Найдите константу по тексту или создайте override по известной константе.
4. Сохраните перевод и очистите кеш.
5. Проверьте страницу в публичной части без авторизации.

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

Child theme и overrides

Для глубоких изменений YOOtheme Pro поддерживает child theme, а Joomla - template overrides. Это уже работа для разработчика. Используйте такой путь только если настройка через builder, style customizer, modules и CSS не решает задачу. Например, можно изменить вывод отдельного Joomla-компонента через override, но не стоит начинать с этого ради смены цвета кнопки.

Перед любым override зафиксируйте цель: что нужно изменить, где находится исходный вывод, какие файлы будут затронуты, как проверить результат и как откатить изменение. После обновления Joomla или YOOtheme Pro проверяйте overrides, потому что структура исходных шаблонов может измениться.

Custom CSS как последний тонкий слой

Custom CSS хорош для маленьких визуальных корректировок: отступ, цвет, контраст, ширина, скрытие декоративного элемента, если это не ломает доступность. Но он плох как способ переписать весь шаблон. Если CSS становится длиннее пары десятков строк, вероятно, вы боретесь с выбранным style или неверной структурой секций.

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

Почему Makai может отображаться неправильно и как это диагностировать

Проблемы с Joomla-шаблоном редко имеют одну причину. Чаще они находятся на стыке menu assignment, module positions, кеша, стилей, динамического контента и прав доступа. Ниже - практическая диагностика для Makai и YOOtheme Pro без попытки угадать проблему вслепую.

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

Симптом: после установки сайт открывается, но шапка, hero, цвета или секции не похожи на ожидаемый Makai.

Возможные причины: установлен не demo package, а только тема; нужный layout не загружен; на пункт меню назначен другой template style; открыта не та страница; кеш отдаёт старый CSS. Проверьте active template style, назначение главного пункта меню, наличие нужного layout в builder и очистите кеш YOOtheme Pro/Joomla. Если вы работаете на существующем сайте, нормальная ситуация, что demo-контент не появляется автоматически.

Модуль опубликован, но его не видно

Симптом: модуль есть в Joomla Module Manager, но не отображается в header, bottom или sidebar.

Проверьте статус публикации, позицию, menu assignment и visibility. Если страница собрана в YOOtheme Pro page builder, обычный sidebar может не рендериться там, где вы его ждёте. Используйте Position element или builder module для вывода внутри макета. Если модуль появляется в preview, но пропадает публично, очистите кеш и проверьте права доступа.

Изменения в style customizer не видны

Симптом: вы поменяли цвет, шрифт или custom CSS, но публичная страница не обновилась.

Проверьте, сохранены ли изменения, не открыт ли другой template style, не включён ли внешний кеш и не возникла ли ошибка Less/CSS. Документация предупреждает, что синтаксические ошибки в Less могут ломать работу Style Customizer. Если проблема появилась после custom CSS/Less, временно удалите последний фрагмент и сохраните заново.

Dynamic content показывает пустой блок

Симптом: карточки, список статей или шаблон страницы не выводят данные.

Проверьте, существует ли выбранный source на текущей странице, не удалено ли поле Joomla, mapped ли нужное поле и относится ли template к правильному page type. В YOOtheme Pro invalid sources and fields подсвечиваются. Исправление: заменить source, создать недостающее поле, перенастроить mapping или сделать блок статичным, если динамика не нужна.

Фото обрезаются неправильно

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

Причина обычно в неподходящем crop, слишком плотной композиции фото или transparent header. Выберите изображение с безопасной зоной, настройте image position, overlay или замените фото. Не решайте проблему увеличением высоты hero до бесконечности: пользователь должен быстро увидеть следующий смысловой блок.

После включения оптимизации пропали изображения

Симптом: после настройки next-gen images, внешнего кеша или оптимизатора часть картинок не отображается.

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

Редактор случайно меняет глобальный дизайн

Симптом: после контентных правок меняются шапка, стили, меню или секции на нескольких страницах.

Проверьте права доступа. Для редакторов, которые должны менять только статьи, не всегда нужен доступ к template editing и YOOtheme Pro customizer. Разделите роли и храните короткий журнал изменений: кто меняет style, кто меняет меню, кто правит builder. Это особенно важно для сайтов, где Makai поддерживает команда, а не один вебмастер.

Вопросы, которые стоит решить до публикации сайта на Makai

Можно ли установить demo package на уже работающий сайт Joomla?

Не как обычный шаблон поверх существующего сайта. Demo package - это полноценная Joomla-установка с демо-контентом. Для существующего сайта используйте архив YOOtheme Pro template и переносите нужные layouts/styles штатными средствами YOOtheme Pro, если они доступны.

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

Чаще всего установлен только template/theme archive, а не demo package. В этом случае демо-страницы не появляются автоматически. Нужно загрузить layouts из библиотеки или собрать страницы вручную на основе Makai.

Можно ли сделать русскоязычный сайт, если демо на английском?

Да, но проверьте шрифты, длину строк, кнопки, меню и системные строки. Обычный текст меняется в builder или Joomla-материалах, а системные строки лучше править через language overrides.

Что делать, если mobile header выглядит хуже desktop-шапки?

Проверьте mobile logo, mobile menu position, dialog layout и длину пунктов меню. Часто достаточно упростить логотип, убрать второстепенные пункты в dialog и проверить контраст на hero-фото.

Нужно ли использовать dynamic content на маленьком сайте?

Не всегда. Если страниц мало и данные редко меняются, статичный builder-макет проще. Dynamic content нужен, когда повторяются услуги, статьи, карточки команды, категории, связи и поля, которые должны обновляться из Joomla.

Почему модуль не отображается на странице, собранной в builder?

Некоторые позиции, например sidebar, могут не рендериться на full-width builder-страницах так, как на стандартных страницах Joomla. Используйте Position element, builder module или другую подходящую позицию, а также проверьте menu assignment.

Можно ли менять файлы шаблона напрямую?

Для обычной настройки - нет. Используйте Style Customizer, custom CSS, template styles, modules, language overrides и child theme. Прямые правки ядра сложнее обновлять и труднее откатывать.

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

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

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

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